/* =========================================
   Classroom Funds Tracker — styles.css
   Works with Pico CSS. No class changes required.
   ========================================= */

/* ---------- CSS Variables (Light/Dark) ---------- */
:root {
  --brand: #6c5ce7;
  --brand-2: #a29bfe;
  --accent: #00c2a8;
  --warn: #ff9f43;
  --danger: #ff6b6b;
  --ok: #2ecc71;

  --bg: #f7f8fa;
  --card: #ffffff;
  --ink: #1f2937;
  --ink-2: #4b5563;
  --muted: #9ca3af;
  --border: #e5e7eb;
  --ring: rgba(108, 92, 231, 0.35);
  --shadow: 0 8px 24px rgba(16, 24, 40, 0.08);

  /* Row sizing for “limit-5” scroller */
  --row-h: 56px;   /* approx row height */
  --thead-h: 50px; /* approx header height */
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1116;
    --card: #151922;
    --ink: #e5e7eb;
    --ink-2: #cbd5e1;
    --muted: #94a3b8;
    --border: #242a36;
    --ring: rgba(162, 155, 254, 0.4);
    --shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  }
}

/* ---------- Base layout ---------- */
html, body {
  height: 100%;
  background: var(--bg);
  color: var(--ink);
}
body {
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Content container */
.container-narrow { max-width: 1100px; margin: 0 auto; padding: 1.25rem; }

/* Section spacing */
.section { margin-block: 1.5rem; }

/* ---------- Topbar + Burger Menu ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .75rem 1rem;
  background: color-mix(in oklab, var(--card) 92%, transparent);
  backdrop-filter: saturate(140%) blur(6px);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow);
  overflow: visible; /* allow dropdown to extend */
}
.topbar h1, .topbar h2, .topbar h3 {
  margin: 0; font-size: 1rem; font-weight: 700; letter-spacing: .2px;
}

/* Burger button (draws 3 centered lines via background) */
#menu-toggle {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--ink); /* line color */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .2s ease;
  position: relative;

  --bar-w: 20px;
  --bar-h: 2px;
  --bar-gap: 6px;

  background-image:
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size:
    var(--bar-w) var(--bar-h),
    var(--bar-w) var(--bar-h),
    var(--bar-w) var(--bar-h);
  background-position:
    center calc(50% - var(--bar-gap)), /* top */
    center center,                     /* middle */
    center calc(50% + var(--bar-gap)); /* bottom */
}
#menu-toggle:hover { transform: translateY(-1px); }
#menu-toggle:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }

/* Slide-down menu panel (compact) */
.menu-card {
  position: absolute;
  right: .75rem;
  top: calc(100% + .5rem);
  width: 232px;
  max-width: 92vw;
  z-index: 1200;
  padding: .5rem;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: var(--shadow);
  overflow: visible;
  animation: panel-in .18s ease-out both;
}
@keyframes panel-in { from { transform: translateY(-6px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* Header compact: first line muted, then bold name, then chip */
.menu-header {
  display: grid;
  grid-template-columns: 1fr;
  gap: .35rem;
  padding: .5rem .5rem .6rem;
  border-bottom: 1px solid var(--border);
}
.menu-header .muted { font-size: .9rem; }
.menu-header strong  { font-size: 1rem; font-weight: 800; line-height: 1.2; }
.menu-header .chip   { font-size: .78rem; }

/* Actions: vertical compact buttons */
.menu-list {
  display: grid;
  gap: .45rem;
  padding: .5rem .5rem .6rem;
}
.menu-list .button,
.menu-list a.button {
  width: 100%;
  padding: .45rem .6rem;
  font-size: .9rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--card) 96%, transparent);
  color: var(--ink);
  box-shadow: none;
}
.menu-list .button:hover,
.menu-list a.button:hover {
  background: color-mix(in oklab, var(--brand-2) 10%, var(--card));
}
.menu-list .button.secondary {
  background: color-mix(in oklab, var(--brand-2) 8%, var(--card));
  color: var(--ink);
}

/* ---------- Page header & summary cards ---------- */
.page-header { display: grid; gap: .75rem; margin: 1rem 0 1.25rem; }
.page-header h1 { font-size: clamp(1.25rem, 1rem + 1.2vw, 1.8rem); margin: 0; }
.page-subtitle { color: var(--ink-2); }

.cards { display: grid; grid-template-columns: repeat(12, 1fr); gap: .9rem; }
.card {
  grid-column: span 12;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 18px; padding: 1rem; box-shadow: var(--shadow);
}
.card--kpi { grid-column: span 12; }
@media (min-width: 700px) { .card--kpi { grid-column: span 4; } }
.card h3 { margin: 0 0 .35rem; font-size: 1rem; }
.card .kpi { font-weight: 800; font-size: clamp(1.25rem, 1rem + 1.5vw, 1.9rem); }
.card .muted { color: var(--muted); font-size: .9rem; }

/* KPI row: keep three in one line on desktop */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 1rem; align-items: stretch;
}
@media (max-width: 900px) {
  .kpi-row { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
}
.kpi-row .card--kpi { grid-column: auto; margin: 0; }

/* ---------- Forms ---------- */
.form-grid { display: grid; gap: .8rem; }
@media (min-width: 700px) {
  .form-grid { grid-template-columns: repeat(12, 1fr); }
  .span-6 { grid-column: span 6; }
  .span-4 { grid-column: span 4; }
  .span-3 { grid-column: span 3; }
  .span-12 { grid-column: span 12; }
}
input, select, textarea {
  background: var(--card) !important; border: 1px solid var(--border) !important;
  color: var(--ink) !important; border-radius: 12px !important; box-shadow: none !important;
}
input:focus, select:focus, textarea:focus { outline: 3px solid var(--ring); outline-offset: 1px; }

/* Buttons */
.button, .btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .6rem .9rem; border-radius: 12px; border: 1px solid var(--border);
  background: var(--brand); color: white; font-weight: 600;
  transition: transform .06s ease, filter .12s ease, box-shadow .12s ease;
  box-shadow: var(--shadow); cursor: pointer;
}
.button:hover, .btn:hover { filter: brightness(1.05); transform: translateY(-1px); }
.button:active, .btn:active { transform: translateY(0); }
.button:focus-visible, .btn:focus-visible { outline: 3px solid var(--ring); }
.button.secondary {
  background: color-mix(in oklab, var(--brand-2) 30%, var(--card)); color: var(--ink);
}

/* ---------- Tables ---------- */
/* The outer wrapper holds styling + caption and does NOT scroll */
.table-wrap {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
  overflow: visible; /* important: no horizontal scroll here */
}

/* Caption stays centered and static */
.table-caption {
  text-align: center;
  font-weight: 600;
  color: var(--ink-2);
  padding: .6rem .75rem;
  border-bottom: 1px solid var(--border);
  background: var(--card);
}

/* Only this inner layer scrolls horizontally on mobile */
.table-scroller {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
}

/* Limit Students table to ~5 visible rows with its own vertical scroll */
#students-table .table-scroller.limit-5 {
  max-height: calc(var(--thead-h) + (var(--row-h) * 5));
  overflow-y: auto;
}

/* Base table styles */
.table-scroller table,
table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 720px; /* ensures horizontal scroll on small screens */
}

/* Sticky header */
thead th {
  position: sticky;
  top: 0;
  z-index: 6;
  background: color-mix(in oklab, var(--card) 92%, transparent);
  backdrop-filter: blur(3px);
  color: var(--ink-2);
  font-weight: 700;
  text-align: left;
  padding: .75rem .8rem;
  border-bottom: 1px solid var(--border);
}

/* Fix consistent row/header height for Students table so the limit-5 math is stable */
#tbl-students thead th { height: var(--thead-h); }
#tbl-students tbody tr { height: var(--row-h); }
#tbl-students td, #tbl-students th { padding: .6rem .8rem; }

tbody td {
  padding: .7rem .8rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

tbody tr:hover td {
  background-color: color-mix(in oklab, var(--brand-2) 10%, transparent);
}

/* Sticky first column — single, consistent rule set */
.table--sticky-first th:first-child,
.table--sticky-first td:first-child {
  position: sticky;
  left: 0;
  z-index: 9; /* above other cells */
  background: var(--card);
  box-shadow: 1px 0 0 0 var(--border), 8px 0 12px rgba(0,0,0,.12);

  /* keep header/body aligned */
  width: 200px;     /* adjust if needed */
  min-width: 200px;
  max-width: 200px;
}

/* ---------- Row states ---------- */
tr.is-unpaid td { background: color-mix(in oklab, var(--danger) 11%, transparent); }
tr.is-partial td { background: color-mix(in oklab, var(--warn) 10%, transparent); }
tr.is-paid td { background: color-mix(in oklab, var(--ok) 10%, transparent); }

/* ---------- Status chips ---------- */
.badge {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .2rem .55rem; border-radius: 999px; font-size: .78rem; font-weight: 700;
  border: 1px solid var(--border); background: color-mix(in oklab, var(--card) 85%, transparent);
}
.badge.ok { background: color-mix(in oklab, var(--ok) 20%, var(--card)); }
.badge.warn { background: color-mix(in oklab, var(--warn) 22%, var(--card)); }
.badge.danger { background: color-mix(in oklab, var(--danger) 22%, var(--card)); }

/* ---------- Actions column + icon buttons ---------- */
th.right, td.right { text-align: right; }
.table-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: .35rem; min-width: 96px; }

.icon-btn {
  width: 34px; height: 34px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1; vertical-align: middle;
  border-radius: 10px; border: 1px solid var(--border);
  background: var(--card); color: var(--ink);
  cursor: pointer; transition: background .15s ease, transform .06s ease;
}
.icon-btn:hover { background: color-mix(in oklab, var(--brand-2) 10%, var(--card)); transform: translateY(-1px); }
.icon-btn:focus-visible { outline: 3px solid var(--ring); }
.icon-btn svg { width: 18px; height: 18px; display: block; fill: currentColor; }

/* Students: checkbox + badge align */
#tbl-students td label { display: inline-flex; align-items: center; gap: .5rem; }
#tbl-students input[type="checkbox"] { display: none; vertical-align: middle; accent-color: var(--brand); }

/* ---------- Totals Bar ---------- */
.totals-bar {
  display: grid; grid-template-columns: repeat(12, 1fr);
  gap: .75rem; align-items: stretch;
}
.total-pill {
  grid-column: span 12;
  border: 1px solid var(--border); background: var(--card);
  border-radius: 14px; padding: .75rem 1rem; box-shadow: var(--shadow);
  display: flex; align-items: center; justify-content: space-between;
}
.total-pill strong { font-size: 1.05rem; }
@media (min-width: 700px) { .total-pill { grid-column: span 4; } }

/* ---------- Modal ---------- */
.modal {
  position: fixed; inset: 0; display: grid; place-items: center;
  background: rgba(0,0,0,.35); padding: 1rem; z-index: 100;
  animation: fade-in .12s ease-out both;
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.modal-card {
  width: min(560px, 92vw); background: var(--card); border: 1px solid var(--border);
  border-radius: 18px; box-shadow: var(--shadow); overflow: hidden;
}
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: .85rem 1rem; border-bottom: 1px solid var(--border);
  background: color-mix(in oklab, var(--card) 92%, transparent);
}
.modal-body { padding: 1rem; }
.modal-footer {
  display: flex; justify-content: flex-end; gap: .5rem;
  padding: .85rem 1rem; border-top: 1px solid var(--border);
}

/* Keep the top-left header cell above the scrolling first column */
.table--sticky-first thead th:first-child {
  position: sticky;     /* stick left just like the body cells */
  left: 0;
  z-index: 20;          /* higher than td:first-child */
  background: var(--card);
  box-shadow: 1px 0 0 0 var(--border), 8px 0 12px rgba(0,0,0,.12);
}

/* ---------- Toasts ---------- */
.toast { position: fixed; right: 1rem; bottom: 1rem; z-index: 120; display: grid; gap: .5rem; }
.toast .item {
  background: var(--card); color: var(--ink);
  border: 1px solid var(--border); border-radius: 12px;
  padding: .6rem .8rem; box-shadow: var(--shadow);
  animation: slide-up .2s ease-out both;
}
@keyframes slide-up { from { transform: translateY(6px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* ---------- Helpers / Utilities ---------- */
.hidden { display: none !important; }
.muted { color: var(--muted); }
.center { text-align: center; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.round { border-radius: 999px; }
.danger { color: var(--danger); }
.ok { color: var(--ok); }
.warn { color: var(--warn); }
.border { border: 1px solid var(--border); border-radius: 12px; }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---------- Date Picker ---------- */
input[type="date"] { min-height: 42px; }

/* ---------- Focus rings for links ---------- */
a:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; border-radius: 8px; }

/* ---------- Page footer ---------- */
.footer { margin: 2rem 0 1rem; color: var(--muted); text-align: center; font-size: .9rem; }