/* ===========================================================================
   ROYAL PUBLIC SENIOR SECONDARY SCHOOL — portal design system
   ---------------------------------------------------------------------------
   Ported from the SchoolWise portal stylesheet in ref/portal/ (style.css then
   app.css, in that order, which is how they were loaded there).
   School-specific additions are at the END of this file, below the marker.
   =========================================================================== */

/* ============ PART 1 — base (was style.css) ============ */

*{box-sizing:border-box;margin:0;padding:0}
:root{
  /* brand navy comes from css/tokens.css (shared/tokens.css), same as the website */
  --navy:var(--rp-navy); --navy-2:var(--rp-navy-2); --ink:#12233d; --body:#475569;
  --line:#e3e8ef; --bg:#f4f7fb; --card:#fff;
  --blue:#2563eb; --blue-soft:#eaf1fe;
  --green:#15803d; --green-soft:#e7f6ec;
  --amber:#b45309; --amber-soft:#fdf3e3;
  --red:#c2213b; --red-soft:#fdeef1;
  --violet:#6d28d9; --violet-soft:#f1ebfd;
}
h1,h2,h3,.brand b{font-family:var(--rp-font-head)}
body{font-family:var(--rp-font-body);
  background:var(--bg);color:var(--ink);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}

/* ---------- shell ---------- */
.shell{display:flex;min-height:100vh;background:linear-gradient(90deg,var(--navy) 0 248px,var(--bg) 248px)}
.side{width:248px;flex:0 0 248px;background:var(--navy);color:#c7d5ea;
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.brand{display:flex;align-items:center;gap:11px;padding:20px 20px 18px;border-bottom:1px solid rgba(255,255,255,.09)}
.brand .mark{width:44px;height:44px;flex:0 0 44px;display:block;border-radius:50%}   /* the school's seal */
.brand b{display:block;color:#fff;font-size:15px;letter-spacing:.2px;line-height:1.25;text-wrap:balance}
.brand span{display:block;font-size:11px;color:#8fa8c9;margin-top:1px}
.nav{padding:12px 12px;overflow-y:auto;flex:1}
.nav .lbl{font-size:10.5px;letter-spacing:.9px;text-transform:uppercase;color:#7e97ba;padding:12px 10px 6px}
.nav a{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:8px;
  font-size:13.5px;color:#c7d5ea;margin-bottom:2px}
.nav a svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.nav a:hover{background:rgba(255,255,255,.07);color:#fff}
.nav a.on{background:#fff;color:var(--navy);font-weight:600}
.nav a.on svg{opacity:1}
.side .foot{padding:14px 20px;border-top:1px solid rgba(255,255,255,.09);font-size:11px;color:#7e97ba}
.side .foot b{color:#c7d5ea;display:block;font-size:12px}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.top{background:#fff;border-bottom:1px solid var(--line);padding:0 28px;height:62px;
  display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:5}
.top .where{font-size:13px;color:#7c8ba1}
.top .where b{color:var(--ink)}
.top .right{display:flex;align-items:center;gap:16px}
.pill-session{background:var(--blue-soft);color:var(--blue);font-size:11.5px;font-weight:600;
  padding:5px 11px;border-radius:20px}
.avatar{display:flex;align-items:center;gap:9px}
.avatar .c{width:34px;height:34px;border-radius:50%;background:var(--navy);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:600}
.avatar b{font-size:13px;display:block;line-height:1.25}
.avatar span{font-size:11px;color:#8b98ab}
.wrap{padding:24px 28px 44px;flex:1}

/* ---------- headings ---------- */
.page-h{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:20px;flex-wrap:wrap}
.page-h h1{font-size:24px;letter-spacing:-.3px}
.page-h p{color:#7c8ba1;font-size:13px;margin-top:3px}
h2.sec{font-size:15px;margin-bottom:12px;display:flex;align-items:center;gap:8px}
h2.sec:before{content:'';width:3px;height:14px;border-radius:2px;background:var(--blue)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:7px;padding:8px 15px;border-radius:8px;
  font-size:13px;font-weight:600;border:1px solid transparent;white-space:nowrap}
.btn.p{background:var(--blue);color:#fff}
.btn.g{background:var(--green);color:#fff}
.btn.o{background:#fff;color:var(--ink);border-color:var(--line)}
.btn.d{background:var(--navy);color:#fff}

/* ---------- cards ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:12px}
.card>.hd{padding:15px 18px;border-bottom:1px solid var(--line);display:flex;
  align-items:center;justify-content:space-between;gap:12px}
.card>.hd h3{font-size:14.5px}
.card>.hd .sub{font-size:11.5px;color:#8b98ab;margin-top:2px}
.card>.bd{padding:18px}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:1fr 1fr}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.g5{grid-template-columns:repeat(5,1fr)}
.g-2-1{grid-template-columns:2fr 1fr}
.g-1-2{grid-template-columns:1fr 2fr}
.g-1-2{grid-template-columns:1fr 2fr}

/* ---------- stat ---------- */
.stat{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 17px}
.stat .t{font-size:12px;color:#7c8ba1;font-weight:600;display:flex;align-items:center;gap:7px}
.stat .t i{width:26px;height:26px;border-radius:7px;display:inline-flex;align-items:center;
  justify-content:center;font-style:normal;font-size:13px}
.stat .v{font-size:27px;font-weight:700;letter-spacing:-.6px;margin:9px 0 3px}
.stat .n{font-size:11.5px;color:#8b98ab}
.stat .n em{font-style:normal;font-weight:600}

/* ---------- table ---------- */
table{width:100%;border-collapse:collapse}
th{text-align:left;font-size:10.5px;letter-spacing:.7px;text-transform:uppercase;color:#8b98ab;
  padding:10px 14px;background:#f8fafc;border-bottom:1px solid var(--line);font-weight:700;white-space:nowrap}
td{padding:11px 14px;border-bottom:1px solid #eef2f7;font-size:13px;vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tr.tot td{background:#f8fafc;font-weight:700}
.num{text-align:right;font-variant-numeric:tabular-nums}
.ctr{text-align:center}
.nm{font-weight:600}
.mut{color:#8b98ab;font-size:12px}

/* ---------- chips ---------- */
.chip{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:20px;
  font-size:11.5px;font-weight:600;white-space:nowrap}
.c-b{background:var(--blue-soft);color:var(--blue)}
.c-g{background:var(--green-soft);color:var(--green)}
.c-a{background:var(--amber-soft);color:var(--amber)}
.c-r{background:var(--red-soft);color:var(--red)}
.c-v{background:var(--violet-soft);color:var(--violet)}
.c-n{background:#eef2f7;color:#64748b}
.dot{width:7px;height:7px;border-radius:50%;display:inline-block}

/* ---------- form ---------- */
.field{display:block;margin-bottom:14px}
.field span{display:block;font-size:12px;font-weight:600;color:#5b6b80;margin-bottom:6px}
.inp{display:block;width:100%;padding:9px 12px;border:1px solid #d7dfe9;border-radius:8px;
  background:#fff;font-size:13.5px;color:var(--ink)}
.inp.ph{color:#9aa7b8}
.sel{background-image:linear-gradient(45deg,transparent 50%,#8b98ab 50%),linear-gradient(135deg,#8b98ab 50%,transparent 50%);
  background-position:calc(100% - 17px) 17px,calc(100% - 12px) 17px;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.row{display:flex;gap:14px;flex-wrap:wrap}
.row>*{flex:1;min-width:170px}

/* ---------- misc ---------- */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:18px}
.tabs a{padding:10px 16px;font-size:13.5px;font-weight:600;color:#7c8ba1;border-bottom:2px solid transparent}
.tabs a.on{color:var(--blue);border-bottom-color:var(--blue)}
.note{border-radius:9px;padding:11px 14px;font-size:12.5px;display:flex;gap:9px;align-items:flex-start}
.note b{font-weight:700}
.n-b{background:var(--blue-soft);color:#1e40af}
.n-a{background:var(--amber-soft);color:#92400e}
.n-g{background:var(--green-soft);color:#166534}
.bar{height:7px;border-radius:5px;background:#eef2f7;overflow:hidden}
.bar i{display:block;height:100%;border-radius:5px}
.list-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid #eef2f7}
.list-row:last-child{border-bottom:0}
.list-row .ic{width:36px;height:36px;border-radius:9px;display:flex;align-items:center;
  justify-content:center;font-size:14px;flex:0 0 36px}
.list-row .tx{flex:1;min-width:0}
.list-row .tx b{font-size:13px;display:block}
.list-row .tx span{font-size:11.5px;color:#8b98ab}
.date-box{width:44px;flex:0 0 44px;text-align:center;background:var(--blue-soft);
  border-radius:8px;padding:5px 0}
.date-box b{display:block;font-size:15px;color:var(--blue);line-height:1.1}
.date-box span{font-size:9.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--blue);font-weight:700}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:11.5px;color:#7c8ba1}
.legend i{width:9px;height:9px;border-radius:2px;display:inline-block;margin-right:5px}
.kv{display:flex;justify-content:space-between;gap:14px;padding:8px 0;border-bottom:1px dashed #e8edf4;font-size:13px}
.kv b{text-align:right}
.kv:last-child{border-bottom:0}
.kv span{color:#7c8ba1}
.kv b{font-weight:600}
.hint{background:#fffbe9;border:1px dashed #e6cf8a;border-radius:9px;padding:10px 13px;
  font-size:12px;color:#8a6d16;margin-top:16px}

/* attendance grid */
.att td .opt{display:inline-flex;gap:5px}
.mk{width:30px;height:26px;border-radius:6px;border:1px solid #dde4ec;display:inline-flex;
  align-items:center;justify-content:center;font-size:11.5px;font-weight:700;color:#93a1b3;background:#fff}
.mk.p{background:var(--green);border-color:var(--green);color:#fff}
.mk.a{background:var(--red);border-color:var(--red);color:#fff}
.mk.l{background:#d97706;border-color:#d97706;color:#fff}

/* calendar */
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.cal .h{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:#8b98ab;
  text-align:center;font-weight:700;padding-bottom:3px}
.cal .d{aspect-ratio:1;border-radius:7px;display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:600;background:#f4f7fb;color:#94a3b8}
.cal .d.p{background:var(--green-soft);color:var(--green)}
.cal .d.a{background:var(--red-soft);color:var(--red)}
.cal .d.l{background:var(--amber-soft);color:var(--amber)}
.cal .d.h{background:#eef2f7;color:#b6c1d0}

/* bar chart */
.chart{display:flex;align-items:flex-end;gap:14px;height:220px;padding-top:8px}
.chart .col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:7px;height:100%}
.chart .col .b{width:100%;max-width:46px;border-radius:6px 6px 0 0;background:var(--blue);position:relative}
.chart .col .b.g{background:var(--green)}
.chart .col .b.a{background:#f59e0b}
.chart .col .cap{font-size:11px;color:#7c8ba1;font-weight:600}
.chart .col .val{font-size:11px;font-weight:700;color:var(--ink)}

/* printable documents */
.paper{background:#fff;border:1px solid var(--line);border-radius:12px;padding:34px 38px;max-width:820px;margin:0 auto}
.paper .ph{text-align:center;border-bottom:2px solid var(--navy);padding-bottom:14px;margin-bottom:20px}
.paper .ph .crest{width:64px;height:64px;display:block;margin:0 auto 9px}   /* the school's logo */
.paper .ph h2{font-size:21px;letter-spacing:.3px}
.paper .ph .adr{font-size:12px;color:#7c8ba1;margin-top:3px}
.paper .ph .ttl{display:inline-block;margin-top:12px;background:var(--navy);color:#fff;
  font-size:12.5px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;padding:5px 20px;border-radius:4px}
.paper table th{background:#f1f5f9}
.paper .sign{display:flex;justify-content:space-between;margin-top:46px;gap:24px}
.paper .sign div{text-align:center;flex:1}
.paper .sign .ln{border-top:1px solid #94a3b8;padding-top:6px;font-size:11.5px;color:#64748b}

/* id card */
.idcard{width:300px;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:#fff}
.idcard .t{background:var(--navy);color:#fff;padding:12px;text-align:center}
.idcard .t b{font-size:12.5px;display:block;letter-spacing:.2px}
.idcard .t span{font-size:9.5px;color:#a8bcd8}
.idcard .ph{width:78px;height:88px;border-radius:8px;background:#eef2f7;margin:14px auto 8px;
  display:flex;align-items:center;justify-content:center;color:#a9b6c6;font-size:10.5px;border:1px solid var(--line)}
.idcard .nm2{text-align:center;font-size:15px;font-weight:700}
.idcard .rl{text-align:center;font-size:11.5px;color:#7c8ba1;margin-bottom:10px}
.idcard .dt{padding:0 16px 12px;font-size:11.5px}
.idcard .dt div{display:flex;justify-content:space-between;padding:3.5px 0}
.idcard .dt span{color:#8b98ab}
.idcard .qr{width:54px;height:54px;margin:0 auto 10px;
  background:repeating-conic-gradient(#12305a 0 25%,#fff 0 50%) 0 0/13px 13px;border-radius:4px}
.idcard .bt{background:#f4f7fb;padding:7px;text-align:center;font-size:9.5px;color:#8b98ab;border-top:1px solid var(--line)}

/* phone mock */
.phone{width:310px;border:9px solid #16233a;border-radius:32px;overflow:hidden;background:#fff;
  box-shadow:0 12px 30px rgba(16,35,60,.16)}
.phone .st{background:var(--navy);color:#fff;padding:14px 16px 16px}
.phone .st .r1{display:flex;justify-content:space-between;font-size:10px;color:#a8bcd8;margin-bottom:9px}
.phone .st b{font-size:15px;display:block}
.phone .st span{font-size:11px;color:#a8bcd8}
.phone .bdy{padding:14px;background:#f4f7fb;min-height:430px}
.phone .mini{background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px;margin-bottom:11px}
.phone .mini h4{font-size:12px;margin-bottom:9px;color:#7c8ba1;text-transform:uppercase;letter-spacing:.5px}
.phone .tabbar{display:flex;background:#fff;border-top:1px solid var(--line)}
.phone .tabbar div{flex:1;text-align:center;padding:9px 0;font-size:9.5px;color:#9aa7b8}
.phone .tabbar div.on{color:var(--blue);font-weight:700}
.phone .tabbar div i{display:block;font-size:14px;font-style:normal;margin-bottom:2px}

.footnote{margin-top:30px;padding-top:16px;border-top:1px solid var(--line);
  font-size:11.5px;color:#98a5b6;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
@media print{.side,.top{display:none}.wrap{padding:0}body{background:#fff}}


/* ============ PART 2 — working app (was app.css) ============ */
:root { --r: #c2213b; --r-soft: #fdeef1; }

/* -------------------------------------------------------- real controls -- */
input.inp, select.inp, textarea.inp {
  font-family: inherit; font-size: 13.5px; line-height: 1.4;
  color: var(--ink); outline: none; -webkit-appearance: none; appearance: none;
}
textarea.inp { resize: vertical; min-height: 78px; }
select.inp {
  padding-right: 30px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, #8b98ab 50%),
                    linear-gradient(135deg, #8b98ab 50%, transparent 50%);
  background-position: calc(100% - 17px) 17px, calc(100% - 12px) 17px;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.inp:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37, 99, 235, .13); }
.inp:disabled, .inp[readonly] { background: #f6f8fb; color: #94a3b8; cursor: not-allowed; }
input.inp::placeholder, textarea.inp::placeholder { color: #9aa7b8; }
.fhint { display: block; font-style: normal; font-size: 11.5px; color: #8b98ab; margin-top: 5px; }
/* The masked Aadhaar input and its Show button (APP.aadhaar, 0025) */
.aa-row { display: flex; gap: 8px; align-items: center; }
.aa-row .inp { flex: 1 1 auto; min-width: 0; }
/* The student's photo on the enrol / edit form */
.ph-pick { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; }
.ph-pick > div:last-child { min-width: 0; }
.ph-img { flex: none; width: 90px; height: 108px; border-radius: 8px; border: 1px dashed #b8c6d8; background: #f8fafc;
  display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ph-img span { font-size: 11px; color: #8b98ab; }
.ph-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chk { display: flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; }
.chk input { width: 16px; height: 16px; accent-color: var(--blue); }

/* ---------------------------------------------------------- buttons ------ */
button.btn, a.btn { cursor: pointer; font-family: inherit; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn:not(:disabled):hover { filter: brightness(1.06); }
.btn.o:not(:disabled):hover { background: #f6f9fd; border-color: #cbd5e1; filter: none; }
.btn.r { background: var(--red); color: #fff; }
.btn.sm { padding: 5px 11px; font-size: 12px; }
.iconbtn {
  width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--line);
  background: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.iconbtn svg { width: 16px; height: 16px; stroke: #64748b; fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; }
.iconbtn:hover { background: #f6f9fd; }
.iconbtn:hover svg { stroke: var(--ink); }
.burger { display: none; background: none; border: 0; font-size: 20px; cursor: pointer;
  color: var(--ink); padding: 0 12px 0 0; }

/* a chip that can be clicked (Edit / View actions in tables) */
button.chip, a.chip { cursor: pointer; border: 0; font-family: inherit; }
button.chip:hover, a.chip:hover { filter: brightness(.95); }

/* ---------------------------------------------------------- feedback ----- */
.loading {
  padding: 46px 20px; text-align: center; color: #8b98ab; font-size: 13px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
}
.loading:after { content: ''; display: block; width: 22px; height: 22px; margin: 12px auto 0;
  border: 2.5px solid #dbe3ee; border-top-color: var(--blue); border-radius: 50%;
  animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.empty { padding: 44px 20px; text-align: center; }
.empty b { display: block; font-size: 14px; color: #64748b; margin-bottom: 4px; }
.empty span { font-size: 12.5px; color: #98a5b6; }

.n-r { background: var(--red-soft); color: #9f1239; }

/* ------------------------------------------------------------ toasts ----- */
.toasts { position: fixed; right: 20px; bottom: 20px; z-index: 90;
  display: flex; flex-direction: column; gap: 9px; }
.toast {
  background: var(--navy); color: #fff; padding: 11px 17px; border-radius: 9px;
  font-size: 13px; font-weight: 600; box-shadow: 0 8px 22px rgba(16, 35, 60, .22);
  transform: translateY(14px); opacity: 0; transition: .22s;
}
.toast.go { transform: none; opacity: 1; }
.toast.bad { background: var(--red); }

/* ------------------------------------------------------------- modal ----- */
.modal-bg {
  position: fixed; inset: 0; background: rgba(15, 30, 55, .46); z-index: 80;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 40px 18px; overflow-y: auto;
}
.modal { background: #fff; border-radius: 13px; width: 100%; max-width: 520px;
  box-shadow: 0 18px 50px rgba(12, 26, 48, .3); }
.modal.sm { max-width: 400px; }
.modal.lg { max-width: 760px; }
.modal > .hd { padding: 15px 20px; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; }
.modal > .hd h3 { font-size: 15px; }
.modal .x { background: none; border: 0; font-size: 24px; line-height: 1;
  color: #94a3b8; cursor: pointer; padding: 0 2px; }
.modal .x:hover { color: var(--ink); }
.modal > .bd { padding: 20px; }
.mfoot { display: flex; justify-content: flex-end; gap: 9px; margin-top: 20px;
  padding-top: 16px; border-top: 1px solid var(--line); }

/* ------------------------------------------------------ attendance mk ---- */
button.mk { cursor: pointer; font-family: inherit; transition: .1s; }
button.mk:hover { border-color: #94a3b8; }
button.mk.p:hover, button.mk.a:hover, button.mk.l:hover { border-color: transparent; }
.att tbody tr:hover td { background: #fbfcfe; }
.att tr.dirty td:first-child { box-shadow: inset 3px 0 0 var(--blue); }

/* ------------------------------------------------------- marks grid ------ */
.marks-grid { overflow-x: auto; }
.marks-grid table { min-width: 620px; }
input.mark {
  width: 64px; padding: 6px 8px; text-align: center; border: 1px solid #d7dfe9;
  border-radius: 7px; font-size: 13.5px; font-family: inherit; color: var(--ink);
  font-variant-numeric: tabular-nums; outline: none;
}
input.mark:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37, 99, 235, .13); }
input.mark.changed { border-color: var(--blue); background: #f5f9ff; }
input.mark.bad { border-color: var(--red); background: var(--red-soft); }
input.mark:disabled { background: #f6f8fb; color: #94a3b8; }
.absent-tick { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: #8b98ab; }

/* sticky first two columns so roll + name stay visible while scrolling */
.marks-grid th:nth-child(-n+2), .marks-grid td:nth-child(-n+2) {
  position: sticky; background: #fff; z-index: 1;
}
.marks-grid th:nth-child(-n+2) { background: #f8fafc; z-index: 2; }
.marks-grid th:nth-child(1), .marks-grid td:nth-child(1) { left: 0; }
.marks-grid th:nth-child(2), .marks-grid td:nth-child(2) { left: 62px; }

/* --------------------------------------------------------- save bar ------ */
.savebar {
  position: sticky; bottom: 0; background: #fff; border-top: 1px solid var(--line);
  padding: 13px 18px; display: flex; gap: 11px; align-items: center; flex-wrap: wrap;
  border-radius: 0 0 12px 12px; z-index: 4;
}
.savebar .spacer { flex: 1; }

/* ------------------------------------------------------------- tabs ------ */
.tabs button { background: none; border: 0; font-family: inherit; cursor: pointer;
  padding: 10px 16px; font-size: 13.5px; font-weight: 600; color: #7c8ba1;
  border-bottom: 2px solid transparent; }
.tabs button.on { color: var(--blue); border-bottom-color: var(--blue); }
.tabs button:hover { color: var(--ink); }

/* ------------------------------------------------------------ login ------ */
.login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: linear-gradient(150deg, #12305a 0%, #0d2444 55%, #17406f 100%); }
.login-box { width: 100%; max-width: 396px; background: #fff; border-radius: 15px;
  padding: 34px 32px 28px; box-shadow: 0 22px 60px rgba(6, 18, 38, .4); }
.login-box .crest { width: 54px; height: 54px; border-radius: 14px;
  background: linear-gradient(140deg, #3b82f6, #1d4ed8); display: flex; align-items: center;
  justify-content: center; margin: 0 auto 15px; }
.login-box .crest svg { width: 28px; height: 28px; stroke: #fff; fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; }
.login-box h1 { font-size: 19px; text-align: center; letter-spacing: -.2px; }
.login-box .tag { text-align: center; font-size: 12.5px; color: #8b98ab; margin: 4px 0 22px; }
.login-box .btn { width: 100%; justify-content: center; padding: 11px; font-size: 14px; }
.login-err { background: var(--red-soft); color: #9f1239; border-radius: 8px;
  padding: 10px 13px; font-size: 12.5px; margin-bottom: 15px; }
.login-foot { text-align: center; font-size: 11.5px; color: #94a3b8; margin-top: 20px;
  padding-top: 16px; border-top: 1px solid var(--line); }
.roles-hint { display: flex; gap: 6px; justify-content: center; margin-top: 12px; flex-wrap: wrap; }

/* ------------------------------------------------------------ misc ------- */
.tablewrap { overflow-x: auto; }
.right-actions { display: flex; gap: 8px; align-items: center; }
.badge-lock { display: inline-flex; align-items: center; gap: 5px; }
.linkish { color: var(--blue); font-weight: 600; cursor: pointer; }
.linkish:hover { text-decoration: underline; }
.cal .d.today { outline: 2px solid var(--blue); outline-offset: -2px; }
.kv-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 26px; }

/* --------------------------------------------------------- responsive ---- */
/* Breakpoints are the shared ones (shared/tokens.css): 480 / 768 / 1024 / 1280.
   tools/responsive.js checks every screen from 320px to 1920px. */

/* Grid columns may shrink below their content; the content then scrolls in
   its own box instead of pushing the page wider than the phone. */
.grid > * { min-width: 0; }

/* Tabs scroll sideways rather than wrapping or overflowing. */
.tabs { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a { white-space: nowrap; flex: 0 0 auto; }

@media (max-width: 768px) {
  /* Wide tables (marks, fees, registers) scroll inside their card. */
  .card > .bd { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* A4 documents keep their layout and scroll sideways on a phone; they are
     meant to be printed or saved as PDF, not reflowed. */
  .paper { overflow-x: auto; padding: 20px 16px; }
  /* Tap targets. */
  .burger { min-width: var(--rp-tap); min-height: var(--rp-tap); padding: 0; }
  .iconbtn { width: 40px; height: 40px; }
  .btn { min-height: 40px; }
}
@media (max-width: 1024px) {
  .g5 { grid-template-columns: repeat(3, 1fr); }
  .g4 { grid-template-columns: repeat(2, 1fr); }
  .g-2-1, .g-1-2, .g3 { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .shell { background: var(--bg); }
  .side { position: fixed; left: -260px; z-index: 60; transition: left .22s; }
  .side.open { left: 0; box-shadow: 0 0 0 100vw rgba(10, 22, 40, .45); }
  .burger { display: block; }
  /* Phones: the bar carries the full school name, which wraps, and scrolls
     away with the page instead of staying fixed at the top (2026-09-26). */
  .top { padding: 8px 14px; position: static; height: auto; min-height: 62px; gap: 10px; }
  .top .where { font-size: 12px; min-width: 0; line-height: 1.35; }
  .top .burger, .top .right { flex-shrink: 0; }
  .avatar div:last-child { display: none; }
  .wrap { padding: 16px 14px 40px; }
  .g5, .g4, .g2 { grid-template-columns: 1fr 1fr; }
  .page-h h1 { font-size: 20px; }
  .kv-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .g5, .g4, .g2 { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------- print ----- */
@media print {
  .side, .top, .savebar, .toasts, .page-h > div:last-child, .tabs, .no-print { display: none !important; }
  .wrap { padding: 0; }
  body { background: #fff; }
  .card { border: 0; }
}

/* ------------------------------------------------------- demo mode ------- */
.demo-foot { padding: 12px 16px; margin: 0 12px 8px; border-radius: 9px;
  background: rgba(245, 158, 11, .14); border: 1px solid rgba(245, 158, 11, .3); }
.demo-foot b { display: block; font-size: 11.5px; color: #fbbf24; letter-spacing: .3px;
  text-transform: uppercase; margin-bottom: 4px; }
.demo-foot span { display: block; font-size: 11px; color: #a8bcd8; line-height: 1.45;
  margin-bottom: 8px; }
.demo-foot button { width: 100%; padding: 6px; border-radius: 7px; cursor: pointer;
  border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.08);
  color: #e2e8f0; font: 600 11.5px inherit; font-family: inherit; }
.demo-foot button:hover { background: rgba(255,255,255,.16); }

.demo-card { background: #fff; border: 1px solid var(--line); border-radius: 11px;
  padding: 14px 16px; margin-bottom: 15px; text-align: left; }
.demo-card h4 { font-size: 11px; text-transform: uppercase; letter-spacing: .7px;
  color: #8b98ab; margin-bottom: 9px; }
.demo-row { display: flex; align-items: center; gap: 10px; width: 100%; cursor: pointer;
  padding: 7px 8px; border-radius: 7px; border: 1px solid transparent;
  background: none; text-align: left; font-family: inherit; }
.demo-row:hover { background: #f4f8fd; border-color: #dbe6f5; }
.demo-row .who { flex: 1; min-width: 0; }
.demo-row .who b { display: block; font-size: 12.5px; }
.demo-row .who span { display: block; font-size: 10.5px; color: #8b98ab; line-height: 1.35; }


/* ===========================================================================
   PART 3 — ADDITIONS FOR ROYAL PUBLIC
   ---------------------------------------------------------------------------
   Everything above is the ported design system, unchanged.

   Below is what the live system's screens need and this design never had:
   a sign-in page, the days-present and conduct grid that replaces daily
   attendance, the fee collection month grid, the four-exam result table, the
   audit trail, and the printed credential slip.
   =========================================================================== */


/* =============================================
   SIGN IN
   ============================================= */
.auth {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  background: var(--bg);
}
.auth-side {
  background: linear-gradient(150deg, var(--navy) 0%, var(--navy-2) 100%);
  color: #c7d5ea;
  padding: 48px 52px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.auth-side .brand { border-bottom: none; padding: 0; }
.auth-side .brand .mark { width: 64px; height: 64px; flex-basis: 64px; }
.auth-side h1 { color: #fff; font-size: 30px; letter-spacing: -.4px; margin-bottom: 12px; }
.auth-side p { font-size: 14px; line-height: 1.65; color: #a8bcd8; max-width: 44ch; }
.auth-side .pts { margin-top: 26px; display: flex; flex-direction: column; gap: 13px; }
.auth-side .pt { display: flex; gap: 11px; align-items: flex-start; font-size: 13px; color: #c7d5ea; }
.auth-side .pt i {
  width: 26px; height: 26px; flex: 0 0 26px; border-radius: 7px;
  background: rgba(255,255,255,.1); display: flex; align-items: center;
  justify-content: center; font-style: normal; font-size: 13px;
}
.auth-side .legal { font-size: 11.5px; color: #7e97ba; }

.auth-main { display: flex; align-items: center; justify-content: center; padding: 40px 28px; }
.auth-box { width: 100%; max-width: 390px; }
.auth-box h2 { font-size: 21px; margin-bottom: 5px; }
.auth-box .lede { font-size: 13px; color: #7c8ba1; margin-bottom: 24px; }

.auth-roles { display: flex; gap: 7px; margin-bottom: 20px; }
.auth-role {
  flex: 1; padding: 9px 4px; border-radius: 9px; border: 1px solid var(--line);
  background: #fff; cursor: pointer; font-family: inherit; text-align: center;
  font-size: 12px; font-weight: 600; color: #7c8ba1;
}
.auth-role i { display: block; font-style: normal; font-size: 16px; margin-bottom: 3px; }
.auth-role:hover { border-color: #cbd5e1; background: #f8fafc; }
.auth-role.on { border-color: var(--blue); background: var(--blue-soft); color: var(--blue); }

.auth-note { margin-top: 18px; }

@media (max-width: 768px) {
  .auth { grid-template-columns: 1fr; }
  .auth-side { padding: 32px 26px; }
  .auth-side .pts, .auth-side .legal { display: none; }
  .auth-side h1 { font-size: 23px; }
}


/* =============================================
   DAYS PRESENT & CONDUCT
   ---------------------------------------------
   This school does not keep a daily register. One figure per student per
   session, entered by the class's in-charge teacher, printed on the final
   report card only. The four conduct ratings share the same grid.
   ============================================= */
.dp-head {
  display: flex; flex-wrap: wrap; gap: 18px; align-items: center;
  padding: 14px 18px; border-radius: 11px;
  background: var(--blue-soft); margin-bottom: 16px;
}
.dp-head .fig { display: flex; align-items: baseline; gap: 7px; }
.dp-head .fig b { font-size: 21px; font-weight: 700; color: var(--blue); letter-spacing: -.4px; }
.dp-head .fig span { font-size: 12px; color: #4b6ea8; }
.dp-head .sep { width: 1px; height: 26px; background: rgba(37,99,235,.22); }

td .dp-in {
  width: 74px; padding: 6px 9px; text-align: right;
  font-variant-numeric: tabular-nums; font-weight: 600;
}
td .dp-pct { font-size: 12px; color: #8b98ab; font-variant-numeric: tabular-nums; }
td .dp-pct.low { color: var(--red); font-weight: 600; }

/* The four ratings. Same columns in the database for both mediums; only the
   labels and their order change, which is why the label is never hardcoded
   into the markup on the entry screen. */
.rate { display: inline-flex; gap: 3px; }
.rate button {
  width: 30px; height: 26px; border-radius: 6px; border: 1px solid #dde4ec;
  background: #fff; cursor: pointer; font: 700 11px inherit; font-family: inherit;
  color: #93a1b3;
}
.rate button:hover { border-color: #b8c6d8; }
.rate button.on { background: var(--violet); border-color: var(--violet); color: #fff; }
.rate-key { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11.5px; color: #7c8ba1; }
.rate-key b { color: var(--ink); font-weight: 700; }


/* =============================================
   FEE COLLECTION GRID
   ---------------------------------------------
   Student down the side, the twelve months of the session across, plus a
   column for exam fees. Green paid, amber part paid, blank unpaid.
   ============================================= */
.fee-wrap { overflow-x: auto; }
.fee-grid { min-width: 860px; }
.fee-grid th.mon { text-align: center; width: 54px; padding: 10px 4px; }
.fee-grid td.mon { text-align: center; padding: 6px 4px; }
.fee-cell {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 30px; border-radius: 7px;
  font-size: 11.5px; font-weight: 700; border: 1px solid #e6ecf4;
  background: #fff; color: #c3ccd9; cursor: pointer; font-family: inherit;
}
.fee-cell:hover { border-color: #b8c6d8; }
.fee-cell.paid { background: var(--green-soft); border-color: #bfe3ca; color: var(--green); }
.fee-cell.part { background: var(--amber-soft); border-color: #eccf9a; color: var(--amber); }
.fee-cell.sel  { outline: 2px solid var(--blue); outline-offset: 1px; }
.fee-cell.free { background: var(--violet-soft); border-color: #d9c6f7; color: var(--violet); }
.fee-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 11.5px; color: #7c8ba1; margin-top: 14px; }
.fee-legend i { width: 13px; height: 13px; border-radius: 4px; display: inline-block; margin-right: 6px; vertical-align: -2px; }


/* =============================================
   RESULT TABLE — four exams side by side
   ---------------------------------------------
   Each exam contributes a fixed share of the final result. The weight is
   stored per exam per session, so an old session keeps the rules it was
   graded under. The header shows the share so nobody has to remember it.
   ============================================= */
.res-wrap { overflow-x: auto; }
.res-grid { min-width: 780px; }
.res-grid th.ex { text-align: center; border-left: 1px solid var(--line); }
.res-grid th.ex span { display: block; font-size: 9.5px; letter-spacing: .4px; color: #a3b0c2; font-weight: 600; text-transform: none; margin-top: 2px; }
.res-grid td.ex { text-align: center; border-left: 1px solid #eef2f7; font-variant-numeric: tabular-nums; }
.res-grid td.ex.ab { color: var(--red); font-weight: 700; }
.res-grid th.fin, .res-grid td.fin { background: #f8fafc; }
.res-grid td.fin { font-weight: 700; font-variant-numeric: tabular-nums; }

/* A subject that carries a grade letter and no marks. It prints on the card
   but is left out of every total, percentage and rank. */
.gradeonly { color: var(--violet); font-weight: 700; }


/* =============================================
   AUDIT TRAIL
   ============================================= */
.audit-row { display: grid; grid-template-columns: 88px 1fr auto; gap: 14px; align-items: start;
  padding: 12px 0; border-bottom: 1px solid #eef2f7; }
.audit-row:last-child { border-bottom: 0; }
.audit-when { font-size: 11.5px; color: #8b98ab; font-variant-numeric: tabular-nums; }
.audit-what b { font-size: 13px; display: block; }
.audit-what span { font-size: 11.5px; color: #8b98ab; }
.audit-what .chip { margin-top: 4px; }

/* The working screen: each change opens to show what it was before. */
.au-item { border-bottom: 1px solid #eef2f7; }
.au-item:last-child { border-bottom: 0; }
.au-item > summary { list-style: none; display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; gap: 14px;
  align-items: start; padding: 12px 0; cursor: pointer; }
.au-item > summary::-webkit-details-marker { display: none; }
.au-item[data-empty] > summary { cursor: default; }
.au-item:not([data-empty]) > summary .audit-what b:after { content: ' ▸'; color: #b6c1d0; font-weight: 400; }
.au-item[open]:not([data-empty]) > summary .audit-what b:after { content: ' ▾'; }
.au-item .audit-what b { overflow-wrap: anywhere; }
.au-who { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; font-size: 11.5px; color: #64748b; text-align: right; }
.au-body { padding: 0 0 12px 102px; }
table.au-f td { padding: 5px 10px; font-size: 12px; border-bottom: 1px dashed #e8edf4; vertical-align: top; }
table.au-f td:first-child { color: #7c8ba1; width: 38%; }
table.au-f s { color: #94a3b8; }
@media (max-width: 600px) {
  .au-item > summary { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .au-item .audit-when br { display: none; }
  .au-who { flex-direction: row; align-items: center; }
  .au-body { padding-left: 0; }
}


/* =============================================
   CREDENTIAL SLIP
   ---------------------------------------------
   Printed and cut up, one per family. The password is shown once and then
   destroyed, so a sheet can never be reopened. Print before closing.
   ============================================= */
.slips { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 14px; }
.slip { border: 1px dashed #b8c6d8; border-radius: 10px; padding: 15px 17px; background: #fff; }
.slip .sh { display: flex; justify-content: space-between; align-items: center; gap: 10px;
  border-bottom: 1px solid var(--line); padding-bottom: 8px; margin-bottom: 10px; }
.slip .sh b { font-size: 12.5px; display: flex; align-items: center; gap: 8px; }
.slip .sh b img { width: 30px; height: 30px; flex: none; }
.slip .sh span { font-size: 10.5px; color: #8b98ab; }
.slip .who { font-size: 14px; font-weight: 700; margin-bottom: 2px; }
.slip .cls { font-size: 11.5px; color: #8b98ab; margin-bottom: 11px; }
.slip .cred { background: #f8fafc; border-radius: 8px; padding: 10px 12px; }
.slip .cred div { display: flex; justify-content: space-between; padding: 3px 0; font-size: 12.5px; }
.slip .cred span { color: #8b98ab; }
.slip .cred b { font-family: 'Consolas', 'Courier New', monospace; letter-spacing: .4px; }
.slip .keep { font-size: 10.5px; color: #8b98ab; margin-top: 9px; line-height: 1.45; }


/* =============================================
   SMALL SHARED BITS
   ============================================= */
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 18px; }
.toolbar .field { margin-bottom: 0; }
.toolbar .field span { font-size: 11.5px; }
.toolbar .grow { flex: 1; min-width: 160px; }

/* A number that is deliberately not filled in yet, on a demo screen. */
.demo-val { border-bottom: 1px dotted #c3ccd9; }

.step-note { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 16px; }
.step-note .n {
  width: 22px; height: 22px; flex: 0 0 22px; border-radius: 50%;
  background: var(--navy); color: #fff; display: flex; align-items: center;
  justify-content: center; font-size: 11.5px; font-weight: 700;
}
.step-note p { font-size: 12.5px; color: #64748b; }


/* =============================================
   TIMETABLE BUILDER            (admin only)
   ---------------------------------------------
   Days down, periods across. A cell holds a subject and the teacher taking it.
   A clash is the same teacher in two places in the same period, anywhere in the
   school — so it can only be detected across every class at once, not within
   the grid you happen to be looking at.
   ============================================= */
.tt-wrap { overflow-x: auto; }
.tt { min-width: 900px; border-collapse: separate; border-spacing: 5px; }
.tt th { background: none; border: 0; padding: 4px 6px; }
.tt th.per { text-align: center; font-size: 10.5px; }
.tt th.per span { display: block; font-weight: 400; text-transform: none;
  letter-spacing: 0; color: #a3b0c2; margin-top: 2px; }
.tt td { border: 0; padding: 0; }
.tt td.day {
  width: 88px; font-size: 12px; font-weight: 700; color: var(--ink);
  background: #f8fafc; border-radius: 8px; text-align: center; padding: 8px 4px;
}

.tt-cell {
  display: block; width: 100%; min-height: 62px; padding: 8px 9px;
  border: 1px solid var(--line); border-radius: 9px; background: #fff;
  text-align: left; font-family: inherit; cursor: pointer;
}
.tt-cell:hover { border-color: #b8c6d8; background: #fbfdff; }
.tt-cell b { display: block; font-size: 12.5px; color: var(--ink); }
.tt-cell span { display: block; font-size: 11px; color: #8b98ab; margin-top: 2px; }
.tt-cell.empty { border-style: dashed; color: #b6c1d0; }
.tt-cell.empty b { color: #b6c1d0; font-weight: 500; }
.tt-cell.break { background: #f4f7fb; border-style: dashed; cursor: default; }
.tt-cell.break b { color: #8b98ab; font-weight: 600; }

/* A clash. Deliberately loud — an unnoticed one puts a teacher in two rooms. */
.tt-cell.clash { border-color: var(--red); background: var(--red-soft); }
.tt-cell.clash b { color: #9f1239; }
.tt-cell.clash span { color: #b91c1c; font-weight: 600; }
.tt-cell.clash:after {
  content: '⚠ clash'; display: block; margin-top: 5px;
  font-size: 10px; font-weight: 700; letter-spacing: .4px;
  text-transform: uppercase; color: var(--red);
}

.tt-key { display: flex; gap: 16px; flex-wrap: wrap; font-size: 11.5px; color: #7c8ba1; margin-top: 14px; }
.tt-key i { width: 13px; height: 13px; border-radius: 4px; display: inline-block;
  margin-right: 6px; vertical-align: -2px; }

/* Teacher load, beside the grid. A timetable that validates can still be a bad
   one, and this is the column that shows it. */
.load-row { display: grid; grid-template-columns: 1fr 58px 70px; gap: 10px;
  align-items: center; padding: 9px 0; border-bottom: 1px solid #eef2f7; }
.load-row:last-child { border-bottom: 0; }
.load-row .who b { font-size: 12.5px; display: block; }
.load-row .who span { font-size: 11px; color: #8b98ab; }
.load-row .n { font-size: 13px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.load-row .n.over { color: var(--red); }

/* The working screen: its state, read-only cells, routines, print. */
.tt-state { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.tt-state .tx { flex: 1 1 320px; min-width: 0; }
.tt-state .tx b { display: block; font-size: 13.5px; }
.tt-state .tx span { font-size: 12px; color: #7c8ba1; }
.tt-state .tx b .chip { margin-right: 6px; }
.tt-state .field { margin: 0; }
.tt-which { min-width: 190px; }
.tt-bad { color: var(--red); display: inline !important; font-size: inherit !important; }
.tt-sch { margin-top: 18px; }
.tt-sch:first-child { margin-top: 0; }
.tt-cell.ro { cursor: default; }
.tt-cell.ro:hover { border-color: var(--line); background: #fff; }
.tt-cell.empty.ro:hover { border-color: var(--line); }
.tt-cell.off { background: #f4f7fb; }
.tt-cell.act b { color: #475569; font-style: italic; }
.tt-key i.k-set { background: #fff; border: 1px solid var(--line); }
.tt-key i.k-empty { background: #fff; border: 1px dashed #b6c1d0; }
.tt-key i.k-clash { background: var(--red-soft); border: 1px solid var(--red); }
.tt-key i.k-mine { background: var(--blue-soft); border: 1px solid var(--blue); }
/* A teacher's own lessons, on the whole school's timetable. */
.tt-cell.mine { border-color: var(--blue); background: var(--blue-soft); box-shadow: inset 3px 0 0 var(--blue); }
.tt-cell.mine b { color: var(--blue); }
.tt-cell.mine span { color: #1e40af; }
.tt td.day.mine { background: var(--blue-soft); color: var(--blue); }
@media print { .tt-cell.mine { border: 2px solid #000; background: #eee; box-shadow: none; } }
.tt-clash { margin-bottom: 10px; cursor: pointer; }
.tt-clash .btn { margin-left: 6px; }
.tt-days { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 4px; }
.tt-routine { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin-bottom: 12px; }
.tt-routine-hd { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.tt-routine-hd b { display: block; font-size: 13.5px; }
.tt-routine-hd span { font-size: 12px; color: #7c8ba1; }
.tt-periods { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); column-gap: 14px; }
button.tt-per { width: 100%; background: none; border: 0; border-bottom: 1px solid #eef2f7; text-align: left;
  font-family: inherit; cursor: pointer; padding: 9px 4px; }
button.tt-per:hover { background: #f8fafc; }
button.tt-per.brk .tx b { color: #7c8ba1; }
@media print {
  .tt-noprint, .tt-state, .demo-foot { display: none !important; }
  .tt { min-width: 0; width: 100%; }
  .tt-wrap { overflow: visible; }
  .tt-cell { min-height: 0; border-color: #999; }
  .tt-cell.clash:after { content: none; }
  .card { box-shadow: none; border: 0; }
}


/* =============================================
   PAYROLL                      (admin only)
   ---------------------------------------------
   Salary is the most sensitive thing a small school keeps. These screens are
   reachable by the office account and nobody else — not the accountant, who
   handles fee collection and nothing more.
   ============================================= */
.pay-lock {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 11px; border-radius: 20px;
  background: var(--violet-soft); color: var(--violet);
  font-size: 11.5px; font-weight: 700;
}

.slip-paper { max-width: 620px; }
.slip-paper .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 26px; }
.slip-paper table td { padding: 8px 12px; }
.slip-paper .net {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 16px; padding: 13px 16px; border-radius: 9px;
  background: var(--green-soft);
}
.slip-paper .net span { font-size: 12.5px; font-weight: 700; color: var(--green); }
.slip-paper .net b { font-size: 21px; color: var(--green); letter-spacing: -.4px; }

/* The working payroll screen. */
.pay-lines { display: grid; gap: 8px; margin-bottom: 8px; }
.pay-lines:empty { display: none; }
.pay-line { display: grid; grid-template-columns: minmax(0, 1fr) 120px 34px; gap: 8px; align-items: center; }
.pay-line .iconbtn { font-size: 18px; color: #64748b; }
.pay-net { margin-top: 10px; font-size: 14px; }
.pay-net b { font-size: 17px; color: var(--green); }
.pay-words { font-size: 12px; color: #64748b; margin-top: 8px; }
.pay-slips { display: grid; gap: 18px; }
.pay-slips .pay-slip { margin: 0 auto; }
.linkbtn { background: none; border: 0; padding: 0; font: inherit; color: var(--blue); text-decoration: underline; cursor: pointer; }
table.pay-t td.num .mut { display: block; font-size: 11px; }
table.pay-t .pay-st { margin-top: 4px; }
table.pay-t .right-actions { flex-wrap: wrap; }
@media (max-width: 768px) {
  table.stack-t.pay-t td.d-only, table.stack-t.pay-t th.d-only { display: none; }
}
@media (max-width: 480px) {
  .slip-paper .row2 { grid-template-columns: 1fr; }
  .pay-line { grid-template-columns: minmax(0, 1fr) 90px 34px; }
}
/* The short letterhead on a pay slip and a receipt: the name in red, as on
   the school's own letterhead, the name in Assamese under it. */
.pay-slip .ph h2, .rcpt-hd b { color: #C00000; }
.pay-slip .ph .as, .rcpt-hd span.as { display: block; margin-top: 2px; font-family: Kalpurush, 'Nirmala UI', Vrinda, 'Noto Sans Bengali', sans-serif;
  font-weight: 700; font-size: 12px; line-height: 1.3; color: #1A1A2E; }
/* A signature the office chose (Signatures screen, 0038), on its line. */
[data-sig] { position: relative; }
img.sig { position: absolute; left: 50%; bottom: calc(100% - 4px); transform: translateX(-50%);
  height: 40px; width: auto; max-width: 100%; object-fit: contain; pointer-events: none; }

/* A salary bill is an A5 page of its own, one a sheet (the school, 6 Oct 2026). */
@page pay-a5 { size: A5 portrait; margin: 7mm; }
@media print {
  body.print-slip:has(.pay-slips) { page: pay-a5; }
  body.print-slip .pay-slips { display: block; }
  body.print-slip .pay-slip { page: pay-a5; break-after: page; border: 0; max-width: none; padding: 0; font-size: 11px; }
  body.print-slip .pay-slip:last-child { break-after: auto; }
  body.print-slip .slip-paper .row2 { grid-template-columns: 1fr 1fr; gap: 10px; }
  body.print-slip .pay-slip .ph { padding-bottom: 8px; margin-bottom: 10px; }
  body.print-slip .pay-slip .ph .crest { width: 44px; height: 44px; margin-bottom: 5px; }
  body.print-slip .pay-slip .ph h2 { font-size: 15px; }
  body.print-slip .pay-slip .ph .adr { font-size: 9.5px; }
  body.print-slip .pay-slip .ph .ttl { margin-top: 7px; }
  body.print-slip .pay-slip .kv { font-size: 11px; }
  body.print-slip .pay-slip table { font-size: 11px; margin-top: 8px !important; }
  body.print-slip .pay-slip table th, body.print-slip .pay-slip table td { padding: 4px 7px; }
  body.print-slip .pay-slip .net { margin-top: 10px; }
  body.print-slip .pay-slip .pay-words { font-size: 10.5px; }
  body.print-slip .pay-slip .sign { margin-top: 30px; }
}


/* =============================================
   WORKING SCREENS                 (js/app.js)
   ---------------------------------------------
   The screens on the real database. Until app.js has checked the login the
   page stays hidden, so a signed-out visitor never sees it before being
   sent to the sign-in page.
   ============================================= */
.auth-wait .main { visibility: hidden; }
/* A class like .row sets display, which would otherwise beat the hidden attribute. */
[hidden] { display: none !important; }

/* Sidebar: which screens are still previews, and which are not built yet. */
.nav a em {
  margin-left: auto; font-style: normal; font-size: 9.5px; font-weight: 700;
  letter-spacing: .5px; text-transform: uppercase; color: #7e97ba;
  border: 1px solid rgba(126, 151, 186, .35); border-radius: 5px; padding: 1px 5px;
}
.nav a.on em { color: #64748b; border-color: #cbd5e1; }

/* Twelve months of fee collection: scrolls inside its card on a phone
   rather than squeezing the month names together. */
.chart.months { gap: 8px; }
.chart.months .col .val { font-size: 10px; white-space: nowrap; }
@media (max-width: 768px) { .chart.months { min-width: 520px; } }


/* =============================================
   CLASSES & SUBJECTS
   ============================================= */
.g-cls { grid-template-columns: 290px 1fr; align-items: start; }
.cls-list { padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.cls-item {
  display: block; width: 100%; text-align: left; background: none; border: 1px solid transparent;
  border-radius: 9px; padding: 9px 11px; cursor: pointer; font-family: inherit; color: var(--ink);
}
.cls-item b { display: flex; align-items: center; gap: 7px; font-size: 13px; }
.cls-item span { display: block; font-size: 11.5px; color: #8b98ab; margin-top: 1px; }
.cls-item b .chip { font-size: 10px; padding: 1px 7px; }
.cls-item:hover { background: #f6f9fd; }
.cls-item.on { background: var(--blue-soft); border-color: #cfe0fb; }
.cls-item.on b { color: var(--blue); }
.cls-item.off { opacity: .7; }
.cls-pick { display: none; }

table.subj td { vertical-align: top; }
table.subj .ord { white-space: nowrap; }
.ord-n { display: inline-block; width: 22px; font-weight: 700; color: #8b98ab; font-variant-numeric: tabular-nums; }
.mv { display: inline-flex; gap: 4px; vertical-align: middle; }
.mv button {
  width: 28px; height: 26px; border: 1px solid var(--line); border-radius: 6px; background: #fff;
  font-size: 9px; color: #64748b; cursor: pointer; font-family: inherit;
}
.mv button:hover:not(:disabled) { border-color: #94a3b8; color: var(--ink); }
.mv button:disabled { opacity: .35; cursor: default; }
.sub-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.sub-detail { display: block; margin-top: 4px; }
tr.sub-off .nm { color: #94a3b8; text-decoration: line-through; }

.opt-row { display: flex; gap: 8px; margin-bottom: 8px; }
.opt-row .inp { flex: 1; }
.opt-row .iconbtn { flex: 0 0 auto; font-size: 18px; color: #64748b; }
.fm-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.fm-grid label span { font-weight: 500; font-size: 11.5px; min-height: 2.6em; }

@media (max-width: 1024px) {
  .g-cls { grid-template-columns: 1fr; }
  .cls-side { display: none; }
  .cls-pick { display: block; max-width: 420px; }
}
@media (max-width: 768px) {
  .fm-grid { grid-template-columns: 1fr 1fr; }
  .mv button { width: 36px; height: 36px; font-size: 11px; }
}
@media (max-width: 480px) {
  .card > .hd { flex-wrap: wrap; }
  .modal-bg { padding: 16px 10px; }
  .modal > .bd { padding: 16px; }
  .mfoot { flex-wrap: wrap; }
}


/* =============================================
   STAFF & LOGINS
   ============================================= */
.mono { font-family: 'Consolas', 'Courier New', monospace; letter-spacing: .2px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.stat .v .of { font-size: 14px; font-weight: 600; color: #8b98ab; letter-spacing: 0; }
details.priv { border: 1px solid var(--line); border-radius: 9px; padding: 11px 14px; }
details.priv summary { cursor: pointer; font-size: 13px; font-weight: 600; color: #5b6b80; }
table.stack-t td { vertical-align: top; }
table.stack-t td .mut { display: block; margin-top: 2px; }
table.stack-t .right-actions { flex-wrap: wrap; }
table.teach-t select.inp { min-width: 180px; }
table.teach-t td { padding: 7px 14px; }
/* On a phone each person is a small card, not a row that scrolls sideways. */
@media (max-width: 768px) {
  table.stack-t thead { display: none; }
  table.stack-t, table.stack-t tbody, table.stack-t tr { display: block; }
  table.stack-t tr { padding: 12px 16px; border-bottom: 1px solid #eef2f7; }
  table.stack-t tr:last-child { border-bottom: 0; }
  table.stack-t td { display: inline-block; border: 0; padding: 3px 10px 3px 0; vertical-align: middle; }
  table.stack-t td:first-child { display: block; padding-bottom: 6px; }
  table.stack-t td.num { display: block; text-align: left; padding-top: 8px; }
  table.stack-t td.num .right-actions { justify-content: flex-start !important; }
  table.stack-t td:empty { display: none; }
}
@media (max-width: 480px) {
  .row2 { grid-template-columns: 1fr; }
}
/* Print only the login slip, nothing behind it. */
@media print {
  body.print-slip .shell, body.print-slip .toasts { display: none !important; }
  body.print-slip .modal-bg { position: static; background: none; padding: 0; }
  body.print-slip .modal { box-shadow: none; max-width: none; }
  body.print-slip .slips { grid-template-columns: 1fr 1fr; }
  body.print-slip .slip { break-inside: avoid; }
  body.print-slip .modal > .hd, body.print-slip .modal .note, body.print-slip .mfoot { display: none !important; }
}


/* =============================================
   STUDENTS
   ============================================= */
h4.fsec { font-size: 11px; letter-spacing: .7px; text-transform: uppercase; color: #8b98ab;
  margin: 6px 0 10px; padding-bottom: 6px; border-bottom: 1px solid #eef2f7; }
h4.fsec:first-child { margin-top: 0; }
.field span em { color: var(--red); font-style: normal; }
table.stu-t td .mut { display: block; margin-top: 2px; }
.m-only { display: none; }
@media (max-width: 768px) {
  table.stu-t td.d-only { display: none; }
  table.stu-t td.who { display: block; padding-bottom: 6px; }
  table.stu-t .m-only { display: block; }
}


/* =============================================
   MARKS AND DAYS PRESENT
   ============================================= */
.exam-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 12px; }
.exam-strip .ex { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px;
  border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px; }
.exam-strip .ex > div { flex: 1 1 100%; }
.exam-strip .ex b { display: block; font-size: 13px; }
.exam-strip .ex span { font-size: 11.5px; color: #8b98ab; }
.exam-strip .ex .chip { color: inherit; }
table.mk-t tr.dirty td:first-child, table.dp-t tr.dirty td:first-child { box-shadow: inset 3px 0 0 var(--blue); }
table.mk-t td .mut { display: block; font-size: 11.5px; }
table.mk-t select.mark-g { width: 90px; margin: 0 auto; padding: 6px 26px 6px 10px; }
table.mk-t input.ab { width: 17px; height: 17px; accent-color: var(--red); }
table.dp-t input.dp-in { width: 90px; }
.dp-low { color: var(--red); font-weight: 600; }
/* A teacher may well enter marks on a phone: the boxes must be on screen,
   not scrolled off to the right. The grade is only a hint, so it goes. */
.marks-grid table.mk-t { min-width: 0; }
@media (max-width: 480px) {
  table.mk-t .g-col, table.mk-t td[data-grade] { display: none; }
  table.mk-t th, table.mk-t td { padding: 9px 8px; }
  table.mk-t th:first-child, table.mk-t td:first-child { width: 36px; }
  table.mk-t input.mark { width: 60px; }
  table.mk-t .marks-grid th:nth-child(2), .marks-grid table.mk-t td:nth-child(2) { left: 36px; }
}


/* =============================================
   RESULTS
   ============================================= */
table.res-t th.sub-h { white-space: normal; min-width: 70px; line-height: 1.25; }
table.res-t td.low { color: var(--red); font-weight: 600; }
table.res-t td.ab { color: var(--red); font-weight: 700; font-size: 12px; }
table.res-t .fin { background: #f8fafc; }
table.res-t td.fin .mut { font-size: 11px; }
table.res-t td.nm .chip { font-size: 10.5px; padding: 1px 7px; margin-left: 4px; }
.exam-strip .ex .bar { max-width: 100%; }


/* =============================================
   FEES
   ============================================= */
.fee-cell.late { background: var(--red-soft); border-color: #f3b8c3; color: var(--red); }
.fee-cell.part.late { background: var(--red-soft); border-color: var(--red); color: var(--red); }
.fee-cell.later { color: #94a3b8; border-style: dashed; }
.fee-cell.none { border-color: transparent; background: none; color: #cbd5e1; cursor: default; }
span.fee-cell { cursor: default; }
table.fc-t td.nm { min-width: 180px; }
table.fc-t td.nm .linkish { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; text-align: left; }
table.fc-t td.nm .mut { display: block; font-size: 11px; font-weight: 400; }
.owe { color: var(--red); font-weight: 600; }
table.col-t input.amt { width: 110px; text-align: right; }
table.col-t td { vertical-align: middle; }
.col-total { display: flex; justify-content: flex-end; align-items: baseline; gap: 14px; margin: 6px 0 4px; }
.col-total span { font-size: 12px; color: #8b98ab; text-transform: uppercase; letter-spacing: .6px; font-weight: 700; }
.col-total b { font-size: 22px; letter-spacing: -.4px; }
/* ---------------------------------------------------------------------------
   RECEIPTS — every one the school gives (fees, the shop, a parent's copy),
   one look: APP.receipt() in js/app.js. The school's printed papers' style
   (css/docs.css): navy and gold, a double rule, the crest behind.
   --------------------------------------------------------------------------- */
@font-face { font-family: 'Cinzel'; src: url('../assets/fonts/cinzel-latin-wght.woff2') format('woff2'); font-weight: 400 900; font-display: swap; }
.rcpt {
  --r-navy: #0B1A3B; --r-navy-3: #1E3A6B; --r-gold: #D4A02A; --r-gold-2: #F5C35A; --r-gold-d: #9A6A0C;
  --r-ink: #1A1A2E; --r-muted: #5A6A8A; --r-line: #DCE2EC; --r-tint: #F4F6FB;
  position: relative; isolation: isolate; overflow: hidden;
  max-width: 560px; margin: 0 auto; padding: 7px;
  background: #fff; color: var(--r-ink);
  border: 2.5px solid var(--r-navy); border-radius: 4px;
  font-family: var(--rp-font-body); font-size: 13px; line-height: 1.4;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
/* One A5 page, always the same: the table takes the room between the head
   and the foot, so the total stands in one place whatever the items. */
.rcpt { box-sizing: border-box; display: flex; flex-direction: column; }
.rcpt-pages .rcpt + .rcpt { margin-top: 18px; }
.rcpt-in { flex: 1; display: flex; flex-direction: column; }
.rcpt-body { flex: 1; display: flex; flex-direction: column; }
.rcpt-body table.rcpt-t { flex: 1; }
table.rcpt-t td:empty::before { content: '\00a0'; }
.rcpt-title small { flex: none; font-size: 10px; color: var(--r-muted); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.rcpt-total.more span { color: #fff; letter-spacing: .08em; }
.rcpt-words { min-height: 3.6em; }          /* the PAID stamp's height, stamp or not */
.rcpt-note span.off { color: #B42318; font-weight: 600; font-style: normal; }
.rcpt-wm { position: absolute; z-index: -1; left: 50%; top: 54%; width: 62%; transform: translate(-50%, -50%); opacity: .06; pointer-events: none; }
.rcpt-in { border: 1px solid var(--r-gold); padding: 16px 18px 12px; }

.rcpt-hd { display: grid; grid-template-columns: 58px 1fr; gap: 12px; align-items: center; padding-bottom: 11px;
  border-bottom: 2px solid var(--r-navy); box-shadow: 0 2px 0 #fff, 0 3px 0 var(--r-gold); }
.rcpt-hd img { width: 58px; height: 58px; }
.rcpt-hd b { display: block; font-family: 'Cinzel', Georgia, serif; font-weight: 700; color: var(--r-navy); font-size: 17px; line-height: 1.15; letter-spacing: .01em; text-wrap: balance; }
.rcpt-hd span { display: block; font-size: 10.5px; color: var(--r-muted); margin-top: 3px; line-height: 1.35; }

.rcpt-title { display: flex; align-items: center; gap: 10px; margin: 14px 0 12px; }
.rcpt-title::before, .rcpt-title::after { content: ''; flex: 1; border-top: 1px solid var(--r-gold); }
.rcpt-title span { background: var(--r-navy); color: #fff; font-family: 'Cinzel', Georgia, serif; font-weight: 700; font-size: 12.5px;
  letter-spacing: .16em; text-transform: uppercase; padding: 5px 16px; border-radius: 4px; box-shadow: inset 0 0 0 2px var(--r-navy), inset 0 0 0 3px var(--r-gold); }

.rcpt-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); border: 1px solid var(--r-line); border-radius: 6px; overflow: hidden; }
.rcpt-meta > div { padding: 7px 10px; border-left: 1px solid var(--r-line); background: rgba(244,246,251,.75); min-width: 0; }
.rcpt-meta > div:first-child { border-left: 0; }
.rcpt-meta span { display: block; font-size: 9.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--r-muted); }
.rcpt-meta b { display: block; font-size: 13px; color: var(--r-ink); overflow-wrap: anywhere; }
.rcpt-meta .no { background: #FBF3DE; }
.rcpt-meta .no b { font-family: var(--rp-font-head); font-size: 17px; color: var(--r-gold-d); letter-spacing: .02em; }

.rcpt-from { margin: 12px 0 10px; padding: 8px 12px; border-left: 4px solid var(--r-gold); background: rgba(244,246,251,.8); border-radius: 0 6px 6px 0; }
.rcpt-from span { display: block; font-size: 9.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--r-muted); }
.rcpt-from b { display: block; font-family: var(--rp-font-head); font-size: 16px; color: var(--r-navy); }
.rcpt-from small { display: block; font-size: 11.5px; color: var(--r-muted); }

table.rcpt-t { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 12.5px; }
table.rcpt-t th { background: var(--r-navy); color: #fff; font-family: var(--rp-font-head); font-weight: 600; font-size: 10.5px;
  text-transform: uppercase; letter-spacing: .06em; padding: 7px 9px; text-align: left; }
table.rcpt-t td { padding: 7px 9px; border-bottom: 1px solid var(--r-line); background: rgba(255,255,255,.6); }
table.rcpt-t tbody tr:nth-child(even) td { background: rgba(244,246,251,.75); }
table.rcpt-t .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.rcpt-t .sn { width: 28px; text-align: center; color: var(--r-muted); }

.rcpt-total { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 8px; padding: 9px 12px;
  background: var(--r-navy); color: #fff; border-radius: 5px; box-shadow: inset 0 0 0 1px var(--r-navy), inset 0 0 0 2px var(--r-gold); }
.rcpt-total span { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--r-gold-2); font-weight: 600; }
.rcpt-total b { font-family: var(--rp-font-head); font-size: 22px; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.rcpt-words { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; font-size: 12px; font-style: italic; color: var(--r-ink); }
.rcpt-words span { font-style: normal; font-size: 9.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--r-muted); margin-right: 6px; }
.rcpt-sums { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 2px 16px; margin-top: 6px; font-size: 11.5px; }
.rcpt-sums span { color: var(--r-muted); margin-right: 5px; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.rcpt-sums b { font-variant-numeric: tabular-nums; }
.rcpt-off { margin-top: 10px; padding: 8px 11px; border: 1.5px solid #B42318; border-radius: 6px; background: #FDECEC; color: #8A1C1C; font-size: 12px; }

.rcpt-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; margin-top: 14px; }
.rcpt-foot .paid { font-size: 12px; color: var(--r-muted); }
.rcpt-sign { display: flex; align-items: flex-end; gap: 14px; }
.rcpt-sign .seal { width: 58px; height: 58px; border-radius: 50%; border: 1px dashed var(--r-muted); display: grid; place-items: center;
  text-align: center; font-size: 9px; line-height: 1.2; color: var(--r-muted); flex: none; }
.rcpt-sign .ln { min-width: 130px; border-top: 1px solid var(--r-ink); padding-top: 4px; text-align: center; font-weight: 600; font-size: 12px; color: var(--r-navy); }
.rcpt-sign .ln small { display: block; font-weight: 400; font-size: 10px; color: var(--r-muted); }
.rcpt-note { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 12px; padding-top: 6px;
  border-top: 1px solid var(--r-line); font-size: 10px; color: var(--r-muted); }
.rcpt-note span:last-child { font-style: italic; color: var(--r-gold-d); }

/* PAID stamped beside the amount in words; CANCELLED right across the paper. */
.rcpt-stamp { flex: none; margin: 4px 6px 0 0; transform: rotate(-9deg); pointer-events: none;
  padding: 2px 12px; border: 3px double #1B6B3A; border-radius: 6px; color: #1B6B3A; opacity: .8; font-style: normal;
  font-family: var(--rp-font-head); font-weight: 800; font-size: 19px; letter-spacing: .18em; text-transform: uppercase; }
.rcpt-stamp.off { position: absolute; z-index: 2; top: 45%; right: 50%; margin: 0; transform: translate(50%, -50%) rotate(-18deg);
  border-color: #B42318; color: #B42318; font-size: 26px; opacity: .5; }

@media (max-width: 480px) {
  .rcpt-in { padding: 12px 11px 10px; }
  .rcpt-hd { grid-template-columns: 44px 1fr; gap: 9px; }
  .rcpt-hd img { width: 44px; height: 44px; }
  .rcpt-hd b { font-size: 14px; }
  .rcpt-meta { grid-template-columns: 1fr 1fr; }
  .rcpt-meta > div:nth-child(3) { border-left: 0; }
  .rcpt-meta > div:nth-child(n+3) { border-top: 1px solid var(--r-line); }
  .rcpt-foot { flex-direction: column; align-items: stretch; }
  .rcpt-sign { justify-content: space-between; }
  .rcpt-stamp { font-size: 16px; padding: 2px 9px; }
}
/* On paper: the receipt alone, each page exactly one A5 sheet (the school,
   6 and 20 Oct 2026). 12 rows a page (APP.receipt) fit with room to spare. */
@page rcpt-a5 { size: A5 portrait; margin: 6mm; }
@media print {
  body.print-rcpt { page: rcpt-a5; }
  body.print-rcpt .modal, body.print-rcpt .modal > .bd { padding: 0; margin: 0; }
  body.print-rcpt .rcpt { page: rcpt-a5; max-width: none; width: 100%; margin: 0; font-size: 10px; line-height: 1.3; break-inside: avoid;
    height: 197mm; break-after: page; }
  body.print-rcpt .rcpt-pages .rcpt + .rcpt { margin-top: 0; }
  body.print-rcpt .rcpt:last-child { break-after: auto; }
  body.print-rcpt .rcpt-in { padding: 10px 12px 8px; }
  body.print-rcpt .rcpt-hd { grid-template-columns: 46px 1fr; gap: 9px; padding-bottom: 8px; }
  body.print-rcpt .rcpt-hd img { width: 46px; height: 46px; }
  body.print-rcpt .rcpt-hd b { font-size: 14px; }
  body.print-rcpt .rcpt-hd span { font-size: 9px; }
  body.print-rcpt .rcpt-title { margin: 9px 0 8px; }
  body.print-rcpt .rcpt-title span { font-size: 11px; padding: 4px 12px; }
  body.print-rcpt .rcpt-meta b { font-size: 11.5px; }
  body.print-rcpt .rcpt-meta .no b { font-size: 14px; }
  body.print-rcpt .rcpt-from { margin: 8px 0 6px; padding: 6px 10px; }
  body.print-rcpt .rcpt-from b { font-size: 14px; }
  body.print-rcpt table.rcpt-t { font-size: 11px; margin-top: 6px; }
  body.print-rcpt table.rcpt-t th { font-size: 9.5px; padding: 5px 7px; }
  body.print-rcpt table.rcpt-t td { padding: 2.5px 7px; line-height: 1.25; }
  body.print-rcpt .rcpt-total { padding: 7px 10px; }
  body.print-rcpt .rcpt-total b { font-size: 18px; }
  body.print-rcpt .rcpt-sums { margin-top: 4px; font-size: 10px; }
  body.print-rcpt .rcpt-sums span { font-size: 8.5px; }
  body.print-rcpt .rcpt-words { font-size: 10.5px; }
  body.print-rcpt .rcpt-foot { margin-top: 10px; }
  body.print-rcpt .rcpt-sign .seal { width: 48px; height: 48px; }
  body.print-rcpt .rcpt-sign .ln { min-width: 110px; font-size: 11px; }
}
.fp-rules { align-items: flex-end; }
.fp-rules .field { max-width: 240px; }
table.fp-t th .mut { display: block; font-size: 9.5px; letter-spacing: .3px; }
table.fp-t td { padding: 7px 12px; }
button.price { background: none; border: 1px solid transparent; border-radius: 7px; padding: 5px 9px; cursor: pointer;
  font: inherit; font-variant-numeric: tabular-nums; color: var(--ink); }
button.price:hover { border-color: #cbd5e1; background: #f6f9fd; }
button.price.none { color: #94a3b8; }
table.fp-hist { margin-bottom: 4px; }
table.fp-hist td { padding: 7px 10px; }
.tabs button { white-space: nowrap; flex: 0 0 auto; }


/* =============================================
   DASHBOARD CHARTS                  (js/dashboard.js)
   ---------------------------------------------
   One hue for magnitude (the portal blue), its pale step for the track;
   green only for "done", always with ✓ and the word. Text is ink, never the
   data colour. Every mark has a tooltip on hover and focus, and every chart
   a table view.
   ============================================= */
.viz { display: block; max-width: 100%; }
.viz .grid { stroke: #eef2f7; stroke-width: 1; }
.viz .axis { stroke: #d7dfe9; stroke-width: 1; }
.viz .tick { font-size: 11px; fill: #8b98ab; font-family: var(--rp-font-body); }
.viz .val { font-size: 11px; font-weight: 700; fill: var(--ink); font-family: var(--rp-font-body); }
.viz .billed { fill: #cfdcf7; }
.viz .collected { fill: var(--blue); }
.viz .hitbox { fill: transparent; }
.viz g.hit { outline: none; cursor: default; }
.viz g.hit:hover .hitbox, .viz g.hit:focus .hitbox { fill: rgba(37, 99, 235, .06); }
.viz g.hit:hover .collected, .viz g.hit:focus .collected { fill: #1d4ed8; }
.viz-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 11.5px; color: #5b6b80; margin-bottom: 4px; }
.viz-legend .sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.viz-legend .sw.billed { background: #cfdcf7; }
.viz-legend .sw.collected { background: var(--blue); }
.viz-tip { position: fixed; z-index: 95; pointer-events: none; background: #fff; border: 1px solid var(--line);
  border-radius: 8px; padding: 7px 11px; box-shadow: 0 6px 18px rgba(16, 35, 60, .14); font-size: 11.5px; max-width: 260px; }
.viz-tip b { display: block; font-size: 13.5px; color: var(--ink); }
.viz-tip span { color: #7c8ba1; }
.viz-exam { width: auto; padding: 5px 30px 5px 10px; font-size: 12.5px; }
table.viz-table td { padding: 7px 12px; }

.meters { display: flex; flex-direction: column; gap: 6px; }
.meter { display: grid; grid-template-columns: minmax(0, 1.2fr) 2fr 76px; align-items: center; gap: 12px;
  padding: 5px 6px; border-radius: 7px; outline: none; }
.meter:hover, .meter:focus { background: #f6f9fd; }
.m-label { font-size: 13px; font-weight: 600; min-width: 0; }
.m-label .mut { display: block; font-weight: 400; font-size: 11px; }
.m-track { height: 10px; background: var(--blue-soft); border-radius: 5px; overflow: hidden; }
.m-track i { display: block; height: 100%; background: var(--blue); border-radius: 0 5px 5px 0; }
.m-track i.done { background: var(--green); }
.m-val { font-size: 12.5px; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.m-done { color: var(--green); font-weight: 700; }

.hbars { display: flex; flex-direction: column; gap: 4px; }
.hbar { display: grid; grid-template-columns: 84px 1fr; align-items: center; gap: 10px; padding: 3px 4px; border-radius: 6px; outline: none; }
.hbar:hover, .hbar:focus { background: #f6f9fd; }
.h-label { font-size: 12px; color: #5b6b80; font-weight: 600; }
.h-track { display: flex; align-items: center; gap: 8px; min-width: 0; }
.h-track i { display: block; height: 14px; background: var(--blue); border-radius: 0 4px 4px 0; min-width: 2px; flex: 0 0 auto; }
.h-track b { font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }

@media (max-width: 480px) {
  .meter { grid-template-columns: 1fr auto; }
  .meter .m-track { grid-column: 1 / -1; grid-row: 2; }
}
.viz-toggle { flex: 0 0 auto; }            /* a chart card's Chart / Table switch */


/* =============================================
   NOTICES AND THE CALENDAR
   ============================================= */
.nt-row { align-items: flex-start; }
.nt-row.nt-off { opacity: .72; }
.nt-row .tx span { display: block; }
.nt-body { color: var(--body) !important; font-size: 12.5px !important; margin: 3px 0 6px; white-space: pre-line;
  display: -webkit-box !important; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.nt-chips { display: flex !important; flex-wrap: wrap; gap: 5px; margin-bottom: 4px; }
.nt-act { flex-wrap: wrap; justify-content: flex-end; }
.nt-form { display: grid; grid-template-columns: 1.3fr 1fr; gap: 20px; }
.nt-prev-h { display: block; font-size: 12px; font-weight: 600; color: #5b6b80; margin-bottom: 6px; }
.nt-prev { border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; background: #fbfcfe; }
.nt-prev-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 8px; font-size: 11.5px; }
.nt-prev b { display: block; font-size: 14.5px; margin-bottom: 4px; }
.nt-prev p { font-size: 13px; color: var(--body); line-height: 1.55; }
@media (max-width: 768px) { .nt-form { grid-template-columns: 1fr; } }

.cl-nav { display: flex; align-items: center; gap: 10px; }
.cl-nav h3 { min-width: 150px; text-align: center; }
.cl-nav .iconbtn { font-size: 18px; color: #5b6b80; }
.cl-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cl-h { font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; color: #8b98ab; text-align: center; font-weight: 700; padding-bottom: 4px; }
.cl-d { min-height: 84px; border: 1px solid #eef2f7; border-radius: 8px; padding: 4px; cursor: pointer; display: flex;
  flex-direction: column; gap: 3px; min-width: 0; position: relative; }
.cl-d:hover { border-color: #cbd5e1; }
.cl-d.blank { border: 0; cursor: default; }
.cl-d.off { background: #f6f8fb; }
.cl-d.today { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
.cl-n { font-size: 11.5px; font-weight: 700; color: #5b6b80; }
.cl-d.sun .cl-n { color: var(--red); }
.cl-ev { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10.5px;
  padding: 2px 6px; border-radius: 5px; text-align: left; }
.cl-dot { display: none; }
.cl-key { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 12px; font-size: 11.5px; }
button.cl-row { width: 100%; background: none; border: 0; border-bottom: 1px solid #eef2f7; text-align: left; cursor: pointer;
  font-family: inherit; color: inherit; }
button.cl-row:hover { background: #f8fafc; }
.cl-count { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.cl-count b { font-size: 30px; letter-spacing: -.6px; color: var(--blue); }
.cl-count span { font-size: 12.5px; color: #5b6b80; }
/* On a phone the month is a grid of dates with a count; the list below it names them. */
@media (max-width: 600px) {
  .cl-d { min-height: 44px; align-items: center; }
  .cl-ev { display: none; }
  .cl-dot { display: block; position: absolute; bottom: 3px; right: 3px; min-width: 15px; height: 15px; border-radius: 8px;
    background: var(--blue); color: #fff; font-size: 9.5px; font-weight: 700; text-align: center; line-height: 15px; }
  .cl-nav h3 { min-width: 0; }
}


/* =============================================
   THE PARENT'S VIEW          (phone first)
   ============================================= */
.pa-head { margin-bottom: 18px; }
.pa-top { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }
.pa-who { display: flex; gap: 14px; align-items: center; flex: 1 1 260px; min-width: 0; }
.pa-av { width: 56px !important; height: 56px !important; font-size: 19px !important; }
.pa-photo { border-radius: 50%; object-fit: cover; object-position: center 20%; flex: none; background: #e2e8f0; }
.pa-name { font-size: 19px; font-weight: 700; letter-spacing: -.2px; }
.pa-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; flex: 2 1 420px; }
.pa-tiles .stat { padding: 11px 13px; }
.pa-tiles .stat .v { font-size: 21px; margin: 5px 0 2px; }
table.pa-res th .mut { display: block; font-size: 9.5px; font-weight: 600; }
table.pa-res td.ab { color: var(--red); font-weight: 700; font-size: 12px; }
table.pa-res td.low { color: var(--red); font-weight: 600; }
table.pa-res tr.tot td { font-size: 12.5px; }
table.pa-res .fin { background: #f8fafc; }
.pa-body { display: block; color: var(--body) !important; font-size: 13px !important; white-space: pre-line; margin: 3px 0; }
.pa-notice { align-items: flex-start; }
@media (max-width: 768px) {
  .pa-tiles { grid-template-columns: 1fr 1fr 1fr; flex-basis: 100%; }
}
@media (max-width: 480px) {
  .pa-tiles { grid-template-columns: 1fr; }
  .pa-tiles .stat { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 0 10px; }
  .pa-tiles .stat .n { grid-column: 1 / -1; }
  table.pa-fee thead { display: none; }
  table.pa-fee, table.pa-fee tbody, table.pa-fee tr { display: block; }
  table.pa-fee tr { padding: 10px 14px; border-bottom: 1px solid #eef2f7; }
  table.pa-fee td { display: inline-block; border: 0; padding: 2px 10px 2px 0; }
  table.pa-fee td.nm { display: block; }
}
.pa-who .avatar div:last-child { display: flex !important; }   /* not the header's name, which phones hide */


/* =============================================
   PROMOTE SESSION
   ============================================= */
.stat .v.pr-bad { color: var(--red); }
table.pr-t tr.pr-need td { background: #fffafa; }
table.pr-t td .chip + .mut { margin-top: 4px; }
.pr-dec { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.pr-dec select.inp { min-width: 230px; max-width: 100%; }
.pr-why { display: block; margin-top: 4px; font-size: 11.5px; color: var(--red); }
table.pr-t td .mut { display: block; }
.pr-go-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }
.pr-go-in b { display: block; font-size: 15px; }
.pr-go-in span { font-size: 12.5px; color: #64748b; }
ul.pr-next { margin: 0 0 6px 18px; font-size: 13px; line-height: 1.8; }
@media (max-width: 480px) {
  .pr-dec select.inp { min-width: 0; width: 100%; }
}


/* =============================================
   ARCHIVE
   ============================================= */
table.ar-t td .mut { display: block; margin-top: 2px; }
.ar-why { max-width: 260px; }
.ar-rec { max-width: none; padding: 26px 28px; }
.ar-kv { display: grid; grid-template-columns: 1fr 1fr; gap: 0 26px; margin-bottom: 16px; }
table.ar-years td { vertical-align: top; }
table.ar-years td:first-child { white-space: nowrap; }
table.ar-years td .mut { display: block; margin-top: 3px; font-size: 11px; }
.ar-owed { color: var(--red); }
.ar-keep { margin-right: auto; font-size: 12px; align-self: center; }
@media (max-width: 600px) {
  .ar-kv { grid-template-columns: 1fr; }
  .ar-rec { padding: 18px 14px; }
}
@media print {
  body.print-slip .ar-rec { border: 0; padding: 0; }
  body.print-slip .ar-kv { grid-template-columns: 1fr 1fr; }
}


/* ------------------------------------------------ Exams & Date Sheet (0026) */
.ds-t { display: flex; flex-direction: column; gap: 8px; }
.ex-top { margin-bottom: 16px; align-items: start; }
.ex-top #ds-classes { max-height: 420px; overflow-y: auto; }
.ds-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(170px, 1fr) minmax(125px, .7fr) minmax(125px, .7fr) 40px;
  gap: 8px; align-items: center; }
.ds-row.ds-h { font-size: 11.5px; font-weight: 600; color: #8b98ab; text-transform: uppercase; letter-spacing: .4px; }
.ds-row .inp { padding: 7px 9px; min-width: 0; }
.ds-sub b { display: block; font-size: 13.5px; }
.ds-sub .mut { display: block; font-size: 11.5px; }
.ds-d { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ds-d em { flex: 0 0 28px; font-style: normal; font-size: 11.5px; color: #8b98ab; }
.ds-row.sun .ds-d .inp { border-color: var(--red); background: var(--red-soft); }
.ds-copy { display: flex; flex-direction: column; gap: 8px; max-height: 300px; overflow-y: auto; }
table.ds-cls tr.on td { background: var(--blue-soft); }
table.ds-cls td { padding: 9px 16px; }
table.ds-cls .linkish { background: none; border: 0; padding: 8px 0; min-height: 36px; font: inherit; font-weight: 600; color: var(--blue); }
table.ds-cls td { padding-top: 2px; padding-bottom: 2px; }
@media (max-width: 640px) {
  .ds-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 40px; padding-bottom: 10px; border-bottom: 1px solid #eef2f7; }
  .ds-row.ds-h { display: none; }
  .ds-sub { grid-column: 1 / -1; }
  .ds-d { grid-column: 1 / -2; }
  .ds-row [data-clear] { grid-column: 3; grid-row: 2; }
  table.ds-cls tr { display: flex; justify-content: space-between; align-items: center; }
}

/* The parent's printed sheets (0028): wrap on a phone. */
.pa-print { flex-wrap: wrap; }

/* Transfer Certificates (0029): the long particulars take the form's full width. */
.row2 .tc-wide { grid-column: 1 / -1; }
table.tc-t .chip.c-r { margin-left: 6px; }

/* ------------------------------------------------------ School Shop (0030) */
.sp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.sp-item { display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 10px; border: 1px solid var(--line); border-radius: 12px;
  background: #fff; cursor: pointer; font: inherit; color: var(--ink); min-width: 0; }
.sp-item:hover { border-color: var(--blue); box-shadow: 0 2px 10px rgba(37, 99, 235, .12); }
.sp-item b { font-size: 13.5px; line-height: 1.3; }
.sp-item .mut { font-size: 11.5px; }
.sp-item.out { opacity: .55; cursor: not-allowed; }
.sp-item.out:hover { border-color: var(--line); box-shadow: none; }
.sp-price { font-weight: 700; color: var(--blue); }
.sp-pic { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; background: #f1f5f9; display: block; }
.sp-pic.none, .si-pic.none { display: flex; align-items: center; justify-content: center; font-size: 11px; color: #94a3b8; }
.sp-cart { position: sticky; top: 16px; }
.sp-lines { width: 100%; }
.sp-lines td { padding: 8px 0; vertical-align: middle; border-bottom: 1px solid #eef2f7; }
.sp-lines td b { display: block; font-size: 13px; }
.sp-lines .mut { font-size: 11.5px; }
.sp-qty { white-space: nowrap; text-align: center; }
.sp-qty span { display: inline-block; min-width: 26px; font-weight: 700; }
.sp-qty .iconbtn { width: 30px; height: 30px; }
.si-pic { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; background: #f1f5f9; display: block; }
.si-pic-td { width: 64px; }
.si-preview img { max-width: 200px; max-height: 160px; border-radius: 8px; border: 1px solid var(--line); margin-bottom: 10px; display: block; }
table.si-t .chip.c-a { margin-left: 6px; }
@media (max-width: 640px) {
  .sp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-cart { position: static; }
  .si-pic-td { display: none; }
}

/* ======================================================== ADMISSIONS === */
/* admin-admissions.html (js/admissions.js), 0033 */
.ad-switch { margin-bottom: 16px; }
.ad-sw { display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: flex-end; }
.ad-sw-state { display: flex; gap: 12px; align-items: flex-start; flex: 1 1 320px; min-width: 0; }
.ad-sw-state b { display: block; font-size: 14.5px; }
.ad-sw-state .mut { display: block; font-size: 12.5px; }
.ad-sw .field { margin: 0; min-width: 200px; }
.tabs button b { display: inline-block; min-width: 20px; margin-left: 4px; padding: 0 6px; border-radius: 10px; background: var(--blue-soft);
  color: var(--blue); font-size: 11.5px; line-height: 18px; text-align: center; }
.tabs button b:empty { display: none; }
.ad-form .note { margin-bottom: 14px; }
.ad-head { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 16px; align-items: start; }
.ad-photo { width: 110px; height: 132px; border: 1.5px dashed #c5cfdd; border-radius: 8px; overflow: hidden; display: flex;
  align-items: center; justify-content: center; font-size: 12px; color: #8b98ab; background: #f7f9fc; }
.ad-photo img { width: 100%; height: 100%; object-fit: cover; }
.ad-photo-btns { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 4px; }
.ad-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0 14px; }
.ad-grid[hidden] { display: none; }
.ad-grid .ad-wide { grid-column: 1 / -1; }
.ad-h { font-size: 13px; text-transform: uppercase; letter-spacing: .5px; color: var(--navy); margin: 18px 0 8px;
  padding-bottom: 5px; border-bottom: 1px solid var(--line); }
.ad-docs { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px 14px; }
.ad-approve { margin-top: 6px; padding: 2px 14px 4px; border-radius: 10px; background: var(--blue-soft); }
.ad-approve .ad-h { border-bottom-color: rgba(30, 64, 175, .18); }
.ad-foot { flex-wrap: wrap; }
.nav a .nav-n { margin-left: auto; min-width: 20px; padding: 0 6px; border-radius: 10px; background: var(--gold, #F5A623); color: #0B1A3B;
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
@media (max-width: 560px) {
  .ad-head { grid-template-columns: 1fr; }
}

/* The admission form alone on the paper (js/admissions.js printForm). */
#adm-print { display: none; }
@media print {
  body.adm-printing > *:not(#adm-print) { display: none !important; }
  body.adm-printing #adm-print { display: block; }
}

/* Students: "More details, from the admission form" (0033 student_details). */
.st-more { margin: 14px 0 4px; border: 1px solid var(--line); border-radius: 10px; padding: 0 14px; }
.st-more summary { cursor: pointer; padding: 11px 0; font-weight: 600; font-size: 13.5px; color: var(--navy); }
.st-more[open] summary { border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.st-more .st-wide { grid-column: 1 / -1; }
.fsec-s { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: #7c8ba1; margin: 6px 0 8px; }
.st-papers { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px 14px; margin-bottom: 14px; }

/* Students: the Aadhaar card and birth certificate scans (0036), and the
   Print button in the dialog's foot. */
.doc-slots { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.doc-slot { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border: 1px solid var(--line); border-radius: 10px; min-width: 0; }
.doc-thumb { flex: none; width: 64px; height: 64px; border-radius: 8px; border: 1px dashed #b8c6d8; background: #f8fafc;
  display: grid; place-items: center; overflow: hidden; font-size: 10.5px; color: #8b98ab; text-align: center; }
.doc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.doc-slot .tx { min-width: 0; flex: 1; }
.doc-slot .tx b { display: block; font-size: 13.5px; color: var(--navy); }
.doc-slot .tx .mut { display: block; font-size: 12px; margin-top: 2px; overflow-wrap: anywhere; }
.doc-slot .right-actions { margin-top: 8px; flex-wrap: wrap; }
.doc-slot.busy { opacity: .6; pointer-events: none; }
@media (max-width: 640px) {
  .doc-slots { grid-template-columns: 1fr; }
}

/* Staff: the terms shown in the appointment-letter dialog (0036). */
.lt-terms { margin: 0 0 10px; padding-left: 20px; font-size: 13px; line-height: 1.5; color: #475569; }
.lt-terms li { margin-bottom: 4px; }
/* Fees → Receipts over several days: a line a day. Three columns, so it stays
   a table even on a phone. */
table.fr-days td, table.fr-days th { padding: 8px 14px; }
table.fr-days tr.tot td { border-top: 2px solid var(--line); background: #f8fafc; }
@media (max-width: 480px) { table.fr-days td, table.fr-days th { padding: 7px 9px; } }

/* ============================================================ SIGNATURES === */
/* js/signatures.js: who signs, and where each signature prints (0038). */
.sg-row { flex-wrap: wrap; }
.sg-pic { width: 160px; height: 56px; flex: 0 0 auto; display: grid; place-items: center; border: 1px dashed #cbd5e1; border-radius: 8px;
  background: #fff; overflow: hidden; }
.sg-pic img { max-width: 150px; max-height: 50px; object-fit: contain; }
.sg-pic span { font-size: 11.5px; color: #98a5b6; }
.sg-act { flex-wrap: wrap; justify-content: flex-end; }
.sg-prev { margin-top: 14px; padding: 18px 14px 12px; border: 1px solid #e2e8f0; border-radius: 10px; background: #fff; text-align: center; }
.sg-prev .mut { display: block; margin-top: 8px; font-size: 11.5px; color: #8b98ab; }
.sg-line { position: relative; display: inline-block; min-width: 220px; max-width: 100%; padding-top: 64px; }
.sg-line img { position: absolute; left: 50%; bottom: calc(100% - 70px); transform: translateX(-50%); height: 60px; max-width: 100%; object-fit: contain; }
.sg-line .ln { border-top: 1px solid #1A1A2E; padding-top: 4px; font-weight: 600; font-size: 12.5px; color: #0B1A3B; }
.sg-line .ln small { display: block; font-weight: 400; font-size: 11px; color: #64748b; }
.sg-doc + .sg-doc { margin-top: 18px; padding-top: 16px; border-top: 1px solid #eef2f7; }
.sg-doc h4 { margin: 0 0 8px; font-size: 13.5px; }
.sg-warn { margin-bottom: 10px; }
.sg-place { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 340px); gap: 12px; align-items: center; padding: 5px 0; }
.sg-place > span { font-size: 12.5px; color: #475569; }
@media (max-width: 600px) {
  .sg-pic { width: 120px; }
  .sg-place { grid-template-columns: 1fr; gap: 4px; }
  .sg-act { width: 100%; justify-content: flex-start; }
}

/* ======================================================= BOOKS & NOTEBOOKS === */
/* js/books.js: one child's items by subject (collect), and the price list. */
table.bk-t td, table.bk-price td { vertical-align: middle; }
table.bk-t td .mut, table.bk-price td .mut { display: block; margin-top: 2px; font-size: 11.5px; }
table.bk-t input.amt { width: 110px; text-align: right; }
table.bk-t .nm, table.bk-price .nm { font-weight: 600; }
tr.bk-grp td { background: #f6f8fb; font-size: 11.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: #64748b;
  padding-top: 8px; padding-bottom: 8px; }
.bk-grp-hd { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.bk-grp-hd .right-actions { align-items: center; text-transform: none; letter-spacing: 0; }
.bk-grp-hd b { color: #0f172a; font-size: 13px; }
.bk-grp-hd .chip, .bk-grp-hd .mut { text-transform: none; letter-spacing: 0; font-weight: 600; }
.bk-grp-hd .mut { font-weight: 400; }
tr.bk-off .nm { color: #94a3b8; text-decoration: line-through; }
.bk-kind { font-size: 10.5px; padding: 1px 7px; font-weight: 600; }
td.bk-none { font-size: 12.5px; padding-top: 10px; padding-bottom: 10px; }
.ok { color: var(--green); font-weight: 600; }
.bk-past { margin-top: 18px; padding-top: 14px; border-top: 1px solid #eef2f7; }
.bk-past h4 { margin: 0 0 8px; font-size: 13px; }
.bk-rc { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 7px 0; border-bottom: 1px dashed #eef2f7; font-size: 12.5px; }
.bk-rc .right-actions { margin-left: auto; }
.bk-rc.off > span, .bk-rc.off > b { color: #94a3b8; text-decoration: line-through; }
/* Selling (0043): how many of each, then what is due and what is paid. */
.bk-qty { display: inline-flex; align-items: center; gap: 4px; }
.bk-qty .btn { min-width: 30px; padding-left: 0; padding-right: 0; justify-content: center; }
table.bk-t input.qty { width: 46px; text-align: center; }
.bk-sum { display: grid; gap: 7px; max-width: 340px; margin: 14px 0 0 auto; }
.bk-sum > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 13.5px; }
.bk-sum > div > span { color: #64748b; }
.bk-sum b { font-variant-numeric: tabular-nums; }
.bk-sum .grand { border-top: 1px solid #e2e8f0; padding-top: 7px; font-weight: 700; }
.bk-sum .grand > span { color: inherit; }
.bk-sum input.amt { width: 120px; text-align: right; }
@media (max-width: 480px) {
  table.bk-t th, table.bk-t td { padding-left: 6px; padding-right: 6px; }
  table.bk-t input.amt { width: 84px; }
  .bk-sum { max-width: none; }
  .bk-qty { gap: 2px; }
  table.bk-t input.qty { width: 38px; }
  table.bk-t th:last-child { width: 92px !important; }
  .bk-rc .right-actions { margin-left: 0; width: 100%; }
  table.bk-price td { padding-left: 8px; padding-right: 8px; }
  table.bk-price td:last-child .right-actions { flex-direction: column; align-items: flex-end; gap: 4px; }
}