/* ===========================================================================
   THEME: Spectrum -- A.D. Solutions palette, labelled navy rail, light content.
   Replaces the previous "Daylight" gold theme.

   Pure override layer on top of styles.css. Nothing here changes markup, so
   every screen keeps working; the rail simply grows labels and the accent moves
   from gold to AD blue/cyan with the nine-colour spectrum as the signature.
   =========================================================================== */

:root {
  /* ground and paper */
  --bg:          #eef4fa;
  --panel:       #ffffff;
  --line:        #e4eaf1;
  --line-soft:   #eef3f8;

  /* ink */
  --ink:         #0c1622;
  --muted:       #47586a;
  --faint:       #8091a3;

  /* accent: AD blue -> cyan */
  --brand:       #0072ce;
  --brand-deep:  #005ba6;
  --brand-cyan:  #00a9e0;
  --brand-soft:  #d9ebfa;
  --brand-tint:  #f2f8fd;
  --grad:        linear-gradient(135deg, #0072ce 0%, #0086dd 55%, #00a9e0 100%);

  /* the navy rail */
  --navy:        #0a1526;
  --navy-ink:    #dbe6f2;
  --navy-muted:  #7d97b5;

  /* semantic -- deliberately separate from the accent hue */
  --green:       #2f6b45; --green-soft: #e8f4ec;
  --red:         #c0261a; --red-soft:   #fbe8e6;
  --amber:       #a35c0c; --amber-soft: #fdf1e2;

  --radius:      16px;
  --shadow:      0 1px 2px rgba(12,22,34,.05), 0 12px 30px -14px rgba(12,22,34,.14);
}

body {
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  background:
    radial-gradient(1100px 520px at 88% -14%, #e3eef9 0%, transparent 62%),
    var(--bg);
  color: var(--ink);
}

/* Figures line up in columns all over this app -- invoices, ledgers, reports. */
.num, td.num, .card .value, .card .viz-big, .pnl-net, input[type="number"] {
  font-variant-numeric: tabular-nums;
}

.topbar-brand, .page-head h1, .panel h2, .auth-logo .n, .card .value, .viz-big {
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  letter-spacing: -.018em;
}

/* ------------------------------------------------ the rail: 228px, labelled */

.sidebar {
  width: 228px;
  background: var(--navy);
  border-right: none;
  align-items: stretch;
  padding: 22px 16px 16px;
}

.brand { margin-bottom: 22px; padding: 0 4px; }
.brand img { box-shadow: 0 4px 14px rgba(0,0,0,.34); border-radius: 10px; }

#nav { gap: 2px; }

/* icon and label side by side rather than stacked */
#nav a {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 11px;
  padding: 10px 13px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  color: #9db3cc;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#nav a svg { width: 17px; height: 17px; stroke-width: 2; flex: none; }

#nav a:hover  { background: rgba(255,255,255,.06); color: #e7eff8; }
#nav a.active { background: rgba(0,114,206,.24); color: #ffffff; font-weight: 600; }

/* count badges (e.g. the review inbox) sit at the end of the row */
.nav-badge:not(:empty) {
  margin-left: auto;
  background: #ff8f1c;
  color: #10233a;
  font-size: 11px;
  font-weight: 700;
  border-radius: 9px;
  padding: 1px 7px;
  flex: none;
}
#nav a.active .nav-badge:not(:empty) { background: #ff8f1c; color: #10233a; }

/* the spectrum: brand signature, and it marks the foot of the rail */
.sidebar-foot { margin-top: auto; padding: 0 4px; }
.sidebar-foot::before {
  content: "";
  display: block;
  height: 3px;
  border-radius: 2px;
  margin-bottom: 12px;
  background: linear-gradient(90deg,
    #47a23f 0 11.1%, #a4d65e 11.1% 22.2%, #fce300 22.2% 33.3%,
    #ff8f1c 33.3% 44.4%, #e42313 44.4% 55.5%, #c7579a 55.5% 66.6%,
    #5f249f 66.6% 77.7%, #0072ce 77.7% 88.8%, #00a9e0 88.8% 100%);
}

/* --------------------------------------------------------------- top bar */
/* Light, not a second dark band -- the rail is the only dark surface. */

.topbar {
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.topbar-brand { color: var(--ink); font-weight: 650; }
.topbar-co {
  color: var(--brand);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .15em;
}
#user-chip { color: var(--faint); }
#user-chip b { color: var(--ink); }
#user-chip a { color: var(--brand); }

.page-head h1 { color: var(--ink); font-weight: 650; }

/* ---------------------------------------------------------------- panels */

.card, .panel, .modal {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
}
.card .label { color: var(--muted); font-weight: 600; letter-spacing: .07em; }
.card .value, .card .viz-big { color: var(--ink); }
.card .value.pos, .card .viz-big.pos, .panel .pnl-net.pos { color: var(--green); }
.card .value.neg, .card .viz-big.neg, .panel .pnl-net.neg { color: var(--red); }
.card .viz-caption, .card .viz-sub, .card .viz-legend { color: var(--faint); }
.card .viz-sub .rowlink { color: var(--brand); }
.card .viz-row .n, .card .viz-row .v { color: var(--ink); }
.card .pl-row .n { color: var(--muted); }
.card .pl-row .v { color: var(--ink); }
.card .bank-row { border-bottom-color: var(--line-soft); }
.card .hbar { background: #e7eef6; }
.card .hbar > * { background: var(--grad); }

/* The headline figure is white paper with a big number, not a coloured slab --
   the number carries it, and a gradient behind a currency total reads as decor. */
.card.hero {
  background: var(--panel);
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.card.hero::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--grad);
}
.card.hero .label { color: var(--muted); }
.card.hero .sub   { color: var(--faint); }
.card.hero .value { color: var(--ink); font-size: 40px; font-weight: 650; }

.panel h2 {
  background: #f8fbfe;
  color: #35485e;
  border-bottom-color: var(--line);
  font-weight: 650;
}

/* ---------------------------------------------------------------- tables */

th { background: #f8fbfe; color: var(--faint); border-color: var(--line); letter-spacing: .06em; }
td { border-color: var(--line-soft); }
tbody tr:hover { background: #f5f9fd; }
td.total-row, tr.total-row td { background: #f8fbfe; }
a.rowlink { color: var(--brand); }
a.rowlink:hover { color: var(--brand-deep); }

/* --------------------------------------------------------------- controls */

button, .btn { background: #fff; color: var(--ink); border-color: #d5e0ec; }
button:hover { background: #f4f8fc; border-color: #c2d2e4; }

button.primary {
  background: var(--grad);
  border: none;
  color: #fff;
  box-shadow: 0 6px 16px -7px rgba(0,114,206,.55);
}
button.primary:hover { filter: brightness(1.06); background: var(--grad); }
button.danger, .panel button.danger, .modal button.danger { color: var(--red); }

input, select, textarea { background: #fff; border-color: #d3dde9; color: var(--ink); }
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--brand-soft);
  outline-offset: 0;
  border-color: var(--brand);
}
label { color: #3e5266; }

/* Keyboard users need to see where they are, everywhere -- not just in inputs. */
a:focus-visible, button:focus-visible, .btn:focus-visible, #nav a:focus-visible {
  outline: 2px solid var(--brand-cyan);
  outline-offset: 2px;
}

.report-tabs button.active { background: var(--grad); color: #fff; border: none; }

/* ------------------------------------------------------------------ auth */

.auth-wrap {
  background:
    radial-gradient(1100px 520px at 85% -10%, #dce9f7 0%, transparent 60%),
    var(--bg);
}
.auth-card { background: #fff; border-color: var(--line); border-radius: var(--radius); }
.auth-logo .n { color: var(--ink); }
.auth-logo .c { color: var(--brand); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ===========================================================================
   Overview: the headline section
   Hero band (one figure, the year's rhythm, its two halves), then work on the
   left and the journal on the right. Sits above the existing six cards, which
   are kept -- they carry cash flow, sales and expense breakdowns this section
   deliberately does not repeat.
   =========================================================================== */

.page-head .page-sub { color: var(--faint); font-size: 13.5px; margin-top: 3px; }

/* ------------------------------------------------------------- hero band */

.ovh {
  display: grid;
  grid-template-columns: 290px 1fr 250px;
  gap: 30px;
  align-items: center;
  padding: 22px 26px;
  margin-bottom: 16px;
}
.ovh-lbl { color: var(--muted); font-size: 12.5px; }
.ovh-big { font-size: 44px; font-weight: 650; line-height: 1.05; margin-top: 4px; color: var(--ink); }
.ovh-big.pos, .ovh-big.neg { color: var(--ink); }   /* the headline stays ink; sign is not alarm */
.ovh-chip {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 10px;
  background: var(--green-soft); color: var(--green);
  font-size: 12px; font-weight: 600; border-radius: 8px; padding: 3px 10px;
}
.ovh-chip-bad { background: var(--red-soft); color: var(--red); }

.ovh-split { display: grid; gap: 14px; border-left: 1px solid var(--line-soft); padding-left: 26px; }
.ovh-dot { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 7px; vertical-align: middle; }
.ovh-dot-in  { background: var(--brand); }
.ovh-dot-out { background: #ff8f1c; }
.ovh-k { color: var(--muted); font-size: 12.5px; }
.ovh-v { font-size: 23px; font-weight: 640; margin-top: 3px; }

/* --------------------------------------------------------- rhythm strip */

.ovr-bars { display: flex; align-items: flex-end; gap: 7px; height: 74px; }
.ovr-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: default; }
.ovr-bar { display: block; width: 100%; border-radius: 4px; background: #c3dcf2; }
.ovr-bar.ovr-has { background: linear-gradient(180deg, #00a9e0, #0072ce); }
.ovr-bar.ovr-future { height: 4px; background: #e3ebf3; }
/* A past month with nothing in it: full height, dashed, empty. Present as a
   hole in the year rather than a short bar that reads as "a little income". */
.ovr-bar.ovr-gap {
  background: rgba(120,150,180,.06);
  border: 1.5px dashed #b9cadd;
  box-sizing: border-box;
}
.ovr-lbl { font-size: 10.5px; color: #a8b6c6; }
.ovr-lbl-on { color: var(--ink); font-weight: 650; }
.ovr-lbl-gap { color: var(--faint); }
.ovr-note { font-size: 11.5px; color: var(--faint); margin-top: 9px; }

/* ------------------------------------------------------ work + journal */

.ovmain { display: grid; grid-template-columns: 392px 1fr; gap: 16px; margin-bottom: 8px; align-items: start; }
.ovmain-left { display: flex; flex-direction: column; gap: 11px; min-width: 0; }

.ovw { display: flex; flex-direction: column; gap: 11px; }
.ovw-head {
  font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase;
  color: #7286a0; font-weight: 700;
}
.ovw-card { padding: 15px 17px; position: relative; overflow: hidden; }
.ovw-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; }
.ovw-warn::before { background: #ff8f1c; }
.ovw-info::before { background: var(--brand); }
.ovw-good::before { background: #47a23f; }
.ovw-warn { border-color: #ffd0a0; }
.ovw-good { border-color: #cfe4d6; }

.ovw-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ovw-title { font-size: 14.5px; font-weight: 640; }
.ovw-meta { font-size: 11.5px; color: var(--faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ovw-body { font-size: 12.5px; color: #6b7b8d; margin-top: 5px; }
.ovw-act { margin-top: 12px; }
a.btn.ovw-cta {
  display: inline-block; text-decoration: none;
  padding: 7px 15px; border-radius: 8px; font-size: 12.5px; font-weight: 500;
  background: var(--grad); color: #fff; border: none;
  box-shadow: 0 5px 14px -7px rgba(0,114,206,.55);
}
a.btn.ovw-cta:hover { filter: brightness(1.06); }

/* -------------------------------------------------------- lease / rent */

.ovl { padding: 15px 17px; }
.ovl-top { display: flex; justify-content: space-between; align-items: baseline; }
.ovl-name { font-size: 14px; font-weight: 640; }
.ovl-pill { font-size: 11px; background: var(--green-soft); color: var(--green); border-radius: 8px; padding: 2px 9px; }
.ovl-sub { font-size: 12px; color: var(--faint); margin-top: 3px; }
.ovl-rent {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--line-soft);
}
.ovl-lbl { font-size: 11.5px; color: var(--muted); }
.ovl-amt { font-size: 15px; font-weight: 640; font-variant-numeric: tabular-nums; }
.ovl-amt i { font-size: 11px; color: var(--faint); font-style: normal; font-weight: 400; }
.ovl-step {
  display: block; margin-top: 11px;
  background: var(--brand-tint); border: 1px solid #e0ecf7; border-radius: 9px;
  padding: 7px 10px; font-size: 11.5px; color: #41556b;
}
.ovl-step b { font-variant-numeric: tabular-nums; }
.ovl-final { background: var(--amber-soft); border-color: #f2ddc0; color: var(--amber); }

/* ------------------------------------------------------------- journal */

.ovj { padding: 0; overflow: hidden; min-width: 0; }
.ovj-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 19px; border-bottom: 1px solid var(--line-soft);
  font-size: 14.5px; font-weight: 640;
}
.ovj-head .rowlink { font-size: 12px; font-weight: 400; text-decoration: none; }
.ovj-cols, .ovj-row {
  display: grid; grid-template-columns: 78px minmax(0,1fr) 158px 112px;
  gap: 12px; align-items: center;
}
.ovj-cols {
  padding: 9px 19px; border-bottom: 1px solid var(--line-soft);
  font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--faint);
}
.ovj-cols .num, .ovj-amt { text-align: right; }
.ovj-row { padding: 12px 19px; border-bottom: 1px solid #f3f7fb; font-size: 13px; }
.ovj-row:last-child { border-bottom: none; }
.ovj-row:hover { background: #f5f9fd; }
.ovj-date { color: var(--faint); }
/* Raw bank descriptions are long and low-value past the first few words. */
.ovj-memo { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ovj-acct { color: var(--muted); font-size: 12.5px; }
.ovj-amt { font-weight: 640; }
.ovj-amt.pos { color: var(--green); }
.ovj-amt.neg { color: var(--ink); }

/* --------------------------------------------------------- section rule */

.ov-sep { display: flex; align-items: center; gap: 14px; margin: 26px 0 16px; }
.ov-sep span {
  font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase;
  color: #7286a0; font-weight: 700; flex: none;
}
.ov-sep::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ------------------------------------------------------------ narrower */

@media (max-width: 1080px) {
  .ovh { grid-template-columns: 1fr; gap: 20px; }
  .ovh-split { grid-template-columns: 1fr 1fr; border-left: none; padding-left: 0; padding-top: 16px; border-top: 1px solid var(--line-soft); }
  .ovmain { grid-template-columns: 1fr; }
  .ovj-cols, .ovj-row { grid-template-columns: 66px minmax(0,1fr) 104px; }
  .ovj-acct { display: none; }
}

/* A past month after the last posted entry: unknown, not missing. Faint and
   quiet -- it means "not imported yet", which is a different message from the
   dashed gap that marks a month we DID reconcile and found empty. */
.ovr-bar.ovr-pending {
  background: repeating-linear-gradient(135deg, #eef3f8 0 5px, #e4ebf3 5px 10px);
  border: 1px solid #e4eaf1;
  box-sizing: border-box;
}

/* ---------------------------------------------------------- content width */
/* styles.css caps .main at 1180px and centres it. That was fine for a grid of
   narrow stat cards, but the overview's hero band and journal want room, and on
   a wide monitor (2048 CSS px is common at 125% scaling) centring a 1180px
   column strands ~320px of dead space on either side -- the content floats in
   the middle instead of sitting beside the rail as designed.
   Raise the cap so wide screens are used, and keep the centring so it still
   behaves on a laptop. Below ~1560px this is a no-op. */
.main { max-width: 1560px; }

/* ===========================================================================
   Account guidance footnotes
   Sits directly under an account picker. Nobody reads documentation while
   entering a bill, so the explanation has to be at the point of decision.
   =========================================================================== */

.acct-note {
  margin-top: 7px;
  border: 1px solid #dbe7f4;
  border-left: 3px solid var(--brand);
  border-radius: 0 10px 10px 0;
  background: var(--brand-tint);
  padding: 10px 13px;
  font-size: 12.5px;
  line-height: 1.5;
  color: #41556b;
}
.an-head {
  font-weight: 650;
  color: var(--ink);
  font-size: 12.5px;
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  margin-bottom: 5px;
}
.an-type {
  font-weight: 500; font-size: 10.5px; color: var(--brand-deep);
  background: #fff; border: 1px solid #cfe0f2; border-radius: 6px; padding: 1px 7px;
}
.an-use { margin-bottom: 4px; }
.an-eg  { color: var(--muted); }
.an-eg b { color: #35485e; font-weight: 600; }

/* The confusion warning is the part that actually prevents miscoding, so it
   gets amber rather than blending into the rest of the note. */
.an-not {
  margin-top: 7px; padding-top: 7px;
  border-top: 1px dashed #cfdcea;
  color: #7a5a2a;
}
.an-not b { color: var(--amber); font-weight: 700; }

/* A single shared footnote under a grid of pickers (Review inbox, journal),
   where a note per row would bury the table. */
.acct-note-shared { margin: 12px 0 0; }
.acct-note-shared:empty { display: none; }

/* ------------------------------------------- Chart of Accounts explanations */

.panel h2 .ch-plain {
  font-weight: 400; font-size: 12.5px; color: var(--faint);
  letter-spacing: 0; margin-left: 8px;
}
.chart-table td { vertical-align: top; }
.chart-table tbody tr:hover { background: transparent; }   /* rows are tall; hover stripe reads as noise */

.ch-help {
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.5;
  max-width: 74ch;          /* guidance is prose -- keep it a readable measure */
  color: var(--muted);
}
.ch-use { color: #35485e; }
.ch-eg { margin-top: 3px; }
.ch-eg b { color: #35485e; font-weight: 600; }
.ch-not { margin-top: 5px; color: #7a5a2a; }
.ch-not b { color: var(--amber); font-weight: 700; }

/* Toggled off: the chart collapses back to a plain code/name/balance list. */
.chart-help-off .ch-help { display: none; }

/* ------------------------------------------------------------ rent schedule */

/* The next step-up matters more than the current figure once you are planning,
   so it gets colour rather than being another line of muted grey. */
.rs-step {
  font-size: 11.5px; color: var(--brand-deep); font-weight: 600;
  margin-top: 3px; white-space: nowrap;
}
.rs-final { font-size: 11.5px; margin-top: 3px; white-space: nowrap; }

/* Which row is in force today is the one thing you look for in this table. */
tr.rs-now > td { background: var(--brand-tint); }
tr.rs-now:hover > td { background: var(--brand-tint); }

/* ===========================================================================
   Rail: brand, grouped nav, and the foot
   The top bar is gone -- the rail carries the brand and the account, so a
   second horizontal band was chrome that earned nothing. Everything the bar
   held now lives here.
   =========================================================================== */

.brand { display: flex; align-items: center; gap: 11px; }
.brand img { flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.brand-text b { font-size: 16.5px; font-weight: 650; color: #fff; letter-spacing: -.01em; }
.brand-text span {
  font-size: 10.5px; color: var(--navy-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Group headings: quiet enough to scan past, present enough to divide. */
.nav-group {
  font-size: 10px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
  color: #64809f;
  padding: 0 13px;
  margin: 14px 0 5px;
}
#nav > .nav-group:first-child { margin-top: 4px; }

/* ------------------------------------------------------------- rail foot */

.rail-status {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 11px 13px;
  margin-bottom: 11px;
  font-size: 11.5px;
}
.rail-status:empty { display: none; }
.rs-title { font-size: 12px; font-weight: 650; color: #dbe6f2; margin-bottom: 8px; }
.rs-line { display: flex; justify-content: space-between; gap: 8px; margin-top: 4px; color: var(--navy-muted); }
.rs-line b { color: #dbe6f2; font-weight: 600; font-variant-numeric: tabular-nums; }
.rs-ok   { color: #8fd97f !important; }
.rs-warn { color: #ffb45e !important; }

/* The account sits at the very bottom, stacked rather than in a row -- 228px
   is not wide enough for an email address beside a link. */
#user-chip {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  font-size: 11.5px; color: var(--navy-muted);
  padding: 0 2px;
}
#user-chip b {
  color: #dbe6f2; font-weight: 500; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#user-chip a { color: #7fc3ee; text-decoration: none; }
#user-chip a:hover { color: #a5d8f5; text-decoration: underline; }

/* Without the sticky bar the content needs its own breathing room up top. */
.main { padding-top: 34px; }

/* The group headings and the status block pushed the rail past the viewport on
   a laptop -- 1091px of content in 950px, which cut the sign-out link off with
   no way to reach it. Let the nav scroll and keep brand and foot pinned, so the
   account and books status stay reachable at any window height. */
.sidebar { overflow: hidden; }
#nav {
  flex: 1 1 auto;
  min-height: 0;                 /* required, or flex refuses to shrink it */
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.18) transparent;
}
#nav::-webkit-scrollbar { width: 8px; }
#nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border-radius: 4px; }
#nav::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.26); }
#nav::-webkit-scrollbar-track { background: transparent; }

/* Trim the group rhythm a little now that the list is taller. */
.nav-group { margin: 11px 0 4px; }

.sidebar-foot { flex: none; }