/* =========================================================
   Couple Budget Tracker — app.css (mobile-first, cleaned)
   - Dark UI + light mode
   - Big touch targets & iOS safe-area padding
   - Accessible focus states & high-contrast support
   - Generic tables + Category rows (desktop + mobile cards)
   - Floating "Quick Add" FAB
   ========================================================= */

:root{
  --bg:#0b0d12;
  --panel:#111626;
  --card:#151b2b;
  --line:#222a3d;
  --text:#e7e9ee;
  --muted:#9aa6c1;
  --accent:#4f46e5;      /* indigo */
  --accent-2:#22c55e;    /* green */
  --danger:#ef4444;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --radius:16px;

  /* iOS safe areas */
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}

*{ box-sizing:border-box; -webkit-tap-highlight-color: rgba(0,0,0,0) }
html,body{ margin:0; padding:0 }
body{
  font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  padding-bottom:max(68px, var(--safe-b)); /* room for FAB on mobile */
}

/* Topbar */
.topbar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:12px;
  padding:12px 16px;
  background:var(--panel);
  border-bottom:1px solid var(--line);
}
.brand{ font-weight:700; letter-spacing:.2px }
.grow{ flex:1 }
.me{ color:#cbd5e1 }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px;
  padding:10px 14px;
  background:#27314b;
  border:1px solid #2f3957;
  color:#fff; text-decoration:none;
  border-radius:12px;
  cursor:pointer;
  transition:transform .04s ease, filter .12s ease;
  min-height:44px; touch-action:manipulation;
}
.btn:hover{ filter:brightness(1.06) }
.btn:active{ transform:translateY(1px) }
.btn.primary{ background:var(--accent); border-color:transparent }
.btn.ghost{ background:transparent; border:1px solid #344061; color:#dbe3ff }
.btn.btn-lg{ padding:12px 16px; font-size:18px }
.btn.danger{ background:var(--danger); border-color:transparent }
.btn.success{ background:var(--accent-2); border-color:transparent }
.btn[disabled], .btn.is-loading{ opacity:.65; cursor:not-allowed; filter:grayscale(.2) }
.btn.is-loading::after{
  content:""; width:16px; height:16px; border-radius:50%;
  border:2px solid rgba(255,255,255,.5); border-top-color:#fff;
  display:inline-block; animation:spin 1s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg) } }

/* Containers & cards */
.container{ max-width:1100px; margin:22px auto; padding:0 16px }
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:16px;
  box-shadow:var(--shadow);
}
.card-narrow{ max-width:460px; margin:40px auto }
.stat{ display:flex; flex-direction:column; gap:6px }
.stat .muted{ color:var(--muted) }
.stat .stat-val{ font-size:28px; font-weight:800 }

/* Alerts */
.alert{ padding:10px 12px; border-radius:12px; margin-bottom:14px }
.alert-success{ background:#0d2e1c; border:1px solid #1f5f3b; color:#daf3e6 }
.alert-danger{ background:#3a1116; border:1px solid #6f212b; color:#ffd6db }

/* Forms */
label span{ display:block; font-size:12px; color:var(--muted); margin-bottom:4px }
input, select{
  width:100%;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid #2a3451;
  background:#0f1423;
  color:var(--text);
  outline:none;
}
input:focus, select:focus{
  border-color:#5363aa;
  box-shadow:0 0 0 3px rgba(79,70,229,.25);
}
input[type="date"]{ padding:10px 12px }
::placeholder{ color:#7f8aad }

/* Focus visibility (keyboard) */
:focus-visible{
  outline:3px solid color-mix(in oklab, var(--accent) 75%, white);
  outline-offset:2px; border-radius:6px;
}
.btn:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible{ outline-offset:3px }

$1

/* Prevent grid children from overflowing (keeps cards same width) */
.grid > *{ min-width:0; }

/* Tables should never force wider than container */
.table{ overflow:auto; }

/* Floating Action Button */
.fab{
  position:fixed;
  right:calc(18px + var(--safe-r)); bottom:calc(18px + var(--safe-b));
  width:58px; height:58px; border-radius:50%;
  background:var(--accent);
  color:#fff; font-size:30px; font-weight:800;
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow); border:0; text-decoration:none;
  transition:transform .04s ease, filter .12s ease;
}
.fab:active{ transform:scale(.98) }

/* Sub-navigation tabs */
.subnav{
  display:flex; gap:8px; align-items:center;
  padding:10px 16px; margin:0 auto 8px; max-width:1100px;
}
.btn.tab{
  background:transparent; color:#cfd7f9;
  border:1px solid #344061; padding:8px 12px; border-radius:10px;
}
.btn.tab.active{ background:var(--accent); color:#fff; border-color:transparent }
.btn.back{ margin-left:auto; background:#27314b; border-color:#2f3957 }

/* ===================== Tables ===================== */

/* Generic table (desktop defaults) */
.table{ width:100% }
.table .row{
  display:grid;
  grid-template-columns:1.2fr .7fr .7fr .8fr .5fr; /* adjust per page if needed */
  gap:12px; padding:10px 0;
  border-bottom:1px solid var(--line);
}
.table .row.head{
  font-weight:700; color:#c7d2fe;
  border-bottom:1px solid #2f3957;
}
$1

/* Boxed metrics for Budget/Spent/Remaining */
.table .row.cat .chip{
  background:#0f1423;
  border:1px solid #2a3451;
  padding:6px 8px;
  border-radius:10px;
  font-variant-numeric: tabular-nums;
}

$1

/* Desktop progress bar below each category row */
.cat-bar-desktop{ grid-column:1 / -1; margin-top:6px; }
.cat .cat-mobile{ display:none }

/* Progress bar (used in categories) */
.bar{
  width:100%; height:10px; border-radius:8px;
  background:#1f2535; overflow:hidden; margin-top:8px;
  border:1px solid #2a3451;
}
.bar span{
  display:block; height:100%;
  background:var(--accent);
  border-radius:8px;
}
.bar.over span{ background:var(--danger) }

/* Accessibility utility */
.sr-only{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ===================== Responsive ===================== */
$1
  /* Hide desktop bar on small screens (mobile has its own bar) */
  $1

  /* Hide some columns on small screens */
  /* Recent Expenses: hide Date (1) and By (5) */
  .recent-exp .row > div:nth-child(1),
  .recent-exp .row > div:nth-child(5){ display:none; }
  .recent-exp .row.head > div:nth-child(1),
  .recent-exp .row.head > div:nth-child(5){ display:none; }

  /* Recent Income: hide Source (2) */
  .recent-inc .row > div:nth-child(2){ display:none; }
  .recent-inc .row.head > div:nth-child(2){ display:none; }
}

/* Ensure spacing between cards */
.container .card,
.card { margin-bottom: 16px; }

/* Budget by Category: desktop grid for aligned columns */
.table .row.head,
.table .row.cat {
  display: grid;
  grid-template-columns: 220px 120px 120px 120px 80px 1fr; /* name | budget | spent | remaining | % | bar */
  gap: 12px;
  align-items: center;
  padding: 6px 0;
  min-height: 44px;
}
.table .row.head > div { font-weight:600; color:var(--muted,#666); }
.cat-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-budget, .cat-spent, .cat-remaining, .cat-pct { text-align:right; white-space:nowrap; overflow:hidden; }
.cat-bar-desktop { min-width:0; padding-left:4px; }

/* Progress bar visuals */
.bar { background:#f2f4f7; border-radius:8px; overflow:hidden; height:10px; width:100%; position:relative; }
.bar span { display:block; height:100%; background:#2b90ff; width:0%; transition:width .25s ease; }
.bar.over span { background:#d9534f; }
/* label inside bar (hidden on desktop) */
.bar .bar-label { display:none; position:absolute; left:8px; right:8px; top:0; bottom:0; align-items:center; justify-content:center; color:#fff; font-size:0.85rem; line-height:1; text-shadow:0 1px 2px rgba(0,0,0,0.5); pointer-events:none; }

/* Recent lists: desktop grid alignment (4 columns now) */
.recent-exp .row.head,
.recent-exp .row {
  display: grid;
  grid-template-columns: 120px 1fr 2fr 110px; /* date | category | description | amount */
  gap: 12px;
  align-items: center;
  padding: 6px 0;
}
.recent-inc .row.head,
.recent-inc .row {
  display: grid;
  grid-template-columns: 120px 1fr 110px; /* date | source | amount */
  gap: 12px;
  align-items: center;
  padding: 6px 0;
}
.recent-exp .row.head > div,
.recent-inc .row.head > div { font-weight:600; color:var(--muted,#666); }
.recent-exp .row > div:nth-child(4),
.recent-inc .row > div:nth-child(3) { text-align:right; }

/* Small screens: simplify category detail, show bar label, hide numeric chips */
@media (max-width: 720px) {
  .table .row.cat {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:8px;
    padding:10px 8px;
    border-bottom:1px solid rgba(0,0,0,0.04);
  }
  .cat-name { font-weight:600; white-space:normal; }
  /* hide the numeric columns to simplify; only bar with label remains */
  .cat-budget, .cat-spent, .cat-remaining, .cat-pct { display:none !important; }

  .cat-bar-desktop { width:100%; margin-top:6px; }
  .cat-bar-desktop .bar { height:14px; border-radius:7px; }
  .bar .bar-label { display:flex; align-items:center; justify-content:flex-start; font-weight:600; padding-left:8px; }

  /* Recent lists -> card style (simplified and aligned) */
  .recent-exp .row, .recent-inc .row {
    display:block;
    background:var(--card-bg,#fff);
    padding:10px;
    margin-bottom:10px;
    border-radius:8px;
    box-shadow:0 1px 0 rgba(0,0,0,0.04);
  }
  /* inside each recent card use simple inline blocks */
  .recent-exp .row > div, .recent-inc .row > div { display:inline-block; vertical-align:middle; margin-right:8px; }
  /* hide verbose columns on mobile if needed (we already simplified) */
  .recent-exp .row > div:nth-child(1) { display:none !important; } /* hide date on very small devices */
  .recent-inc .row > div:nth-child(1) { display:none !important; }
  /* keep amount visible and aligned to right inside card */
  .recent-exp .row .right, .recent-inc .row .right { float:right; margin-left:8px; }
}

/* Very small screens tuning */
@media (max-width: 420px) {
  .bar .bar-label { font-size:0.85rem; }
  .card h2, .card h3 { font-size:1rem; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .btn, .fab{ transition:none }
  .btn:active{ transform:none }
}

/* High contrast */
@media (prefers-contrast: more){
  :root{
    --text:#ffffff;
    --muted:#cdd7f1;
    --line:#3a4766;
  }
  .btn{ filter:brightness(1.1) saturate(1.05) }
  .btn.ghost{ border-color:#5363aa }
  input,select{ border-color:#3a4766 }
}

/* Light mode */
@media (prefers-color-scheme: light){
  :root{
    --bg:#f5f7fb; --panel:#ffffff; --card:#ffffff; --line:#e6e9f2;
    --text:#182237; --muted:#6c7897; --accent:#4f46e5; --danger:#c62828;
    --shadow:0 8px 24px rgba(0,0,0,.08);
  }
  input,select{ background:#fff; border-color:#d9deea; color:#1a2236 }
  .table .row{ border-bottom:1px solid #eef1f7 }
  .alert-success{ background:#e8f6ee; border-color:#bfe7cf; color:#145c32 }
  .alert-danger{ background:#fde8ea; border-color:#f5c2c7; color:#7d1b24 }
}

/* Small screens: simplified recent lists as boxed cards and simplified category/description layout */
@media (max-width: 720px) {
  /* Keep category rows simplified (bar label already handled elsewhere) */
  .table .row.cat { /* existing stacked styles apply */ }

  /* Recent lists: make each entry a simple boxed card with Category / Description then Amount */
  .recent-exp .row,
  .recent-inc .row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    background: var(--card-bg, #fff);
    padding: 10px;
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 8px;
    margin-bottom: 10px;
    box-shadow: none; /* remove noisy highlights */
  }

  /* Hide the date column on small screens to save space */
  .recent-exp .row .date,
  .recent-inc .row .date { display: none; }

  /* Left block: category / source stacked with description */
  .recent-exp .row .category,
  .recent-inc .row .source {
    font-weight: 600;
    flex: 0 0 auto;
    margin-right: 8px;
  }

  .recent-exp .row .description {
    flex: 1 1 auto;
    color: var(--muted, #666);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Right block: amount */
  .recent-exp .row .amount,
  .recent-inc .row .amount {
    flex: 0 0 auto;
    text-align: right;
    font-weight: 700;
    color: inherit;
    margin-left: 8px;
    white-space: nowrap;
  }

  /* Ensure floats from desktop are ignored on mobile */
  .recent-exp .row .right,
  .recent-inc .row .right { float: none; }

  /* Slightly reduce padding for very small screens */
  @media (max-width: 420px) {
    .recent-exp .row, .recent-inc .row { padding: 8px; }
    .recent-exp .row .description { font-size: 0.95rem; }
    .recent-exp .row .amount, .recent-inc .row .amount { font-size: 0.95rem; }
  }
}