/* ================================================================
   শিক্ষা আইটি লিমিটেড — Finance Management System
   Shikkha Brand v3.0 · FMS Accent #5E35B1 · Indigo Seal #2A2D7C
   Material Design 3 · Mobile-first · Accessible · Loading-aware
   NOTE: every legacy class name preserved — backend/markup safe.
   ================================================================ */
:root{
  /* ── Shikkha Brand tokens ── */
  --shikkha-seal:#2A2D7C;                        /* Deep Indigo — brand anchor */
  --shikkha-amber:#FB8C00;
  --shikkha-coral:#F4511E;
  --shikkha-teal:#00897B;

  /* ── FMS product color (M3 primary) ── */
  --p:#5E35B1;--pd:#4527A0;--pl:#9575CD;        /* primary */
  --pc:#EDE7F6;--op:#fff;--opc:#311B92;          /* primary container / on */
  --p-state:94,53,177;                           /* primary rgb for state layers */

  --surf:#FBFBFE;--card:#FFFFFF;                 /* surfaces — Shikkha brand */
  --surf2:#F1F1FA;                               /* surface container */
  --on:#1A1A2E;--onv:#5C616E;                    /* on-surface / variant */
  --out:#5C616E;--outv:#C4C5D4;                  /* outline / variant */

  --ok:#2E7D32;--okb:#E8F5E9;                    /* green / success */
  --err:#BA1A1A;--errb:#FFEBEE;                  /* red / error — Shikkha brand */
  --warn:#E65100;--warnb:#FFF3E0;                /* amber / warning */

  --sb:#0B0B16;--sb2:#16162A;                    /* navigation drawer — Shikkha void */

  /* ── Shape scale ── */
  --r4:4px;--r8:8px;--r12:12px;--r16:16px;
  --r20:20px;--r24:24px;--r28:28px;--rfull:50px;

  /* ── Elevation ── */
  --sh1:0 1px 3px rgba(0,0,0,.08),0 0 0 1px rgba(0,0,0,.04);
  --sh2:0 3px 10px rgba(0,0,0,.10),0 0 0 1px rgba(0,0,0,.03);
  --sh3:0 8px 28px rgba(0,0,0,.18);

  /* ── Motion ── */
  --ease:cubic-bezier(.4,0,.2,1);
  --ease-emph:cubic-bezier(.34,1.56,.64,1);
  --dur:.2s;

  --font:'Inter','Noto Sans Bengali','Segoe UI',system-ui,sans-serif;

  /* safe-area (notch phones) */
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px);
  --safe-r:env(safe-area-inset-right,0px);
}

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font);background:var(--surf);color:var(--on);
  height:100vh;height:100dvh;overflow:hidden;font-size:13px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
button,input,select,textarea{font-family:var(--font);font-size:inherit}
img,svg{max-width:100%}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--outv);border-radius:var(--rfull)}
::-webkit-scrollbar-thumb:hover{background:var(--out)}

/* ── Accessibility: visible focus for keyboard users ── */
:focus-visible{outline:3px solid var(--pl);outline-offset:2px;border-radius:var(--r4)}
.nav:focus-visible,.fab:focus-visible,.btn:focus-visible,.btn-tonal:focus-visible,
.mclose:focus-visible,.menu-btn:focus-visible,.mob-fab:focus-visible,
.calc-btn:focus-visible,.ck:focus-visible,.dt-picker-btn:focus-visible,
.nav-badge:focus-visible,a:focus-visible{outline:3px solid var(--pl);outline-offset:2px}
/* inputs already carry a focus ring (box-shadow) → suppress double outline */
.fi:focus-visible,.fs:focus-visible,.msel:focus-visible{outline:none}

/* Skip link (added in header.php) */
.skip-link{
  position:absolute;left:-9999px;top:8px;z-index:5000;
  background:var(--p);color:#fff;padding:10px 16px;border-radius:var(--r8);
  font-weight:700;text-decoration:none;box-shadow:var(--sh2);
}
.skip-link:focus{left:8px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ── APP LAYOUT ── */
.app{display:flex;height:100vh;height:100dvh;overflow:hidden}

/* ── M3 NAVIGATION DRAWER ── */
.sb{
  width:256px;background:var(--sb);display:flex;flex-direction:column;
  flex-shrink:0;overflow-y:auto;overscroll-behavior:contain;
  transition:transform .3s var(--ease);z-index:300;
  padding-bottom:var(--safe-b);
}
.sb-brand{padding:20px 16px 14px;background:var(--sb2);border-bottom:1px solid rgba(255,255,255,.06)}
.sb-logo{display:flex;align-items:center;gap:12px;margin-bottom:5px}
.sb-logo-icon{
  width:40px;height:40px;
  background:var(--shikkha-seal);
  border-radius:var(--r12);display:flex;align-items:center;
  justify-content:center;font-size:20px;flex-shrink:0;
  box-shadow:0 2px 8px rgba(42,45,124,.5);
}
.sb-logo-text{color:#fff;font-weight:900;font-size:14px;line-height:1.2}
.sb-logo-sub{color:rgba(255,255,255,.4);font-size:10px;margin-top:2px}
.sb-inst{
  display:inline-block;background:rgba(99,179,237,.12);color:#63B3ED;
  font-size:9.5px;font-weight:700;padding:3px 10px;
  border-radius:var(--rfull);margin-top:5px;letter-spacing:.3px;
}
.sb-sec{
  padding:16px 16px 4px;font-size:9px;font-weight:700;
  letter-spacing:1.4px;color:rgba(255,255,255,.25);text-transform:uppercase;
}

/* M3 Navigation Items — Pill Indicator */
.nav{
  display:flex;align-items:center;gap:12px;padding:11px 20px 11px 16px;
  color:rgba(255,255,255,.62);cursor:pointer;
  border-radius:var(--rfull);
  margin:2px 10px 2px 6px;min-height:44px;
  font-size:12.5px;font-weight:500;
  transition:background .18s var(--ease),color .18s var(--ease);
  user-select:none;-webkit-tap-highlight-color:transparent;
  text-decoration:none;
}
.nav:hover{background:rgba(255,255,255,.08);color:rgba(255,255,255,.9)}
.nav:active{background:rgba(255,255,255,.14)}
.nav.on{
  background:#5E35B1;color:#fff;font-weight:700;
  box-shadow:0 2px 8px rgba(94,53,177,.4);
}
.nav svg{width:17px;height:17px;flex-shrink:0;opacity:.65}
.nav:hover svg,.nav.on svg{opacity:1}
.nav-badge{
  margin-left:auto;background:var(--err);color:#fff;font-size:9px;
  font-weight:800;padding:2px 7px;border-radius:var(--rfull);min-width:18px;text-align:center;
}
.sb-foot{padding:12px 16px;border-top:1px solid rgba(255,255,255,.06);margin-top:auto}
.sb-foot-text{color:rgba(255,255,255,.18);font-size:9.5px;line-height:1.7}
.sb-overlay{
  display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:299;
  opacity:0;transition:opacity .3s var(--ease);
}
.sb-overlay.open{display:block;opacity:1}

/* ── MAIN ── */
.main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}

/* M3 Top App Bar */
.topbar{
  background:var(--card);border-bottom:1px solid var(--outv);
  padding:11px 18px;display:flex;align-items:center;gap:12px;
  flex-shrink:0;box-shadow:var(--sh1);
  padding-left:max(18px,var(--safe-l));padding-right:max(18px,var(--safe-r));
}
.tb-info{flex:1;min-width:0}
.tb-title{font-size:clamp(14px,2.4vw,16px);font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-sub{font-size:10.5px;color:var(--onv);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.content{
  flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:16px;
  padding-left:max(16px,var(--safe-l));padding-right:max(16px,var(--safe-r));
  padding-bottom:calc(16px + var(--safe-b));
}
.menu-btn{
  display:none;background:none;border:none;padding:8px;
  border-radius:var(--r8);cursor:pointer;color:var(--on);flex-shrink:0;
  min-width:44px;min-height:44px;align-items:center;justify-content:center;
}
.menu-btn:hover{background:var(--surf)}

/* Month/Filter Bar */
.mbar{
  display:flex;align-items:center;gap:10px;background:var(--card);
  border-radius:var(--r16);padding:10px 16px;margin-bottom:14px;
  box-shadow:var(--sh1);flex-wrap:wrap;border:1px solid var(--outv);
}
.msel{
  border:1.5px solid var(--outv);border-radius:var(--r8);
  padding:8px 12px;font-size:12px;background:var(--surf);
  cursor:pointer;font-family:var(--font);color:var(--on);
  transition:border-color .2s,box-shadow .2s;min-height:40px;
}
.msel:focus{outline:none;border-color:var(--p);background:#fff;box-shadow:0 0 0 4px rgba(var(--p-state),.1)}

/* ── M3 CARDS ── */
.card{
  background:var(--card);border-radius:var(--r16);
  padding:16px;box-shadow:var(--sh1);margin-bottom:14px;
  border:1px solid rgba(0,0,0,.06);position:relative;
}
.ct{font-size:13.5px;font-weight:800;margin-bottom:12px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ct .sub{font-size:10.5px;color:var(--onv);font-weight:500;margin-left:auto;cursor:pointer}
.ct .sub:hover{color:var(--p)}

/* Stat Cards */
.sg{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:14px}
.sc{border-radius:var(--r16);padding:16px;position:relative;overflow:hidden;border:1px solid rgba(0,0,0,.06)}
.sc-lb{font-size:10.5px;color:var(--onv);margin-bottom:6px;font-weight:600}
.sc-v{font-size:clamp(16px,4vw,20px);font-weight:900;line-height:1.1}
.sc-s{font-size:9.5px;margin-top:5px;opacity:.65;font-weight:500}
.sc-ico{position:absolute;right:14px;top:14px;font-size:28px;opacity:.45}

/* Equation */
.eq{background:var(--card);border-radius:var(--r16);padding:14px 16px;margin-bottom:14px;box-shadow:var(--sh1);border:1px solid var(--outv);border-left:4px solid var(--p)}
.eq.bad{border-left-color:var(--err);background:#FFF5F5}
.eq-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px}
.eq-blk{text-align:center;min-width:80px}
.eq-lb{font-size:9.5px;color:var(--onv);margin-bottom:2px;font-weight:700;text-transform:uppercase;letter-spacing:.3px}
.eq-v{font-size:16px;font-weight:900}
.eq-op{font-size:22px;font-weight:200;color:var(--out)}
.eq-bar{margin-top:10px;height:8px;background:var(--outv);border-radius:var(--rfull);overflow:hidden;display:flex}
.eq-bl{background:var(--err);transition:width .6s}
.eq-be{background:var(--ok);transition:width .6s}
.eq-leg{display:flex;gap:14px;margin-top:5px;font-size:10px}
.eq-tag{margin-left:auto;font-size:10px;font-weight:700;padding:3px 10px;border-radius:var(--rfull)}

/* ── M3 BUTTONS ── (state layers + accessible targets) */
.fab{
  background:var(--p);color:#fff;border:none;
  border-radius:var(--rfull);padding:10px 20px;min-height:40px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-size:13px;font-weight:700;
  box-shadow:0 3px 12px rgba(21,101,192,.28);
  cursor:pointer;transition:background var(--dur) var(--ease),transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);white-space:nowrap;
  -webkit-tap-highlight-color:transparent;
}
.fab:hover{background:var(--pd);transform:translateY(-1px);box-shadow:0 5px 18px rgba(21,101,192,.38)}
.fab:active{transform:none;box-shadow:none}

.btn{
  border:1.5px solid var(--p);background:transparent;color:var(--p);
  border-radius:var(--rfull);padding:7px 16px;min-height:40px;font-size:12px;font-weight:700;
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease);white-space:nowrap;
  -webkit-tap-highlight-color:transparent;
}
.btn:hover{background:var(--pc)}
.btn.red{border-color:var(--err);color:var(--err)}
.btn.red:hover{background:var(--errb)}
.btn.green{border-color:var(--ok);color:var(--ok)}
.btn.green:hover{background:var(--okb)}
.btn.warn{border-color:var(--warn);color:var(--warn)}
.btn.warn:hover{background:var(--warnb)}

.btn-tonal{
  border:none;background:var(--pc);color:var(--p);
  border-radius:var(--rfull);padding:9px 18px;min-height:40px;font-size:12.5px;font-weight:700;
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  transition:background var(--dur) var(--ease);white-space:nowrap;
  -webkit-tap-highlight-color:transparent;
}
.btn-tonal:hover{background:#B9D0FA}

/* Disabled state for any button */
.fab[disabled],.btn[disabled],.btn-tonal[disabled],
.fab:disabled,.btn:disabled,.btn-tonal:disabled{
  opacity:.5;cursor:not-allowed;pointer-events:none;box-shadow:none;transform:none;
}

/* Mobile FAB */
.mob-fab{
  display:none;position:fixed;right:16px;
  bottom:calc(20px + var(--safe-b));
  width:56px;height:56px;border-radius:var(--r16);
  background:var(--p);color:#fff;border:none;font-size:28px;
  box-shadow:var(--sh3);z-index:200;
  align-items:center;justify-content:center;cursor:pointer;
}

/* ── LOADING STATES ── */
.skeleton{position:relative;overflow:hidden;background:var(--surf2);border-radius:var(--r8)}
.skeleton::after{content:'';position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  animation:shimmer 1.4s infinite}
@keyframes shimmer{100%{transform:translateX(100%)}}
.skeleton-text{height:12px;margin:7px 0;border-radius:var(--rfull)}
.skeleton-text.w40{width:40%}.skeleton-text.w60{width:60%}.skeleton-text.w80{width:80%}
.skeleton-title{height:18px;width:42%;margin-bottom:14px;border-radius:var(--r8)}
.skeleton-card{height:84px;border-radius:var(--r16);margin-bottom:12px}
.skeleton-avatar{width:40px;height:40px;border-radius:50%}

.spinner{
  width:20px;height:20px;border:2.5px solid var(--outv);border-top-color:var(--p);
  border-radius:50%;animation:spin .7s linear infinite;display:inline-block;vertical-align:middle;
}
.spinner.lg{width:36px;height:36px;border-width:3.5px}
.spinner.on-dark{border-color:rgba(255,255,255,.35);border-top-color:#fff}
@keyframes spin{to{transform:rotate(360deg)}}

.loading-overlay{
  position:absolute;inset:0;background:rgba(255,255,255,.72);
  display:flex;align-items:center;justify-content:center;gap:10px;
  z-index:5;border-radius:inherit;font-size:12px;font-weight:700;color:var(--onv);
}

/* Button busy spinner: set aria-busy="true" or class .loading */
.fab[aria-busy="true"],.btn[aria-busy="true"],.btn-tonal[aria-busy="true"],
.fab.loading,.btn.loading,.btn-tonal.loading{color:transparent!important;pointer-events:none;position:relative}
.fab[aria-busy="true"]::after,.btn-tonal[aria-busy="true"]::after,.fab.loading::after,.btn-tonal.loading::after{
  content:'';position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;
  border:2.5px solid rgba(255,255,255,.5);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
.btn[aria-busy="true"]::after,.btn.loading::after{
  content:'';position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;
  border:2.5px solid rgba(21,101,192,.35);border-top-color:var(--p);border-radius:50%;animation:spin .7s linear infinite}

/* Empty state */
.empty{text-align:center;padding:40px 20px;color:var(--onv)}
.empty-ico{font-size:40px;margin-bottom:12px;opacity:.7}
.empty-title{font-size:15px;font-weight:700;margin-bottom:6px;color:var(--on)}
.empty-sub{font-size:12px}

/* ── M3 CHIPS ── */
.chip{
  display:inline-flex;align-items:center;
  padding:4px 12px;border-radius:var(--r8);
  font-size:11px;font-weight:700;white-space:nowrap;letter-spacing:.1px;
}
.ci{background:#E8F5E9;color:#1B5E20}
.ce{background:#FFEBEE;color:#B71C1C}
.ca{background:#E3F2FD;color:#0D47A1}
.cl{background:#FFF8E1;color:#E65100}
.cd{background:#EDE7F6;color:#311B92}
.cp{background:#E0F2F1;color:#004D40}
.cw{background:#FCE4EC;color:#880E4F}
.cs{background:#E0F7FA;color:#006064}
.cbatch{background:#FFF3E0;color:#BF360C}
.cstudent{background:#F1F8E9;color:#33691E}

/* ── M3 TABLE ── */
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r12)}
table{width:100%;border-collapse:collapse;min-width:540px}
thead tr{background:linear-gradient(135deg,var(--shikkha-seal) 0%,var(--p) 100%)}
th{
  padding:11px 14px;text-align:left;font-size:11px;
  font-weight:700;color:#fff;letter-spacing:.3px;white-space:nowrap;
}
td{padding:10px 14px;font-size:12.5px;border-bottom:1px solid var(--outv);vertical-align:middle}
tr:last-child td{border-bottom:none}
tbody tr:hover td{background:#EEF4FF}
tfoot td{font-weight:800;background:var(--pc);font-size:12.5px;border-top:2px solid var(--p)}

/* ── GRIDS ── */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}

/* ── M3 FORMS ── */
.fg{margin-bottom:14px}
.fl{display:block;font-size:11px;font-weight:700;color:var(--onv);margin-bottom:6px;letter-spacing:.2px}
.fi,.fs{
  width:100%;padding:11px 14px;min-height:44px;
  border:1.5px solid var(--outv);border-radius:var(--r12);
  font-size:13px;font-family:var(--font);background:var(--surf);
  color:var(--on);transition:border-color .2s,box-shadow .2s;
  -webkit-appearance:none;appearance:none;
}
.fi:focus,.fs:focus{
  outline:none;border-color:var(--p);background:#fff;
  box-shadow:0 0 0 4px rgba(var(--p-state),.1);
}
.fi[disabled],.fs[disabled]{background:var(--surf2);color:var(--out);cursor:not-allowed}
.fi[aria-invalid="true"],.fs[aria-invalid="true"]{border-color:var(--err);box-shadow:0 0 0 4px rgba(198,40,40,.1)}
.fi::placeholder{color:var(--out)}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.f3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.finfo{
  background:var(--pc);border-radius:var(--r12);
  padding:10px 14px;font-size:12px;color:var(--opc);
  margin-bottom:14px;line-height:1.7;border-left:3px solid var(--p);
}
.finfo.warn{background:var(--warnb);color:var(--warn);border-left-color:var(--warn)}
.finfo.ok{background:var(--okb);color:var(--ok);border-left-color:var(--ok)}

/* ── M3 MODAL / DIALOG ── */
.mo{display:none;position:fixed;inset:0;background:rgba(0,0,0,.54);z-index:1000;align-items:center;justify-content:center;padding:16px}
.mo.open{display:flex;animation:fadeIn .18s}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.mbox{
  background:var(--card);border-radius:var(--r28);padding:24px;
  width:100%;max-width:500px;max-height:92vh;max-height:92dvh;overflow-y:auto;
  -webkit-overflow-scrolling:touch;box-shadow:var(--sh3);
  animation:slideUp .22s var(--ease-emph);
}
.mbox.wide{max-width:660px}
@keyframes slideUp{from{transform:scale(.93) translateY(14px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}
.mh{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;gap:12px}
.mtit{font-size:clamp(15px,3vw,17px);font-weight:800;color:var(--on)}
.mclose{
  background:var(--surf);border:none;width:36px;height:36px;flex-shrink:0;
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:16px;color:var(--onv);transition:background .2s,color .2s;
}
.mclose:hover{background:var(--errb);color:var(--err)}

/* ── TOAST ── */
.toast{
  position:fixed;bottom:calc(24px + var(--safe-b));left:50%;
  transform:translateX(-50%) translateY(120px);
  background:#1E2530;color:#fff;padding:12px 24px;
  border-radius:var(--r12);font-size:13px;font-weight:600;
  box-shadow:var(--sh3);z-index:3000;
  transition:transform .3s var(--ease-emph);
  pointer-events:none;max-width:calc(100vw - 32px);text-align:center;
}
.toast.show{transform:translateX(-50%) translateY(0)}
.toast.err{background:var(--err)}
.toast.ok{background:var(--ok)}
.toast.warn{background:var(--warn)}

/* ── CALCULATOR ── */
.calc-wrap{display:none;position:fixed;bottom:76px;right:16px;z-index:500;background:var(--card);border-radius:var(--r20);box-shadow:var(--sh3);padding:14px;width:256px;border:1px solid var(--outv)}
.calc-wrap.open{display:block;animation:slideUp .2s ease}
.calc-scr{background:var(--sb);color:#60A5FA;border-radius:var(--r12);padding:12px 14px;font-size:22px;font-weight:800;text-align:right;min-height:54px;display:flex;align-items:center;justify-content:flex-end;word-break:break-all;font-family:'Courier New',monospace;letter-spacing:.5px;margin-bottom:10px}
.cg{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.ck{background:var(--surf);border:1px solid var(--outv);border-radius:var(--r8);padding:9px 2px;font-size:13px;font-weight:700;cursor:pointer;transition:all .15s;font-family:var(--font);color:var(--on);min-height:40px}
.ck:hover{background:var(--pc);border-color:var(--p);color:var(--pd)}
.ck:active{transform:scale(.93)}
.ck.op{background:#EFF6FF;color:var(--p);border-color:#BFDBFE}
.ck.eq{background:var(--p);color:#fff;border-color:var(--p);grid-column:span 2}
.ck.eq:hover{background:var(--pd)}
.ck.clr{background:var(--errb);color:var(--err);border-color:#FECACA}
.calc-btn{position:fixed;bottom:calc(76px + var(--safe-b));right:16px;width:44px;height:44px;border-radius:var(--r16);background:var(--opc);color:#60A5FA;border:none;font-size:20px;cursor:pointer;box-shadow:var(--sh2);z-index:499;display:flex;align-items:center;justify-content:center;transition:transform .2s,box-shadow .2s}
.calc-btn:hover{transform:scale(1.08);box-shadow:var(--sh3)}

/* ── RECEIPT ── */
.rcpt{background:#fff;padding:24px;border-radius:var(--r16);border:1px solid var(--outv);font-size:12.5px;line-height:2}
.rcpt-logo{text-align:center;margin-bottom:14px;padding-bottom:12px;border-bottom:2px solid var(--opc)}
.rcpt-co{font-size:16px;font-weight:900;color:var(--opc)}
.rcpt-addr{font-size:10px;color:var(--onv);margin-top:2px}
.rcpt-title{text-align:center;font-size:13px;font-weight:800;background:var(--opc);color:#fff;padding:8px;border-radius:var(--r8);margin:12px 0}
.rcpt-row{display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px dashed var(--outv)}
.rcpt-row:last-child{border:none}
.rcpt-total{display:flex;justify-content:space-between;font-weight:900;padding:10px 0 0;border-top:2px solid var(--opc);margin-top:8px;font-size:14px}
.rcpt-footer{text-align:center;font-size:10px;color:var(--onv);margin-top:12px;padding-top:8px;border-top:1px solid var(--outv)}

/* ── PROGRESS BAR ── */
.pb-wrap{margin-bottom:9px}
.pb-row{display:flex;justify-content:space-between;font-size:11px;margin-bottom:4px}
.pb-bg{height:7px;background:var(--outv);border-radius:var(--rfull);overflow:hidden}
.pb-fill{height:100%;border-radius:var(--rfull);transition:width .6s ease}

/* ── FINANCIAL STATEMENTS ── */
.fs-hdr{text-align:center;border-bottom:2px solid var(--opc);padding-bottom:12px;margin-bottom:14px}
.fs-co{font-weight:900;font-size:15px;color:var(--opc)}
.fs-rep{font-size:12px;color:var(--onv)}
.fs-sec{font-weight:800;font-size:12.5px;padding:7px 12px;border-radius:var(--r8);margin:12px 0 6px;display:flex;justify-content:space-between}
.fs-row{display:flex;justify-content:space-between;padding:6px 0 6px 16px;border-bottom:1px solid var(--outv);font-size:12.5px}
.fs-grp{display:flex;justify-content:space-between;padding:6px 0;font-weight:700;font-size:12.5px}
.fs-sub{display:flex;justify-content:space-between;font-weight:800;padding:9px 0;font-size:13px;border-top:2px solid var(--outv);margin-top:4px}
.fs-net{display:flex;justify-content:space-between;font-weight:900;font-size:16px;padding:14px;border-radius:var(--r12);margin-top:12px}

/* ── ERROR CARD ── */
.errc{border-radius:var(--r12);padding:12px 14px;margin-bottom:10px;display:flex;gap:10px;align-items:flex-start;border-left:4px solid var(--err);background:var(--errb)}
.errc.w{border-left-color:var(--warn);background:var(--warnb)}

/* ── ASSET ITEM ── */
.ast-item{
  border:1px solid var(--outv);border-radius:var(--r16);
  padding:16px;margin-bottom:12px;position:relative;overflow:hidden;
  transition:box-shadow .2s,border-color .2s;
}
.ast-item:hover{box-shadow:var(--sh2);border-color:var(--p)}
.ast-item::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,var(--p),var(--pl))}

/* ── LIST ITEM ── */
.list-item{
  background:var(--surf);border:1px solid var(--outv);border-radius:var(--r12);
  padding:12px 16px;margin-bottom:8px;
  display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;
  transition:box-shadow .2s;
}
.list-item:hover{box-shadow:var(--sh1)}

/* ── BATCH / STUDENT ── */
.batch-card{border:1.5px solid var(--outv);border-radius:var(--r16);padding:16px;margin-bottom:10px;position:relative;transition:box-shadow .2s}
.batch-card:hover{box-shadow:var(--sh2)}
.batch-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:4px 0 0 4px;background:linear-gradient(180deg,var(--p),var(--pl))}

/* ── CLOSING STEPS ── */
.step{background:var(--surf);border:1px solid var(--outv);border-radius:var(--r12);padding:12px 14px;margin-bottom:8px;display:flex;gap:12px;align-items:flex-start}
.step-n{width:30px;height:30px;background:var(--p);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:12px;flex-shrink:0;margin-top:1px}

/* ── DATE PICKER ── */
.dt-wrap{position:relative;display:flex;align-items:stretch;width:100%}
.dt-wrap .dt-ddmm{flex:1;padding-right:44px}
.dt-picker-btn{
  position:absolute;right:4px;top:50%;transform:translateY(-50%);
  width:36px;height:36px;border:none;background:var(--pc);color:var(--p);
  border-radius:var(--r8);cursor:pointer;font-size:16px;
  display:flex;align-items:center;justify-content:center;
  padding:0;transition:background .15s,color .15s;
}
.dt-picker-btn:hover{background:var(--p);color:#fff}
.dt-picker-btn:active{transform:translateY(-50%) scale(.95)}
.dt-hidden{
  position:absolute;right:4px;top:50%;transform:translateY(-50%);
  width:36px;height:36px;opacity:0;pointer-events:none;border:0;padding:0;background:transparent;
}

/* ================================================================
   RESPONSIVE  (mobile-first overrides)
   ================================================================ */
@media(max-width:1024px){
  .sg{grid-template-columns:repeat(2,1fr)}
  .g4{grid-template-columns:repeat(2,1fr)}
}

/* Tablet + phone → off-canvas navigation drawer */
@media(max-width:960px){
  .sb{position:fixed;top:0;left:0;bottom:0;transform:translateX(-100%);box-shadow:var(--sh3)}
  .sb.open{transform:translateX(0)}
  .menu-btn{display:flex}
}

@media(max-width:768px){
  .g2,.g3{grid-template-columns:1fr}
  .f2,.f3{grid-template-columns:1fr}
  .sg{grid-template-columns:1fr 1fr}
  .g4{grid-template-columns:1fr 1fr}
}

@media(max-width:640px){
  .topbar{padding:10px 14px}
  .topbar .fab{display:none}      /* swap to floating FAB */
  .mob-fab{display:flex}
  .content{padding:10px;padding-bottom:calc(80px + var(--safe-b))}
  .sg{grid-template-columns:1fr 1fr;gap:8px}
  .sc{padding:12px}.sc-ico{display:none}
  .card{padding:13px}
  .mbox{padding:18px;border-radius:var(--r24)}
  .mbar{padding:9px 12px;gap:8px}
  /* 16px inputs prevent iOS auto-zoom on focus; 48px = comfortable tap */
  .fi,.fs,.msel{font-size:16px;min-height:48px}
  .nav{min-height:48px}
  .btn,.fab,.btn-tonal{min-height:44px}
  .calc-wrap,.calc-btn{right:10px}
  .mob-fab{right:12px}
  table{min-width:480px}
}

@media(max-width:380px){
  .sg{grid-template-columns:1fr}
}

/* Respect reduced-motion preference */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  .skeleton::after{display:none}
}

/* ── PRINT ── */
@media print{
  .sb,.topbar,.mob-fab,.calc-btn,.calc-wrap,.mo,.toast,.mbar,.fn-bar,.menu-btn,.skip-link,.no-print{display:none!important}
  .main,.content{overflow:visible;padding:0}
  body,.app{overflow:visible;height:auto}
  .card{box-shadow:none;border:1px solid #ddd;break-inside:avoid}
}