/* Month data shared by several pages: the month header, hero, stats, groups
   and categories, "what changed", statements, trend columns, the check-in
   nudge. Linked from base.html.

   Wide screens follow the mockup's Main: a header row on the page's own
   background, then a rounded sky card holding the total and glassy In/Out/Net
   tiles. Phones follow Phone-Beranda: the sky runs edge to edge behind the
   header and a paper total card, and the tiles sit just below it. The same
   markup does both: .dash-sky is `display: contents` on a wide screen and the
   sky itself on a phone, where .hero steps aside (position: static) so the
   scene's .deco spreads over the whole sky. */

/* --- header row: month, arrows, pickers ------------------------------------ */

.dash-top {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--s-4) var(--s-4);
  max-width: 1180px; margin-inline: auto; padding: var(--s-6) var(--s-7) 0;
}
.dash-sky { display: contents; }
.dash-sky > .deco { display: none; }
.hero-top { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3) var(--s-4); }
.hero-top h1 { font-size: var(--fs-h1); line-height: 1.1; }
.month-nav { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.month-nav a, .month-nav span.off {
  flex: none; width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center;
  justify-content: center; background: var(--paper); border: 1px solid var(--line);
  color: var(--ink); text-decoration: none;
}
.month-nav a:hover { color: var(--accent); border-color: var(--accent); }
.month-nav span.off { opacity: 0.45; }
.hero-controls { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.hero-top .seg { background: var(--paper-2); }

/* Categories on a wide screen: the header row sits in a sky card, like the
   dashboard's, so the two tabs match. */
@media (min-width: 900px) {
  .cats-top .dash-sky {
    --hills: 44px;
    grid-column: 1 / -1; display: block; position: relative; overflow: hidden; isolation: isolate;
    padding: var(--s-6) var(--s-7) calc(var(--hills) + var(--s-3));
    border-radius: var(--radius); border: 1px solid var(--line); box-shadow: var(--shadow-lg);
    background: linear-gradient(to bottom, var(--sky-top), var(--sky-mid) 55%, var(--sky-low) 85%, var(--sky-end));
  }
  .cats-top .dash-sky > .deco { display: block; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
  /* Sun and cloud keep to the strip under the header row, clear of its words
     at any width: the sun setting behind the far hill. */
  .cats-top .dash-sky > .deco .sun { right: auto; left: 46%; top: auto; bottom: 4px; width: 48px; height: 48px; }
  .cats-top .dash-sky > .deco .cloud { right: auto; left: 20%; top: auto; bottom: 6px; width: 96px; height: 26px; }
  .cats-top .hero-top .seg { background: var(--glass); }
}

/* --- hero: the total, and In/Out/Net ---------------------------------------- */

.hero {
  grid-column: 1 / -1; grid-row: 2; position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center;
  min-height: 154px; padding: var(--s-6) var(--s-7); border-radius: var(--radius);
  border: 1px solid var(--line); box-shadow: var(--shadow-lg);
  background: linear-gradient(to bottom, var(--sky-top), var(--sky-mid) 55%, var(--bg));
}
.hero > .deco { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
/* Sun and cloud sit between the total and the tiles: behind a glass tile the
   dark theme's moon would show through and blot out a number. They live in
   the last --deco-w of the total's column, which .hero-main keeps free, so
   they can't cross the total at any width. --deco-end is that column's right
   edge, measured from the hero's right: the tiles' 1fr share of the inner
   width (4/9 of 1.25fr + 1fr) plus the padding. */
.hero {
  --deco-w: 152px;
  --deco-end: calc((100% - 2 * var(--s-7)) * 4 / 9 + var(--s-7));
}
.hero .deco .sun { left: auto; right: calc(var(--deco-end) + var(--s-2)); top: 22px; width: 60px; height: 60px; }
.hero .deco .cloud { left: auto; right: calc(var(--deco-end) + var(--s-7) + var(--s-4)); top: 52px; width: 96px; height: 28px; }
.hero .deco .cloud::before { left: 18px; top: -18px; width: 38px; height: 38px; }
.hero .deco .cloud::after { left: 50px; top: -12px; width: 28px; height: 28px; }
.hero .deco .hill-far { left: auto; right: 40px; bottom: -84px; width: 380px; height: 120px; }
.hero .deco .hill-mid { left: auto; right: -60px; bottom: -96px; width: 320px; height: 130px; }
.hero .deco .hill-near { left: auto; right: -200px; bottom: -106px; width: 360px; height: 130px; }
.hero-main {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); min-width: 0;
  padding-right: var(--deco-w); container-type: inline-size;
}
.hero-label { font-weight: 700; color: var(--ink-2); }
/* A long IDR total steps down with its column rather than reach the sun.
   Steps, not a fluid size, so every size on the page is a token: the
   widths are where 12cqi used to cross each token. */
.hero-main .big { font-family: var(--display); font-weight: 700; font-size: var(--fs-hero); line-height: 1.05; }
@container (max-width: 349px) { .hero-main .big { font-size: var(--fs-display); } }
@container (max-width: 283px) { .hero-main .big { font-size: var(--fs-h1); } }
@container (max-width: 233px) { .hero-main .big { font-size: var(--fs-h2); } }
.hero-pill {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s-1); margin-top: var(--s-1);
  padding: var(--s-2) var(--s-3); border-radius: var(--radius-pill); background: var(--glass);
  font-size: var(--fs-sm); font-weight: 700; color: var(--ink);
}
.hero-pill a { color: inherit; text-decoration: none; }
.hero-pill a:hover { text-decoration: underline; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--gray); display: inline-block; margin-right: var(--s-1); }

/* In, Out and Net: always one row of three equal tiles (so Masuk, Keluar and
   Bersih sit as evenly as In, Out and Net). The amount's size follows its
   tile's width in token steps ("+100,000,000" is 6.5em wide, so each step
   starts where 6.5em of the next size no longer fits), from --fs-lg down to
   --fs-sm, and only wraps below that. */
.stats {
  grid-column: 2; grid-row: 2; align-self: center; position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2);
  margin: var(--s-5) var(--s-7) var(--s-5) 0;
}
.stat {
  min-width: 0; display: flex; flex-direction: column; gap: 2px; container-type: inline-size;
  padding: var(--s-3) var(--s-4); border-radius: var(--radius-sm); background: var(--glass);
}
.stat .k { font-size: var(--fs-sm); font-weight: 700; color: var(--muted); }
.stat .v {
  font-weight: 800; font-size: var(--fs-lg);
  white-space: normal; overflow-wrap: anywhere;
}
@container (max-width: 106px) { .stat .v { font-size: var(--fs-base); } }
@container (max-width: 92px) { .stat .v { font-size: var(--fs-sm); } }
/* What Net leaves out: a disclosure under the tiles, since a title tooltip
   never shows on touch. */
.net-note { grid-column: 1 / -1; font-size: var(--fs-sm); color: var(--ink-2); }
.net-note summary {
  display: inline-flex; align-items: center; gap: var(--s-1); cursor: pointer;
  font-weight: 700; list-style: none;
}
.net-note summary::-webkit-details-marker { display: none; }
.net-note .q {
  width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center;
  justify-content: center; flex: none; background: var(--glass); border: 1px solid var(--line);
  font-size: var(--fs-sm); font-weight: 800; color: var(--accent);
}
.net-note p { margin: var(--s-1) 0 0; max-width: 52ch; }

/* --- the body: groups beside the side column ------------------------------- */

.dash-body, .cats-body {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--s-4);
  margin-top: var(--s-5); align-items: start;
}
.side { display: flex; flex-direction: column; gap: var(--s-4); }
.card-head h2 { font-size: var(--fs-h3); }
.card-head .muted.small { font-weight: 700; }
.card-head a { font-size: var(--fs-sm); font-weight: 700; text-decoration: none; }
.more-link { display: none; }
/* D3: the one person in the view, said once; it sits with the currency. */
.card-head .sole-owner { margin-left: auto; }

/* The check-in nudge: a quiet line, a little brighter once the month is in.
   .card.checkin-card, because a.card's display: block would otherwise win. */
.card.checkin-card {
  display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-5); padding: var(--s-3) var(--s-4) var(--s-3) var(--s-3);
  border-radius: var(--radius-sm); text-decoration: none; color: var(--ink);
  font-size: var(--fs-md); font-weight: 700;
}
.checkin-card:hover { color: var(--ink); border-color: var(--accent); }
.checkin-icon {
  flex: none; width: 36px; height: 36px; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; background: var(--paper-2); color: var(--accent);
}
.checkin-card.ready { border-color: var(--accent); box-shadow: var(--shadow); }
.checkin-card .go { margin-left: auto; font-weight: 800; color: var(--accent); white-space: nowrap; }

/* --- groups and their categories ------------------------------------------- */

.groups { display: flex; flex-direction: column; gap: var(--s-3); }
.group-name { font-weight: 800; font-size: var(--fs-md); letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink-2); }
.group-head .amount { font-weight: 800; }
.group-bar { display: none; }
/* No bar in a group's head on a wide screen: its name may use the bar's room
   ("bukan pengeluaran" would wrap in the label column alone). */
@media (min-width: 900px) { .group-head > .group-name { grid-column: label-start / bar-end; } }
/* One line above the groups outside total spent, instead of one per group. */
.not-counted-note { margin: var(--s-2) 0 calc(-1 * var(--s-1)); font-weight: 600; }
.cats { list-style: none; margin: var(--s-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-1); }
.cat-row { text-decoration: none; color: var(--ink); font-size: var(--fs-md); }
.cat-name { font-weight: 700; }
.cat-name .whose { font-weight: 600; font-size: var(--fs-sm); color: var(--muted); }
.cat-row:hover .cat-name { color: var(--accent); }
/* Whose it was, beside the bar it belongs to: there, but quiet. */
.split, .cats .note { margin: 2px 0 2px var(--lba-indent); }
.split { display: flex; flex-wrap: wrap; gap: 0 var(--s-2); font-size: var(--fs-sm); color: var(--muted); }
.split > span + span::before { content: "·"; margin-right: var(--s-2); }
.cats .note svg { color: var(--accent); }
.uncat .cat-name, .uncat .group-name { color: var(--muted); }
.uncat .group-head { display: none; }  /* its rows name themselves */
.not-spending .cat-row, .not-spending .group-head .amount { color: var(--ink-2); }
.total-row {
  display: flex; justify-content: space-between; gap: var(--s-3); padding-top: var(--s-3);
  border-top: 1px solid var(--line); font-weight: 800;
}

/* --- what changed, statements ---------------------------------------------- */

.changes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); font-size: var(--fs-md); }
.changes .pct { font-weight: 800; color: var(--accent); }
/* One grid for every statements list (dashboard, Statements, the "to review"
   line under it): the rows share the list's columns through subgrid, so the
   bank column is as wide as its longest name on both pages. */
.statements {
  list-style: none; margin: 0; padding: 0; font-size: var(--fs-md);
  display: grid; grid-template-columns: 22px max-content minmax(0, 1fr) auto; gap: var(--s-1) var(--s-2);
}
.statements li { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; }
.statements .tick { display: inline-flex; color: var(--ok); }
.statements .dashed { width: 18px; height: 18px; border-radius: 50%; border: 2px dashed var(--gray); }
/* The period stays on one line; "reconciled" is a small ringed tick after it,
   named for screen readers and in its tooltip. */
.statements .period { color: var(--ink-2); white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.statements .rec {
  display: inline-flex; align-items: center; justify-content: center; vertical-align: -2px;
  width: 16px; height: 16px; margin-left: var(--s-1); border-radius: 50%;
  border: 1.5px solid currentColor; color: var(--ok);
}
.statements .whose { text-align: right; color: var(--muted); }
.statements .pending .bank, .statements .pending .period { color: var(--muted); }

/* --- six months: one small chart per category ------------------------------ */

.multiples { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s-3) var(--s-4); }
.multiples-group { grid-column: 1 / -1; margin: var(--s-2) 0 calc(-1 * var(--s-2)); font-size: var(--fs-sm); font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink-2); }
.multiple { margin: 0; }
.multiple figcaption { display: flex; justify-content: space-between; gap: var(--s-2); font-size: var(--fs-sm); }
.multiple figcaption a { color: var(--ink); text-decoration: none; font-weight: 700; }
.multiple figcaption a:hover { color: var(--accent); }
.columns { display: flex; gap: var(--s-1); margin-top: var(--s-1); }
.col { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; }
.col-plot { height: 52px; width: 100%; display: flex; align-items: flex-end; }
.col-fill { width: 100%; min-height: 2px; height: calc(var(--pct, 0) * 1%); background: var(--lilac); border-radius: var(--radius-xxs) var(--radius-xxs) 0 0; }
.col:last-child .col-fill { background: var(--accent); }
.muted-chart .col-fill, .muted-chart .col:last-child .col-fill { background: var(--gray); }
.col-label { font-size: var(--fs-sm); color: var(--muted); margin-top: 3px; }
/* A month with no statement in it: a dashed ghost, not a zero. */
.col-plot.no-data { border: 1px dashed color-mix(in srgb, var(--gray) 70%, transparent); border-radius: var(--radius-xxs) var(--radius-xxs) 0 0; }
.col-plot.no-data .col-fill { display: none; }
/* The dashboard's side column: the counted groups, two across, no axis text
   (the range is in the card's head, each column's month in its tooltip). */
.dash-body .multiples { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3) var(--s-4); }
.dash-body .multiples-group, .dash-body .not-counted, .dash-body .col-label { display: none; }
.dash-body .col-plot { height: 44px; }

/* --- 900-1199px: beside the icon rail -------------------------------------
   Two columns don't fit here, so the dashboard runs as one: the total above
   the In/Out/Net row inside the sky card, the groups full width, the side
   cards two across below them (six months across both). The hero's bottom
   padding keeps room for the tiles: two lines of text in a tile's padding,
   plus the margin under them and a gap above. */

@media (min-width: 900px) and (max-width: 1199px) {
  .dash-top { grid-template-columns: minmax(0, 1fr); }
  .hero {
    grid-template-columns: minmax(0, 1fr); --deco-end: var(--s-7);
    padding-bottom: calc(2 * var(--s-3) + 1.45 * (var(--fs-sm) + var(--fs-lg)) + 2px + var(--s-5) + var(--s-4));
  }
  .stats { grid-column: 1; grid-row: 2; align-self: end; margin: 0 var(--s-7) var(--s-5); }
  .dash-body { grid-template-columns: minmax(0, 1fr); }
  .dash-body .side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .dash-body .trend-card { grid-column: 1 / -1; }
  .dash-body .multiples { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

/* --- phones ---------------------------------------------------------------- */

@media (max-width: 899px) {
  .dash-top { display: block; padding: 0; }
  .dash-sky {
    display: block; position: relative; overflow: hidden; isolation: isolate;
    padding: var(--s-5) var(--s-4) var(--s-6);
    background: linear-gradient(to bottom, var(--sky-top), var(--sky-mid) 60%, var(--bg));
  }
  .dash-sky > .deco { display: block; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
  /* Categories: a plain sky with one cloud tucked in at the right, below the
     avatar's corner and beside the pickers. */
  .dash-sky > .deco .sun, .dash-sky > .deco [class^="hill"] { display: none; }
  .dash-sky > .deco .cloud { left: auto; right: -40px; top: calc(var(--corner) + var(--s-6)); }
  .hero-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-3) var(--s-2); }
  .month-nav { gap: var(--s-2); }
  .month-nav a, .month-nav span.off { width: 44px; height: 44px; }  /* a thumb's width (M8) */
  .hero-controls { grid-column: 1 / -1; gap: var(--s-2); }
  .hero-top .seg { background: var(--glass); }

  .hero {
    position: static; display: block; min-height: 0; margin-top: var(--s-4); padding: 0;
    border: 0; border-radius: 0; box-shadow: none; background: none; overflow: visible;
  }
  /* The sun rises from behind the total card's top edge, below the pickers
     rather than beside them (drawn by .hero-main::before, so it follows the
     card wherever the header's height puts it). */
  .hero .deco .sun, .hero .deco .cloud { display: none; }
  .hero-main::before {
    content: ""; position: absolute; z-index: -1; right: var(--s-5); top: -26px; width: 56px; height: 56px;
    border-radius: 50%; background: radial-gradient(circle at 40% 40%, var(--sun-core), var(--sun) 58%, transparent 72%);
  }
  .hero .deco .hill-far { right: auto; left: 60px; bottom: -40px; width: 320px; height: 110px; }
  .hero .deco .hill-mid { right: auto; left: -80px; bottom: -56px; width: 300px; height: 120px; }
  .hero .deco .hill-near { right: -100px; bottom: -70px; width: 320px; height: 124px; }
  /* No container here: containment would make the card a stacking context
     and paint the sun over it. */
  .hero-main {
    position: relative; container-type: normal; padding: var(--s-5) var(--s-5); border-radius: var(--radius);
    background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow-lg);
  }
  .hero-label { font-size: var(--fs-md); color: var(--muted); }
  .hero-main .big { font-size: var(--fs-display); }
  .hero-pill { margin-top: 0; padding: 0; background: none; font-weight: 600; color: var(--ink-2); }
  .dot { width: 8px; height: 8px; }

  .stats { margin: 0; padding: var(--s-2) var(--s-4) 0; gap: var(--s-2); }
  .stat { padding: var(--s-3) var(--s-2) var(--s-3) var(--s-3); background: var(--paper); border: 1px solid var(--line); }

  .dash-body, .cats-body { grid-template-columns: minmax(0, 1fr); }
  .cats-body .groups-card { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; }
  .checkin-card { margin-top: var(--s-4); }

  /* The phone's Month: flat sections on the page, groups as one bar each
     (with any flag beneath), every category one tab away. */
  .dash-body { gap: var(--s-5); margin-top: var(--s-5); }
  .dash-body .side { display: contents; }
  .dash-body .card { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; }
  .dash-body .card-head { margin-bottom: var(--s-2); }
  .dash-body .card-head h2 { font-size: var(--fs-lg); }
  .dash-body .more-link { display: inline; }
  .dash-body .wide-only, .dash-body .total-row, .dash-body .trend-card { display: none; }
  .dash-body .groups { gap: var(--s-2); }
  .dash-body .group-name { font-size: var(--fs-md); line-height: 1.2; }
  .dash-body .group-head .amount { font-weight: 700; }
  .dash-body .group-bar { display: block; }
  .dash-body .cats { margin: 0; gap: 0; }
  .dash-body .cats li > * { display: none; }
  .dash-body .cats li > .flag { display: flex; margin: var(--s-2) 0 0; }
  .dash-body .uncat .group-head { display: grid; }
  .dash-body .side > :first-child { order: -1; }

  .dash-body .statements { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--s-2); font-size: var(--fs-sm); }
  .dash-body .statements li {
    display: inline-flex; gap: var(--s-1); padding: var(--s-2) var(--s-3); border-radius: var(--radius-pill);
    background: var(--paper); border: 1px solid var(--line); font-weight: 700;
  }
  .dash-body .statements .tick svg { width: 14px; height: 14px; }
  .dash-body .statements .in .period, .dash-body .statements .dashed { display: none; }
  .dash-body .statements .whose { font-weight: 600; }
  .dash-body .statements .pending { background: transparent; border-style: dashed; color: var(--muted); }
  .dash-body .statements .pending .tick { display: none; }

  /* Uppercase makes long Indonesian group names longer still
     ("TABUNGAN & INVESTASI"): sentence case on phones. */
  .group-name { text-transform: none; letter-spacing: 0; }
  .group-name::first-letter { text-transform: uppercase; }

  .split, .cats .note { margin-left: 0; }
  .multiples { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}