/* =========================================================================
   SMARTBILL AI — Design System
   Direction: "Frosted Ledger" — a deep indigo/ink workspace with floating
   glass panels, emerald for money-positive, coral for money-negative, and
   a warm gold signal reserved only for the AI Tutor so it always reads as
   "the intelligent layer" sitting on top of the ledger.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  /* -- palette -- */
  --ink-950:#080B16;
  --ink-900:#0B0F1F;
  --ink-800:#121729;
  --ink-700:#171D34;
  --violet-glow:#4C3BCF;
  --emerald-glow:#0F9D71;

  --glass-fill:rgba(255,255,255,.055);
  --glass-fill-strong:rgba(255,255,255,.09);
  --glass-border:rgba(255,255,255,.14);
  --glass-border-strong:rgba(255,255,255,.24);
  --glass-highlight:rgba(255,255,255,.5);

  --text-hi:#F2F4FC;
  --text-mid:#B9BFDA;
  --text-low:#767CA0;

  --emerald:#3DDC9A;
  --emerald-dim:#1F5E48;
  --coral:#FB7C88;
  --coral-dim:#5A2A34;
  --amber:#F0B84B;
  --indigo:#8B93F8;
  --blue:#5D8FFF;
  --blue-deep:#3D6FE0;
  /* Page-level accent — overridden per module below so each section of the
     app has its own identity. Defaults to blue (dashboard/admin). Scoped
     to page content only; the sidebar/topbar stay visually consistent so
     switching pages feels like "a themed section", not a glitch. */
  --accent:#5D8FFF;
  --accent-deep:#3D6FE0;

  --gold:#F5C451;   /* AI Tutor signature only */
  --gold-glow:rgba(245,196,81,.35);

  --radius-lg:22px;
  --radius-md:14px;
  --radius-sm:9px;

  --font-display:'Space Grotesk', 'Inter', sans-serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'IBM Plex Mono', monospace;

  --ease:cubic-bezier(.22,.8,.28,1);
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--text-hi);
  background:
    radial-gradient(1100px 700px at 12% -10%, rgba(76,59,207,.35), transparent 60%),
    radial-gradient(900px 600px at 110% 10%, rgba(15,157,113,.22), transparent 55%),
    linear-gradient(180deg, var(--ink-950), var(--ink-900) 40%, var(--ink-800));
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}

/* faint grain so the glass doesn't look flat/vector */
body::before{
  content:"";
  position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1,h2,h3,h4{ font-family:var(--font-display); letter-spacing:-.01em; margin:0 0 .3em; color:var(--text-hi); }
h1{font-size:1.7rem; font-weight:700;}
h2{font-size:1.25rem; font-weight:600;}
h3{font-size:1.02rem; font-weight:600;}
p{color:var(--text-mid); line-height:1.55;}
a{color:inherit;}
.mono, .figure{font-family:var(--font-mono); font-variant-numeric:tabular-nums;}

/* -------------------------------------------------------------------- */
/* Layout shell                                                          */
/* -------------------------------------------------------------------- */
.app-shell{ display:flex; min-height:100vh; position:relative; z-index:1; }

.sidebar{
  width:236px; flex-shrink:0; padding:22px 16px;
  background:var(--glass-fill);
  border-right:1px solid var(--glass-border);
  backdrop-filter:blur(22px) saturate(140%);
  -webkit-backdrop-filter:blur(22px) saturate(140%);
  display:flex; flex-direction:column; gap:4px;
}
.sidebar .brand{
  display:flex; align-items:center; gap:10px; padding:6px 10px 22px;
  font-family:var(--font-display); font-weight:700; font-size:1.05rem;
}
.brand .dot{ width:9px;height:9px;border-radius:50%;
  background:conic-gradient(from 90deg, var(--emerald), var(--indigo), var(--gold), var(--emerald));
  box-shadow:0 0 12px var(--gold-glow); }

.nav-item{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:var(--radius-sm);
  color:var(--text-mid); text-decoration:none; font-size:.9rem; font-weight:500;
  transition:background .18s var(--ease), color .18s var(--ease);
}
.nav-item svg{ flex-shrink:0; opacity:.85; }
.nav-item:hover{ background:var(--glass-fill-strong); color:var(--text-hi); }
.nav-item.active{
  background:linear-gradient(135deg, rgba(93,143,255,.20), rgba(139,147,248,.12));
  color:var(--text-hi);
  border:1px solid var(--glass-border-strong);
  box-shadow:0 4px 16px -8px rgba(93,143,255,.45);
}
.nav-item.active svg{ opacity:1; color:var(--blue); }
.nav-section-label{
  font-size:.68rem; text-transform:uppercase; letter-spacing:.08em;
  color:var(--text-low); margin:16px 10px 6px;
}
.sidebar-head{ display:flex; align-items:center; justify-content:space-between; }
.sidebar-close{ display:none; background:none; border:none; color:var(--text-mid); cursor:pointer; padding:6px; }
.sidebar-backdrop{
  display:none; position:fixed; inset:0; background:rgba(5,7,15,.6); backdrop-filter:blur(2px);
  z-index:240; opacity:0; transition:opacity .25s var(--ease);
}
.sidebar-backdrop.open{ display:block; opacity:1; }

.main{ flex:1; min-width:0; padding:26px 30px 90px; position:relative; }

.main-col{ flex:1; min-width:0; display:flex; flex-direction:column; }
.main-col .main{ flex:1; }

/* Collapsed (icon-only) desktop sidebar rail */
.sidebar-collapsed .sidebar{ width:72px; padding:22px 10px; }
.sidebar-collapsed .sidebar .brand span:not(.dot),
.sidebar-collapsed .nav-section-label,
.sidebar-collapsed .nav-item span,
.sidebar-collapsed .sidebar-user-meta{ display:none; }
.sidebar-collapsed .nav-item{ justify-content:center; }
.sidebar-collapsed .sidebar-head{ justify-content:center; }

/* -------------------------------------------------------------------- */
/* Global top bar (persistent across every page)                        */
/* -------------------------------------------------------------------- */
.app-topbar{
  display:flex; align-items:center; gap:16px;
  padding:14px 24px; position:sticky; top:0; z-index:110;
  background:rgba(11,15,31,.72); border-bottom:1px solid var(--glass-border);
  backdrop-filter:blur(20px) saturate(150%); -webkit-backdrop-filter:blur(20px) saturate(150%);
}
.topbar-toggle{
  background:none; border:none; cursor:pointer; padding:2px; border-radius:10px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  transition:transform .15s var(--ease), background .15s var(--ease);
}
.topbar-toggle:hover{ background:var(--glass-fill-strong); }
.topbar-toggle:active{ transform:scale(.9); }
.topbar-toggle img{ border-radius:8px; display:block; }

.topbar-search{
  position:relative; flex:1; max-width:440px; display:flex; align-items:center; gap:8px;
  background:var(--glass-fill); border:1px solid var(--glass-border); border-radius:var(--radius-sm);
  padding:9px 12px; color:var(--text-low); transition:border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.topbar-search:focus-within{ border-color:var(--blue); box-shadow:0 0 0 3px rgba(93,143,255,.15); }
.topbar-search input{
  background:none; border:none; outline:none; color:var(--text-hi); font-size:.86rem; flex:1; min-width:0;
}
.topbar-search input::placeholder{ color:var(--text-low); }
.topbar-search kbd{
  font-family:var(--font-mono); font-size:.68rem; color:var(--text-low);
  border:1px solid var(--glass-border); border-radius:5px; padding:2px 6px; flex-shrink:0;
}
@media (max-width:760px){ .topbar-search kbd{ display:none; } }
@media (max-width:640px){ .topbar-search{ display:none; } }

.global-search-results{
  display:none; position:absolute; top:calc(100% + 6px); left:0; right:0;
  background:var(--surface-1, #12142080); background:rgba(16,18,32,.97);
  border:1px solid var(--glass-border-strong); border-radius:12px; overflow:hidden;
  box-shadow:0 24px 48px -16px rgba(0,0,0,.7); z-index:120;
}
.global-search-results.open{ display:block; }
.global-search-results a{
  display:block; padding:10px 14px; color:var(--text-mid); text-decoration:none; font-size:.85rem;
}
.global-search-results a:hover{ background:var(--glass-fill-strong); color:var(--text-hi); }
.global-search-results .gsr-type{
  display:inline-block; font-size:.65rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  color:var(--text-mid); background:var(--glass-fill-strong); border-radius:5px; padding:1px 6px; margin-right:8px;
  vertical-align:middle;
}
.global-search-results .gsr-loading, .global-search-results .gsr-empty{
  padding:10px 14px; font-size:.8rem; color:var(--text-mid);
}

.topbar-right{ display:flex; align-items:center; gap:10px; margin-left:auto; }
.icon-btn{
  position:relative; width:38px; height:38px; border-radius:11px; border:1px solid var(--glass-border);
  background:var(--glass-fill); color:var(--text-mid); display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:all .15s var(--ease);
}
.icon-btn:hover{ color:var(--text-hi); border-color:var(--glass-border-strong); }
.icon-badge{
  position:absolute; top:-4px; right:-4px; background:var(--coral); color:#280A0D;
  font-size:.62rem; font-weight:700; min-width:16px; height:16px; border-radius:8px;
  display:flex; align-items:center; justify-content:center; padding:0 3px;
}
.topbar-notif{ position:relative; }
.notif-dropdown{
  display:none; position:absolute; right:0; top:calc(100% + 10px); width:300px;
  background:rgba(16,18,32,.98); border:1px solid var(--glass-border-strong); border-radius:14px;
  overflow:hidden; box-shadow:0 24px 48px -16px rgba(0,0,0,.7); z-index:130;
}
.notif-dropdown.open{ display:block; }

.topbar-avatar{ position:relative; }
.avatar-btn{
  display:flex; align-items:center; gap:9px; background:none; border:none; cursor:pointer;
  padding:4px 8px 4px 4px; border-radius:12px; transition:background .15s var(--ease);
}
.avatar-btn:hover{ background:var(--glass-fill-strong); }
.avatar-name-role{ display:flex; flex-direction:column; align-items:flex-start; line-height:1.25; }
.avatar-name-role span{ font-size:.82rem; font-weight:600; color:var(--text-hi); }
.avatar-name-role small{ font-size:.68rem; color:var(--text-low); }
@media (max-width:760px){ .avatar-name-role{ display:none; } }
.avatar-dropdown{
  display:none; position:absolute; right:0; top:calc(100% + 10px); width:180px;
  background:rgba(16,18,32,.98); border:1px solid var(--glass-border-strong); border-radius:14px;
  overflow:hidden; box-shadow:0 24px 48px -16px rgba(0,0,0,.7); z-index:130; padding:6px;
}
.avatar-dropdown.open{ display:block; }
.avatar-dropdown a{
  display:block; padding:9px 10px; border-radius:8px; color:var(--text-mid); text-decoration:none; font-size:.84rem;
}
.avatar-dropdown a:hover{ background:var(--glass-fill-strong); color:var(--text-hi); }

.topbar{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:22px; gap:16px;
}
.topbar .search{
  flex:1; max-width:380px; display:flex; align-items:center; gap:8px;
  padding:9px 14px; border-radius:999px;
  background:var(--glass-fill); border:1px solid var(--glass-border);
  color:var(--text-mid); font-size:.86rem;
}
.topbar .search input{ background:none; border:none; outline:none; color:var(--text-hi); width:100%; font-family:var(--font-body); }

/* -------------------------------------------------------------------- */
/* Glass primitives                                                      */
/* -------------------------------------------------------------------- */
.glass{
  background:var(--glass-fill);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  box-shadow:0 1px 0 var(--glass-highlight) inset, 0 18px 40px -20px rgba(0,0,0,.55);
  position:relative;
}
.glass::before{ /* top hairline sheen */
  content:""; position:absolute; inset:0 0 auto 0; height:1px; border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  background:linear-gradient(90deg, transparent, var(--glass-highlight), transparent); opacity:.5;
}
.glass-card{ padding:20px 22px; }
.glass-panel{ padding:26px; }

/* App-wide entrance polish: panels/cards settle in on page load instead
   of just appearing, and interactive rows get a consistent hover lift —
   small, but it's what makes navigating between pages feel considered
   rather than abrupt on a traditional multi-page app like this one. */
@keyframes mb-fade-rise{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:translateY(0); } }
.glass-panel, .glass-card, .stat-card{ animation:mb-fade-rise .4s var(--ease) both; }
.grid > .stat-card:nth-child(2), .grid > .glass-card:nth-child(2){ animation-delay:.03s; }
.grid > .stat-card:nth-child(3), .grid > .glass-card:nth-child(3){ animation-delay:.06s; }
.grid > .stat-card:nth-child(4), .grid > .glass-card:nth-child(4){ animation-delay:.09s; }
.grid > .stat-card:nth-child(5), .grid > .glass-card:nth-child(5){ animation-delay:.12s; }
.grid > .stat-card:nth-child(6), .grid > .glass-card:nth-child(6){ animation-delay:.15s; }
@media (prefers-reduced-motion: reduce){
  .glass-panel, .glass-card, .stat-card{ animation:none; }
}

.grid{ display:grid; gap:16px; }
.grid-4{ grid-template-columns:repeat(4,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
@media (max-width:980px){ .grid-4,.grid-3{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:640px){
  .grid-4,.grid-3,.grid-2{ grid-template-columns:1fr;}
  .sidebar{
    position:fixed; inset:0 22% 0 0; z-index:250; transform:translateX(-100%);
    transition:transform .28s var(--ease); border-right:1px solid var(--glass-border);
    max-width:300px;
  }
  .sidebar.open{ transform:translateX(0); }
  .sidebar-close{ display:block; }
  .main{ padding:18px 16px 96px; }
  .topbar{ flex-wrap:wrap; }
}
@media (min-width:641px){ .bottom-nav{ display:none; } }

.bottom-nav{
  position:fixed; left:0; right:0; bottom:0; z-index:120;
  display:flex; justify-content:space-around; align-items:center;
  padding:8px 4px calc(8px + env(safe-area-inset-bottom));
  background:rgba(11,15,31,.85); border-top:1px solid var(--glass-border);
  backdrop-filter:blur(20px) saturate(160%); -webkit-backdrop-filter:blur(20px) saturate(160%);
}
.bn-item{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  background:none; border:none; color:var(--text-low); text-decoration:none;
  font-size:.64rem; font-weight:600; padding:4px 8px; border-radius:10px; cursor:pointer;
  transition:color .15s var(--ease), transform .15s var(--ease);
}
.bn-item:active{ transform:scale(.92); }
.bn-item.active{ color:var(--blue); }
.bn-item svg{ pointer-events:none; }

.stat-card{ padding:18px 20px; display:flex; flex-direction:column; gap:8px; }
.stat-card .label{ font-size:.74rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-low); }
.stat-card .value{ font-family:var(--font-mono); font-size:1.5rem; font-weight:500; }
.stat-card .delta{ font-size:.78rem; font-family:var(--font-mono); }
.stat-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.stat-icon{
  width:34px; height:34px; border-radius:10px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.stat-icon.icon-blue{ background:rgba(93,143,255,.16); color:#7EA6FF; }
.stat-icon.icon-green{ background:rgba(61,220,154,.16); color:var(--emerald); }
.stat-icon.icon-amber{ background:rgba(240,184,75,.16); color:var(--amber); }
.stat-icon.icon-violet{ background:rgba(167,139,250,.18); color:#B7A6FF; }
.stat-icon.icon-coral{ background:rgba(251,124,136,.16); color:var(--coral); }
.stat-trend{ font-size:.72rem; font-weight:600; }
.stat-trend.up{ color:var(--emerald); }
.stat-trend.down{ color:var(--coral); }
.delta.up{ color:var(--emerald); } .delta.down{ color:var(--coral); }

/* buttons */
.btn{
  display:inline-flex; align-items:center; gap:7px; justify-content:center;
  padding:9px 16px; border-radius:var(--radius-sm); font-size:.86rem; font-weight:600;
  border:1px solid var(--glass-border-strong); cursor:pointer; text-decoration:none;
  background:var(--glass-fill-strong); color:var(--text-hi);
  transition:transform .15s var(--ease), background .15s var(--ease), box-shadow .15s var(--ease);
}
.btn:hover{ transform:translateY(-1px); background:rgba(255,255,255,.14); }
.btn:active{ transform:translateY(0); }
.btn-primary{ background:linear-gradient(135deg, var(--accent), var(--accent-deep)); border-color:transparent; color:#EFF3FF; }
.btn-primary:hover{ box-shadow:0 8px 22px -8px rgba(93,143,255,.55); }
.btn-danger{ background:linear-gradient(135deg, var(--coral), #C4495A); border-color:transparent; color:#280A0D; }
.btn-ghost{ background:transparent; border-color:var(--glass-border); color:var(--text-mid); }
.btn-sm{ padding:6px 11px; font-size:.78rem; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; transform:none; }

/* forms */
label{ display:block; font-size:.78rem; color:var(--text-mid); margin-bottom:6px; font-weight:500; }
.field{ margin-bottom:16px; }
input[type=text],input[type=email],input[type=password],input[type=number],
input[type=date],input[type=tel],select,textarea{
  width:100%; padding:10px 13px; border-radius:var(--radius-sm);
  background:rgba(255,255,255,.045); border:1px solid var(--glass-border);
  color:var(--text-hi); font-family:var(--font-body); font-size:.9rem; outline:none;
  transition:border-color .15s var(--ease), background .15s var(--ease);
}
input:focus,select:focus,textarea:focus{ border-color:var(--indigo); background:rgba(255,255,255,.07); }
textarea{ resize:vertical; min-height:80px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:640px){ .form-row{grid-template-columns:1fr;} }

/* tables */
.table-wrap{ overflow-x:auto; }
table.ledger{ width:100%; border-collapse:collapse; font-size:.88rem; }
table.ledger th{
  text-align:left; font-size:.7rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--text-low); font-weight:600; padding:0 14px 10px; border-bottom:1px solid var(--glass-border);
}
table.ledger td{ padding:13px 14px; border-bottom:1px solid rgba(255,255,255,.06); vertical-align:middle; }
table.ledger tr:hover td{ background:rgba(255,255,255,.03); }
table.ledger td.num{ font-family:var(--font-mono); }

/* badges */
.badge{ display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:999px; font-size:.72rem; font-weight:600; }
.badge-emerald{ background:rgba(61,220,154,.13); color:var(--emerald); border:1px solid rgba(61,220,154,.3); }
.badge-coral{ background:rgba(251,124,136,.13); color:var(--coral); border:1px solid rgba(251,124,136,.3); }
.badge-amber{ background:rgba(240,184,75,.13); color:var(--amber); border:1px solid rgba(240,184,75,.3); }
.badge-neutral{ background:rgba(255,255,255,.07); color:var(--text-mid); border:1px solid var(--glass-border); }

/* avatar */
.avatar{
  width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:600; font-size:.82rem; color:#04140D;
  background:linear-gradient(135deg, var(--indigo), var(--emerald));
  flex-shrink:0;
}

/* modal */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(5,7,15,.55); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; z-index:200; padding:20px;
}
.modal{ width:100%; max-width:440px; padding:26px; }

/* toast */
.toast-stack{ position:fixed; bottom:22px; left:22px; z-index:300; display:flex; flex-direction:column; gap:10px; }
.toast{ padding:12px 16px; min-width:240px; font-size:.86rem; display:flex; align-items:center; gap:10px; animation:toast-in .25s var(--ease); }
.toast.success{ border-left:3px solid var(--emerald); }
.toast.error{ border-left:3px solid var(--coral); }
@keyframes toast-in{ from{ opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);} }

.empty-state{ text-align:center; padding:50px 20px; color:var(--text-low); }
.empty-state h3{ color:var(--text-mid); margin-bottom:6px; }

.text-muted{ color:var(--text-low); font-size:.82rem; }
.flex{ display:flex; align-items:center; }
.gap-8{gap:8px;} .gap-12{gap:12px;} .gap-16{gap:16px;}
.justify-between{ justify-content:space-between; }

/* -------------------------------------------------------------------- */
/* Modern polish pass                                                    */
/* -------------------------------------------------------------------- */

/* Subtle content fade/rise on every page load — cheap way to make the
   whole app feel less static without touching any page markup. */
.main > *{ animation:page-in .35s var(--ease) both; }
@keyframes page-in{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:translateY(0); } }

/* Gentle lift on interactive glass surfaces so the UI feels responsive
   to touch/cursor, not flat. */
.stat-card, .glass-card{ transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease); }
.stat-card:hover, .glass-card:hover{
  transform:translateY(-2px);
  border-color:var(--glass-border-strong);
  box-shadow:0 1px 0 var(--glass-highlight) inset, 0 24px 48px -22px rgba(0,0,0,.6);
}

/* Accessible, on-brand focus ring everywhere (keyboard nav + mobile taps) */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, .nav-item:focus-visible, .bn-item:focus-visible{
  outline:2px solid var(--gold); outline-offset:2px; border-radius:6px;
}

/* Slightly richer primary button — soft inner sheen + deeper hover glow */
.btn-primary{
  background:linear-gradient(135deg, var(--accent), var(--accent-deep));
  box-shadow:0 1px 0 rgba(255,255,255,.25) inset;
}
.btn-primary:hover{ box-shadow:0 1px 0 rgba(255,255,255,.25) inset, 0 10px 26px -10px rgba(93,143,255,.6); }

/* Themed scrollbars (WebKit + Firefox) so the app never shows a jarring
   default light-grey scrollbar against the dark shell. */
*{ scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.22) transparent; }
*::-webkit-scrollbar{ width:9px; height:9px; }
*::-webkit-scrollbar-track{ background:transparent; }
*::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.16); border-radius:999px; border:2px solid transparent; background-clip:padding-box; }
*::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.28); background-clip:padding-box; }

/* Table rows read as tappable targets on touch devices */
table.ledger tr{ transition:background .15s var(--ease); }

/* Search input focus glow to match the rest of the system */
.topbar .search:focus-within{ border-color:var(--indigo); box-shadow:0 0 0 3px rgba(139,147,248,.15); }

/* Skeleton loading block, for any page that wants a loading placeholder
   instead of a layout jump once data streams in. */
.skeleton{
  border-radius:var(--radius-sm); background:linear-gradient(100deg, rgba(255,255,255,.05) 30%, rgba(255,255,255,.12) 50%, rgba(255,255,255,.05) 70%);
  background-size:200% 100%; animation:skeleton-sheen 1.4s ease-in-out infinite;
}
@keyframes skeleton-sheen{ from{ background-position:150% 0; } to{ background-position:-50% 0; } }

@media (prefers-reduced-motion: reduce){
  .main > *{ animation:none; }
  .skeleton{ animation:none; }
  .stat-card, .glass-card, .btn{ transition:none; }
}

/* -------------------------------------------------------------------- */
/* Per-module accent colors — gives each section its own identity        */
/* while the sidebar/topbar (shared chrome) stay visually consistent.    */
/* -------------------------------------------------------------------- */
body[data-page^="invoice"]      { --accent:#5D8FFF; --accent-deep:#3D6FE0; } /* blue   — billing   */
body[data-page^="product"]      { --accent:#B78CFF; --accent-deep:#8B5CF6; } /* violet — catalog   */
body[data-page="inventory"]     { --accent:#F0B84B; --accent-deep:#C98A1E; } /* amber  — stock     */
body[data-page^="customer"]     { --accent:#3DDC9A; --accent-deep:#16A672; } /* emerald— people    */
body[data-page="payments"]      { --accent:#22D3EE; --accent-deep:#0E9AAE; } /* cyan   — money in  */
body[data-page="reports"]       { --accent:#FF8FCB; --accent-deep:#E0559E; } /* pink   — analytics */
body[data-page="expenses"]      { --accent:#FB7C88; --accent-deep:#D94A57; } /* coral  — money out */
body[data-page="sales"]         { --accent:#FF9F5A; --accent-deep:#E67A2E; } /* orange — quick sale*/
body[data-page="subscriptions"] { --accent:#B78CFF; --accent-deep:#8B5CF6; } /* violet — premium   */
/* dashboard and admin_* pages keep the default blue — deliberately
   neutral since they're "home base" / operational screens. */

.stat-icon.icon-accent{ background:color-mix(in srgb, var(--accent) 18%, transparent); color:var(--accent); }

/* -------------------------------------------------------------------- */
/* Per-module color theming                                             */
/* Each section of the app gets its own accent so the UI reads as a     */
/* set of distinct, purposeful modules rather than one flat color       */
/* everywhere — while staying within the same dark/glass system.        */
/* -------------------------------------------------------------------- */
body{ --page-accent: var(--blue); --page-accent-deep: var(--blue-deep); }

body[data-page="customers"], body[data-page="customer_view"], body[data-page="customer_add"],
body[data-page="customer_edit"], body[data-page="customer_statement"]{
  --page-accent:#2DD4BF; --page-accent-deep:#0F9488;
}
body[data-page="products"], body[data-page="products_add"]{
  --page-accent:#B78CFF; --page-accent-deep:#8B5CF6;
}
body[data-page="invoices"], body[data-page="invoice_add"], body[data-page="invoice_view"]{
  --page-accent:#818CF8; --page-accent-deep:#4F46E5;
}
body[data-page="payments"]{
  --page-accent:#34D399; --page-accent-deep:#059669;
}
body[data-page="inventory"]{
  --page-accent:#F0B84B; --page-accent-deep:#C6912A;
}
body[data-page="reports"]{
  --page-accent:#FB7BB0; --page-accent-deep:#DB4E88;
}
body[data-page="sales"]{
  --page-accent:#FB923C; --page-accent-deep:#EA6A0F;
}
body[data-page="expenses"]{
  --page-accent:#FB7C88; --page-accent-deep:#DB4A57;
}
body[data-page="subscriptions"]{
  --page-accent:#F5C451; --page-accent-deep:#C99A1E;
}
body[data-page^="admin_"]{
  --page-accent:#94A3B8; --page-accent-deep:#64748B;
}

/* Wire the accent variable into the components that should reflect it. */
.nav-item.active{
  background:linear-gradient(135deg, color-mix(in srgb, var(--page-accent) 22%, transparent), rgba(139,147,248,.08));
  border-color:var(--glass-border-strong);
  box-shadow:0 4px 16px -8px color-mix(in srgb, var(--page-accent) 45%, transparent);
}
.nav-item.active svg{ color:var(--page-accent); }
.bn-item.active{ color:var(--page-accent); }
.btn-primary{
  background:linear-gradient(135deg, var(--page-accent), var(--page-accent-deep));
}
.btn-primary:hover{ box-shadow:0 1px 0 rgba(255,255,255,.25) inset, 0 10px 26px -10px color-mix(in srgb, var(--page-accent) 60%, transparent); }
.topbar .search:focus-within, .topbar-search:focus-within{
  border-color:var(--page-accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--page-accent) 15%, transparent);
}
h1{ position:relative; }
.main h1:first-of-type::after{
  content:""; display:block; width:44px; height:3px; border-radius:2px; margin-top:8px;
  background:linear-gradient(90deg, var(--page-accent), transparent);
}

/* Fallback for browsers without color-mix() support (older WebViews) —
   slightly less precise but never breaks layout. */
@supports not (color: color-mix(in srgb, red 50%, blue)){
  .nav-item.active{ background:linear-gradient(135deg, rgba(129,140,248,.2), rgba(139,147,248,.08)); }
  .btn-primary:hover{ box-shadow:0 1px 0 rgba(255,255,255,.25) inset, 0 10px 26px -10px rgba(93,143,255,.5); }
  .topbar .search:focus-within, .topbar-search:focus-within{ box-shadow:0 0 0 3px rgba(93,143,255,.15); }
}

/* =========================================================================
   ADVANCED MODULES + LIGHT THEME — Sep 2026 refresh.
   Everything above this line is untouched (the "Frosted Ledger" system);
   this block only ADDS: a light theme variant, the topbar Quick Sale
   button + theme toggle, and small components used by the new dashboard
   panels (Cash Flow, Payment Methods donut) and new modules (Warehouses,
   Purchase Orders, Accounts, Smart Reordering, Advanced POS, receipts).
   ========================================================================= */

/* ---- Light theme — toggled via <html data-theme="light"> ---- */
html[data-theme="light"]{
  --ink-950:#F4F6FB; --ink-900:#EAEEF7; --ink-800:#FFFFFF; --ink-700:#FFFFFF;
  --glass-fill:rgba(20,25,45,.045); --glass-fill-strong:rgba(20,25,45,.08);
  --glass-border:rgba(20,25,45,.10); --glass-border-strong:rgba(20,25,45,.18);
  --text-hi:#151A2E; --text-mid:#4B5273; --text-low:#828AAE;
}
html[data-theme="light"] body{
  background:
    radial-gradient(1100px 700px at 12% -10%, rgba(93,143,255,.12), transparent 60%),
    radial-gradient(900px 600px at 110% 10%, rgba(15,157,113,.10), transparent 55%),
    linear-gradient(180deg, var(--ink-950), var(--ink-900) 40%, var(--ink-800));
}
html[data-theme="light"] body::before{ opacity:.02; }
html[data-theme="light"] .glass, html[data-theme="light"] .glass-panel, html[data-theme="light"] .glass-card,
html[data-theme="light"] .stat-card, html[data-theme="light"] .sidebar, html[data-theme="light"] .app-topbar{
  background:rgba(255,255,255,.75); box-shadow:0 1px 2px rgba(20,25,45,.04);
}
html[data-theme="light"] .icon-btn, html[data-theme="light"] .btn-ghost{ color:var(--text-mid); }

/* ---- Topbar: Quick Sale button + theme toggle ---- */
.topbar-quicksale{ white-space:nowrap; text-decoration:none; }
.theme-toggle{ position:relative; }
.theme-icon-light{ display:none; }
html[data-theme="light"] .theme-icon-dark{ display:none; }
html[data-theme="light"] .theme-icon-light{ display:block; }

/* ---- Stat cards: solid colour badge (matches the modernized dashboard
   mock) layered on top of the existing tinted-background classes, so
   nothing that already reads .stat-icon.icon-xxx elsewhere breaks. ---- */
.stat-icon{ box-shadow:0 4px 10px -4px rgba(0,0,0,.35); }
.stat-icon.icon-blue{ background:#3B82F6; color:#fff; }
.stat-icon.icon-violet{ background:#8B5CF6; color:#fff; }
.stat-icon.icon-green{ background:#10B981; color:#fff; }
.stat-icon.icon-coral{ background:#EF4444; color:#fff; }
.stat-icon.icon-accent{ background:#3B82F6; color:#fff; }
.stat-icon.icon-amber{ background:#F59E0B; color:#fff; }

/* ---- Cash Flow panel ---- */
.cashflow-row{ display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-top:1px solid var(--glass-border); font-size:.86rem; }
.cashflow-row:first-child{ border-top:none; }
.cashflow-row strong{ font-family:var(--font-mono); font-size:.95rem; }

/* ---- Payment Methods donut + legend ---- */
.donut-wrap{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.donut-legend{ flex:1; min-width:140px; display:flex; flex-direction:column; gap:8px; }
.donut-legend-row{ display:flex; align-items:center; gap:8px; font-size:.8rem; }
.donut-legend-dot{ width:10px; height:10px; border-radius:3px; flex-shrink:0; }
.donut-legend-row .pct{ margin-left:auto; font-family:var(--font-mono); color:var(--text-mid); }

/* ---- AI snapshot / insight list (dashboard "Business Snapshot (AI)") ---- */
.snapshot-list{ list-style:none; margin:0 0 14px; padding:0; display:flex; flex-direction:column; gap:8px; }
.snapshot-list li{ display:flex; align-items:flex-start; gap:8px; font-size:.83rem; color:var(--text-mid); }
.snapshot-dot{ width:8px; height:8px; border-radius:50%; margin-top:5px; flex-shrink:0; }
.snapshot-dot.ok{ background:var(--emerald); }
.snapshot-dot.warn{ background:var(--amber); }
.snapshot-dot.bad{ background:var(--coral); }
.snapshot-dot.info{ background:var(--blue); }

/* ---- Smart Alerts panel rows with a coloured icon square ---- */
.alert-row{ display:flex; align-items:center; gap:10px; padding:9px 0; border-top:1px solid var(--glass-border); text-decoration:none; color:inherit; font-size:.84rem; }
.alert-row:first-child{ border-top:none; }
.alert-icon-sq{ width:30px; height:30px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.alert-row .count{ margin-left:auto; font-weight:700; font-family:var(--font-mono); }

/* ---- Forecast / reorder urgency pills (Smart Reordering page) ---- */
.urgency-pill{ display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:999px; font-size:.72rem; font-weight:600; }
.urgency-pill.critical{ background:rgba(239,68,68,.14); color:#EF4444; border:1px solid rgba(239,68,68,.3); }
.urgency-pill.warning{ background:rgba(245,158,11,.14); color:#F59E0B; border:1px solid rgba(245,158,11,.3); }
.urgency-pill.ok{ background:rgba(16,185,129,.14); color:#10B981; border:1px solid rgba(16,185,129,.3); }

/* ---- Simple modern data table used by the new module list pages ---- */
.table-modern{ width:100%; border-collapse:collapse; font-size:.85rem; }
.table-modern th{ text-align:left; font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-low); padding:8px 10px; border-bottom:1px solid var(--glass-border); }
.table-modern td{ padding:10px; border-bottom:1px solid var(--glass-border); vertical-align:middle; }
.table-modern tr:last-child td{ border-bottom:none; }
.table-modern tr:hover td{ background:var(--glass-fill); }

/* ---- Quick action grid (bottom of dashboard, matches mockup's 8-tile row) ---- */
.quick-actions-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px; }
.quick-actions-grid a{
  display:flex; flex-direction:column; gap:4px; padding:14px; border-radius:var(--radius-md);
  background:var(--glass-fill); border:1px solid var(--glass-border); text-decoration:none; color:var(--text-hi);
  transition:background .18s var(--ease), transform .18s var(--ease);
}
.quick-actions-grid a:hover{ background:var(--glass-fill-strong); transform:translateY(-2px); }
.quick-actions-grid .qa-icon{ width:30px; height:30px; border-radius:9px; display:flex; align-items:center; justify-content:center; }
.quick-actions-grid .qa-label{ font-size:.82rem; font-weight:600; }
.quick-actions-grid .qa-sub{ font-size:.7rem; color:var(--text-low); }

/* ---- Printable receipts (invoices/receipt.php) ---- */
.receipt-paper{ max-width:380px; margin:0 auto; background:#fff; color:#111; border-radius:10px; padding:22px; font-family:var(--font-mono); }
.receipt-paper h2{ color:#111; }
.receipt-paper .receipt-line{ display:flex; justify-content:space-between; font-size:.82rem; padding:3px 0; }
.receipt-paper hr{ border:none; border-top:1px dashed #999; margin:10px 0; }
@media print{
  body *{ visibility:hidden; }
  .receipt-paper, .receipt-paper *{ visibility:visible; }
  .receipt-paper{ position:absolute; top:0; left:0; width:100%; max-width:100%; box-shadow:none; }
  .no-print{ display:none !important; }
}