/* Montra — Total Uang card: Oceanic Blue theme, unified Desktop + Mobile
 *
 * Layout contract (important):
 *   .dashboard-balance            → position:relative, aspect-ratio 2.0/1, padding 0
 *   .dashboard-balance > .relative → absolute inset:0, the positioning context for children
 *   every visible child           → position:absolute with % offsets of the card box
 * Without the positioning context the child offsets silently do nothing and the
 * account chips fall back to block flow (stacking vertically out of the card).
 */

/* ── Card shell ── */
.dashboard-balance {
  aspect-ratio: 2.0 / 1 !important;
  border-radius: 26px !important;
  padding: 0 !important;
  background: linear-gradient(145deg, #1748BE 0%, #1357CA 30%, #0F52C8 55%, #0C3FA8 100%) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 22px 55px rgba(17,72,190,.40), 0 4px 16px rgba(17,72,190,.22) !important;
}

/* Content layer fills the whole card so child percentages resolve against the card box.
   z-index:2 keeps the content ABOVE the ::before wave layer (z-index:1) — without it the
   waves paint over the text and the chips look washed out. */
.dashboard-balance > .relative {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
}

/* ── Wave layers (::before = front wave glowing edge, ::after = back fill) ── */
.dashboard-balance::before,
.dashboard-balance::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 100% !important;
  pointer-events: none !important;
  background-repeat: no-repeat !important;
  background-size: 100% 70% !important;
  background-position: center bottom !important;
}
.dashboard-balance::before { z-index: 1 !important; }
.dashboard-balance::after { z-index: 0 !important; }
.dashboard-balance::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 400' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='r2' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop stop-color='%230e45a8'/%3E%3Cstop offset='1' stop-color='%230a3490'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 248 C95 308 185 302 280 250 C370 201 445 223 525 253 C615 286 680 238 755 194 C835 147 905 142 1000 205 L1000 400 L0 400Z' fill='url(%23r2)'/%3E%3C/svg%3E") !important;
}
.dashboard-balance::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 400' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='f2' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop stop-color='%231a5fd4'/%3E%3Cstop offset='.55' stop-color='%23124ec8'/%3E%3Cstop offset='1' stop-color='%230a3490'/%3E%3C/linearGradient%3E%3ClinearGradient id='e2' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop stop-color='%2338bdf8' stop-opacity='.55'/%3E%3Cstop offset='.5' stop-color='%237dd3fc' stop-opacity='.90'/%3E%3Cstop offset='1' stop-color='%2338bdf8' stop-opacity='.55'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 210 C95 270 180 278 275 205 C365 140 440 205 520 232 C605 260 675 218 750 158 C820 102 880 55 935 62 C965 66 985 78 1000 92 L1000 400 L0 400Z' fill='url(%23f2)'/%3E%3Cpath d='M0 210 C95 270 180 278 275 205 C365 140 440 205 520 232 C605 260 675 218 750 158 C820 102 880 55 935 62 C965 66 985 78 1000 92' fill='none' stroke='url(%23e2)' stroke-width='5'/%3E%3C/svg%3E") !important;
}

/* ── Title row: title + eye button + "Lihat Semua" on the left, wallet on the right ── */
.dashboard-balance > .relative > div:first-child {
  position: absolute !important;
  top: 5.5% !important;
  left: 5.5% !important;
  right: 5.5% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
}

.dashboard-balance-title {
  position: static !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.dashboard-balance-title > p {
  font-size: clamp(13px, 1.4vw, 15px) !important;
  line-height: 1 !important;
  letter-spacing: 0.1em !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.92) !important;
}

/* "Lihat Semua" sits right next to the title block. */
.dashboard-balance > .relative > div:first-child > a {
  position: static !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  color: rgba(255, 255, 255, 0.72) !important;
  white-space: nowrap !important;
  transition: color 0.15s ease !important;
}
.dashboard-balance > .relative > div:first-child > a:hover { color: #FFFFFF !important; }

/* ── Eye / visibility button ── */
.dashboard-balance-title .dashboard-icon-button {
  position: relative !important;
  width: 32px !important;
  height: 32px !important;
  flex: 0 0 32px !important;
  padding: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.10) !important;
  color: rgba(255, 255, 255, 0.95) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 4px 12px rgba(0, 0, 0, 0.08) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.15s ease, transform 0.15s ease !important;
}
.dashboard-balance-title .dashboard-icon-button svg {
  display: block !important;
  width: 17px !important;
  height: 17px !important;
  stroke-width: 2.1 !important;
}
.dashboard-balance-title .dashboard-icon-button:before,
.dashboard-balance-title .dashboard-icon-button:after {
  display: none !important;
  content: none !important;
}
.dashboard-balance-title .dashboard-icon-button:hover {
  background: rgba(255, 255, 255, 0.18) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
  transform: translateY(-1px) !important;
}
.dashboard-balance-title .dashboard-icon-button:active { transform: translateY(0) !important; }

/* ── Wallet squircle (pushed to the far right of the title row) ── */
.dashboard-balance-wallet {
  position: static !important;
  margin-left: auto !important;
  width: 52px !important;
  height: 52px !important;
  flex: 0 0 52px !important;
  border-radius: 17px !important;
  border: 1.5px solid rgba(255, 255, 255, 0.25) !important;
  background: rgba(255, 255, 255, 0.13) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 8px 20px rgba(0, 0, 0, 0.12) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.dashboard-balance-wallet > svg {
  width: 25px !important;
  height: 25px !important;
  stroke-width: 2 !important;
}
.dashboard-balance-wallet > span { display: none !important; }

/* ── Balance amount ── */
.dashboard-balance-amount {
  position: absolute !important;
  left: 5.5% !important;
  top: 28% !important;
  font-size: clamp(28px, 3.8vw, 42px) !important;
  line-height: 1 !important;
  letter-spacing: -0.04em !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
  color: #FFFFFF !important;
}

/* ── Subtitle ── */
.dashboard-balance-subtitle {
  position: absolute !important;
  left: 5.5% !important;
  top: 48% !important;
  font-size: clamp(12px, 1.3vw, 14px) !important;
  line-height: 1.1 !important;
  font-weight: 500 !important;
  color: rgba(186, 220, 255, 0.82) !important;
}

/* ── Account chips container ──
   Scrolls horizontally when there are more accounts than fit. Without this the
   extra chips were clipped by the card's overflow:hidden and unreachable. */
.dashboard-balance-accounts {
  position: absolute !important;
  left: 5% !important;
  right: 5% !important;
  bottom: 4% !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  gap: 8px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x proximity !important;
  overscroll-behavior-x: contain !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
.dashboard-balance-accounts::-webkit-scrollbar { display: none !important; }

/* ── Individual chip ── */
.dashboard-balance .dashboard-account-chip {
  display: flex !important;
  align-items: center !important;
  scroll-snap-align: start !important;
  flex: 0 0 calc((100% - 16px) / 3) !important;
  width: calc((100% - 16px) / 3) !important;
  min-width: 0 !important;
  height: 22% !important;
  min-height: 52px !important;
  max-height: 64px !important;
  padding: 6px 10px !important;
  gap: 8px !important;
  border-radius: 17px !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.20) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 4px 14px rgba(0, 0, 0, 0.10) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

/* ── Chip icon circle ── */
.dashboard-balance .dashboard-account-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  flex: 0 0 34px !important;
  font-size: 15px !important;
  overflow: hidden !important;
  background: rgba(2, 132, 199, 0.40) !important;
  border-radius: 50% !important;
}

/* ── Chip label + value ── */
.dashboard-balance .dashboard-account-meta {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  gap: 2px !important;
}
.dashboard-balance .dashboard-account-meta strong {
  font-size: clamp(11px, 1.1vw, 13px) !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  color: #FFFFFF !important;
}
.dashboard-balance .dashboard-account-meta > span {
  font-size: clamp(10px, 1vw, 12px) !important;
  line-height: 1 !important;
  color: rgba(186, 220, 255, 0.85) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* ── Desktop: give the chip row a definite height so the chips keep the same
      proportion to the card that they have on mobile. Percentage heights on the
      chips need a definite parent height — without this the chips fall back to
      min-height and look smaller/lower than the mobile reference. ── */
@media (min-width: 768px) {
  .dashboard-balance-accounts { height: 24.5% !important; }
  .dashboard-balance .dashboard-account-chip {
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
  }
}

/* ── Mobile overrides ── */
@media (max-width: 767px) {
  .dashboard-balance { border-radius: 22px !important; }

  .dashboard-balance > .relative > div:first-child {
    top: 6.5% !important;
    left: 5% !important;
    right: 5% !important;
    gap: 8px !important;
  }
  .dashboard-balance-title { gap: 6px !important; }
  .dashboard-balance-title > p { font-size: 11px !important; letter-spacing: 0.08em !important; }
  .dashboard-balance-title .dashboard-icon-button {
    width: 26px !important; height: 26px !important; flex: 0 0 26px !important; border-radius: 8px !important;
  }
  .dashboard-balance-title .dashboard-icon-button svg { width: 14px !important; height: 14px !important; }
  .dashboard-balance > .relative > div:first-child > a { font-size: 10px !important; }

  .dashboard-balance-wallet {
    width: 40px !important; height: 40px !important; flex: 0 0 40px !important; border-radius: 13px !important;
  }
  .dashboard-balance-wallet > svg { width: 20px !important; height: 20px !important; }

  .dashboard-balance-amount { left: 5% !important; top: 28% !important; font-size: clamp(23px, 7vw, 32px) !important; }
  .dashboard-balance-subtitle { left: 5% !important; top: 48% !important; font-size: 11px !important; }

  .dashboard-balance-accounts { left: 5% !important; right: 5% !important; bottom: 4% !important; gap: 6px !important; }
  .dashboard-balance .dashboard-account-chip {
    flex: 0 0 calc((100% - 12px) / 3) !important;
    width: calc((100% - 12px) / 3) !important;
    height: auto !important;
    min-height: 44px !important;
    max-height: 54px !important;
    padding: 5px 6px !important;
    gap: 5px !important;
    border-radius: 13px !important;
  }
  .dashboard-balance .dashboard-account-icon {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    flex: 0 0 26px !important;
    font-size: 12px !important;
  }
  .dashboard-balance .dashboard-account-meta strong { font-size: 10px !important; }
  .dashboard-balance .dashboard-account-meta > span { font-size: 9px !important; }
}