/* ============================================================
   Jarvis Dashboard — Shared Stylesheet
   ============================================================ */

/* ── CSS Variables ─────────────────────────────────────────── */
:root {
  /* Backgrounds. Warmed off the old blue-grey, which made every white card
     look faintly cold and made the whole page read as one flat sheet. */
  --bg:       #f7f8fa;
  --surface:  #ffffff;
  --alt:      #f4f5f8;
  --border:   #e8eaef;
  --border-strong: #d8dbe3;

  /* Text */
  --text:     #15181f;
  --dim:      #616a7a;
  --muted:    #98a1b0;

  /* Elevation. Cards were separated by borders alone, so nothing sat above
     anything else and the eye had no order to follow. */
  --shadow-sm: 0 1px 2px rgba(21, 24, 31, 0.05);
  --shadow:    0 1px 3px rgba(21, 24, 31, 0.06), 0 4px 12px rgba(21, 24, 31, 0.04);
  --shadow-lg: 0 2px 6px rgba(21, 24, 31, 0.07), 0 12px 28px rgba(21, 24, 31, 0.06);

  /* Semantic */
  --accent:     #4f6ef7;
  --accent-lt:  #eef1fe;
  --green:      #10b981;
  --green-lt:   #ecfdf5;
  --red:        #ef4444;
  --red-lt:     #fef2f2;
  --yellow:     #f59e0b;
  --yellow-lt:  #fffbeb;

  /* Sidebar */
  --sidebar-bg:          #1a1d26;
  --sidebar-text:        #9ca3b0;
  --sidebar-text-hover:  #e2e8f0;
  --sidebar-active-bg:   rgba(79, 110, 247, 0.12);
  --sidebar-active-text: #818cf8;
  --sidebar-border:      rgba(255, 255, 255, 0.06);

  /* Typography scale. --text-display added: every page's headline number was
     capped at 24px, so a balance looked the same weight as a card title. */
  --text-xs:   12px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-lg:   18px;
  --text-xl:   24px;
  --text-2xl:  30px;
  --text-display: 38px;

  /* Weights */
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Line heights */
  --leading-tight:  1.3;
  --leading-normal: 1.6;

  /* Spacing scale */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;

  /* Radii */
  --r:  16px;
  --rs: 10px;
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── Base ──────────────────────────────────────────────────── */
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

/* ── Layout Shell ──────────────────────────────────────────── */
.layout {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: 220px;
  min-height: 100vh;
  background: var(--sidebar-bg);
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  z-index: 100;
}

.main-content {
  margin-left: 220px;
  flex: 1;
  padding: 32px 28px;
  max-width: 1360px;
}

.page-body {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 24px;
}

.col-primary,
.col-secondary {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── Sidebar Styles ────────────────────────────────────────── */
.sidebar-wordmark {
  padding: 24px 20px 20px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #ffffff;
  border-bottom: 1px solid var(--sidebar-border);
  flex-shrink: 0;
}

.sidebar-nav {
  flex: 1;
  padding: 12px 0;
  overflow-y: auto;
}

.sidebar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--sidebar-text);
  cursor: pointer;
  border-radius: 8px;
  margin: 2px 8px;
  border: none;
  background: none;
  width: calc(100% - 16px);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}

.sidebar-item:hover {
  color: var(--sidebar-text-hover);
  background: rgba(255, 255, 255, 0.05);
}

.sidebar-item.active {
  background: var(--sidebar-active-bg);
  color: var(--sidebar-active-text);
}

.sidebar-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
}

.sidebar-bottom {
  padding: 16px 8px;
  border-top: 1px solid var(--sidebar-border);
  margin-top: auto;
  flex-shrink: 0;
}

.sidebar-admin {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--dim);
  cursor: pointer;
  border-radius: 8px;
  margin: 2px 0;
  border: none;
  background: none;
  width: 100%;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}

.sidebar-admin:hover {
  color: var(--sidebar-text-hover);
  background: rgba(255, 255, 255, 0.05);
}

/* ── Mobile Tab Strip ──────────────────────────────────────── */
.mobile-tabs {
  display: none; /* shown only on mobile via media query */
}

/* ── Cards ─────────────────────────────────────────────────── */
.panel{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px 22px;
  box-shadow: var(--shadow-sm);
}

/* Card titles were the same grey as body copy, so a heading and a value had
   equal weight and sections ran together. Smaller, spaced and quieter reads
   as a label; the content below it becomes the thing you see first. */
.panelh3 {
  font-size: 11px;
  font-weight: var(--weight-semibold);
  color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.panel-compact {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

.panel-compact .row {
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  display: flex;
  align-items: center;
}

.panel-compact .row:last-child {
  border-bottom: none;
}

/* The focus card used a 2px accent border all the way round, which shouted at
   the same volume as the content inside it. A single accent rule along the top
   marks it as the important card without ringing it in blue. */
.panel-focus {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--accent);
  border-radius: 14px;
  padding: 20px 22px;
  box-shadow: var(--shadow);
}

/* Money and any column of figures. Proportional digits made every column of
   amounts ragged down the right edge; tabular figures line them up. */
.money-value, .money-big, .bill-amt, .cf-amt, .val, .amount,
.summary-value, .stat-value, [class*="-amt"], [class*="-value"] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ── Progress Bars ─────────────────────────────────────────── */
.progress-track {
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.4s ease;
}

.progress-fill.green  { background: var(--green); }
.progress-fill.red    { background: var(--red); }
.progress-fill.yellow { background: var(--yellow); }

/* ── Typography Utilities ──────────────────────────────────── */
.text-green  { color: var(--green); }
.text-red    { color: var(--red); }
.text-yellow { color: var(--yellow); }
.text-dim    { color: var(--dim); }
.text-muted  { color: var(--muted); }

.num { font-variant-numeric: tabular-nums; }

/* ── Badges ────────────────────────────────────────────────── */
.badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 20px;
  line-height: 1;
}

.badge-accent  { background: var(--accent-lt); color: var(--accent); }
.badge-green   { background: var(--green-lt);  color: #059669; }
.badge-red     { background: var(--red-lt);    color: #dc2626; }
.badge-yellow  { background: var(--yellow-lt); color: #d97706; }
.badge-neutral { background: var(--alt);       color: var(--dim); }

/* ── Buttons ───────────────────────────────────────────────── */
.btn-primary {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  cursor: pointer;
  font-family: inherit;
}

.btn-primary:hover { background: #3d5ce6; }

.btn-secondary {
  background: transparent;
  color: var(--dim);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 20px;
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  cursor: pointer;
  font-family: inherit;
}

.btn-secondary:hover { background: var(--alt); color: var(--text); }

.btn-approve {
  background: var(--accent-lt);
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 8px;
  padding: 7px 16px;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
  font-family: inherit;
}

.btn-skip {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 16px;
  font-size: var(--text-sm);
  cursor: pointer;
  font-family: inherit;
}

/* ── Loading / Empty / Error ───────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, var(--alt) 25%, var(--border) 50%, var(--alt) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: 4px;
  height: 14px;
}

@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.empty-state {
  text-align: center;
  padding: 24px;
  color: var(--muted);
  font-size: 13px;
}

.error-banner {
  background: var(--red-lt);
  color: #dc2626;
  border: 1px solid #fecaca;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ── Section Label ─────────────────────────────────────────── */
.section-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--dim);
  margin-bottom: 12px;
}

/* ── Page Header (Brief only) ──────────────────────────────── */
/* The header was six centred lines - name, date, updated time, a pill, the
   phase and a long italic verse - each a different size and colour, with
   nothing telling you which mattered. Left-aligned and grouped, it reads as
   one block and stops competing with the Focus card right beneath it. */
.page-header {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
  text-align: left;
}

.page-header h1 {
  font-size: 22px;
  font-weight: var(--weight-semibold);
  letter-spacing: -0.02em;
  text-align: left;
  margin-bottom: 2px;
}

.page-header .date {
  font-size: 14px;
  color: var(--dim);
  text-align: left;
  font-weight: var(--weight-normal);
}

/* The supporting lines: same size, same muted colour, sitting on one row
   instead of stacked. They are context, not headlines. */
.page-header .phase,
.page-header .faith {
  text-align: left;
  font-size: var(--text-xs);
  color: var(--muted);
  margin-top: 6px;
  max-width: 68ch;
}
.page-header .faith { font-style: normal; }

.page-header .updated {
  font-size: 11px;
  color: var(--muted);
  text-align: left;
  margin-top: 3px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
}

.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  display: inline-block;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.3; }
}

.page-header .pills {
  display: flex;
  gap: 6px;
  justify-content: flex-start;
  margin: 8px 0 4px;
  flex-wrap: wrap;
}

.pill {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  background: var(--alt);
  color: var(--dim);
}

.pill.urgent { background: var(--red-lt);    color: var(--red); }
.pill.soon   { background: var(--yellow-lt); color: var(--yellow); }

.page-header .phase {
  text-align: left;
  font-size: 12px;
  color: var(--dim);
  font-weight: var(--weight-medium);
  margin: 8px 0 2px;
}

.page-header .faith {
  text-align: left;
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
}

/* Standalone pills/phase/faith used outside page-header */
.pills {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin: 8px 0 4px;
  flex-wrap: wrap;
}

.phase {
  text-align: center;
  font-size: 12px;
  color: var(--accent);
  font-weight: 600;
  margin: 4px 0 2px;
}

.faith {
  text-align: center;
  font-size: 12px;
  color: var(--dim);
  font-style: italic;
}

/* ── Page H1 (non-Brief pages) ─────────────────────────────── */
.page-h1 {
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 20px;
}

/* ── Money / Finance ───────────────────────────────────────── */
.money-main {
  text-align: center;
  padding: 8px 0 12px;
}

.money-label {
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.money-val {
  font-size: 32px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin: 2px 0;
}

.money-sub {
  display: flex;
  justify-content: center;
  gap: 16px;
  font-size: 12px;
  color: var(--dim);
  margin-top: 4px;
}

.money-sub span { font-variant-numeric: tabular-nums; }

.money-tithe {
  font-size: 12px;
  color: var(--red);
  margin-top: 4px;
}

.money-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-top: 1px solid var(--alt);
  font-size: 13px;
}

.money-row .lbl { color: var(--dim); }

.money-row .val {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.val-g { color: var(--green); }
.val-r { color: var(--red); }
.val-o { color: var(--yellow); } /* orange mapped to yellow per spec */

.vl-track {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-top: 1px solid var(--alt);
}

.vl-col {
  text-align: center;
  flex: 1;
}

.vl-col .lbl {
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.vl-col .val {
  font-size: 16px;
  font-weight: 700;
  margin-top: 2px;
}

/* ── Bills ─────────────────────────────────────────────────── */
.bill-section-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 8px 0 4px;
}

.bill-section-label.past-due { color: var(--red); }
.bill-section-label.due-soon { color: var(--yellow); }

.bill-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 13px;
}

.bill-row .name { color: var(--text); }

.bill-row .amt {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--dim);
}

.bill-row .due {
  font-size: 11px;
  color: var(--muted);
  margin-left: 6px;
}

.bill-auto {
  font-size: 10px;
  color: var(--green);
  margin-left: 4px;
}

/* ── Schedule Events ───────────────────────────────────────── */
.ev {
  display: flex;
  padding: 8px 0;
  border-bottom: 1px solid var(--alt);
  gap: 10px;
}

.ev:last-child { border-bottom: none; }

.ev-t {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  min-width: 68px;
  flex-shrink: 0;
}

.ev-n {
  font-size: 13px;
  color: var(--text);
  line-height: 1.35;
}

.ev.past { opacity: 0.3; }
.ev.past .ev-t { text-decoration: line-through; }

.ev.now {
  background: var(--accent-lt);
  margin: 0 -14px;
  padding: 8px 14px;
  border-radius: var(--rs);
  border-bottom: none;
}

.ev.now .ev-n { font-weight: 600; }

.tmrw-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  padding: 10px 0 4px;
  letter-spacing: 0.5px;
}

/* ── Tasks ─────────────────────────────────────────────────── */
.tk {
  display: flex;
  padding: 8px 0;
  border-bottom: 1px solid var(--alt);
  gap: 8px;
}

.tk:last-child { border-bottom: none; }

.tk-id {
  font-size: 10px;
  color: var(--accent);
  font-weight: 700;
  background: var(--accent-lt);
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
  align-self: flex-start;
}

.tk-s {
  font-size: 13px;
  color: var(--text);
  line-height: 1.35;
}

/* ── Students ──────────────────────────────────────────────── */
.st-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--alt);
}

.st-row:last-child { border-bottom: none; }

.st-info {
  display: flex;
  flex-direction: column;
}

.st-name {
  font-size: 13px;
  color: var(--text);
  font-weight: 500;
}

.st-day {
  font-size: 11px;
  color: var(--muted);
}

.st-badge {
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 20px;
  font-weight: 600;
  white-space: nowrap;
}

.sb-ok   { background: var(--green-lt);  color: var(--green); }
.sb-lo   { background: var(--yellow-lt); color: var(--yellow); }
.sb-need { background: var(--red-lt);    color: var(--red); }

/* ── Pipeline ──────────────────────────────────────────────── */
.pipe-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  padding: 10px 0 4px;
  letter-spacing: 0.5px;
}

.pipe-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 13px;
  border-bottom: 1px solid var(--alt);
}

.pipe-row:last-child { border-bottom: none; }

.pipe-name {
  color: var(--text);
  font-weight: 500;
}

.pipe-status {
  font-size: 11px;
  color: var(--dim);
}

/* ── Debt ──────────────────────────────────────────────────── */
.debt-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--alt);
}

.debt-row:last-child { border-bottom: none; }

.debt-info {
  display: flex;
  flex-direction: column;
}

.debt-name {
  font-size: 13px;
  font-weight: 500;
}

.debt-plan {
  font-size: 11px;
  color: var(--muted);
}

.debt-bal {
  font-size: 14px;
  font-weight: 700;
  color: var(--red);
}

/* ── Cash Flow ─────────────────────────────────────────────── */
.cf-section { margin-bottom: 16px; }

.cf-sec-hdr {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 10px 0 6px;
  border-bottom: 2px solid var(--border);
  margin-bottom: 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cf-row {
  display: flex;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px solid var(--alt);
  gap: 8px;
  font-size: 13px;
}

.cf-row:last-child { border-bottom: none; }

.cf-row-date {
  font-size: 11px;
  color: var(--muted);
  width: 32px;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

.cf-row-desc {
  flex: 1;
  color: var(--text);
  line-height: 1.3;
}

.cf-row-amt {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.cf-row.proj .cf-row-desc  { color: var(--dim); font-style: italic; }
.cf-row.proj .cf-row-amt   { color: var(--dim); }
.cf-row.cf-row-paid .cf-row-desc { text-decoration: line-through; color: var(--muted); }

.cf-paid-btn {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  transition: all 0.15s;
  flex-shrink: 0;
}

.cf-paid-btn.paid {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}

.cf-subtotal {
  display: flex;
  justify-content: space-between;
  padding: 8px 0 0;
  font-size: 12px;
  color: var(--dim);
  margin-top: 4px;
  border-top: 1px solid var(--alt);
}

/* ── Budget ────────────────────────────────────────────────── */
.bud-item {
  margin: 8px 0;
  cursor: pointer;
  border-radius: 8px;
  padding: 6px 8px;
  transition: background 0.15s;
}

.bud-item:active { background: var(--alt); }

.bud-labels {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}

.bud-name {
  font-size: 13px;
  color: var(--dim);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 5px;
}

.bud-amt {
  font-size: 13px;
  color: var(--text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.bud-chevron {
  font-size: 10px;
  color: var(--muted);
  transition: transform 0.2s;
  display: inline-block;
  flex-shrink: 0;
}

.bud-item.open .bud-chevron { transform: rotate(90deg); }

.bud-item-txns { display: none; border-top: 1px solid var(--alt); margin-top: 6px; }
.bud-item.open .bud-item-txns { display: block; }

/* Legacy progress bar (used in existing rendering code) */
.bar-track {
  height: 7px;
  background: var(--alt);
  border-radius: 4px;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.f-g { background: linear-gradient(90deg, #10b981, #34d399); }
.f-y { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.f-r { background: linear-gradient(90deg, #ef4444, #f87171); }

.bud-cat {
  border: 1px solid var(--border);
  border-radius: var(--rs);
  margin-bottom: 8px;
  overflow: hidden;
  background: var(--surface);
}

.bud-cat-hdr {
  display: flex;
  align-items: center;
  padding: 11px 12px;
  cursor: pointer;
  gap: 10px;
  user-select: none;
}

.bud-cat-hdr:active { background: var(--alt); }

.bud-cat-chevron {
  font-size: 10px;
  color: var(--muted);
  transition: transform 0.2s;
  flex-shrink: 0;
  display: inline-block;
}

.bud-cat-hdr.open .bud-cat-chevron { transform: rotate(90deg); }

.bud-cat-name {
  font-size: 13px;
  font-weight: 600;
  flex: 1;
}

.bud-cat-meta {
  font-size: 12px;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.bud-cat-bar { padding: 0 12px 8px; }

.bud-cat-txns { display: none; border-top: 1px solid var(--alt); }
.bud-cat-txns.open { display: block; }

.bud-txn-row {
  display: flex;
  align-items: center;
  padding: 9px 12px;
  border-bottom: 1px solid var(--alt);
  gap: 8px;
}

.bud-txn-row:last-child { border-bottom: none; }

.bud-txn-date {
  font-size: 11px;
  color: var(--muted);
  width: 32px;
  flex-shrink: 0;
}

.bud-txn-desc {
  flex: 1;
  font-size: 13px;
  color: var(--text);
}

.bud-txn-amt {
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--dim);
  margin-right: 4px;
}

.bud-txn-act {
  width: 28px;
  height: 28px;
  border: none;
  background: var(--accent-lt);
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--accent);
  font-family: inherit;
}

.bud-txn-act:active { transform: scale(0.9); }

.bud-add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  border-top: 1px solid var(--alt);
  background: var(--accent-lt);
}

.bud-week-card {
  border: 1px solid var(--border);
  border-radius: var(--rs);
  margin-bottom: 8px;
  padding: 12px;
  background: var(--surface);
}

.bud-week-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.bud-week-wk {
  font-size: 24px;
  font-weight: 700;
  color: var(--accent);
}

.bud-week-wk.over { color: var(--red); }

.bud-week-sub {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}

/* Budget toggle */
.bud-toggle {
  display: flex;
  background: var(--alt);
  border-radius: var(--rs);
  padding: 3px;
  gap: 2px;
  margin-bottom: 14px;
}

.bud-toggle-btn {
  flex: 1;
  text-align: center;
  padding: 7px 0;
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
  color: var(--dim);
  cursor: pointer;
  transition: all 0.15s;
  border: none;
  background: transparent;
  font-family: inherit;
}

.bud-toggle-btn.active {
  background: var(--surface);
  color: var(--accent);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* ── History ───────────────────────────────────────────────── */
.hist-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.hist-nav-btn {
  background: var(--alt);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  cursor: pointer;
  font-size: 15px;
  padding: 4px 12px;
  font-weight: 600;
}

.hist-nav-btn:disabled { opacity: 0.3; cursor: default; }

.hist-month-lbl {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

.hist-cmp-bar {
  background: var(--alt);
  border-radius: var(--rs);
  padding: 10px 12px;
  margin-bottom: 12px;
  font-size: 13px;
}

.hist-cmp-win  { color: var(--green);  font-weight: 600; }
.hist-cmp-loss { color: var(--red);    font-weight: 600; }
.hist-cmp-same { color: var(--muted);  font-weight: 600; }

.hist-row {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

.hist-row:last-child { border-bottom: none; }

.hist-row-cat {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.hist-row-spent {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  width: 70px;
  text-align: right;
}

.hist-row-bud {
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  width: 55px;
  text-align: right;
}

.hist-row-var {
  font-size: 11px;
  font-weight: 700;
  width: 68px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.hist-row-var.over  { color: var(--red); }
.hist-row-var.under { color: var(--green); }

.hist-row-vs {
  font-size: 10px;
  width: 60px;
  text-align: right;
  color: var(--muted);
}

.hist-row-vs.worse  { color: var(--red); }
.hist-row-vs.better { color: var(--green); }

.hist-sec-hdr {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 10px 0 4px;
}

.hist-ux-row {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}

.hist-ux-row:last-child { border-bottom: none; }

.hist-ux-desc {
  color: var(--text);
  flex: 1;
  padding-right: 8px;
}

.hist-ux-date {
  color: var(--muted);
  width: 40px;
  flex-shrink: 0;
}

.hist-ux-amt {
  color: var(--red);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.hist-totals {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
}

.hist-total-box {
  background: var(--alt);
  border-radius: var(--rs);
  padding: 10px 12px;
  text-align: center;
}

.hist-total-box .lbl {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--muted);
  margin-bottom: 3px;
}

.hist-total-box .val {
  font-size: 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.hist-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--muted);
  font-size: 14px;
}

/* ── Jira Board ────────────────────────────────────────────── */
.cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.col-c {
  background: var(--alt);
  border-radius: var(--rs);
  padding: 8px;
  text-align: center;
}

.col-c .n {
  font-size: 18px;
  font-weight: 700;
}

.col-c .l {
  font-size: 9px;
  color: var(--muted);
  margin-top: 1px;
}

/* ── Routines ──────────────────────────────────────────────── */
.rt-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.rt-item {
  background: var(--alt);
  border-radius: var(--rs);
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.rt-name {
  font-size: 12px;
  color: var(--dim);
  font-weight: 500;
}

.rt-val {
  font-size: 14px;
  font-weight: 700;
}

.rt-streak {
  font-size: 10px;
  color: var(--muted);
  margin-top: 2px;
}

/* ── Brief why / annotations ───────────────────────────────── */
.why {
  text-align: center;
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
  padding: 16px 8px 8px;
  line-height: 1.5;
}

/* ── Action Sheet ──────────────────────────────────────────── */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 100;
  display: none;
  align-items: flex-end;
}

.overlay.show { display: flex; }

.sheet {
  background: var(--surface);
  border-radius: var(--r) var(--r) 0 0;
  width: 100%;
  padding: 0 0 8px;
  max-height: 90vh;
  overflow-y: auto;
}

.sheet-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--dim);
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--border);
  text-align: center;
}

.sheet-btn {
  display: block;
  width: 100%;
  padding: 15px 16px;
  font-size: 15px;
  font-weight: 500;
  text-align: center;
  border: none;
  background: transparent;
  cursor: pointer;
  border-bottom: 1px solid var(--alt);
  color: var(--text);
  font-family: inherit;
}

.sheet-btn:last-child { border-bottom: none; }
.sheet-btn.cancel     { color: var(--muted); }
.sheet-btn.danger     { color: var(--red); }

/* ── Modal ─────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal-overlay.show { display: flex; }

.modal {
  background: var(--surface);
  border-radius: var(--r);
  width: 100%;
  max-width: 360px;
  padding: 20px;
}

.modal h3 {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 4px;
}

.modal .modal-sub {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 16px;
}

.modal-field { margin-bottom: 12px; }

.modal-field label {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  display: block;
  margin-bottom: 4px;
}

.modal-field input,
.modal-field select {
  width: 100%;
  font-size: 14px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--rs);
  font-family: inherit;
  background: var(--surface);
  color: var(--text);
}

.modal-field input:focus,
.modal-field select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(79, 110, 247, 0.1);
}

.modal-field input[readonly] {
  background: var(--alt);
  color: var(--dim);
}

.modal-actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}

.modal-actions button {
  flex: 1;
  padding: 12px;
  border-radius: var(--rs);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  font-family: inherit;
}

.btn-cancel { background: var(--alt); color: var(--dim); }
.btn-save   { background: var(--accent); color: #fff; }
.btn-save:disabled { opacity: 0.5; cursor: default; }

/* ── Jarvis Input ──────────────────────────────────────────── */
.jarvis-input {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

.jarvis-input input {
  flex: 1;
  font-size: 13px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--rs);
  font-family: inherit;
  background: var(--surface);
  color: var(--text);
}

.jarvis-input input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(79, 110, 247, 0.1);
}

.jarvis-input button {
  padding: 10px 16px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--rs);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
}

.jarvis-input button:active   { transform: scale(0.97); }
.jarvis-input button:disabled { opacity: 0.5; }

.sent-ok {
  color: var(--green);
  font-size: 12px;
  margin-top: 4px;
  font-weight: 500;
}

/* ── Sticky Secondary Column (desktop) ────────────────────── */
@media (min-width: 1024px) {
  .col-secondary {
    position: sticky;
    top: 32px;
    align-self: start;
  }
}

/* ── Tablet: single column ─────────────────────────────────── */
@media (max-width: 1023px) {
  .page-body {
    grid-template-columns: 1fr;
  }

  .col-secondary {
    order: -1; /* secondary stacks above primary on tablet */
  }
}

/* ── Mobile: tab strip, no sidebar ────────────────────────── */
@media (max-width: 767px) {
  .layout {
    flex-direction: column;
  }

  .sidebar {
    display: none;
  }

  .mobile-tabs {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 52px;
    background: var(--sidebar-bg);
    align-items: center;
    justify-content: space-around;
    z-index: 100;
    border-bottom: 1px solid var(--sidebar-border);
  }

  .mobile-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 0 4px;
    color: var(--sidebar-text);
    cursor: pointer;
    border: none;
    background: none;
    height: 52px;
    border-bottom: 2px solid transparent;
    font-size: 10px;
    font-weight: 500;
    font-family: inherit;
    text-decoration: none;
    transition: color 0.15s, border-color 0.15s;
  }

  .mobile-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
  }

  .mobile-tab svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    fill: none;
  }

  .mobile-tab-label {
    font-size: 10px;
  }

  .main-content {
    margin-left: 0;
    padding: 16px 14px;
    padding-top: calc(52px + 16px);
  }

  .panel      { padding: 16px; }
  .panel-focus { padding: 16px; }

  /* On the phone this is one very long column - the cash flow page ran to
     nearly 4000px. The fixes that matter there are room to breathe between
     cards, rows tall enough to tap, and long descriptions that wrap instead
     of squeezing the amount off the edge. */
  .main-content > * + * { margin-top: 14px; }

  .panel-compact .row,
  .bill-row, .cf-row, .income-row, .task-row, .schedule-row {
    padding-top: 11px;
    padding-bottom: 11px;
    min-height: 44px;
  }

  /* Keep the amount on its own line-end and let the label take the slack,
     rather than both fighting for the same row. */
  .bill-row, .cf-row, .income-row {
    gap: 10px;
    align-items: baseline;
  }
  .bill-name, .cf-name, .income-name {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .bill-amt, .cf-amt, .income-amt {
    flex-shrink: 0;
    white-space: nowrap;
  }
}

@media (max-width: 399px) {
  .mobile-tab-label {
    display: none;
  }
}