/* VidyaCloud ERP — design system (vanilla CSS, no build). */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/inter-400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/inter-500.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/inter-600.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/inter-700.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/inter-800.woff2") format("woff2"); }
:root {
  --erp-primary: #1B5BD7; --erp-primary-d: #1449ad; --erp-secondary: #0EA5A4;
  --erp-ink: #0F1B2D; --erp-muted: #5B6B82; --erp-bg: #F4F6FB; --erp-card: #fff;
  --erp-line: #E3E9F2; --erp-ok: #16A34A; --erp-warn: #D97706; --erp-danger: #DC2626;
  --erp-info: #0284C7; --erp-radius: 12px; --erp-shadow: 0 8px 24px rgba(15,27,45,.08);
  --erp-side-w: 248px;
}
[data-theme="dark"] {
  --erp-ink: #E8EEF7; --erp-muted: #9AA8BF; --erp-bg: #0B1220; --erp-card: #121C31;
  --erp-line: #22304A; --erp-shadow: 0 8px 24px rgba(0,0,0,.4);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 15px/1.55 "Inter", "Segoe UI", system-ui, -apple-system, Roboto, "Noto Sans", Arial, sans-serif; background: var(--erp-bg); color: var(--erp-ink); }
/* inline SVG icon set (core/icons.php → icon()) */
svg.i { width: 1em; height: 1em; display: inline-block; vertical-align: -0.14em; flex: none; }
a { color: var(--erp-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { margin: .2em 0 .5em; line-height: 1.25; }
.muted { color: var(--erp-muted); } .small { font-size: .85em; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 20px; }

/* layout */
.layout { display: flex; min-height: 100vh; }
.sidebar { width: var(--erp-side-w); flex: 0 0 var(--erp-side-w); background: var(--erp-card); border-right: 1px solid var(--erp-line); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.brand { display: flex; align-items: center; gap: 10px; padding: 16px; font-weight: 800; font-size: 1.05rem; border-bottom: 1px solid var(--erp-line); }
.brand .logo { width: 34px; height: 34px; border-radius: 9px; background: linear-gradient(135deg, var(--erp-primary), var(--erp-secondary)); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 900; }
.nav { padding: 10px; overflow-y: auto; flex: 1; }
.nav .sec { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--erp-muted); padding: 12px 10px 4px; }
.nav a { display: flex; gap: 10px; align-items: center; padding: 9px 10px; border-radius: 8px; color: var(--erp-ink); font-weight: 500; }
.nav a:hover { background: var(--erp-bg); text-decoration: none; }
.nav a.on { background: var(--erp-primary); color: #fff; }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 20; background: var(--erp-card); border-bottom: 1px solid var(--erp-line); padding: 10px 20px; display: flex; align-items: center; gap: 12px; }
.topbar .sp { flex: 1; }
.content { padding: 20px; max-width: 1240px; width: 100%; margin: 0 auto; }
.hamb { display: none; border: 1px solid var(--erp-line); background: var(--erp-card); border-radius: 8px; padding: 6px 10px; font-size: 1.1rem; cursor: pointer; color: var(--erp-ink); }

/* cards + grids */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin: 14px 0; }
.card { background: var(--erp-card); border: 1px solid var(--erp-line); border-radius: var(--erp-radius); box-shadow: var(--erp-shadow); padding: 16px; }
.kpi .n { font-size: 1.7rem; font-weight: 800; }
.kpi .l { color: var(--erp-muted); font-size: .85rem; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 900px) { .grid2 { grid-template-columns: 1fr; } }

/* tables */
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 12px 0; }
.toolbar .sp { flex: 1; }
.table-wrap { overflow-x: auto; background: var(--erp-card); border: 1px solid var(--erp-line); border-radius: var(--erp-radius); }
table.tbl { width: 100%; border-collapse: collapse; min-width: 640px; }
.tbl th, .tbl td { padding: 10px 12px; border-bottom: 1px solid var(--erp-line); text-align: left; vertical-align: middle; }
.tbl th { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--erp-muted); background: rgba(127,140,160,.08); white-space: nowrap; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tr:hover td { background: rgba(27,91,215,.04); }
.pager { display: flex; gap: 6px; align-items: center; margin: 14px 0; flex-wrap: wrap; }
.pg { border: 1px solid var(--erp-line); background: var(--erp-card); color: var(--erp-ink); border-radius: 8px; padding: 6px 11px; font-size: .9rem; }
a.pg:hover { text-decoration: none; border-color: var(--erp-primary); }
.pg.on { background: var(--erp-primary); color: #fff; border-color: var(--erp-primary); }
.pg.dis { opacity: .45; }

/* forms */
.form-card { background: var(--erp-card); border: 1px solid var(--erp-line); border-radius: var(--erp-radius); padding: 20px; max-width: 860px; }
.frow { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.frow1 { display: grid; grid-template-columns: 1fr; gap: 12px; }
.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 4px; }
.field label { font-weight: 600; font-size: .9rem; }
.field .req { color: var(--erp-danger); }
input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="tel"], input[type="color"], select, textarea { border: 1px solid var(--erp-line); border-radius: 9px; padding: 9px 11px; font: inherit; background: var(--erp-card); color: var(--erp-ink); width: 100%; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--erp-primary); outline-offset: 0; border-color: var(--erp-primary); }
input.bad, select.bad, textarea.bad { border-color: var(--erp-danger); }
.err { color: var(--erp-danger); font-size: .83rem; }
.form-err { background: #FDECEC; border: 1px solid #F5C2C2; color: #8f1d1d; border-radius: 9px; padding: 10px 12px; margin-bottom: 12px; }
[data-theme="dark"] .form-err { background: #3a1414; border-color: #7a2a2a; color: #ffd7d7; }
@media (max-width: 700px) { .frow { grid-template-columns: 1fr; } }

/* buttons + badges */
.btn { display: inline-flex; align-items: center; gap: 7px; border: 1px solid transparent; border-radius: 9px; padding: 9px 15px; font: inherit; font-weight: 600; cursor: pointer; background: var(--erp-primary); color: #fff; white-space: nowrap; }
.btn:hover { background: var(--erp-primary-d); text-decoration: none; color: #fff; }
.btn.ghost { background: transparent; border-color: var(--erp-line); color: var(--erp-ink); }
.btn.ghost:hover { border-color: var(--erp-primary); color: var(--erp-primary); }
.btn.danger { background: var(--erp-danger); }
.btn.warn { background: var(--erp-warn); }
.btn.ok { background: var(--erp-ok); }
.btn.sm { padding: 5px 10px; font-size: .85rem; border-radius: 7px; }
.badge { display: inline-block; padding: 2px 9px; border-radius: 99px; font-size: .76rem; font-weight: 700; background: #E7EDF5; color: #33415C; }
[data-theme="dark"] .badge { background: #22304A; color: #D6E2F2; }
.badge.ok { background: #DDF7E6; color: #0d6e30; } .badge.warn { background: #FFF1D6; color: #8a5a00; }
.badge.danger { background: #FDE3E3; color: #a11; } .badge.info { background: #DDF0FD; color: #075985; }
[data-theme="dark"] .badge.ok { background: #0f3d22; color: #b7f0cd; } [data-theme="dark"] .badge.warn { background: #4a3205; color: #ffe1a8; }
[data-theme="dark"] .badge.danger { background: #4a1414; color: #ffc9c9; } [data-theme="dark"] .badge.info { background: #0b3a52; color: #bfe6ff; }

/* toast + empty */
#toast { position: fixed; right: 18px; bottom: 18px; z-index: 99; display: flex; flex-direction: column; gap: 8px; }
.toast { background: var(--erp-ink); color: var(--erp-bg); border-radius: 10px; padding: 11px 15px; box-shadow: var(--erp-shadow); font-weight: 600; max-width: 340px; animation: slidein .25s ease; }
.toast.success { background: var(--erp-ok); color: #fff; } .toast.error { background: var(--erp-danger); color: #fff; }
.toast.warning { background: var(--erp-warn); color: #fff; } .toast.info { background: var(--erp-info); color: #fff; }
@keyframes slidein { from { transform: translateY(12px); opacity: 0; } }
.empty { text-align: center; padding: 34px 10px; color: var(--erp-muted); }
.empty .big { font-size: 2.2rem; }

/* auth pages */
.auth-wrap { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; }
.auth-side { background: linear-gradient(140deg, #123a8f, #1B5BD7 55%, #0EA5A4); color: #fff; padding: 48px; display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.auth-logo { margin-bottom: 6px; }
.auth-logo .brand-mark { width: 46px; height: 46px; font-size: 1.4rem; box-shadow: 0 8px 22px rgba(0,0,0,.18); }
.auth-side h1 { font-size: 2rem; margin: 0; }
.auth-box { display: flex; align-items: center; justify-content: center; padding: 30px; }
.auth-card { width: 100%; max-width: 400px; background: var(--erp-card); border: 1px solid var(--erp-line); border-radius: 16px; box-shadow: var(--erp-shadow); padding: 28px; }
@media (max-width: 860px) { .auth-wrap { grid-template-columns: 1fr; } .auth-side { display: none; } }

/* timeline */
.tl { list-style: none; margin: 0; padding: 0; }
.tl li { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--erp-line); }
.tl li:last-child { border-bottom: 0; }
.tl .ic { font-size: 1.2rem; } .tl .at { color: var(--erp-muted); font-size: .82rem; }

/* profile header */
.phead { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.avatar { width: 74px; height: 74px; border-radius: 50%; background: linear-gradient(135deg, var(--erp-primary), var(--erp-secondary)); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.7rem; font-weight: 800; }

/* responsive sidebar */
@media (max-width: 960px) {
  .sidebar { position: fixed; left: 0; top: 0; z-index: 50; transform: translateX(-105%); transition: transform .2s ease; box-shadow: var(--erp-shadow); }
  body.nav-open .sidebar { transform: none; }
  .hamb { display: inline-block; }
}
@media print {
  .sidebar, .topbar, .toolbar, .pager, #toast, .no-print { display: none !important; }
  body { background: #fff; } .card, .table-wrap, .form-card { box-shadow: none; }
}

/* ---- Phase 3+4 components ---- */
.cols { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; align-items: start; }
@media (max-width: 900px) { .cols { grid-template-columns: 1fr; } }
.card.narrow { max-width: 640px; }
.card.stat .num { font-size: 1.7rem; font-weight: 800; }
.card.stat .num.small { font-size: 1.15rem; }
.card.stat .lbl { color: var(--erp-muted); font-size: .85rem; }
.card.unread { border-left: 4px solid var(--erp-primary); }
.badge.bad { background: #FBDADA; color: #a11212; }
.badge.info { background: #D9EBFF; color: #174a94; }
.badge.muted { background: rgba(127,140,160,.18); color: var(--erp-muted); }
[data-theme="dark"] .badge.bad { background: #4a1414; color: #ffc9c9; }
[data-theme="dark"] .badge.info { background: #12294a; color: #bcd7ff; }
/* segmented radio control (attendance marking) */
.seg { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.seg label { cursor: pointer; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span { display: inline-block; min-width: 34px; text-align: center; padding: 5px 8px; border: 1px solid var(--erp-line); border-radius: 8px; font-size: .8rem; background: var(--erp-card); }
.seg input:checked + span { background: var(--erp-primary); color: #fff; border-color: var(--erp-primary); font-weight: 700; }
.seg input:focus-visible + span { outline: 2px solid var(--erp-secondary); }
/* monthly register matrix */
.tbl.reg th, .tbl.reg td { padding: 6px 4px; text-align: center; font-size: .78rem; }
.tbl.reg th.hol { color: #a11212; }
td.att-present { color: #0d6e30; font-weight: 700; }
td.att-absent { color: #a11212; font-weight: 700; }
td.att-half_day, td.att-late { color: #8a5a00; font-weight: 700; }
td.att-leave { color: #174a94; }
td.att-h { color: #a11212; background: rgba(161,18,18,.08); }
/* printable fee receipt */
.receipt { max-width: 700px; margin: 0 auto; }
@media print { .receipt { border: 0; } }

/* =========================================================
   V7 UI REFRESH — clean admin/school dashboard system
   No build step. Uses the existing VidyaCloud variables and
   preserves all legacy components above this section.
   ========================================================= */
:root {
  --vc-sidebar: #14263a;
  --vc-sidebar-2: #0e1d2e;
  --vc-sidebar-text: #d8e2ef;
  --vc-sidebar-muted: #8191a7;
  --vc-blue-soft: #edf5ff;
  --vc-green-soft: #edf9f2;
  --vc-red-soft: #fff0f0;
  --vc-yellow-soft: #fff8e9;
  --vc-purple-soft: #f5f0ff;
  --vc-teal: #0f9f82;
}

html { scroll-behavior: smooth; }
body { background: #f6f8fc; }
[data-theme="dark"] body { background: #0a1220; }

.layout { min-height: 100vh; }
.sidebar {
  width: 252px; flex-basis: 252px; background: linear-gradient(180deg, var(--vc-sidebar), var(--vc-sidebar-2));
  border-right: 0; color: var(--vc-sidebar-text); box-shadow: 10px 0 30px rgba(15,27,45,.06); z-index: 60;
}
.brand { min-height: 72px; padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,.08); color: #fff; }
.brand-mark { width: 40px; height: 40px; border-radius: 12px; display:flex; align-items:center; justify-content:center; background: linear-gradient(135deg,#1685ff,#36c4ff); color:#fff; font-size:1.25rem; font-weight:900; box-shadow: 0 7px 18px rgba(22,133,255,.28); }
.brand-copy { min-width: 0; display:flex; flex-direction:column; line-height:1.15; }
.brand-copy strong { font-size:1rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.brand-copy small { margin-top:4px; color:#8fa2b9; font-size:.67rem; font-weight:500; white-space:nowrap; }
.nav { padding: 10px 10px 22px; }
.nav-section { padding: 16px 10px 6px; color: var(--vc-sidebar-muted); font-size:.66rem; font-weight:800; text-transform:uppercase; letter-spacing:.12em; }
.nav-item { min-height:39px; margin:2px 0; padding:8px 11px !important; border-radius:9px !important; color:var(--vc-sidebar-text) !important; font-size:.86rem; font-weight:550 !important; transition:background .15s ease, color .15s ease, transform .15s ease; }
.nav-item:hover { background:rgba(255,255,255,.07) !important; color:#fff !important; text-decoration:none !important; }
.nav-item.on { background:linear-gradient(90deg,#1283f7,#0f72e3) !important; color:#fff !important; box-shadow:0 7px 18px rgba(18,131,247,.22); }
.nav-icon { width:22px; text-align:center; flex:0 0 22px; font-size:1rem; color:#9fb2c8; }
.nav-item.on .nav-icon, .nav-item:hover .nav-icon { color:#fff; }
.nav-form { margin:3px 0; padding:0 2px; }
.nav-platform-btn { width:100%; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04); color:#d7e3f1; border-radius:9px; padding:8px 10px; text-align:left; cursor:pointer; }
.nav-platform-btn:hover { background:rgba(255,255,255,.09); }

.main { min-width:0; }
.topbar { height:72px; min-height:72px; padding:10px 22px; background:rgba(255,255,255,.96); border-bottom:1px solid #e7ecf3; gap:12px; backdrop-filter:blur(10px); }
[data-theme="dark"] .topbar { background:rgba(18,28,49,.96); border-color:#22304a; }
.topbar-spacer { flex:1; min-width:10px; }
.hamb { display:none; width:40px; height:40px; padding:0; border-radius:10px; background:var(--erp-card); }
.scope-pill { display:flex; align-items:center; gap:9px; min-width:250px; max-width:360px; padding:7px 11px; border:1px solid #e2e8f0; background:#fff; border-radius:10px; color:var(--erp-ink); text-decoration:none !important; }
[data-theme="dark"] .scope-pill { background:#121c31; border-color:#2a3953; }
.scope-pill:hover { border-color:var(--erp-primary); }
.scope-icon { width:30px; height:30px; border-radius:8px; display:grid; place-items:center; background:var(--vc-blue-soft); color:var(--erp-primary); font-weight:800; }
.scope-pill > span:nth-child(2) { min-width:0; display:flex; flex-direction:column; line-height:1.15; }
.scope-pill strong { font-size:.82rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.scope-pill small { margin-top:3px; color:var(--erp-muted); font-size:.68rem; }
.scope-pill > b { margin-left:auto; color:var(--erp-muted); }
.global-search { width:min(330px,32vw); height:40px; display:flex; align-items:center; gap:8px; border:1px solid #e0e6ef; background:#f8fafc; border-radius:10px; padding:0 10px; color:#7c8ba1; }
[data-theme="dark"] .global-search { background:#0f192a; border-color:#293952; }
.global-search input { min-width:0; flex:1; border:0 !important; outline:0 !important; background:transparent !important; color:var(--erp-ink); padding:0 !important; }
.global-search kbd { font-size:.65rem; padding:2px 5px; border:1px solid var(--erp-line); border-radius:5px; color:var(--erp-muted); background:var(--erp-card); }
.top-icon { position:relative; width:40px; height:40px; display:grid; place-items:center; border:1px solid #e2e8f0; background:#fff; border-radius:10px; color:var(--erp-ink); font-size:1rem; text-decoration:none !important; cursor:pointer; }
[data-theme="dark"] .top-icon { background:#121c31; border-color:#2a3953; }
.top-icon:hover { color:var(--erp-primary); border-color:var(--erp-primary); }
.top-icon em { position:absolute; top:-5px; right:-5px; min-width:17px; height:17px; padding:0 4px; display:grid; place-items:center; border-radius:99px; background:#ef4444; color:#fff; font-size:.58rem; font-style:normal; font-weight:800; border:2px solid #fff; }
[data-theme="dark"] .top-icon em { border-color:#121c31; }
.profile-chip { height:42px; display:flex; align-items:center; gap:8px; min-width:140px; padding:3px 7px 3px 4px; color:var(--erp-ink); text-decoration:none !important; border-radius:10px; }
.profile-chip:hover { background:var(--erp-bg); }
.profile-avatar { width:34px; height:34px; border-radius:50%; display:grid; place-items:center; color:#fff; font-weight:800; background:linear-gradient(135deg,#1d70df,#19a9a5); }
.profile-chip > span:nth-child(2) { min-width:0; display:flex; flex-direction:column; line-height:1.15; }
.profile-chip strong { font-size:.78rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.profile-chip small { margin-top:3px; color:var(--erp-muted); font-size:.66rem; }
.profile-chip > b { color:var(--erp-muted); }
.logout-form { margin:0; }
.content { max-width:none; padding:24px 28px 40px; }

/* Dashboard */
.dashboard-hero { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:18px; }
.hero-copy { display:flex; align-items:center; gap:14px; }
.hero-icon { width:50px; height:50px; display:grid; place-items:center; border-radius:50%; background:#fff3c4; color:#eaa800; font-size:1.65rem; box-shadow:0 5px 16px rgba(234,168,0,.12); }
.hero-copy .eyebrow { color:var(--erp-primary); font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.11em; margin-bottom:3px; }
.hero-copy h1 { margin:0; font-size:1.65rem; letter-spacing:-.02em; }
.hero-copy p { margin:4px 0 0; color:var(--erp-muted); font-size:.86rem; }
.hero-date { display:flex; align-items:center; gap:10px; padding:9px 0 9px 18px; border-left:1px solid var(--erp-line); min-width:230px; }
.hero-date-icon { width:34px; height:34px; display:grid; place-items:center; border-radius:9px; background:var(--vc-blue-soft); color:var(--erp-primary); }
.hero-date div { display:flex; flex-direction:column; }
.hero-date strong { font-size:.78rem; }
.hero-date small { margin-top:3px; color:var(--erp-muted); font-size:.68rem; }
.dashboard-kpis { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; margin-bottom:14px; }
.dashboard-kpi { min-width:0; min-height:116px; position:relative; padding:15px 15px 13px; border:1px solid transparent; border-radius:11px; display:grid; grid-template-columns:40px 1fr; column-gap:10px; align-content:center; color:var(--erp-ink); text-decoration:none !important; overflow:hidden; }
.dashboard-kpi:hover { transform:translateY(-1px); box-shadow:0 9px 22px rgba(15,27,45,.07); }
.dashboard-kpi .kpi-icon { grid-row:1 / span 3; width:40px; height:40px; display:grid; place-items:center; border-radius:10px; font-weight:900; font-size:1.05rem; }
.dashboard-kpi .kpi-label { font-size:.72rem; font-weight:700; color:#506079; }
[data-theme="dark"] .dashboard-kpi .kpi-label { color:#a9b7ca; }
.dashboard-kpi strong { font-size:1.35rem; line-height:1.2; letter-spacing:-.025em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dashboard-kpi .kpi-meta { font-size:.66rem; color:var(--erp-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kpi-blue { background:#eff7ff; border-color:#d8eaff; } .kpi-blue .kpi-icon { background:#d9ecff; color:#1877df; }
.kpi-green { background:#effbf3; border-color:#d8f0df; } .kpi-green .kpi-icon { background:#d7f3e1; color:#13a15d; }
.kpi-red { background:#fff2f2; border-color:#f7dede; } .kpi-red .kpi-icon { background:#ffe0e0; color:#e43e3e; }
.kpi-yellow { background:#fff9ec; border-color:#f5e7c4; } .kpi-yellow .kpi-icon { background:#ffedc3; color:#db9800; }
.kpi-purple { background:#f6f1ff; border-color:#e6dcff; } .kpi-purple .kpi-icon { background:#e8ddff; color:#7547db; }
[data-theme="dark"] .kpi-blue { background:#11253d; border-color:#1b395a; } [data-theme="dark"] .kpi-green { background:#102c21; border-color:#1c4935; } [data-theme="dark"] .kpi-red { background:#341d23; border-color:#512b33; } [data-theme="dark"] .kpi-yellow { background:#302817; border-color:#4b3b1d; } [data-theme="dark"] .kpi-purple { background:#261d3a; border-color:#3d2f5d; }

.dashboard-grid { display:grid; gap:12px; margin-bottom:12px; }
.dashboard-grid-top { grid-template-columns:1.35fr 1fr 1.1fr; }
.dashboard-grid-lists { grid-template-columns:1.08fr 1.08fr .82fr; }
.dashboard-grid-bottom { grid-template-columns:1.2fr 1fr; }
.dash-card { min-width:0; background:var(--erp-card); border:1px solid var(--erp-line); border-radius:11px; box-shadow:0 4px 16px rgba(15,27,45,.035); padding:15px; }
.dash-card-head { min-height:28px; display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.dash-card-head > div { display:flex; align-items:center; gap:8px; min-width:0; }
.dash-card-head h2 { margin:0; font-size:.9rem; letter-spacing:-.01em; white-space:nowrap; }
.dash-card-icon { width:27px; height:27px; display:grid; place-items:center; border-radius:7px; font-size:.85rem; font-weight:900; }
.dash-card-icon.blue { background:#e7f2ff; color:#1d75dc; } .dash-card-icon.green { background:#e3f8eb; color:#16a05b; } .dash-card-icon.teal { background:#e1f8f4; color:#0f9f82; } .dash-card-icon.purple { background:#eee6ff; color:#7143d2; } .dash-card-icon.orange { background:#fff0d8; color:#e08c00; }
[data-theme="dark"] .dash-card-icon.blue { background:#132f50; } [data-theme="dark"] .dash-card-icon.green { background:#123a29; } [data-theme="dark"] .dash-card-icon.teal { background:#123c39; } [data-theme="dark"] .dash-card-icon.purple { background:#2d2347; } [data-theme="dark"] .dash-card-icon.orange { background:#453319; }
.dash-filter { padding:5px 8px; border:1px solid var(--erp-line); border-radius:7px; color:var(--erp-muted); font-size:.65rem; white-space:nowrap; }
.dash-link { color:var(--erp-primary); font-size:.68rem; font-weight:750; white-space:nowrap; }
.mini-chart { display:flex; height:188px; gap:8px; padding-top:4px; }
.chart-y { width:38px; display:flex; flex-direction:column; justify-content:space-between; padding:4px 0 21px; color:#93a0b2; font-size:.62rem; text-align:right; }
.chart-bars { flex:1; display:grid; grid-template-columns:repeat(6,1fr); align-items:end; gap:9px; border-bottom:1px solid var(--erp-line); background:repeating-linear-gradient(to bottom, transparent 0, transparent 43px, rgba(145,157,174,.10) 44px, transparent 45px); }
.chart-bar-col { min-width:0; height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:4px; }
.chart-bar-col strong { font-size:.6rem; color:#51617a; opacity:0; transform:translateY(3px); transition:.2s ease; }
.chart-bar-col:hover strong { opacity:1; transform:none; }
.chart-bar-track { height:132px; width:100%; max-width:36px; display:flex; align-items:flex-end; }
.chart-bar { width:100%; height:var(--bar-height); min-height:4px; border-radius:5px 5px 2px 2px; background:linear-gradient(180deg,#278bf0,#1972d5); display:block; animation:barRise .5s ease both; }
.chart-bar-col small { color:var(--erp-muted); font-size:.65rem; padding-bottom:7px; }
@keyframes barRise { from { height:0; } }
.fee-summary, .attendance-summary { min-height:188px; display:flex; align-items:center; justify-content:center; gap:20px; }
.fee-ring, .attendance-ring { --ring:0%; width:136px; height:136px; flex:0 0 136px; border-radius:50%; display:grid; place-items:center; background:conic-gradient(var(--vc-teal) var(--ring), #f4c247 0); position:relative; }
.attendance-ring { background:conic-gradient(#17a667 var(--ring), #ef4444 0); }
.fee-ring:after, .attendance-ring:after { content:""; position:absolute; inset:14px; border-radius:50%; background:var(--erp-card); }
.fee-ring span, .attendance-ring span { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; font-size:1.25rem; font-weight:850; }
.fee-ring small, .attendance-ring small { margin-top:2px; font-size:.62rem; font-weight:600; color:var(--erp-muted); }
.fee-legend, .attendance-legend { flex:1; display:flex; flex-direction:column; gap:11px; min-width:0; }
.fee-legend div, .attendance-legend div { display:grid; grid-template-columns:10px 1fr auto; align-items:center; gap:7px; font-size:.68rem; }
.fee-legend strong, .attendance-legend strong { font-size:.7rem; }
.dot { width:9px; height:9px; border-radius:50%; display:block; } .dot.green { background:#18a565; } .dot.orange { background:#f1b53b; } .dot.red { background:#ef4444; } .dot.gray { background:#a9b4c2; }
.dash-list { display:flex; flex-direction:column; }
.dash-list-row { display:grid; grid-template-columns:36px minmax(0,1fr) auto auto; align-items:center; gap:9px; padding:9px 0; border-top:1px solid var(--erp-line); color:var(--erp-ink); text-decoration:none !important; }
.dash-list-row:first-child { border-top:0; }
.dash-list-row:hover { background:var(--erp-bg); margin:0 -8px; padding-left:8px; padding-right:8px; border-radius:7px; }
.person-avatar { width:32px; height:32px; border-radius:50%; display:grid; place-items:center; background:#e7f1ff; color:#1a73dc; font-size:.73rem; font-weight:850; }
.payment-avatar { background:#e4f8ed; color:#14955a; }
.person-main { min-width:0; display:flex; flex-direction:column; }
.person-main strong { font-size:.73rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.person-main small, .person-date { color:var(--erp-muted); font-size:.62rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.person-date { padding-left:4px; }
.dash-list-row .badge { font-size:.58rem; padding:3px 7px; }
.payment-amount { font-size:.72rem; font-weight:800; white-space:nowrap; }
.payment-check { width:18px; height:18px; border-radius:50%; background:#16a567; color:#fff; display:grid; place-items:center; font-size:.62rem; font-weight:900; }
.dash-empty { padding:25px 5px; text-align:center; color:var(--erp-muted); font-size:.75rem; }
.event-list { display:flex; flex-direction:column; gap:5px; }
.event-row { display:grid; grid-template-columns:42px minmax(0,1fr); align-items:center; gap:9px; padding:6px 0; color:var(--erp-ink); text-decoration:none !important; border-bottom:1px solid var(--erp-line); }
.event-row:last-child { border-bottom:0; }
.event-date { width:38px; height:38px; border-radius:7px; display:flex; flex-direction:column; align-items:center; justify-content:center; background:#eaf3ff; color:#1975dd; }
.event-date strong { font-size:.82rem; line-height:1; } .event-date small { margin-top:3px; font-size:.5rem; font-weight:800; }
.event-main { min-width:0; display:flex; flex-direction:column; } .event-main strong { font-size:.68rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .event-main small { margin-top:2px; color:var(--erp-muted); font-size:.59rem; }
.class-bars { display:flex; flex-direction:column; gap:9px; }
.class-row { display:grid; grid-template-columns:80px minmax(0,1fr) 30px; align-items:center; gap:9px; font-size:.68rem; }
.class-row > span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .class-row > div { height:8px; background:var(--erp-line); border-radius:99px; overflow:hidden; }
.class-row i { display:block; height:100%; width:var(--bar-width); border-radius:99px; background:linear-gradient(90deg,#7044d8,#986af0); }
.class-row strong { text-align:right; font-size:.68rem; }
.quick-actions { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; }
.quick-action { min-height:76px; border-radius:8px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:6px; color:#fff; text-decoration:none !important; font-size:.64rem; font-weight:750; transition:transform .15s ease, box-shadow .15s ease; }
.quick-action:hover { transform:translateY(-2px); box-shadow:0 8px 16px rgba(15,27,45,.12); color:#fff; }
.quick-action b { font-size:1.05rem; line-height:1; } .quick-action.blue { background:#147cf0; } .quick-action.green { background:#1ca967; } .quick-action.purple { background:#7448db; } .quick-action.orange { background:#ef8c1b; } .quick-action.teal { background:#129d9a; }
.dash-alert { display:flex; align-items:center; gap:10px; padding:10px 12px; margin-bottom:12px; border-radius:9px; border:1px solid; }
.dash-alert-icon { width:24px; height:24px; flex:0 0 24px; display:grid; place-items:center; border-radius:50%; color:#fff; font-weight:900; }
.dash-alert div { display:flex; flex-direction:column; font-size:.72rem; } .dash-alert div span { margin-top:2px; color:inherit; opacity:.8; }
.dash-alert.danger { background:#fff0f0; border-color:#f6d0d0; color:#a32323; } .dash-alert.danger .dash-alert-icon { background:#dc3c3c; }
.dash-alert.info { background:#edf7ff; border-color:#d1e8fb; color:#145d92; } .dash-alert.info .dash-alert-icon { background:#2185d8; }

/* accessibility + mobile */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline:3px solid rgba(27,91,215,.35); outline-offset:2px; }
.nav-backdrop { display:none; }
.mobile-bottom-nav { display:none; }
@media (max-width: 1180px) {
  .dashboard-kpis { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .dashboard-grid-top { grid-template-columns:1fr 1fr; }
  .attendance-card { grid-column:span 2; }
  .dashboard-grid-lists { grid-template-columns:1fr 1fr; }
  .events-card { grid-column:span 2; }
  .global-search { width:240px; }
}
@media (max-width: 960px) {
  .sidebar { position:fixed; left:0; top:0; bottom:0; transform:translateX(-105%); transition:transform .2s ease; box-shadow:14px 0 35px rgba(0,0,0,.2); }
  body.nav-open .sidebar { transform:none; }
  .nav-backdrop { position:fixed; inset:0; z-index:55; background:rgba(8,17,29,.48); backdrop-filter:blur(2px); }
  body.nav-open .nav-backdrop { display:block; }
  .hamb { display:grid; place-items:center; }
  .topbar { padding:9px 14px; }
  .content { padding:18px 16px 32px; }
  .global-search { width:min(300px,35vw); }
}
@media (max-width: 760px) {
  .topbar { height:64px; min-height:64px; gap:8px; }
  .scope-pill { min-width:0; max-width:190px; padding:6px 8px; }
  .scope-pill > span:nth-child(2) { display:none; }
  .scope-pill .scope-icon { width:31px; height:31px; }
  .global-search { flex:1; width:auto; min-width:0; }
  .global-search kbd { display:none; }
  .profile-chip { min-width:0; padding-right:0; }
  .profile-chip > span:nth-child(2), .profile-chip > b, .logout-form { display:none; }
  .profile-avatar { width:36px; height:36px; }
  .content { padding:14px 12px 86px; }
  .dashboard-hero { align-items:flex-start; flex-direction:column; gap:12px; }
  .hero-copy h1 { font-size:1.35rem; }
  .hero-date { width:100%; padding:0; border-left:0; }
  .dashboard-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
  .dashboard-kpi { min-height:105px; padding:12px; }
  .dashboard-kpi strong { font-size:1.12rem; }
  .dashboard-grid-top, .dashboard-grid-lists, .dashboard-grid-bottom { grid-template-columns:1fr; }
  .attendance-card, .events-card { grid-column:auto; }
  .mini-chart { height:170px; }
  .fee-summary, .attendance-summary { min-height:165px; }
  .fee-ring, .attendance-ring { width:120px; height:120px; flex-basis:120px; }
  .quick-actions { grid-template-columns:repeat(3,1fr); }
  .quick-action { min-height:68px; }
  .mobile-bottom-nav { position:fixed; left:0; right:0; bottom:0; z-index:70; height:62px; display:grid; grid-template-columns:repeat(auto-fit,minmax(0,1fr)); background:rgba(255,255,255,.97); border-top:1px solid var(--erp-line); box-shadow:0 -6px 20px rgba(15,27,45,.08); backdrop-filter:blur(10px); }
  [data-theme="dark"] .mobile-bottom-nav { background:rgba(18,28,49,.97); }
  .mobile-bottom-nav a, .mobile-bottom-nav button { border:0; background:transparent; color:var(--erp-muted); display:flex; flex-direction:column; justify-content:center; align-items:center; gap:2px; font:inherit; text-decoration:none; cursor:pointer; }
  .mobile-bottom-nav span { font-size:1.05rem; line-height:1; } .mobile-bottom-nav small { font-size:.58rem; }
  .mobile-bottom-nav a.on { color:var(--erp-primary); font-weight:800; }
}
@media (max-width: 480px) {
  .scope-pill { max-width:54px; }
  .global-search { display:none; }
  .dashboard-kpis { grid-template-columns:1fr 1fr; }
  .dashboard-kpi { grid-template-columns:32px 1fr; column-gap:7px; }
  .dashboard-kpi .kpi-icon { width:32px; height:32px; }
  .dashboard-kpi .kpi-label { font-size:.64rem; }
  .dashboard-kpi .kpi-meta { font-size:.57rem; }
  .dash-card { padding:12px; }
  .dash-list-row { grid-template-columns:32px minmax(0,1fr) auto; }
  .person-date, .dash-list-row .badge { display:none; }
  .quick-actions { grid-template-columns:repeat(2,1fr); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* Platform dashboard additions */
.platform-mini-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:0 0 12px; }
.platform-mini { min-height:82px; display:grid; grid-template-columns:1fr auto; grid-template-rows:auto auto; align-items:center; padding:13px 15px; background:var(--erp-card); border:1px solid var(--erp-line); border-radius:11px; }
.platform-mini .mini-label { color:var(--erp-muted); font-size:.7rem; font-weight:700; }
.platform-mini strong { grid-row:2; font-size:1.35rem; line-height:1; }
.platform-mini .badge { grid-column:2; grid-row:1 / span 2; align-self:center; }
.platform-schools-card { overflow:hidden; }
.platform-table-wrap { border:0; }
@media (max-width:760px) { .platform-mini-grid { grid-template-columns:1fr; } }

/* ---------------------------------------------------------
   Portal pages (parent / student / staff / driver) — small
   KPI strip + bordered row-list pattern used across portal/*.
   --------------------------------------------------------- */
.kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; margin:14px 0; }
.kpi { background:var(--erp-card); border:1px solid var(--erp-line); border-radius:var(--erp-radius); box-shadow:var(--erp-shadow); padding:14px 16px; display:flex; flex-direction:column; gap:2px; }
.kpi .k { color:var(--erp-muted); font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
.kpi strong { font-size:1.4rem; font-weight:800; letter-spacing:-.01em; }
.rowline { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 2px; border-bottom:1px solid var(--erp-line); }
.rowline:last-child { border-bottom:0; }
.rowline > div:first-child { min-width:0; flex:1; }
.rowline form { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.nowrap { white-space:nowrap; }
@media (max-width:700px) { .kpis { grid-template-columns:repeat(2,1fr); } }

/* ---------------------------------------------------------
   Inline SVG icon sizing — icon() emits <svg class="i">,
   sized in em so each context below just sets font-size.
   --------------------------------------------------------- */
.nav-icon svg.i { font-size:1.05rem; }
.hamb svg.i, .top-icon svg.i, .logout-form svg.i { font-size:1.15rem; }
.scope-icon svg.i { font-size:1.05rem; }
.scope-pill > b svg.i, .profile-chip > b svg.i { font-size:.85rem; }
.global-search svg.i { font-size:1.05rem; flex:none; }
.nav-platform-btn svg.i { font-size:.95rem; vertical-align:-0.1em; }
.hero-icon svg.i, .hero-date-icon svg.i { font-size:1.5rem; }
.dash-card-icon svg.i { font-size:1.05rem; }
.dashboard-kpi .kpi-icon svg.i { font-size:1.2rem; }
.quick-action svg.i { font-size:1.35rem; }
.top-icon.theme-toggle .icon-moon { display:none; }
[data-theme="dark"] .top-icon.theme-toggle .icon-sun { display:none; }
[data-theme="dark"] .top-icon.theme-toggle .icon-moon { display:inline-block; }
@media (max-width:960px) { .mobile-bottom-nav svg.i { font-size:1.3rem; } }