/* =====================================================================
   College ERP theme
   Built for office staff working all day on dense tables and forms.
   Palette : deep slate rail, teal for actions, amber reserved for money
             that is still owed. Money always uses tabular numerals so
             columns line up when you scan a fee register.
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  --ink:#10162B; --ink-2:#1B2440; --ink-3:#2A3454;
  --accent:#0E7C7B; --accent-dark:#0A5F5E; --accent-soft:#E4F2F1;
  --amber:#B26A00; --amber-soft:#FDF3E2;
  --danger:#B4322A; --danger-soft:#FBEDEC;
  --success:#1E7A4F; --success-soft:#E7F4EE;
  --canvas:#F4F6FA; --surface:#FFFFFF;
  --line:#E2E7F0; --line-strong:#CBD3E1;
  --field-border:#8E9BB5; --field-border-hover:#6E7C99;
  --text:#1A2138; --text-2:#5A6480; --text-3:#8A93AC;
  --rail-w:250px; --rail-w-collapsed:64px; --topbar-h:58px;
  --radius:6px; --shadow:0 1px 2px rgba(16,22,43,.06),0 4px 12px rgba(16,22,43,.05);
  --mono:'IBM Plex Mono',ui-monospace,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--canvas);color:var(--text);
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:13.5px;line-height:1.5;-webkit-font-smoothing:antialiased;
}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-dark)}
h1,h2,h3,h4,h5{margin:0;font-weight:600;letter-spacing:-.01em}

/* numerals ------------------------------------------------------------ */
.num,.money,td.num,th.num{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right}
.money::before{content:'\20B9\2009'}
.money.bare::before{content:''}

/* ====================== TOP HORIZONTAL NAVIGATION ====================== */
.shell{display:flex;flex-direction:column;min-height:100vh}

/* brand bar */
.brandbar{
  background:var(--ink);color:#fff;display:flex;align-items:center;gap:14px;
  padding:0 20px;height:54px;position:sticky;top:0;z-index:50;
}
.brandbar .mark{display:flex;align-items:center;gap:10px;min-width:0}
.brandbar .logo{
  width:32px;height:32px;border-radius:7px;background:var(--accent);color:#fff;
  display:grid;place-items:center;font-weight:700;font-size:12.5px;flex:0 0 auto;letter-spacing:-.02em;
}
.brandbar .logo img{width:100%;height:100%;object-fit:contain;border-radius:7px;background:#fff}
.brandbar .who-college{min-width:0;line-height:1.2}
.brandbar .who-college b{display:block;font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:38ch}
.brandbar .who-college span{font-size:10.5px;color:#8A93AC;letter-spacing:.05em;text-transform:uppercase}
.brandbar .spacer{flex:1}

.brandbar .fy select{
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:#fff;
  padding:5px 10px;font-size:12px;font-family:var(--mono);border-radius:var(--radius);width:auto;
}
.brandbar .fy select:focus{border-color:var(--accent);box-shadow:none}
.brandbar .fy option{color:var(--text);background:#fff}

.brandbar .ico{
  width:31px;height:31px;border-radius:var(--radius);border:1px solid rgba(255,255,255,.16);
  background:transparent;color:#C7CEE0;display:grid;place-items:center;font-size:14px;cursor:pointer;
}
.brandbar .ico:hover{background:rgba(255,255,255,.1);color:#fff}
.brandbar .me{display:flex;align-items:center;gap:9px;padding-left:13px;border-left:1px solid rgba(255,255,255,.14)}
.brandbar .me .av{
  width:30px;height:30px;border-radius:50%;background:var(--accent);color:#fff;
  display:grid;place-items:center;font-size:11.5px;font-weight:600;flex:0 0 auto;
}
.brandbar .me .nm{line-height:1.25}
.brandbar .me .nm b{display:block;font-size:12.5px;font-weight:600}
.brandbar .me .nm span{font-size:10.5px;color:#8A93AC}

/* menu bar */
.menubar{
  background:var(--surface);border-bottom:1px solid var(--line);
  position:sticky;top:54px;z-index:45;box-shadow:0 1px 2px rgba(16,22,43,.04);
}
/* No overflow here on purpose. Setting overflow on one axis makes the browser
   compute the other as auto too, which would clip the dropdowns — they hang
   below the bar, outside its box. The bar wraps to a second row instead. */
.menubar-inner{display:flex;align-items:stretch;gap:2px;padding:0 14px;flex-wrap:wrap}

.mnu{position:relative;flex:0 0 auto}
.mnu > button{
  border:none;background:transparent;font-family:inherit;font-size:13px;font-weight:500;
  color:var(--text-2);padding:11px 13px;cursor:pointer;display:flex;align-items:center;gap:5px;
  border-bottom:2.5px solid transparent;white-space:nowrap;
}
.mnu > button:hover{color:var(--text);background:var(--canvas)}
.mnu > button .caret{font-size:8px;opacity:.5;transition:transform .15s}
.mnu.open > button{color:var(--accent-dark);background:var(--accent-soft)}
.mnu.open > button .caret{transform:rotate(180deg);opacity:1}
.mnu.active > button{color:var(--accent-dark);border-bottom-color:var(--accent);font-weight:600}

.mnu-drop{
  display:none;position:absolute;top:100%;left:0;min-width:224px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 8px 26px rgba(16,22,43,.14);
  padding:5px;z-index:60;max-height:70vh;overflow-y:auto;
}
/* A menu near the right edge opens leftwards so it stays on screen. */
.mnu-drop.flip{left:auto;right:0}
.mnu.open .mnu-drop{display:block}
.mnu-drop a{
  display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:4px;
  font-size:13px;color:var(--text);white-space:nowrap;
}
.mnu-drop a:hover{background:var(--canvas);color:var(--accent-dark)}
.mnu-drop a.on{background:var(--accent-soft);color:var(--accent-dark);font-weight:600}
.mnu-drop a i{width:4px;height:4px;border-radius:50%;background:var(--line-strong);flex:0 0 auto}
.mnu-drop a.on i{background:var(--accent)}

.menubar .direct{
  display:flex;align-items:center;padding:11px 13px;font-size:13px;font-weight:500;color:var(--text-2);
  border-bottom:2.5px solid transparent;white-space:nowrap;
}
.menubar .direct:hover{color:var(--text);background:var(--canvas)}
.menubar .direct.active{color:var(--accent-dark);border-bottom-color:var(--accent);font-weight:600}

#navToggle{display:none}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
/* Tightened so more of the screen is the work and less of it is margin.
   Was 20/22 padding with a 16px page-head gap; the band above the first card
   came to roughly 90px before anything useful appeared. */
.content{padding:13px 18px;flex:1;max-width:1600px;width:100%;margin:0 auto}

.page-head{display:flex;align-items:flex-end;gap:12px;margin-bottom:10px;flex-wrap:wrap}
.page-head h1{font-size:19px;letter-spacing:-.015em;line-height:1.2}
.page-head .crumb{font-size:11px;color:var(--text-3);margin-bottom:1px;line-height:1.2}
.page-head .muted.small{line-height:1.3;margin-top:1px}
.page-head .actions{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}

/* ============================ CARDS ============================ */
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:10px;
  box-shadow:0 1px 2px rgba(16,22,43,.05),0 6px 16px -6px rgba(16,22,43,.07);
  overflow:hidden;
}
.card + .card{margin-top:12px}
.card-head{
  padding:10px 15px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px;
  flex-wrap:wrap;background:linear-gradient(180deg,#FDFEFF,#F8FAFC);
}
.card-head h2{font-size:14px;font-weight:600}
.card-head .sub{font-size:11.5px;color:var(--text-3)}
.card-head .right{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.card-body{padding:13px 15px}
.card-body.tight{padding:0}

/* stat tiles */
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(185px,1fr));gap:11px;margin-bottom:11px}
.stat{
  background:var(--surface);border:1px solid var(--line);border-radius:10px;
  padding:11px 14px;position:relative;overflow:hidden;
  box-shadow:0 1px 2px rgba(16,22,43,.05),0 6px 16px -6px rgba(16,22,43,.07);
  transition:transform .14s ease,box-shadow .14s ease;
}
.stat:hover{transform:translateY(-1px);box-shadow:0 2px 4px rgba(16,22,43,.06),0 10px 22px -8px rgba(16,22,43,.12)}
.stat::after{content:'';position:absolute;inset:0 auto 0 0;width:3px;background:var(--accent)}
.stat.owed::after{background:var(--amber)}
.stat.good::after{background:var(--success)}
.stat .label{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.stat .value{font-family:var(--mono);font-size:21px;font-weight:600;letter-spacing:-.02em;margin-top:4px;font-variant-numeric:tabular-nums}
.stat .foot{font-size:11.5px;color:var(--text-2);margin-top:3px}

/* ==================== STUDENT CONTEXT STRIP ====================
   Appears on every student-scoped screen so the operator always knows
   who they are working on and what is still owed.                    */
.student-strip{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;color:#fff;
  background:linear-gradient(120deg,var(--ink) 0%,#1B2440 55%,#17324A 100%);
  border-radius:10px;padding:11px 15px;margin-bottom:11px;
  box-shadow:0 6px 18px -8px rgba(16,22,43,.5);
}
.student-strip .photo{
  width:44px;height:44px;border-radius:6px;background:var(--ink-3);object-fit:cover;
  display:grid;place-items:center;font-weight:600;font-size:15px;color:#8A93AC;flex:0 0 auto;
}
.student-strip .name{font-size:15px;font-weight:600;line-height:1.2}
.student-strip .meta{font-size:11.5px;color:#98A1BC;margin-top:2px}
.student-strip .reg{font-family:var(--mono);font-size:12px;color:#fff;background:rgba(255,255,255,.12);padding:2px 8px;border-radius:4px}
.student-strip .bal{margin-left:auto;text-align:right}
.student-strip .bal .label{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:#98A1BC}
.student-strip .bal .value{font-family:var(--mono);font-size:20px;font-weight:600;font-variant-numeric:tabular-nums}
.student-strip .bal .value.owed{color:#F0B45C}
.student-strip .bal .value.clear{color:#5CD3A0}

/* ============================ TABLES ============================
   A long list scrolls inside its own box, not by moving the whole browser
   window. The header and the totals row stay put while it does, so a clerk
   140 rows down still knows which column is which and can still read the
   total.

   The height is set by script (app.js, sizeTables) from the actual space
   left below the table on this screen, because that space differs from page
   to page: a filter bar, a stat row and a page head all sit above it in
   different combinations. The value here is only the starting point, and a
   table short enough to fit is left alone entirely.

   border-collapse:collapse drops the borders of a sticky cell, so the header
   and footer rules are drawn with inset shadows instead.
   ============================================================== */
.table-wrap{overflow:auto}
table.grid{width:100%;border-collapse:collapse;font-size:13px}
table.grid thead th{
  background:#F7F9FC;
  padding:7px 11px;text-align:left;font-size:11px;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;color:var(--text-2);white-space:nowrap;
  position:sticky;top:0;z-index:3;
  box-shadow:inset 0 -1px 0 var(--line-strong);
}
table.grid thead th.sortable{cursor:pointer;user-select:none}
table.grid thead th.sortable:hover{color:var(--text)}
table.grid thead th .arrow{opacity:.55;font-size:10px;margin-left:3px}
table.grid thead th.sorted .arrow{opacity:1;color:var(--accent)}
/* Rows are tighter so more of them fit on one screen: 8px of padding became
   6px, which is about four more rows per thousand pixels of height without
   the list turning into a wall of text. */
table.grid tbody td{padding:6px 11px;border-bottom:1px solid var(--line);vertical-align:middle}
table.grid tbody tr:hover{background:#FAFBFD}
table.grid tbody tr.selected{background:var(--accent-soft)}
table.grid tfoot td{
  padding:7px 11px;font-weight:600;background:#F7F9FC;
  position:sticky;bottom:0;z-index:3;
  box-shadow:inset 0 2px 0 var(--line-strong);
}
table.grid.compact tbody td{padding:4px 9px}

/* A row of inputs needs a little more room than a row of text. */
table.grid tbody td:has(input,select,textarea){padding-top:4px;padding-bottom:4px}
table.grid .w-1{width:1%;white-space:nowrap}

.empty{padding:44px 20px;text-align:center;color:var(--text-3)}
.empty b{display:block;color:var(--text-2);font-size:14px;margin-bottom:4px}

/* ============================ FORMS ============================ */
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:13px 16px}
.form-grid.two{grid-template-columns:repeat(2,1fr)}
.form-grid.three{grid-template-columns:repeat(3,1fr)}
.field{display:flex;flex-direction:column;gap:4px;min-width:0}
.field.span-2{grid-column:span 2}
.field.span-3{grid-column:span 3}
.field.span-full{grid-column:1/-1}
label{font-size:12px;font-weight:600;color:var(--text);letter-spacing:.01em;margin-bottom:1px}
label .req{color:var(--danger)}
.hint{font-size:11px;color:var(--text-3)}

/* input:not([type]) carries this list.
   An <input /> written with no type attribute is a text box to the browser,
   but it matches NONE of the selectors below — so 171 fields across 13 views
   (student name, father's name, address, tehsil, district, PIN, and most of
   New Registration, Create College, Staff Entry and both certificate forms)
   have been rendering at the browser's default size with no border, no
   padding and no focus ring. It was invisible for as long as those fields
   sat alone in a column; the moment a wide modal put one beside a typed
   field it was obvious they were different boxes.
   :not([type]) cannot match a checkbox or a radio, which always declare one,
   so nothing that should stay small is caught by it. */
input:not([type]),
input[type=text],input[type=number],input[type=date],input[type=datetime-local],
input[type=password],
input[type=email],input[type=tel],input[type=search],input[type=file],select,textarea{
  width:100%;padding:9px 12px;border:1.5px solid var(--field-border);border-radius:6px;
  font-family:inherit;font-size:13.5px;color:var(--text);background:var(--surface);
  transition:border-color .14s ease,box-shadow .14s ease;
  -webkit-appearance:none;appearance:none;
}
input::placeholder,textarea::placeholder{color:#98A2B8;opacity:1}

/* A soft ring, not a neon outline — the field should look focused, not alarmed. */
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(14,124,123,.13);
}
input:hover:not(:focus):not([readonly]):not(:disabled),
select:hover:not(:focus):not(:disabled),
textarea:hover:not(:focus){border-color:var(--field-border-hover)}

/* native select arrow, drawn so it matches the palette */
select{
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%233A4560' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;padding-right:30px;
}
input[type=file]{padding:6px 10px;background:var(--canvas);cursor:pointer}
input[type=file]::file-selector-button{
  border:1px solid var(--line-strong);background:var(--surface);border-radius:5px;
  padding:4px 10px;margin-right:10px;font-family:inherit;font-size:12px;color:var(--text-2);cursor:pointer;
}
input[type=file]::file-selector-button:hover{border-color:var(--accent);color:var(--accent-dark)}
input[readonly],input:disabled,select:disabled,textarea[readonly]{
  background:#EEF1F6;color:var(--text-2);border-color:var(--line-strong);
  cursor:not-allowed;box-shadow:none;
}
input.num-in:focus{background:#FFFDF7}
input.num-in{font-family:var(--mono);text-align:right;font-variant-numeric:tabular-nums}

/* A money box must fit the money.
   table.grid .w-1 collapses a cell to its minimum width, and an input inside
   is width:100%, so an amount box in a grid shrank to a few characters wide
   and 1850.00 was drawn as "185". A min-width sized from the figure pushes
   the column open instead of clipping the number. Ten digits and a decimal
   covers anything a college charges. */
input.num-in{min-width:112px}
table.grid td input.num-in,
table.grid .w-1 input.num-in{min-width:124px}
textarea{min-height:74px;resize:vertical}
.check{display:inline-flex;align-items:center;gap:7px;font-size:13px;cursor:pointer;font-weight:400;color:var(--text)}
.check input{width:15px;height:15px;accent-color:var(--accent);cursor:pointer}
.field-error{font-size:11px;color:var(--danger)}
.input-error{border-color:var(--danger)!important}

fieldset.block{border:none;padding:0;margin:0 0 20px}
fieldset.block > legend{
  font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--accent-dark);
  padding:0 0 8px;margin-bottom:14px;border-bottom:1px solid var(--line);width:100%;
  display:flex;align-items:center;gap:7px;
}
fieldset.block > legend::before{
  content:'';width:3px;height:12px;border-radius:2px;background:var(--accent);flex:0 0 auto;
}

/* ============================ BUTTONS ============================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:8px 15px;border-radius:7px;border:1px solid transparent;
  font-family:inherit;font-size:12.5px;font-weight:600;cursor:pointer;white-space:nowrap;
  transition:background .13s ease,border-color .13s ease,color .13s ease,box-shadow .13s ease,transform .08s ease;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 1px 2px rgba(14,124,123,.3)}
.btn-primary:hover{background:var(--accent-dark);color:#fff;box-shadow:0 2px 8px rgba(14,124,123,.32)}
.btn-outline{background:var(--surface);border-color:var(--line-strong);color:var(--text)}
.btn-outline:hover{background:var(--canvas);border-color:var(--text-3);color:var(--text)}
.btn-ghost{background:transparent;color:var(--text-2)}
.btn-ghost:hover{background:var(--canvas);color:var(--text)}
.btn-danger{background:var(--danger);color:#fff}
.btn-danger:hover{background:#93261F;color:#fff}
.btn-sm{padding:4px 9px;font-size:11.5px}
.btn-lg{padding:10px 20px;font-size:14px}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.btn-row.end{justify-content:flex-end}

/* ============================ BADGES / ALERTS ============================ */
.badge{
  display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:100px;
  font-size:10.5px;font-weight:700;line-height:1.5;background:#EEF1F6;color:var(--text-2);
  white-space:nowrap;letter-spacing:.02em;
}
/* In a list the badge, not the text, was deciding how tall a row is: at 3px
   padding it stood 21.75px against a 19.5px line, so every row with a Stream
   or Status column was taller than the type needed. Trimmed here so a row of
   badges is no taller than a row of plain text. */
table.grid tbody td > .badge{padding-top:1px;padding-bottom:1px}
.badge.teal{background:var(--accent-soft);color:var(--accent-dark)}
.badge.amber{background:var(--amber-soft);color:var(--amber)}
.badge.green{background:var(--success-soft);color:var(--success)}
.badge.red{background:var(--danger-soft);color:var(--danger)}
.badge.grey{background:#EEF1F6;color:var(--text-3)}

.alert{
  padding:12px 15px;border-radius:8px;font-size:13px;margin-bottom:14px;border:1px solid;
  display:flex;align-items:flex-start;gap:8px;
}
.alert-success{background:var(--success-soft);border-color:#B8DFCA;color:#14603C}
.alert-danger{background:var(--danger-soft);border-color:#EFC3BF;color:#8E251E}
.alert-info{background:var(--accent-soft);border-color:#B9DEDC;color:var(--accent-dark)}
.alert-warn{background:var(--amber-soft);border-color:#EFD5A8;color:var(--amber)}
/* An alert sitting on a row of buttons rather than above a card. .alert brings
   a 14px bottom margin and a flex box of its own, which pushes the row out of
   line and makes the button look misaligned. This keeps the colour and drops
   the block behaviour, so it reads as a note beside the button. */
.alert.inline-note{margin-bottom:0;padding:7px 11px;font-size:12.5px;display:inline-block;line-height:1.45}

/* ============================ FILTER BAR ============================ */
.filter-bar{
  display:flex;gap:11px;align-items:flex-end;flex-wrap:wrap;
  padding:13px 17px;background:#F8FAFC;border-bottom:1px solid var(--line);
}
.filter-bar .field{min-width:150px;flex:0 1 auto}
.filter-bar .field.grow{flex:1 1 220px}
.filter-bar .btn-row{margin-left:auto}

/* ============================ PAGINATION ============================ */
.pager{display:flex;align-items:center;gap:8px;padding:11px 16px;border-top:1px solid var(--line);flex-wrap:wrap}
.pager .count{font-size:12px;color:var(--text-2)}
.pager .pages{margin-left:auto;display:flex;gap:4px}
/* Rows-per-page sits next to the count, left of the page numbers, which keep
   their margin-left:auto and stay hard right. */
.pager-size{display:flex;align-items:center;gap:6px;margin:0}
.pager-size label{font-size:12px;color:var(--text-2);margin:0}
.pager-size select{height:28px;padding:2px 24px 2px 8px;font-size:12px;width:auto;min-width:72px}
.pager .pages a,.pager .pages span{
  min-width:29px;height:29px;padding:0 8px;border:1px solid var(--line-strong);border-radius:var(--radius);
  display:grid;place-items:center;font-size:12px;font-family:var(--mono);color:var(--text-2);background:var(--surface);
}
.pager .pages a:hover{border-color:var(--accent);color:var(--accent)}
.pager .pages .on{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}

/* ============================ TABS ============================ */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:16px;overflow-x:auto}
.tabs a{
  padding:9px 15px;font-size:13px;font-weight:500;color:var(--text-2);
  border-bottom:2px solid transparent;white-space:nowrap;
}
.tabs a:hover{color:var(--text)}
.tabs a.active{color:var(--accent-dark);border-bottom-color:var(--accent);font-weight:600}

/* ============================ LOGIN ============================ */


/* ===================== SUBJECT PICKER (student assignments) =====================
   An assignment round opens on this instead of dropping the student straight
   into whichever subject sorted first. Each subject is answered and submitted
   on its own, so each gets a card with its own progress.

   Deliberately NOT called .pick: that class already belongs to the attendance
   marker (.att-pick .pick) and an unscoped rule would restyle it.
   =========================================================================== */
.subjpick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:12px}
.subjpick{display:flex;flex-direction:column;gap:3px;padding:13px 14px;background:var(--surface);
  border:1px solid var(--line);border-left:3px solid var(--line-strong);
  border-radius:var(--radius);color:var(--text)}
.subjpick:hover{border-color:var(--accent);border-left-color:var(--accent);
  box-shadow:0 2px 10px rgba(16,22,43,.08)}
.subjpick-name{font-weight:600;font-size:14px;line-height:1.3}
.subjpick-meta{font-size:12px;color:var(--text-2)}
.subjpick-go{margin-top:9px;align-self:flex-start;font-size:12px;font-weight:600;padding:3px 11px;
  border-radius:999px;color:var(--accent-dark);background:var(--accent-soft)}
.subjpick.part{border-left-color:var(--amber)}
.subjpick.part .subjpick-go{color:var(--amber);background:var(--amber-soft)}
.subjpick.full{border-left-color:var(--accent)}
.subjpick.done{border-left-color:var(--success)}
.subjpick.done .subjpick-go{color:var(--success);background:var(--success-soft)}

/* ===================== DOCUMENT CHIPS (verification) =====================
   One chip per uploaded document, inside a student's row. The whole chip is
   the tick target so a clerk working down a class can hit it without aiming
   at a 13px box; the "view" link inside it opens the file instead, which is
   why its click stops propagating.
   ======================================================================= */
.doc-chips{display:flex;flex-wrap:wrap;gap:6px}
/* The "Receipt no 7" / "Session JUN-2026" pill in a page head.
   Four screens have been writing this class — Other Charges Receipt, Create
   Receipt, Library Issue and Accounts Voucher — and nothing ever defined it,
   so on all four it rendered as bare grey text beside the heading. */
.session-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 11px;border:1px solid var(--accent);border-radius:100px;
  font-size:12px;font-weight:600;background:var(--accent-soft);color:var(--accent-dark);
  white-space:nowrap;
}

.doc-chip{
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  padding:3px 9px 3px 7px;border:1px solid var(--line-strong);border-radius:100px;
  font-size:11.5px;font-weight:500;background:var(--surface);color:var(--text-2);
  transition:background .12s ease,border-color .12s ease,color .12s ease;
}
.doc-chip:hover{border-color:var(--field-border-hover);color:var(--text)}
.doc-chip input[type=checkbox]{width:13px;height:13px;accent-color:var(--accent);margin:0;cursor:pointer}
.doc-chip .nm{white-space:nowrap}
.doc-chip a{font-size:10.5px;color:var(--text-3);text-decoration:underline}
.doc-chip a:hover{color:var(--accent-dark)}
.doc-chip.on{background:var(--success-soft);border-color:#B8DFCA;color:#14603C;font-weight:600}
.doc-chip.on a{color:#2C7A58}
/* Changed but not yet saved, so the clerk can see what this Save will do. */
.doc-chip.moved{box-shadow:0 0 0 2px var(--amber-soft),0 0 0 3px var(--amber)}
@media print{.doc-chip input[type=checkbox],.doc-chip a{display:none}}

/* ===================== NSS VOLUNTEER FORM (print) =====================
   One A4 sheet, laid out to match the college's own sample: a header band
   with the college and the NSS emblem, a title block, then labelled blocks
   of detail. Sized so the whole thing lands on one page with room for three
   signatures — a form that runs to a second page gets filed as two.
   ==================================================================== */
.nss-sheet{font-size:11.5px;color:#101628}
.nss-sheet .mono{font-family:var(--mono)}

.nss-head{display:flex;align-items:center;gap:10mm;padding-bottom:3mm;border-bottom:2px solid #0A3D91}
.nss-head .logo{width:22mm;height:22mm;object-fit:contain;flex:0 0 auto}
.nss-head .logo.ph{display:grid;place-items:center;border:1px solid var(--line-strong);
  border-radius:50%;font-weight:700;color:var(--text-3);font-size:14px}
.nss-head .mid{flex:1;text-align:center}
.nss-head .nm{font-size:19px;font-weight:700;letter-spacing:-.01em;line-height:1.15}
.nss-head .ad{font-size:11px;margin-top:1mm}
.nss-head .cr{font-size:9.5px;color:var(--text-2);margin-top:.8mm}
.nss-head .nss-mark{flex:0 0 auto;text-align:center;width:22mm}
.nss-head .nss-mark .motto{font-size:8px;font-weight:700;margin-top:.5mm;color:#0A3D91}

.nss-title{background:#0A3D91;color:#fff;text-align:center;padding:2.6mm 3mm;margin-top:3mm}
.nss-title .t1{font-size:15px;font-weight:700;letter-spacing:.01em}
.nss-title .t2{font-size:12.5px;font-weight:600;margin-top:.5mm}
.nss-tag{background:#EAF0FA;text-align:center;padding:1.8mm;font-size:11px;font-weight:600;color:#0A3D91}

.nss-block{border:1px solid #C9D6EC;border-radius:3px;margin-top:3mm}
.nss-block .bh{background:#EAF0FA;padding:1.8mm 3mm;font-size:11px;font-weight:700;color:#0A3D91;
  border-bottom:1px solid #C9D6EC}
.nss-block .bb{padding:2.6mm 3mm}

.nss-grid{display:grid;grid-template-columns:1fr 1fr;gap:2.4mm 6mm}
.nss-grid.two{grid-template-columns:1fr 1fr}
.nss-grid .f .l{font-size:8.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3)}
/* An underline, so a blank field is obviously a blank to be filled by hand
   rather than something the system forgot to print. */
.nss-grid .f .v{font-size:12px;font-weight:600;border-bottom:1px dotted #9AA8C4;
  min-height:5.2mm;padding-top:.6mm}

.nss-opt{display:flex;align-items:flex-start;gap:2mm;font-size:11.5px;padding:.8mm 0;line-height:1.35}
.nss-opt .dot{width:3.4mm;height:3.4mm;border:1.2px solid #5A6480;border-radius:50%;flex:0 0 auto;margin-top:.5mm}
.nss-opt .dot.on{border-color:#0A3D91;background:
  radial-gradient(circle at 50% 50%, #0A3D91 0 1.1mm, #fff 1.1mm 100%)}
.nss-opt .tick{width:3.4mm;height:3.4mm;border:1.2px solid #0A3D91;flex:0 0 auto;
  display:grid;place-items:center;font-size:9px;color:#0A3D91;font-weight:700;margin-top:.5mm}
.nss-opt.muted{color:var(--text-3)}

.nss-sign{display:flex;gap:8mm;margin-top:12mm;text-align:center;font-size:10px;color:var(--text-2)}
.nss-sign > div{flex:1}
.nss-sign .ln{border-top:1px solid #5A6480;margin-bottom:1.2mm}

.nss-note{margin-top:4mm;border-top:1px dashed #C9D6EC;padding-top:2mm;
  font-size:9.5px;color:var(--text-2);text-align:center;line-height:1.4}

@media print{
  .nss-sheet{font-size:11px}
  .nss-title{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .nss-tag,.nss-block .bh{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* ============================ PRINT ============================ */
.print-sheet{background:#fff;width:210mm;min-height:297mm;margin:0 auto;padding:14mm;box-shadow:var(--shadow)}
.print-sheet.half{min-height:148mm}
@media print{
  /* The page chrome. These are .brandbar and .menubar — the names in this
     rule were .rail and .topbar, from a layout that no longer exists, so for
     a long time EVERY printed page in the software carried the menu bar and
     the brand bar across the top. That is what was showing above the fee
     receipt.

     .rail is deliberately NOT here any more: it is now the colour rail down
     the side of ID card format 2, and hiding it meant that card printed
     without the one thing that makes it format 2. .topbar matches nothing at
     all and is gone. */
  .brandbar,.menubar,.page-head .actions,.no-print{display:none!important}
  /* The flash banner from the last action ("Receipt 1 saved.") is page
     furniture, not part of the document being printed. */
  .content > .alert{display:none!important}
  /* Every row must print, so the scroll box and its height come off. */
  .table-wrap{max-height:none!important;overflow:visible!important}
  table.grid thead th,table.grid tfoot td{position:static!important;box-shadow:none!important}
  table.grid thead th{border-bottom:1px solid var(--line-strong)}
  table.grid tfoot td{border-top:2px solid var(--line-strong)}
  body{background:#fff}
  .main{margin-left:0}
  .content{padding:0}
  /* min-height:297mm is there so the sheet looks like a page on screen. On
     paper the paper is the page, and leaving it set means the sheet is always
     at least a full A4 tall — so with any print margin at all it runs onto a
     second, nearly empty page. Printing an NSS form proved it: two pages, the
     second carrying nothing.

     .print-sheet.half has to be named as well. It is two classes to one, so it
     wins on specificity and its 148mm survived this override untouched — which
     meant a half sheet still reserved 148mm on paper, and two of them (the
     office copy and the student copy of a receipt) came to 296mm and split
     across two sheets. Dropping a MIN-height can never clip anything; it only
     stops short content reserving space it does not use. */
  .print-sheet,.print-sheet.half{width:auto;box-shadow:none;padding:0;margin:0;min-height:0}
  .card{border:none;box-shadow:none}
}

/* ======================= FEE RECEIPT FORMATS =======================
   Five layouts, one markup. _FeeReceiptCopy.cshtml writes the content once
   and PrintReceipt renders it twice — Student Copy, then Office Copy — inside
   a sheet carrying .rcpt-f1 to .rcpt-f5. Everything that makes the five
   different is below, so adding a field to a receipt is one edit to the
   partial and all five keep it.

   The hard constraint on every one of them: TWO copies must fit on ONE A4
   page. 297mm minus printer margins leaves roughly 277mm, so a copy gets
   about 138mm. None of these set a min-height for exactly the reason the
   comment above gives — a reserved height is what pushes the second copy
   onto a second sheet.
   =================================================================== */
.rcpt-sheet{background:#fff;width:210mm;margin:0 auto;padding:10mm;box-shadow:var(--shadow)}
.rcpt-copy{position:relative}
.rcpt-copytag{
  position:absolute;top:0;right:0;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:var(--text-3);border:1px solid var(--line);border-radius:3px;padding:1px 7px;
}
.rcpt-head{display:flex;align-items:center;gap:11px}
.rcpt-logo{height:48px;object-fit:contain;flex:none}
.rcpt-title{flex:1;min-width:0}
.rcpt-college{font-size:17px;font-weight:700;line-height:1.2}
.rcpt-addr{font-size:10.5px;color:var(--text-2)}
.rcpt-affl{font-size:10px;color:var(--text-3)}
.rcpt-doctype{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-top:3px}
.rcpt-meta{display:flex;gap:18px;flex-wrap:wrap;font-size:11px;margin:7px 0 6px}
.rcpt-cancelled{
  font-size:11.5px;font-weight:700;color:#8E251E;background:var(--danger-soft);
  border:1px solid #EFC3BF;border-radius:4px;padding:4px 8px;margin-bottom:6px;
}
/* Each fact is one cell holding its own label and value, so the two can never
   be split across a wrap. Four across on a full-width sheet, two across where
   the copy is narrow. */
.rcpt-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:4px 10px;font-size:11.5px;margin-bottom:7px}
.rcpt-facts .k{display:block;color:var(--text-3);font-size:9.5px;text-transform:uppercase;letter-spacing:.05em}
.rcpt-facts .v{display:block;font-weight:600;line-height:1.3}
/* .num right-aligns everywhere else, which is right in a money column and
   wrong here — a registration number is a label's value, not a figure in a
   column of figures. The monospace is kept; the alignment is not. */
.rcpt-facts .v.num{text-align:left}
.rcpt-tbl{width:100%;border-collapse:collapse;font-size:11.5px}
.rcpt-tbl th,.rcpt-tbl td{border:1px solid var(--line-strong);padding:3px 7px}
.rcpt-tbl thead th{background:#F3F6F9;font-weight:700;text-align:left}
.rcpt-tbl .sn{width:30px;text-align:center}
.rcpt-tbl .amt{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.rcpt-tbl .right{text-align:right;font-weight:700}
.rcpt-tbl tfoot td{border-top:2px solid var(--line-strong);font-weight:700}
.rcpt-adv td{background:var(--amber-soft)}
.rcpt-words{font-size:11.5px;margin-top:6px}
.rcpt-mode{font-size:11px;margin-top:3px;color:var(--text-2)}
.rcpt-note{font-size:10.5px;margin-top:4px;color:var(--amber)}
.rcpt-due{font-size:11px;margin-top:4px;color:var(--amber);font-weight:600}
.rcpt-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-top:9px}
.rcpt-footl{font-size:9.5px;color:var(--text-3);line-height:1.5}
.rcpt-sign{text-align:center;flex:none}
.rcpt-sign img{height:30px;object-fit:contain;display:block;margin:0 auto}
.rcpt-signline{border-top:1px solid var(--ink);padding-top:2px;min-width:140px;font-size:10.5px}
/* Applied by the partial when a receipt carries more than six fee heads.
   Ten heads is 77mm of table per copy in the roomy layout, which puts two
   copies at 303mm against 281mm of printable A4 — the office copy lands on a
   second sheet. This only tightens the rows, so a four-head receipt keeps the
   room it has and a ten-head one still prints on one page. */
.rcpt-dense .rcpt-tbl{font-size:10.5px}
.rcpt-dense .rcpt-tbl th,.rcpt-dense .rcpt-tbl td{padding:1.5px 6px;line-height:1.25}
.rcpt-dense .rcpt-head{padding-bottom:3px}
.rcpt-dense .rcpt-logo{height:40px}
.rcpt-dense .rcpt-college{font-size:15px}
.rcpt-dense .rcpt-facts{gap:2px 10px;margin-bottom:5px}
.rcpt-dense .rcpt-foot{margin-top:6px}

/* The tear line between the two copies. Hidden where a format puts the copies
   side by side, because there is nothing to tear along. */
.rcpt-cut{
  border-top:1px dashed var(--line-strong);text-align:center;margin:5mm 0;position:relative;
}
.rcpt-cut span{
  position:relative;top:-8px;background:#fff;padding:0 9px;font-size:9px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);
}

/* The paddings and the tear gap below are deliberately tight. Two copies plus
   a tear line have to fit in 281mm of printable A4, and a college with ten fee
   heads rather than the four on a sample receipt needs about 36mm of slack.
   Generous padding here is what pushes the office copy onto a second sheet. */
/* --- 1 CLASSIC: a copy of the Cash Deposit Receipt the college supplied.
   Its own markup (_FeeReceiptClassic.cshtml) and its own styles, because it
   is a different document rather than a restyling of the other four. Serif
   throughout, dotted rules, no logo and no border box — measured against the
   PDF the college sent. */
.rcc{font-family:Georgia,"Times New Roman",serif;color:#000;padding:0 2mm;position:relative}
/* Taken out of the flow and put in the corner, as on the original. As a block
   it consumed a whole line of the header and made it 6mm taller than the
   receipt it is copying. */
.rcc-copy{position:absolute;top:0;right:2mm;font-style:italic;font-size:14px}
.rcc-head{text-align:center}
.rcc-cn{font-size:33px;font-weight:700;line-height:1.05}
.rcc-ses{font-size:17px;margin-top:.4mm}
.rcc-doc{font-size:19px;font-weight:700;text-decoration:underline;margin-top:.3mm}
/* Every separator on the original is a dotted rule, not a solid one. */
.rcc-rule{border-top:1.2px dotted #000;margin:1.4mm 0}
.rcc-no{display:flex;justify-content:space-between;font-size:17.5px}
.rcc-no .l{font-weight:400}
.rcc-no b{margin-left:3mm}
.rcc-facts{width:100%;border-collapse:collapse;font-size:17.5px}
.rcc-facts td{padding:.4mm 0;vertical-align:top}
.rcc-facts .l{width:34mm;font-weight:400;white-space:nowrap}
.rcc-facts .v{font-weight:700;padding-right:8mm}
.rcc-tbl{width:100%;border-collapse:collapse;font-size:17.5px}
.rcc-tbl th,.rcc-tbl td{padding:.6mm 0}
.rcc-tbl thead th{font-weight:700;border:none}
.rcc-tbl .cat{text-align:left}
.rcc-tbl .amt{text-align:right;width:40mm}
/* The vertical dotted divider between the category and the amount, down the
   table only — on the original it stops at the last fee row. */
.rcc-tbl .cat{border-right:1.2px dotted #000;padding-right:4mm}
.rcc-tbl.with-bal .amt:not(:last-child){border-right:1.2px dotted #000;padding-right:4mm}
.rcc-tot{display:flex;justify-content:space-between;align-items:baseline;font-size:17.5px;gap:6mm}
.rcc-tot .sum .n{margin-left:3mm}
.rcc-cancel{font-size:17px;font-weight:700;color:#8E251E;margin-top:1.5mm}
.rcc-due{font-size:17px;margin-top:1.5mm}
/* The gap before the footer is where the original leaves room for a stamp. */
.rcc-foot{display:flex;justify-content:space-between;align-items:flex-end;
  font-size:14.5px;margin-top:9.5mm}
.rcc-foot .sign{font-weight:700;font-size:17.5px;white-space:nowrap}
/* The two copies are divided by a heavy dotted line, and the sheet itself has
   no border — matching the supplied receipt. */
.rcpt-f1 .rcpt-cut{border-top:2.4px dotted #000;margin:4mm 0}
.rcpt-f1 .rcpt-cut span{display:none}

/* Ten fee heads at this size would push the office copy onto a second
   sheet, exactly as it did on the other four formats. Same trigger (more
   than six rows), sized for this one's larger serif type. */
.rcc.rcc-dense .rcc-cn{font-size:25px}
.rcc.rcc-dense .rcc-ses{font-size:14px}
.rcc.rcc-dense .rcc-doc{font-size:16px}
.rcc.rcc-dense .rcc-no,.rcc.rcc-dense .rcc-facts,
.rcc.rcc-dense .rcc-tbl,.rcc.rcc-dense .rcc-tot{font-size:14px}
.rcc.rcc-dense .rcc-tbl th,.rcc.rcc-dense .rcc-tbl td{padding:.15mm 0}
.rcc.rcc-dense .rcc-facts td{padding:.2mm 0}
.rcc.rcc-dense .rcc-rule{margin:1mm 0}
.rcc.rcc-dense .rcc-foot{margin-top:3mm;font-size:12.5px}

/* --- 2 SIDE BY SIDE: both copies across the page, for a half-height tear */
.rcpt-f2{display:flex;gap:6mm;align-items:flex-start}
.rcpt-f2 .rcpt-copy{flex:1 1 0;min-width:0;border:1px solid var(--line-strong);padding:5mm;font-size:10.5px}
.rcpt-f2 .rcpt-college{font-size:14px}
.rcpt-f2 .rcpt-logo{height:36px}
.rcpt-f2 .rcpt-facts,.rcpt-f2 .rcpt-tbl{font-size:10px}
.rcpt-f2 .rcpt-facts{grid-template-columns:repeat(2,1fr)}
.rcpt-f2 .rcpt-tbl th,.rcpt-f2 .rcpt-tbl td{padding:2px 5px}
.rcpt-f2 .rcpt-signline{min-width:90px}
/* A vertical dashed rule between them instead of a horizontal one. */
.rcpt-f2 .rcpt-cut{border-top:none;border-left:1px dashed var(--line-strong);margin:0;align-self:stretch;width:0}
.rcpt-f2 .rcpt-cut span{display:none}

/* --- 3 RULED: formal, heavy rules, serif, for colleges that want it austere */
.rcpt-f3 .rcpt-copy{border:3px double var(--ink);padding:4.5mm;font-family:Georgia,"Times New Roman",serif}
.rcpt-f3 .rcpt-college{font-family:Georgia,"Times New Roman",serif;letter-spacing:.02em}
.rcpt-f3 .rcpt-doctype{border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);display:inline-block;padding:2px 10px}
.rcpt-f3 .rcpt-tbl th,.rcpt-f3 .rcpt-tbl td{border-color:var(--ink)}
.rcpt-f3 .rcpt-tbl thead th{background:transparent;border-bottom:2px solid var(--ink)}
.rcpt-f3 .rcpt-meta{border-bottom:1px solid var(--ink);padding-bottom:4px}

/* --- 4 MODERN: no box, one accent rule, generous spacing */
.rcpt-f4 .rcpt-copy{padding:2.5mm 2mm;border-top:4px solid var(--accent)}
.rcpt-f4 .rcpt-copytag{border:none;color:var(--accent);letter-spacing:.2em}
.rcpt-f4 .rcpt-doctype{color:var(--accent)}
.rcpt-f4 .rcpt-tbl th,.rcpt-f4 .rcpt-tbl td{border:none;border-bottom:1px solid var(--line);padding:4px 7px}
.rcpt-f4 .rcpt-tbl thead th{background:transparent;border-bottom:2px solid var(--accent);color:var(--accent-dark)}
.rcpt-f4 .rcpt-facts .v{padding-bottom:5px}
.rcpt-f4 .rcpt-cut{border-top-style:solid;border-top-color:var(--line)}
/* Format 4 sets its own cell padding above, and that selector outranks the
   .rcpt-dense one — so without this line a ten-head receipt on format 4 keeps
   the roomy rows and prints two sheets while the other four formats do not.
   Matched specificity, not !important. */
.rcpt-f4 .rcpt-dense .rcpt-tbl th,.rcpt-f4 .rcpt-dense .rcpt-tbl td{padding:1.5px 6px;line-height:1.25}
.rcpt-f4 .rcpt-dense .rcpt-facts .v{padding-bottom:1px}

/* --- 5 COMPACT: narrow column, minimal rules, survives a small roll printer */
.rcpt-f5{width:148mm;padding:6mm}
.rcpt-f5 .rcpt-copy{font-size:10.5px}
.rcpt-f5 .rcpt-logo{height:32px}
.rcpt-f5 .rcpt-college{font-size:13px}
.rcpt-f5 .rcpt-affl,.rcpt-f5 .rcpt-addr{font-size:9.5px}
.rcpt-f5 .rcpt-facts,.rcpt-f5 .rcpt-tbl{font-size:10px}
.rcpt-f5 .rcpt-facts{grid-template-columns:repeat(2,1fr)}
.rcpt-f5 .rcpt-tbl th,.rcpt-f5 .rcpt-tbl td{border:none;border-bottom:1px dotted var(--line-strong);padding:2px 4px}
.rcpt-f5 .rcpt-tbl thead th{background:transparent;border-bottom:1px solid var(--ink)}
.rcpt-f5 .rcpt-foot{margin-top:8px}
.rcpt-f5 .rcpt-signline{min-width:100px}
.rcpt-f5 .rcpt-cut{margin:4mm 0}

@media print{
  /* Same reasoning as .print-sheet above: on paper the paper is the page, so
     the on-screen sheet width, padding and shadow all come off. No min-height
     is set anywhere in this block — a reserved height is exactly what would
     push the office copy onto a second sheet. */
  .rcpt-sheet{width:auto;padding:0;margin:0;box-shadow:none}
  .rcpt-f5{width:auto}
  .rcpt-copy{break-inside:avoid;page-break-inside:avoid}
  .rcpt-copytag,.rcpt-tbl thead th,.rcpt-adv td,.rcpt-f1 .rcpt-copytag{
    -webkit-print-color-adjust:exact;print-color-adjust:exact;
  }
}

/* ============================ UTILITIES ============================ */
.mt-0{margin-top:0}.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}
.mb-0{margin-bottom:0}.mb-1{margin-bottom:8px}.mb-2{margin-bottom:16px}
.muted{color:var(--text-3)}.small{font-size:11.5px}.strong{font-weight:600}
.right{text-align:right}.center{text-align:center}.nowrap{white-space:nowrap}
.flex{display:flex}.gap-1{gap:8px}.gap-2{gap:16px}.wrap{flex-wrap:wrap}
.items-center{align-items:center}.grow{flex:1}
.hidden{display:none}
.text-owed{color:var(--amber);font-weight:600}
.text-clear{color:var(--success);font-weight:600}

/* ============================ RESPONSIVE ============================ */
@media (max-width:900px){
  #navToggle{display:grid}
  .brandbar .who-college b{max-width:16ch}
  .menubar-inner{display:none;flex-direction:column;flex-wrap:nowrap;align-items:stretch;padding:6px 10px 10px}
  body.nav-open .menubar-inner{display:flex}
  .mnu-drop{position:static;display:block;box-shadow:none;border:none;padding:0 0 4px 14px;min-width:0}
  .mnu > button{width:100%;justify-content:space-between;border-bottom:1px solid var(--line)}
  .mnu.open > button{background:transparent}
  .form-grid.two,.form-grid.three{grid-template-columns:1fr}
  .content{padding:12px}
  .student-strip .bal{margin-left:0;width:100%;text-align:left}
}
@media (prefers-reduced-motion:reduce){ *{transition:none!important;animation:none!important} }
:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

/* =====================================================================
   Planner — calendar grid, task cards, diary timeline
   ===================================================================== */

/* ---------- month grid ---------- */
.cal-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.cal-head h2{font-size:17px;font-weight:600;min-width:180px}
.cal-nav{display:flex;gap:4px}
.cal-nav a{
  width:30px;height:30px;border:1px solid var(--line-strong);border-radius:var(--radius);
  display:grid;place-items:center;color:var(--text-2);background:var(--surface);font-size:13px;
}
.cal-nav a:hover{border-color:var(--accent);color:var(--accent)}

.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--line)}
.cal-dow{
  background:#F7F9FC;padding:8px 6px;text-align:center;font-size:10.5px;font-weight:600;
  letter-spacing:.07em;text-transform:uppercase;color:var(--text-2);
}
.cal-cell{background:var(--surface);min-height:104px;padding:5px 6px;position:relative;display:flex;flex-direction:column;gap:3px}
.cal-cell.dim{background:#FBFCFE}
.cal-cell.dim .cal-date{color:var(--text-3)}
.cal-cell.today{box-shadow:inset 0 0 0 2px var(--accent)}
.cal-cell.holiday{background:var(--danger-soft)}
.cal-cell.weekend{background:#FAFBFD}
.cal-date{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--text-2);font-variant-numeric:tabular-nums}
.cal-cell.today .cal-date{color:var(--accent-dark)}
.cal-add{
  position:absolute;top:4px;right:5px;opacity:0;width:18px;height:18px;border-radius:4px;
  background:var(--accent-soft);color:var(--accent-dark);display:grid;place-items:center;
  font-size:13px;line-height:1;cursor:pointer;border:none;
}
.cal-cell:hover .cal-add{opacity:1}
.cal-chip{
  font-size:10.5px;line-height:1.3;padding:2px 5px;border-radius:3px;cursor:pointer;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-left:2.5px solid;
  background:#EEF1F6;color:var(--text);
}
.cal-chip.Holiday  {background:var(--danger-soft);border-color:var(--danger);color:#8E251E}
.cal-chip.Exam     {background:var(--amber-soft);border-color:var(--amber);color:var(--amber)}
.cal-chip.Event    {background:var(--accent-soft);border-color:var(--accent);color:var(--accent-dark)}
.cal-chip.Activity {background:var(--success-soft);border-color:var(--success);color:var(--success)}
.cal-chip.Fee      {background:#EDE7F6;border-color:#5E35B1;color:#4527A0}
.cal-chip.Admission{background:#E1F0FB;border-color:#1565C0;color:#0D47A1}
.cal-more{font-size:10px;color:var(--text-3);padding-left:5px}

.cal-legend{display:flex;gap:12px;flex-wrap:wrap;margin-top:12px;font-size:11.5px;color:var(--text-2)}
.cal-legend span{display:inline-flex;align-items:center;gap:5px}
.cal-legend i{width:10px;height:10px;border-radius:2px;display:inline-block}

/* upcoming list */
.up-item{display:flex;gap:10px;padding:9px 0;border-bottom:1px solid var(--line)}
.up-item:last-child{border-bottom:none}
.up-date{
  flex:0 0 44px;text-align:center;border-radius:var(--radius);background:var(--canvas);
  padding:4px 0;font-family:var(--mono);line-height:1.15;
}
.up-date b{display:block;font-size:15px;font-weight:600}
.up-date span{font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.up-body{min-width:0;flex:1}
.up-body b{display:block;font-size:12.5px;font-weight:600}
.up-body span{font-size:11px;color:var(--text-3)}

/* ---------- tasks ---------- */
.task-row{display:flex;gap:11px;align-items:flex-start;padding:11px 16px;border-bottom:1px solid var(--line)}
.task-row:last-child{border-bottom:none}
.task-row:hover{background:#FAFBFD}
.task-bar{width:3px;align-self:stretch;border-radius:2px;background:var(--line-strong);flex:0 0 3px}
.task-bar.Urgent{background:var(--danger)}
.task-bar.High{background:var(--amber)}
.task-bar.Normal{background:var(--accent)}
.task-bar.Low{background:var(--text-3)}
.task-main{flex:1;min-width:0}
.task-main b{font-size:13.5px;font-weight:600;display:block}
.task-meta{font-size:11.5px;color:var(--text-3);margin-top:2px;display:flex;gap:9px;flex-wrap:wrap}
.task-done b{text-decoration:line-through;color:var(--text-3)}

.prog{height:5px;border-radius:3px;background:#EEF1F6;overflow:hidden;margin-top:6px;max-width:220px}
.prog i{display:block;height:100%;background:var(--accent);border-radius:3px}
.prog.full i{background:var(--success)}

.badge.Urgent{background:var(--danger-soft);color:var(--danger)}
.badge.High{background:var(--amber-soft);color:var(--amber)}
.badge.Normal{background:var(--accent-soft);color:var(--accent-dark)}
.badge.Low{background:#EEF1F6;color:var(--text-3)}
.badge.Pending{background:#EEF1F6;color:var(--text-2)}
.badge.InProgress{background:var(--accent-soft);color:var(--accent-dark)}
.badge.Completed{background:var(--success-soft);color:var(--success)}
.badge.Cancelled{background:var(--danger-soft);color:var(--danger)}

/* ---------- diary ---------- */
.diary-strip{display:flex;gap:3px;align-items:flex-end;height:38px;margin-bottom:2px}
.diary-strip a{
  flex:1;background:#EEF1F6;border-radius:2px 2px 0 0;min-height:4px;position:relative;
  display:block;transition:background .12s;
}
.diary-strip a:hover{background:var(--line-strong)}
.diary-strip a.has{background:var(--accent-soft)}
.diary-strip a.done{background:var(--accent)}
.diary-strip a.on{outline:2px solid var(--ink);outline-offset:1px}

.diary-item{display:flex;gap:10px;align-items:flex-start;padding:10px 16px;border-bottom:1px solid var(--line)}
.diary-item:last-child{border-bottom:none}
.diary-item .tick{
  width:19px;height:19px;border-radius:5px;border:1.5px solid var(--line-strong);background:var(--surface);
  display:grid;place-items:center;cursor:pointer;flex:0 0 19px;margin-top:1px;font-size:12px;
  color:transparent;padding:0;line-height:1;
}
.diary-item .tick:hover{border-color:var(--accent)}
.diary-item.is-done .tick{background:var(--accent);border-color:var(--accent);color:#fff}
.diary-item.is-done .d-title{text-decoration:line-through;color:var(--text-3)}
.d-title{font-size:13.5px;font-weight:500}
.d-meta{font-size:11px;color:var(--text-3);margin-top:2px;display:flex;gap:8px;flex-wrap:wrap}
.d-note{border-left:2.5px solid var(--amber);background:var(--amber-soft)}

@media (max-width:860px){
  .cal-cell{min-height:74px}
  .cal-chip{font-size:9.5px}
}
@media print{
  .cal-add{display:none}
  .cal-cell{min-height:88px}
}

/* Universal sorter: header affordance and a hint that a grid is sortable */
table.grid thead th.sortable{cursor:pointer;user-select:none;white-space:nowrap}
table.grid thead th.sortable:hover{color:var(--text);background:#EBEFF6}
table.grid thead th.sortable .arrow{opacity:.55;font-size:10px;margin-left:4px}
table.grid thead th.sortable:hover .arrow{opacity:1}
table.grid thead th.sorted{color:var(--accent-dark)}
table.grid thead th.sorted .arrow{opacity:1;color:var(--accent)}

/* =====================================================================
   ID CARDS — six layouts, every one double sided
   =====================================================================
   Real sizes: 54x86mm portrait (CR80 on its end) and 86x54mm landscape, so
   a print run lands on standard card stock with nothing to trim.

   box-sizing is forced to border-box on the card and everything in it. The
   default is content-box, which adds padding and borders OUTSIDE a fixed
   width — this software has shipped cards 2mm over size twice for exactly
   that reason, and the measurement test now fails the build rather than the
   printer finding out.

   Front carries the college name, its logo, the principal's signature and the
   student. Back carries the subjects, the college's contact details and the
   QR. The two sides print side by side so a sheet folds or a duplex printer
   lines them up.
   ===================================================================== */
.idc-page{background:var(--canvas);min-height:100vh;padding:18px}
.idc-bar{max-width:1100px;margin:0 auto 16px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.card-sheet{display:flex;flex-wrap:wrap;gap:10px;max-width:1100px;margin:0 auto}

/* A front and its back, kept together so they never split across a page. */
.idc-pair{display:flex;gap:6mm;page-break-inside:avoid;break-inside:avoid;align-items:flex-start}
.idc-pair .side-label{font-size:10px;color:var(--text-3);text-align:center;margin-top:4px;
  letter-spacing:.06em;text-transform:uppercase}

.idc,.idc *{box-sizing:border-box}
.idc{
  background:#fff;border-radius:9px;overflow:hidden;position:relative;
  box-shadow:0 2px 10px rgba(16,22,43,.16);
  font-family:'Plus Jakarta Sans',sans-serif;color:#1A2138;
  page-break-inside:avoid;break-inside:avoid;
  /* Every design puts white text on a coloured band. Browsers drop background
     colours when printing unless told otherwise. */
  -webkit-print-color-adjust:exact;print-color-adjust:exact;
}
.idc *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
.idc.portrait{width:54mm;height:86mm}
.idc.landscape{width:86mm;height:54mm}

/* ---------- pieces every layout shares ---------- */
.idc .ph{object-fit:cover;background:#E7EAF1;display:block}
.idc .ph-x{display:grid;place-items:center;font-weight:700;color:#8A93AC}
.idc .nm{font-weight:700;line-height:1.1;letter-spacing:-.01em}
.idc .co{font-weight:600;line-height:1.15}
.idc .rows{width:100%;border-collapse:collapse;table-layout:fixed}
.idc .rows td{padding:0 0 .7mm;vertical-align:top;line-height:1.2}
.idc .rows td.k{width:16mm;color:#6B7490;font-weight:600;white-space:nowrap}
.idc .rows td.v{font-weight:600;word-break:break-word}
.idc .sig{text-align:center}
.idc .sig img{height:6mm;object-fit:contain;display:block;margin:0 auto}
.idc .sig .cap{font-size:5.4px;color:#6B7490;border-top:.3mm solid #9AA3B8;padding-top:.4mm;
  letter-spacing:.04em;text-transform:uppercase}

/* =================== SINGLE-SIDE ID CARDS (7-11) ===================
   One face each. The double-sided layouts split the student across a front
   and the college across a back; these fold both onto one side so a card
   comes off a single-sided printer finished.

   Same hard constraint as every other card: 54x86mm portrait, 86x54mm
   landscape, and NOTHING may overflow, because a card is cut to size and
   whatever spills is simply gone. The sizes below are small on purpose.
   ================================================================= */
.idc-single{display:flex;flex-direction:column;background:#fff}
.idc-single .s-hd{display:flex;align-items:center;gap:1.4mm;padding:1.6mm 2.2mm}
.idc-single .s-logo{height:6mm;object-fit:contain;flex:none}
.idc-single .s-ht{flex:1;min-width:0}
.idc-single .s-cn{font-size:8.2px;font-weight:700;line-height:1.1}
.idc-single .s-ad{font-size:5.6px;line-height:1.2;opacity:.85}
.idc-single .s-tag{font-size:4.8px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  text-align:right;flex:none;max-width:16mm;line-height:1.15}
.idc-single .s-body{display:flex;gap:2mm;padding:1.6mm 2.2mm;flex:1;min-height:0}
.idc-single .s-left{flex:none}
.idc-single .s-right{flex:1;min-width:0}
.idc-single .ph{width:18mm;height:23mm;border-radius:1.2mm}
.idc-single .ph-x{font-size:13px}
.idc-single .nm{font-size:9.6px}
.idc-single .co{font-size:6.4px;color:#4A5370;margin-bottom:1.3mm}
.idc-single .rows{font-size:6.4px}
.idc-single .rows td.k{width:12mm}
.idc-single .rows td{padding-bottom:1.1mm}
.idc-single .s-qr{flex:none;align-self:flex-end}
.idc-single .s-qr img{width:11mm;height:11mm;object-fit:contain;display:block}
/* margin-top:auto pins the footer to the bottom edge, so the slack in a card
   collects in one place instead of leaving a gap under the details and
   another under the footer. */
.idc-single .s-ft{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5mm;
  padding:0 2.2mm 1.4mm;margin-top:auto}
.idc-single .s-fl{font-size:5.2px;color:#6B7490;line-height:1.4;display:flex;
  flex-direction:column;min-width:0}
.idc-single .s-fl span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.idc-single .sig img{height:5mm}
.idc-single .sig .cap{font-size:4.9px}

/* Filling the card.
   Measured: the landscape layouts left 9-16mm of empty space under the detail
   rows, out of a body only 38mm tall - a quarter to a third of the card blank,
   which is what made them look unfinished. The photo now runs nearly the full
   height of the body and the rows are spread to meet the footer, so the ink
   reaches the edges of the space it has instead of huddling at the top. */
.idc-single.landscape .ph{width:26mm;height:33mm}
.idc-single.landscape .ph-x{font-size:17px}
.idc-single.landscape .rows td{padding-bottom:2.5mm}
.idc-single.landscape .nm{font-size:10.4px}
.idc-single.landscape .co{font-size:6.8px;margin-bottom:1.8mm}
.idc-single.landscape .rows{font-size:6.8px}
/* The QR no longer sits alone in a corner of the body with space around it;
   it lines up with the bottom of the photo. */
.idc-single.landscape .s-qr img{width:13mm;height:13mm}

.idc-single.portrait .rows td{padding-bottom:2mm}
.idc-single.portrait .s-qr img{width:14mm;height:14mm}

/* --- 7 portrait, dark band across the top */
.idc-s7 .s-hd{background:var(--ink);color:#fff}
.idc-s7 .s-tag{color:#C8D2E4}
.idc-s7 .s-body{flex-direction:column;align-items:center;text-align:center;gap:.8mm}
/* 7 stacks everything in one centred column, so it has the least room of
   the five. With a 31-character name and a 72-character college name the
   wrapped text pushed the QR 2.1mm off the bottom edge - and a card is cut
   to size, so that would simply have been gone. Its own tighter rows. */
.idc-s7 .ph{width:24mm;height:30mm}
/* .idc-single.portrait .rows td outranks a bare .idc-s7 rule, so these
   per-format row spacings have to carry the same two classes or they do
   nothing at all — which is exactly what happened the first time. */
.idc-single.portrait.idc-s7 .rows td{padding-bottom:2.3mm}
.idc-s7 .s-right{width:100%}
.idc-s7 .rows{text-align:left}
/* 7 stacks photo, name, course, six rows and the QR in one centred column,
   and with worst-case text that column is simply longer than 86mm. Shaving
   another fraction off each piece was buying 0.3mm at a time; taking the QR
   out of the flow and standing it in the bottom-left corner gives the stack
   13mm of real headroom instead, and the footer text clears it. */
.idc-s7 .s-qr{position:absolute;left:2.2mm;bottom:1.2mm}
.idc-s7 .s-qr img{width:13mm;height:13mm}
.idc-s7 .s-fl{padding-left:15mm}

/* --- 8 portrait, colour rail down the leading edge */
.idc-s8{border-left:3.5mm solid var(--accent)}
.idc-s8 .s-hd{border-bottom:.3mm solid var(--line-strong)}
.idc-s8 .s-tag{color:var(--accent-dark)}
/* Same void as 7 had: the rows ended and the QR sat alone at the bottom with
   a blank band above it. The QR goes to the corner and the rows spread into
   the space it was leaving. */
.idc-s8 .s-body{flex-direction:column;gap:1.2mm}
.idc-s8 .ph{width:22mm;height:28mm}
.idc-s8 .s-left{align-self:flex-start}
.idc-single.portrait.idc-s8 .rows td{padding-bottom:3.6mm}
.idc-s8 .s-qr{position:absolute;right:2.2mm;bottom:1.2mm}
.idc-s8 .s-qr img{width:13mm;height:13mm}
.idc-s8 .sig{margin-right:15mm}

/* --- 9 landscape, header band, photo left, contact strip at the foot */
.idc-s9 .s-hd{background:var(--accent-dark);color:#fff}
.idc-s9 .s-tag{color:#D6ECEA}
.idc-s9 .s-ft{background:#F2F5F9;padding-top:1mm;margin-top:auto}

/* --- 10 landscape, compact: smaller photo, tighter rows, most on least */
.idc-s10 .s-hd{background:#F2F5F9;border-bottom:.4mm solid var(--accent)}
.idc-s10 .s-cn{font-size:6.8px}
.idc-s10 .ph{width:15mm;height:19mm}
.idc-s10 .nm{font-size:7.6px}
.idc-s10 .rows{font-size:6px}
.idc-s10 .rows td{padding-bottom:.8mm}
.idc-s10 .s-body{padding-top:1.2mm;padding-bottom:1mm}

/* --- 11 landscape, no fills at all: cheapest to print, easiest to read */
.idc-s11{border:.4mm solid var(--ink)}
.idc-s11 .s-hd{border-bottom:.3mm solid var(--ink)}
.idc-s11 .s-tag{color:#6B7490}
.idc-s11 .s-ft{border-top:.3mm solid var(--line-strong);padding-top:1mm;margin-top:auto}

/* ---------- the back, shared by all six ----------
   The back was running at 51% fill with a 29mm hole in the middle of an 86mm
   card, and the type that was crammed into the top half ran at 5.2-6.6px —
   small enough to be a struggle to read on a printed card. The sizes below
   spend the empty space on legibility rather than on padding. */
.idc.back{display:flex;flex-direction:column;background:#fff}
.idc.back .bk-body{display:flex;flex-direction:column;flex:1;min-height:0}
/* bk-top used to take all the slack with flex:1 and hold its content at the
   top, which collected every spare millimetre into one 13mm void above the
   QR. Letting it size to its content and spreading the three blocks instead
   turns that void into even breathing space, which reads as layout rather
   than as a hole. */
.idc.back .bk-top{padding:2.6mm 3mm 0;min-height:0;overflow:hidden}
.idc.back .bk-body{justify-content:space-between}
.idc.back .bk-who{display:flex;align-items:baseline;gap:2mm;margin-bottom:1.8mm;
  padding-bottom:1.2mm;border-bottom:.3mm solid #E2E6EF}
.idc.back .bk-who b{font-size:9px;line-height:1.15;min-width:0;word-break:break-word}
.idc.back .bk-who .rn{font-family:var(--mono);font-size:7px;color:#6B7490;margin-left:auto;
  white-space:nowrap}
/* On a landscape back the two columns are narrow, so the number goes under
   the name rather than being squeezed beside it. */
.idc.back.landscape .bk-who{display:block;margin-bottom:1.2mm;padding-bottom:.8mm}
.idc.back.landscape .bk-who b{font-size:8px;display:block}
.idc.back.landscape .bk-who .rn{margin-left:0}
.idc.back .bk-h{font-size:7.4px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:#6B7490;margin-bottom:1.1mm}
.idc.back .subs{font-size:8.4px;line-height:1.5;margin-bottom:2.6mm}
.idc.back .subs li{margin-left:3.6mm;list-style:disc;padding-left:.4mm}
.idc.back .subs .none{color:#9AA3B8;font-style:italic;list-style:none;margin-left:0}
.idc.back .bk-qr{display:flex;gap:2mm;align-items:center;padding:0 3mm 1.6mm}
.idc.back .bk-qr img{width:20mm;height:20mm;object-fit:contain;flex:0 0 auto}
.idc.back .bk-qr .qx{width:20mm;height:20mm;flex:0 0 auto;border:.3mm dashed #C3CAD9;
  display:grid;place-items:center;font-size:6px;color:#9AA3B8;text-align:center;padding:1mm}
.idc.back .bk-qr .cap{font-size:7px;line-height:1.35;color:#4A5570}
.idc.back .bk-foot{padding:2mm 3mm;font-size:6.6px;line-height:1.5;color:#fff;background:#1A2138}
.idc.back .bk-foot .l{display:block;word-break:break-word}
.idc.back .bk-rule{font-size:6.1px;color:#8A93AC;padding:0 3mm 1.4mm;line-height:1.35}

/* A landscape back is 86mm wide and only 54mm tall. Stacking the subjects
   above the QR left the last optional subject cut off by the overflow, so on
   landscape they sit side by side and the width does the work the height
   cannot. Measured: 10-12px of content was being hidden before this. */
.idc.back.landscape .bk-body{flex-direction:row;gap:2.5mm;padding:2.2mm 3mm 0}
.idc.back.landscape .bk-top{padding:0;flex:1;min-width:0}
.idc.back.landscape .bk-body{justify-content:flex-start}
.idc.back.landscape .bk-qr{padding:0;flex:0 0 17mm;flex-direction:column;align-items:center;gap:.8mm;
  justify-content:flex-start}
.idc.back.landscape .bk-qr img,
.idc.back.landscape .bk-qr .qx{width:15mm;height:15mm}
.idc.back.landscape .bk-qr .cap{font-size:5px;text-align:center;line-height:1.25}
.idc.back.landscape .subs{font-size:6.2px;line-height:1.3;margin-bottom:1.2mm}
.idc.back.landscape .bk-rule{padding-top:.6mm}

/* =================== 1. CLASSIC PORTRAIT =================== */
.idc.f1 .hd{background:#0E7C7B;color:#fff;padding:2.4mm 3mm;display:flex;gap:2mm;align-items:center}
.idc.f1 .hd img{height:9mm;width:9mm;object-fit:contain;background:#fff;border-radius:50%;padding:.6mm;flex:0 0 auto}
.idc.f1 .hd .cn{font-size:7.2px;font-weight:700;line-height:1.15}
.idc.f1 .ph{width:24mm;height:29mm;margin:3mm auto 1.6mm;border-radius:2mm;border:.5mm solid #0E7C7B}
.idc.f1 .ph-x{font-size:11px}
.idc.f1 .nm{font-size:10px;text-align:center;padding:0 2mm}
.idc.f1 .co{font-size:6.4px;text-align:center;color:#0A5F5E;margin-top:.4mm;padding:0 2mm}
.idc.f1 .bd{padding:2mm 3mm 0;font-size:6.4px}
.idc.f1 .sig{position:absolute;left:0;right:0;bottom:4.4mm;padding:0 6mm}
.idc.f1 .ft{position:absolute;left:0;right:0;bottom:0;background:#0E7C7B;color:#fff;
  font-size:5.6px;text-align:center;padding:1mm}

/* =================== 2. RIBBON PORTRAIT =================== */
.idc.f2{display:flex}
.idc.f2 .rail{width:9mm;background:linear-gradient(180deg,#7A1F3D,#C0345E);flex:0 0 auto;
  display:flex;align-items:center;justify-content:center}
.idc.f2 .rail span{writing-mode:vertical-rl;transform:rotate(180deg);color:#fff;
  font-size:6.4px;font-weight:700;letter-spacing:.22em;text-transform:uppercase}
.idc.f2 .main{flex:1;min-width:0;display:flex;flex-direction:column;padding:2.6mm 2.6mm 0}
.idc.f2 .hd{display:flex;gap:1.6mm;align-items:center;border-bottom:.4mm solid #C0345E;padding-bottom:1.4mm}
.idc.f2 .hd img{height:7.5mm;width:7.5mm;object-fit:contain;flex:0 0 auto}
.idc.f2 .hd .cn{font-size:6.4px;font-weight:700;line-height:1.15;color:#7A1F3D}
/* Measured: the rows ended at 59.5mm and the signature began at 75.6mm,
   leaving 16mm of blank card. A bigger photo and rows that reach the
   signature spend it on the two things anyone actually looks at. */
.idc.f2 .ph{width:25mm;height:30mm;margin:2.4mm auto 1.8mm;border-radius:12.5mm 12.5mm 2mm 2mm;
  border:.5mm solid #C0345E}
.idc.f2 .ph-x{font-size:12px}
.idc.f2 .nm{font-size:10px;text-align:center}
.idc.f2 .co{font-size:6px;text-align:center;color:#7A1F3D}
.idc.f2 .bd{font-size:6.8px;margin-top:2mm}
.idc.f2 .rows td{padding-bottom:2.3mm}
.idc.f2 .sig{margin-top:auto;padding:0 3mm 1.6mm}

/* =================== 3. CREST PORTRAIT =================== */
.idc.f3{background:linear-gradient(180deg,#F3F6FC 0%,#fff 38%)}
.idc.f3 .hd{text-align:center;padding:2.4mm 2.6mm 0}
.idc.f3 .hd img{height:10mm;object-fit:contain;display:block;margin:0 auto .8mm}
.idc.f3 .hd .cn{font-size:7px;font-weight:700;line-height:1.15;color:#17324A}
.idc.f3 .hd .rule{height:.6mm;background:#C8A24A;width:16mm;margin:1.2mm auto}
.idc.f3 .ph{width:24mm;height:28mm;margin:0 auto 1.4mm;border-radius:50% 50% 2mm 2mm;
  border:.6mm solid #C8A24A}
.idc.f3 .ph-x{font-size:10px}
.idc.f3 .nm{font-size:9.4px;text-align:center;color:#17324A}
.idc.f3 .co{font-size:6.2px;text-align:center;color:#6B7490}
.idc.f3 .rows td{padding-bottom:1.5mm}
.idc.f3 .bd{padding:1.8mm 3.4mm 0;font-size:6.2px}
.idc.f3 .rows td.k{color:#8A7030}
.idc.f3 .sig{position:absolute;left:0;right:0;bottom:4.2mm;padding:0 6mm}
.idc.f3 .ft{position:absolute;left:0;right:0;bottom:0;background:#17324A;color:#fff;
  font-size:5.6px;text-align:center;padding:1mm}

/* =================== 4. EXECUTIVE LANDSCAPE =================== */
.idc.f4{display:flex;flex-direction:column}
.idc.f4 .hd{background:#10233F;color:#fff;padding:1.8mm 3mm;display:flex;gap:2mm;align-items:center}
.idc.f4 .hd img{height:7.5mm;width:7.5mm;object-fit:contain;background:#fff;border-radius:1mm;padding:.4mm;flex:0 0 auto}
.idc.f4 .hd .cn{font-size:6.8px;font-weight:700;line-height:1.15}
.idc.f4 .mid{flex:1;min-height:0;display:flex;gap:2.6mm;padding:2mm 3mm 0}
/* The photo stopped at 36mm on a 54mm card with the footer at 43.8mm, so
   the lower third sat empty. It now runs down to the footer and the rows
   spread to match. */
.idc.f4 .ph{width:24mm;height:30mm;border-radius:1.4mm;border:.4mm solid #10233F;flex:0 0 auto}
.idc.f4 .ph-x{font-size:10px}
.idc.f4 .det{flex:1;min-width:0}
.idc.f4 .nm{font-size:8.8px}
.idc.f4 .co{font-size:6px;color:#2A3454;margin-bottom:1mm}
.idc.f4 .bd{font-size:6.6px}
.idc.f4 .rows td{padding-bottom:1.9mm}
.idc.f4 .ft{display:flex;align-items:flex-end;gap:3mm;padding:0 3mm 1.4mm}
.idc.f4 .ft .ses{font-size:5.8px;color:#6B7490;flex:1}
.idc.f4 .sig{width:22mm}

/* =================== 5. BANNER LANDSCAPE =================== */
.idc.f5{display:flex;flex-direction:column}
.idc.f5 .hd{background:linear-gradient(100deg,#6A2C91,#B14AA8);color:#fff;height:16mm;
  padding:1.8mm 3mm;display:flex;gap:2mm;align-items:center}
.idc.f5 .hd img{height:8mm;width:8mm;object-fit:contain;background:#fff;border-radius:50%;padding:.5mm;flex:0 0 auto}
.idc.f5 .hd .cn{font-size:6.8px;font-weight:700;line-height:1.15}
.idc.f5 .mid{flex:1;min-height:0;display:flex;gap:2.6mm;padding:0 3mm}
.idc.f5 .ph{width:23mm;height:29mm;border-radius:1.4mm;border:.6mm solid #fff;
  box-shadow:0 1px 4px rgba(16,22,43,.25);margin-top:-6mm;flex:0 0 auto}
.idc.f5 .ph-x{font-size:10px;background:#EADCF3}
.idc.f5 .det{flex:1;min-width:0;padding-top:1mm}
.idc.f5 .nm{font-size:8.8px;color:#5A2480}
.idc.f5 .co{font-size:6px;color:#6B7490;margin-bottom:.9mm}
.idc.f5 .bd{font-size:6.5px}
.idc.f5 .rows td{padding-bottom:1.8mm}
.idc.f5 .ft{display:flex;align-items:flex-end;gap:3mm;padding:0 3mm 1.4mm}
.idc.f5 .ft .ses{font-size:5.8px;color:#6B7490;flex:1}
.idc.f5 .sig{width:22mm}

/* =================== 6. MINIMAL LANDSCAPE =================== */
.idc.f6{display:flex;flex-direction:column;border:.4mm solid #D7DCE6}
.idc.f6 .hd{display:flex;gap:2mm;align-items:center;padding:2.2mm 3mm 1.4mm;
  border-bottom:.8mm solid #1A6FB5}
.idc.f6 .hd img{height:7mm;width:7mm;object-fit:contain;flex:0 0 auto}
.idc.f6 .hd .cn{font-size:6.6px;font-weight:700;line-height:1.15;color:#123F6B}
.idc.f6 .mid{flex:1;min-height:0;display:flex;gap:2.6mm;padding:2mm 3mm 0}
.idc.f6 .ph{width:23mm;height:29mm;border-radius:1mm;border:.3mm solid #D7DCE6;flex:0 0 auto}
.idc.f6 .ph-x{font-size:10px}
.idc.f6 .det{flex:1;min-width:0}
.idc.f6 .nm{font-size:8.6px;color:#123F6B}
.idc.f6 .co{font-size:6px;color:#6B7490;margin-bottom:1mm}
.idc.f6 .bd{font-size:6.6px}
.idc.f6 .rows td{padding-bottom:1.9mm}
.idc.f6 .ft{display:flex;align-items:flex-end;gap:3mm;padding:0 3mm 1.4mm}
.idc.f6 .ft .ses{font-size:5.8px;color:#6B7490;flex:1}
.idc.f6 .sig{width:22mm}

/* ---------- printing ---------- */
/* .idc-page carries its own padding for the screen; on paper the @page
   margin is the margin, so it comes off and the first card starts at the
   paper edge instead of 18px inside it. */
@page{size:A4 portrait;margin:10mm}
@media print{
  .idc-page{background:#fff;padding:0;min-height:0}
  .idc-bar{display:none}
  .card-sheet{gap:4mm;max-width:none;margin:0;justify-content:flex-start}
  .idc-pair{gap:4mm}
  .idc-pair .side-label{display:none}
  .idc{
    box-shadow:none;border-radius:0;
    /* Cut line. Removable from the toolbar for pre-cut card stock. */
    outline:.2mm dashed #9AA3B8;outline-offset:0;
  }
  .card-sheet.no-marks .idc{outline:none}
}

/* ---------- staff attendance grid ---------- */
.att-grid th.att-day{min-width:34px;text-align:center;padding:5px 2px;font-size:10px;line-height:1.2}
.att-grid th.att-day .dow{font-size:8.5px;color:var(--text-3);font-weight:500}
.att-grid th.att-day.closed{background:var(--danger-soft);color:var(--danger)}
.att-grid th.att-day.istoday{box-shadow:inset 0 -3px 0 var(--accent)}
.att-grid td.att-cell{padding:2px;text-align:center}
.att-grid td.att-cell.closed{background:#FDF3F2}
.att-sel{
  width:38px;padding:3px 2px;font-size:10.5px;text-align:center;border-radius:4px;
  font-family:var(--mono);font-weight:600;background-image:none;padding-right:2px;
}
.att-sel.m-P {background:var(--success-soft);color:var(--success);border-color:#B8DFCA}
.att-sel.m-A {background:var(--danger-soft);color:var(--danger);border-color:#EFC3BF}
.att-sel.m-HD{background:var(--amber-soft);color:var(--amber);border-color:#EFD5A8}
.att-sel.m-L {background:var(--accent-soft);color:var(--accent-dark);border-color:#B9DEDC}
.att-sel.m-WO,.att-sel.m-H{background:#EEF1F6;color:var(--text-3)}

/* ---------- salary slips ---------- */
.slip-sheet{display:flex;flex-direction:column;gap:10mm}
.slip{background:#fff;width:190mm;padding:10mm;box-shadow:0 2px 10px rgba(16,22,43,.14);
      page-break-after:always;font-family:'Plus Jakarta Sans',sans-serif;color:#1A2138}
.slip:last-child{page-break-after:auto}
.slip table{width:100%;border-collapse:collapse}
.slip .amt{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
.slip .hd{display:flex;align-items:center;gap:5mm}
.slip .hd img{height:16mm;object-fit:contain}
.slip .cname{font-size:15px;font-weight:700;line-height:1.15}
.slip .caddr{font-size:8.5px;color:#5A6480}
.slip .title{text-align:center;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.slip .meta td{padding:1.4mm 0;font-size:9.5px}
.slip .meta td:nth-child(odd){color:#5A6480;width:16%}
.slip .lines th{font-size:9px;text-transform:uppercase;letter-spacing:.05em;padding:2mm 2mm;color:#5A6480}
.slip .lines td{font-size:10px;padding:1.6mm 2mm}
.slip .sig{display:flex;justify-content:space-between;align-items:flex-end;margin-top:12mm;font-size:9px}
.slip .sig img{height:10mm;object-fit:contain;display:block}

.slip.s1 .title{background:#10162B;color:#fff;padding:2.5mm;margin:5mm 0}
.slip.s1 .lines th{background:#F0F3F8;border-bottom:.4mm solid #CBD3E1}
.slip.s1 .lines td{border-bottom:.2mm solid #E8ECF3}

.slip.s2{border:.6mm solid #0E7C7B}
.slip.s2 .title{color:#0E7C7B;border-top:.4mm solid #0E7C7B;border-bottom:.4mm solid #0E7C7B;padding:2mm;margin:4mm 0}
.slip.s2 .lines th{background:#E4F2F1;color:#0A5F5E}
.slip.s2 .lines td{border-bottom:.2mm dotted #9CC8C6}

.slip.s3 .title{text-align:left;font-size:13px;color:#B26A00;margin:4mm 0 3mm;border-left:1.5mm solid #B26A00;padding-left:3mm}
.slip.s3 .lines th{border-bottom:.5mm solid #1A2138}
.slip.s3 .lines td{border-bottom:.2mm solid #E8ECF3}
.slip.s3 .hd{border-bottom:.5mm double #1A2138;padding-bottom:3mm}

.slip.s4 .title{text-align:center;font-size:12px;margin:4mm 0}
.slip.s4 .lines{border:.3mm solid #CBD3E1}
.slip.s4 .lines th{background:#1F2A44;color:#fff}
.slip.s4 .lines td{border:.2mm solid #E8ECF3}
.slip.s4 .meta{background:#F7F9FC;padding:2mm}

.slip.s5{background:#FBFCFE}
.slip.s5 .title{text-align:center;font-size:12px;letter-spacing:.2em;margin:5mm 0;color:#5A6480}
.slip.s5 .lines th{border-bottom:.2mm solid #CBD3E1;text-align:left}
.slip.s5 .lines td{border:none;padding:1.2mm 2mm}
.slip.s5 .netbox{background:#10162B;color:#fff;padding:3mm;margin-top:4mm;display:flex;
                 justify-content:space-between;align-items:center;border-radius:2mm}

@media print{
  .slip{box-shadow:none;width:auto;padding:0;margin:0}
  .slip-sheet{gap:0}
}

/* =====================================================================
   MOBILE & TABLET
   Breakpoints: 1024 tablet, 900 nav collapse, 720 phone, 420 small phone.
   The rule throughout: nothing needs a horizontal scroll except grids that
   are genuinely matrix-shaped (an attendance month, a permission matrix).
   ===================================================================== */

/* Split layouts — replaces the old inline grid-template-columns */
.split{display:grid;gap:16px;align-items:start}
.split-aside{grid-template-columns:340px 1fr}
.split-aside-right{grid-template-columns:1fr 360px}
.split-even{grid-template-columns:1fr 1fr}
.split-main{grid-template-columns:1.35fr 1fr}
.auto-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.quad-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin:14px 0}

/* horizontal scroll hint — a table that scrolls should look like it does */
.table-wrap{-webkit-overflow-scrolling:touch}

@media (max-width:1024px){
  .split-aside,.split-aside-right{grid-template-columns:300px 1fr}
  .split-aside-right{grid-template-columns:1fr 300px}
  .split-main{grid-template-columns:1fr}
  .quad-facts{grid-template-columns:repeat(2,1fr)}
  .content{padding:16px}
}

@media (max-width:820px){
  /* On a tablet held in portrait the "sidebar" column is the data-entry form,
     so it goes on top rather than being squeezed. */
  .split-aside,.split-aside-right,.split-even{grid-template-columns:1fr}
}

@media (max-width:720px){
  :root{--topbar-h:52px}

  .content{padding:9px}
  .page-head{gap:8px;margin-bottom:8px}
  .page-head h1{font-size:18px}
  .page-head .actions{margin-left:0;width:100%}
  .page-head .actions > *{flex:1 1 calc(50% - 4px)}
  .page-head .actions .btn{width:100%}
  .page-head .actions form .btn{width:100%}

  .card + .card{margin-top:12px}
  .card-head{padding:11px 13px}
  .card-head .right{margin-left:0;width:100%}
  .card-body{padding:13px}

  .stat-row{grid-template-columns:repeat(2,1fr);gap:10px}
  .stat{padding:12px 13px}
  .stat .value{font-size:19px}
  .stat:hover{transform:none}

  .filter-bar{padding:11px 13px;gap:9px}
  .filter-bar .field,
  .filter-bar .field.grow{flex:1 1 100%;min-width:0}
  .filter-bar .btn-row{margin-left:0;width:100%}
  .filter-bar .btn-row .btn{flex:1}

  .form-grid,.form-grid.two,.form-grid.three{grid-template-columns:1fr}
  .field.span-2,.field.span-3,.field.span-full{grid-column:1/-1}

  .btn-row{gap:7px}
  .quad-facts{grid-template-columns:1fr 1fr}

  .student-strip{padding:12px;gap:11px}
  .student-strip .bal{margin-left:0;width:100%;text-align:left;
    border-top:1px solid rgba(255,255,255,.14);padding-top:9px}

  /* ---------- tables become cards ----------
     data-label is filled in by app.js from the header row, so no view had to
     be rewritten. Tables marked data-no-stack keep scrolling instead. */
  table.grid.stacked thead{display:none}
  table.grid.stacked,
  table.grid.stacked tbody{display:block;width:100%}
  table.grid.stacked tbody tr{
    display:block;background:var(--surface);border:1px solid var(--line);
    border-radius:9px;margin-bottom:9px;padding:9px 11px;
    box-shadow:0 1px 2px rgba(16,22,43,.04);
  }
  table.grid.stacked tbody tr:hover{background:var(--surface)}
  table.grid.stacked tbody tr.selected{border-color:var(--accent);background:var(--accent-soft)}
  table.grid.stacked tbody td{
    display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
    border:none;padding:4px 0;text-align:right;font-size:13px;
  }
  table.grid.stacked tbody td::before{
    content:attr(data-label);flex:0 0 42%;text-align:left;
    font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
    color:var(--text-3);padding-top:2px;
  }
  table.grid.stacked tbody td:empty{display:none}
  table.grid.stacked tbody td[data-label=""]::before{content:none}
  /* the row's first real cell reads as its title */
  table.grid.stacked tbody td.row-title{
    display:block;text-align:left;font-size:14.5px;font-weight:600;
    padding:0 0 6px;margin-bottom:5px;border-bottom:1px solid var(--line);
  }
  table.grid.stacked tbody td.row-title::before{
    display:block;flex:none;margin-bottom:2px;
  }
  table.grid.stacked tbody td.cell-actions{
    display:block;text-align:left;padding-top:9px;margin-top:5px;border-top:1px solid var(--line);
  }
  table.grid.stacked tbody td.cell-actions::before{content:none}
  table.grid.stacked tbody td.cell-actions .btn-row{width:100%}
  table.grid.stacked tbody td.cell-actions .btn{flex:1}
  table.grid.stacked tfoot{display:block}
  table.grid.stacked tfoot tr{display:flex;flex-wrap:wrap;justify-content:space-between;
    background:#F7F9FC;border-radius:9px;padding:9px 11px}
  table.grid.stacked tfoot td{border:none;padding:2px 0}
  table.grid.stacked .empty{text-align:center}

  /* grids that stay tables get a visible scroll affordance */
  .table-wrap:not(.no-hint){position:relative}
  table.grid[data-no-stack]{min-width:640px}

  .pager{padding:10px 13px}
  .pager .pages{margin-left:0;width:100%;justify-content:center;flex-wrap:wrap}

  .cal-cell{min-height:58px;padding:3px 4px}
  .cal-chip{font-size:8.5px;padding:1px 3px}
  .cal-date{font-size:10.5px}
  .cal-legend{font-size:10.5px;gap:8px}

  .task-row{padding:10px 13px}
  .diary-item{padding:9px 13px}
  .slip{width:auto;max-width:100%;padding:6mm}
  .print-sheet{width:auto;max-width:100%;padding:8mm}
  .idc{transform-origin:top left}
}

@media (max-width:420px){
  .stat-row{grid-template-columns:1fr}
  .brandbar{padding:0 11px;gap:9px}
  .brandbar .me .nm{display:none}
  .brandbar .who-college b{max-width:11ch}
  .tabs a{padding:9px 11px;font-size:12.5px}
  table.grid.stacked tbody td::before{flex-basis:46%}
}

/* ---------- touch devices ----------
   A finger is about 9mm across. Anything you have to hit gets a real target,
   and inputs go to 16px because iOS zooms the page in on anything smaller. */
@media (hover:none) and (pointer:coarse){
  .btn{min-height:40px;padding-top:9px;padding-bottom:9px}
  .btn-sm{min-height:34px}
  .icon-btn,.brandbar .ico{width:38px;height:38px}
  /* Same list as above, and for the same reason: an untyped input is a text
     box and must get the 16px phones need to stop zooming on focus. */
  input:not([type]),
  input[type=text],input[type=number],input[type=date],input[type=datetime-local],
  input[type=password],
  input[type=email],input[type=tel],input[type=search],select,textarea{
    font-size:16px;padding:10px 12px;
  }
  .att-sel{font-size:13px;width:46px;padding:6px 2px}
  .check input,input[type=checkbox],input[type=radio]{width:20px;height:20px}
  .diary-item .tick{width:26px;height:26px;flex-basis:26px;font-size:15px}
  .mnu > button,.menubar .direct{padding-top:13px;padding-bottom:13px}
  .mnu-drop a{padding:11px 12px}
  table.grid tbody td{padding-top:10px;padding-bottom:10px}
}

@media print{
  .split,.split-aside,.split-aside-right,.split-even,.split-main{display:block}
  table.grid.stacked thead{display:table-header-group}
  table.grid.stacked,table.grid.stacked tbody{display:table}
  table.grid.stacked tbody tr{display:table-row;border:none;padding:0}
  table.grid.stacked tbody td{display:table-cell;text-align:left}
  table.grid.stacked tbody td::before{content:none}
}

/* Fading edge on a table that still has content off to the right */
.table-wrap.scrolls::after{
  content:'';position:absolute;top:0;right:0;bottom:0;width:34px;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.96));
}
.table-wrap.scrolls{position:relative}
@media (max-width:720px){
  .table-wrap.scrolls::before{
    content:'swipe →';position:absolute;top:6px;right:8px;z-index:2;
    font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
    color:var(--text-3);background:rgba(255,255,255,.92);padding:2px 6px;border-radius:100px;
    pointer-events:none;
  }
}

/* ---------- sign-in and other blank-layout pages ---------- */
@media (max-width:720px){

  /* the public landing page and enquiry form */
  .card-sheet{justify-content:center}
}

/* Card sheets (ID cards, slips) keep their real print size but never force
   the whole page sideways — the sheet itself scrolls. */
@media (max-width:720px){
  .card-sheet{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:8px}
}

/* ---------- daily attendance picker ---------- */
.att-pick{display:flex;gap:4px;flex-wrap:wrap}
.att-pick .pick{
  display:inline-flex;align-items:center;justify-content:center;min-width:34px;
  padding:5px 8px;border:1.5px solid var(--line-strong);border-radius:6px;
  font-family:var(--mono);font-size:11.5px;font-weight:700;color:var(--text-3);
  cursor:pointer;user-select:none;background:var(--surface);
}
.att-pick .pick input{position:absolute;opacity:0;width:0;height:0}
.att-pick .pick:hover{border-color:var(--field-border-hover)}
.att-pick .pick.on.p-P {background:var(--success-soft);border-color:var(--success);color:var(--success)}
.att-pick .pick.on.p-A {background:var(--danger-soft);border-color:var(--danger);color:var(--danger)}
.att-pick .pick.on.p-HD{background:var(--amber-soft);border-color:var(--amber);color:var(--amber)}
.att-pick .pick.on.p-L {background:var(--accent-soft);border-color:var(--accent);color:var(--accent-dark)}
.att-pick .pick.on.p-WO,.att-pick .pick.on.p-H{background:#E7EAF1;border-color:var(--text-3);color:var(--text-2)}
@media (hover:none) and (pointer:coarse){ .att-pick .pick{min-width:42px;padding:9px 10px;font-size:13px} }

/* ---------- class subject grid ---------- */
.subj-tick{
  width:26px;height:26px;border:1.5px solid var(--line-strong);border-radius:5px;
  background:var(--surface);cursor:pointer;font-size:13px;font-weight:700;color:transparent;
  display:grid;place-items:center;padding:0;
}
.subj-tick:hover{border-color:var(--accent)}
.subj-tick.on{background:var(--accent);border-color:var(--accent);color:#fff}
@media (hover:none) and (pointer:coarse){ .subj-tick{width:34px;height:34px} }

/* ---------- row action buttons ----------
   These were btn-ghost: no background, no border, so Edit and Delete read as
   plain text rather than controls. Destructive actions get a red-tinted
   outline that fills in on hover, so intent is obvious before the click. */
.btn-danger-soft{
  background:var(--surface);border-color:var(--danger);color:var(--danger);
}
.btn-danger-soft:hover{background:var(--danger);border-color:var(--danger);color:#fff}

/* A ghost button that survives inside a table row still needs an edge. */
.grid .btn-ghost{border-color:var(--line-strong);background:var(--surface)}

/* ---------- table alignment ----------
   Text reads left. Numbers read right, so digits line up by place value and a
   column of amounts can be scanned down. .num marks the numeric columns. */
.grid th, .grid td{text-align:left}
.grid th.num, .grid td.num,
.grid th.amount, .grid td.amount{text-align:right;font-variant-numeric:tabular-nums}
.grid th.center, .grid td.center{text-align:center}
.grid tfoot th, .grid tfoot td{text-align:left}
.grid tfoot th.num, .grid tfoot td.num, .grid tfoot .right{text-align:right}

/* ---------- sticky leading columns ----------
   On a grid wide enough to scroll sideways, the identifying columns scroll out
   of view and the row becomes unreadable. Pinning them keeps the name and
   number on screen. Applied by JS only when the table actually overflows. */
.table-wrap.has-sticky{position:relative}
.grid.sticky-cols th.stick, .grid.sticky-cols td.stick{
  position:sticky;z-index:2;background:var(--surface);
}
/* Where a pinned column meets the pinned header or the pinned totals row,
   that corner cell has to sit above both — otherwise a row sliding under it
   shows through. The JS pins every row of the table including the footer, so
   the footer corner needs the same treatment and its own opaque background.
   Layering: body cells 2, header and totals 3, the corners 5. */
.grid.sticky-cols thead th.stick,
.grid.sticky-cols tfoot td.stick{z-index:5;background:#F7F9FC}
.grid.sticky-cols tbody tr:hover td.stick{background:var(--canvas)}
.grid.sticky-cols th.stick-last, .grid.sticky-cols td.stick-last{
  box-shadow:2px 0 0 0 var(--line-strong);
}
/* box-shadow does not merge across rules — it is replaced wholesale. The last
   pinned cell of the header and of the totals row therefore lost the rule
   that separates them from the body, leaving a visible gap in the line right
   where the pinned columns end. Both shadows are declared together here. */
.grid.sticky-cols thead th.stick-last{
  box-shadow:2px 0 0 0 var(--line-strong), inset 0 -1px 0 var(--line-strong);
}
.grid.sticky-cols tfoot td.stick-last{
  box-shadow:2px 0 0 0 var(--line-strong), inset 0 2px 0 var(--line-strong);
}
@media (max-width:900px){
  /* Pinning eats most of a phone screen; let it scroll normally instead. */
  .grid.sticky-cols th.stick, .grid.sticky-cols td.stick{position:static}
  .grid.sticky-cols th.stick-last, .grid.sticky-cols td.stick-last{box-shadow:none}
}

/* ---------- front-end filter bar ---------- */
.filter-live{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end;padding:10px 14px;border-bottom:1px solid var(--line)}
.filter-live .grow{flex:1 1 220px}
.filter-count{font-size:11.5px;color:var(--text-2);white-space:nowrap;align-self:center}
.grid tr.filtered-out{display:none}

/* ================================================================
   LOGIN
   Split screen: branding and what the system covers on the left,
   the form on the right. The left panel collapses away on a phone —
   nobody signing in on a handset needs the feature grid.
   ================================================================ */
.lg{display:grid;grid-template-columns:1fr 480px;min-height:100vh}

.lg-brand{
  background:
    radial-gradient(900px 500px at 12% -8%, rgba(255,255,255,.14), transparent 60%),
    linear-gradient(140deg, #2C3B8F 0%, #3B4BA8 42%, #4657BE 100%);
  color:#fff;display:flex;align-items:center;padding:44px 52px;position:relative;overflow:hidden;
}
.lg-brand::after{
  content:"";position:absolute;right:-140px;bottom:-160px;width:460px;height:460px;
  border-radius:50%;background:rgba(255,255,255,.05);
}
.lg-brand-in{position:relative;z-index:1;width:100%;max-width:820px;margin:0 auto}

.lg-eyebrow{
  display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.72);margin-bottom:20px;
}
.lg-word{
  font-size:60px;line-height:1;font-weight:800;letter-spacing:-.03em;margin:0 0 18px;color:#fff;
}
.lg-word span{color:#AFC0FF;font-weight:300}
.lg-lede{
  font-size:16px;line-height:1.6;color:rgba(255,255,255,.84);max-width:58ch;margin:0 0 22px;
}
.lg-pill{
  display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border-radius:999px;
  border:1px solid rgba(255,255,255,.34);color:#fff;font-size:12.5px;font-weight:600;
  text-decoration:none;transition:background .15s ease,border-color .15s ease;
}
.lg-pill:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.6);color:#fff}

.lg-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:32px 0;
}
.lg-card{
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);
  border-radius:12px;padding:16px 15px;transition:background .16s ease,transform .16s ease;
}
.lg-card:hover{background:rgba(255,255,255,.12);transform:translateY(-2px)}
.lg-ico{
  width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
  background:rgba(255,255,255,.13);color:#DCE3FF;margin-bottom:11px;
}
.lg-card b{display:block;font-size:13.5px;font-weight:650;margin-bottom:5px;color:#fff}
.lg-card span{display:block;font-size:11.5px;line-height:1.55;color:rgba(255,255,255,.66)}

.lg-foot{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-top:20px;border-top:1px solid rgba(255,255,255,.14);
  font-size:11.5px;color:rgba(255,255,255,.58);
}

/* ---- right panel ---- */
.lg-panel{background:var(--surface);display:flex;align-items:center;justify-content:center;padding:40px 30px}
.lg-form{width:100%;max-width:340px}

.lg-logo{display:flex;justify-content:center;margin-bottom:26px}
.lg-logo img{max-height:66px;max-width:220px;object-fit:contain}
.lg-logo-mark{
  width:64px;height:64px;border-radius:16px;display:grid;place-items:center;
  background:linear-gradient(140deg,#3B4BA8,#4657BE);color:#fff;
  font-size:22px;font-weight:800;letter-spacing:-.02em;
}
.lg-portal{
  text-align:center;font-size:10.5px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--text-3);margin-bottom:10px;
}
.lg-form h2{
  text-align:center;font-size:29px;font-weight:750;letter-spacing:-.02em;margin:0 0 7px;color:var(--ink);
}
.lg-sub{text-align:center;font-size:12.5px;color:var(--text-2);margin:0 0 24px}

.lg-pw{position:relative}
.lg-pw input{padding-right:42px}
.lg-eye{
  position:absolute;right:5px;top:50%;transform:translateY(-50%);
  width:32px;height:32px;display:grid;place-items:center;border:none;background:none;
  color:var(--text-3);cursor:pointer;border-radius:6px;padding:0;
}
.lg-eye:hover{color:var(--text);background:var(--canvas)}
.lg-eye.on{color:var(--accent)}

.lg-row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:4px 0 20px;font-size:12.5px;
}
.lg-row a{color:var(--accent);text-decoration:none;font-weight:600}
.lg-row a:hover{text-decoration:underline}
.lg-help{color:var(--text-3);cursor:help;border-bottom:1px dotted var(--line-strong)}

.lg-submit{
  width:100%;padding:13px;border:none;border-radius:9px;cursor:pointer;
  background:linear-gradient(135deg,#2C3B8F,#4657BE);color:#fff;
  font-family:inherit;font-size:14.5px;font-weight:650;letter-spacing:.01em;
  transition:filter .15s ease,transform .08s ease,box-shadow .15s ease;
  box-shadow:0 6px 18px -6px rgba(44,59,143,.55);
}
.lg-submit:hover{filter:brightness(1.09);box-shadow:0 10px 24px -8px rgba(44,59,143,.65)}
.lg-submit:active{transform:translateY(1px)}

.lg-note{text-align:center;font-size:12px;color:var(--text-2);margin-top:20px}
.lg-note a{color:var(--accent);font-weight:600;text-decoration:none}
.lg-note a:hover{text-decoration:underline}

@media (max-width:1180px){ .lg-grid{grid-template-columns:repeat(2,1fr)} .lg-word{font-size:50px} }
@media (max-width:980px){
  .lg{grid-template-columns:1fr}
  .lg-brand{display:none}          /* the form is the whole job on a small screen */
  .lg-panel{min-height:100vh}
}

/* ================================================================
   DASHBOARD
   Light, airy, and readable at a glance. Everything is a link — the
   dashboard is a way in, not a dead end.
   ================================================================ */
.dash-hero{
  display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding:22px 24px;margin-bottom:18px;border-radius:14px;
  background:linear-gradient(120deg,#EEF2FF 0%,#F5F7FF 45%,#EFF7F6 100%);
  border:1px solid #E1E7F5;
}
.dash-hello{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}
.dash-hero h1{font-size:25px;font-weight:750;letter-spacing:-.02em;margin:3px 0 4px;color:var(--ink)}
.dash-hero p{margin:0;font-size:13px;color:var(--text-2)}
.dash-hero-side{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.dash-today{
  background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:11px 16px;text-align:right;
}
/* The same card, moved out from beside the greeting to a full-width strip
   under the four headline numbers. Laid out as a row rather than a right
   aligned block, because down here it has the whole width to itself. */
.dash-today-row{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  text-align:left;margin-bottom:18px;text-decoration:none;color:inherit;
}
.dash-today-row:hover{border-color:var(--accent)}
.dash-today-row b{font-size:20px}
/* Registration-number box in the header, where the day's takings used to be. */
.dash-find{min-width:260px}
.dash-find > label{
  display:block;font-size:11px;color:var(--text-3);letter-spacing:.04em;
  text-transform:uppercase;margin-bottom:5px;
}
.dash-find-row{display:flex;gap:8px}
.dash-find-row input{
  flex:1;min-width:0;height:38px;padding:0 11px;border-radius:9px;
  border:1px solid var(--field-border);background:var(--surface);font-size:13px;
}
.dash-find-row input:focus{outline:none;border-color:var(--accent)}
.dash-find-row .btn{flex:none;white-space:nowrap}
.dash-today span{display:block;font-size:11px;color:var(--text-3);letter-spacing:.04em;text-transform:uppercase}
.dash-today b{font-size:19px;font-weight:750;color:var(--accent-dark);font-variant-numeric:tabular-nums}
.dash-flag{
  display:inline-flex;align-items:center;padding:9px 15px;border-radius:999px;
  background:var(--danger-soft);color:var(--danger);border:1px solid var(--danger);
  font-size:12px;font-weight:650;text-decoration:none;
}
.dash-flag:hover{background:var(--danger);color:#fff}

/* ---- KPI tiles ---- */
.kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
.kpi{
  display:flex;align-items:flex-start;gap:13px;padding:17px;border-radius:13px;
  background:var(--surface);border:1px solid var(--line);text-decoration:none;color:inherit;
  transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;
}
.kpi:hover{transform:translateY(-2px);box-shadow:0 10px 24px -12px rgba(16,22,43,.28);border-color:var(--line-strong)}
.kpi-ico{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;flex:0 0 auto}
.kpi-ico svg{width:21px;height:21px}
.kpi-body{min-width:0}
.kpi-body span{display:block;font-size:11.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--text-3)}
.kpi-body b{display:block;font-size:24px;font-weight:750;letter-spacing:-.02em;margin:2px 0 3px;font-variant-numeric:tabular-nums}
.kpi-body em{display:block;font-style:normal;font-size:11.5px;color:var(--text-2)}
.k-blue   .kpi-ico{background:#E8EDFC;color:#3B4BA8}
.k-green  .kpi-ico{background:var(--success-soft);color:var(--success)}
.k-amber  .kpi-ico{background:var(--amber-soft);color:var(--amber)}
.k-violet .kpi-ico{background:#F0EAFB;color:#6D4AAE}

/* ---- layout rows ---- */
.dash-split{display:grid;grid-template-columns:1.55fr 1fr;gap:14px;margin-bottom:18px;align-items:start}
.dash-three{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:18px;align-items:start}

/* ---- vertical bar chart ---- */
.bars{display:flex;align-items:flex-end;gap:10px;height:190px;padding-top:8px}
.bar{flex:1;display:flex;flex-direction:column;align-items:center;gap:7px;min-width:0}
.bar-track{width:100%;max-width:44px;height:150px;display:flex;align-items:flex-end;
  background:var(--canvas);border-radius:7px;overflow:hidden}
.bar-fill{width:100%;border-radius:7px 7px 0 0;
  background:linear-gradient(180deg,#5C6FD0,#3B4BA8);transition:height .4s ease}
.bar:hover .bar-fill{background:linear-gradient(180deg,#0E7C7B,#0A5F5E)}
.bar-x{font-size:10.5px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}

/* ---- horizontal bars ---- */
.hbar{margin-bottom:13px}
.hbar-top{display:flex;justify-content:space-between;font-size:12.5px;margin-bottom:5px}
.hbar-top b{font-variant-numeric:tabular-nums}
.hbar-track{height:8px;background:var(--canvas);border-radius:99px;overflow:hidden}
.hbar-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,#0E7C7B,#3B4BA8);transition:width .4s ease}

/* ---- compact list rows ---- */
.lst{
  display:flex;align-items:flex-start;gap:10px;padding:10px 14px;
  border-bottom:1px solid var(--line);text-decoration:none;color:inherit;
}
.lst:last-child{border-bottom:none}
a.lst:hover{background:var(--canvas)}
.lst b{display:block;font-size:13px;font-weight:600;color:var(--text)}
.lst em{display:block;font-style:normal;font-size:11.5px;color:var(--text-2);margin-top:1px}
.dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto;margin-top:5px}
.d-teal{background:var(--accent)} .d-red{background:var(--danger)}
.d-amber{background:var(--amber)} .d-blue{background:#3B4BA8}
/* The dashboard's little date badge. Renamed from .cal-chip, which is the
   calendar's event pill further up this file: both declared the same class,
   this one came later and won, so every event chip on the calendar screens was
   being forced to 38px wide, centred and uppercased. Two unrelated components,
   one class name. */
.dash-datechip{
  flex:0 0 auto;width:38px;text-align:center;padding:3px 0;border-radius:8px;
  background:var(--accent-soft);color:var(--accent-dark);font-size:9.5px;
  text-transform:uppercase;letter-spacing:.05em;line-height:1.25;
}
.dash-datechip b{display:block;font-size:15px;font-weight:750;line-height:1.1}

@media (max-width:1200px){
  .kpi-row{grid-template-columns:repeat(2,1fr)}
  .dash-split{grid-template-columns:1fr}
  .dash-three{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .kpi-row,.dash-three{grid-template-columns:1fr}
  .dash-hero{padding:17px}
  .dash-hero h1{font-size:21px}
  .bars{height:160px}
  .bar-track{height:120px}
}

/* Issued student password, shown until the student sets their own. */
.pw-cell{
  font-family:var(--mono);font-size:12px;background:var(--canvas);
  border:1px solid var(--line-strong);border-radius:5px;padding:2px 7px;
  display:inline-block;user-select:all;
}

/* Config snippet shown on the migration setup screen. */
.code-block{
  background:var(--ink);color:#D8E0F0;border-radius:8px;padding:14px 16px;
  font-family:var(--mono);font-size:11.5px;line-height:1.6;
  overflow-x:auto;white-space:pre;margin:0 0 12px;
}

/* Migration footer — sticky, because the list is long and the class picker
   has to stay reachable while ticking rows further down. */
.mig-foot{
  position:sticky;bottom:0;z-index:5;
  background:var(--surface);border-top:2px solid var(--accent);
  padding:14px 16px;box-shadow:0 -4px 14px -6px rgba(16,22,43,.18);
}
@media (max-width:760px){ .mig-foot{position:static;box-shadow:none} }

/* Address cells in student lists: readable but capped, so a long address
   cannot push the rest of the grid off screen. */
.grid td.addr, .grid td.small.addr{min-width:160px;max-width:260px;white-space:normal;line-height:1.4}

/* Export column chooser */
.col-pick-head{display:flex;align-items:center;gap:10px;margin:6px 0 8px}
.col-pick-head .right{margin-left:auto;display:flex;gap:4px}
.col-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px;
  border:1px solid var(--line);border-radius:9px;padding:12px;background:var(--canvas)}
.col-group{border:none;margin:0;padding:0}
.col-group legend{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-3);margin-bottom:4px;padding:0}
.col-group .check{display:flex;padding:3px 0;font-size:12.5px}

/* Month grid: name cell carries the tick box, reg no, phone and address */
.att-name{display:flex;align-items:center;gap:6px;cursor:pointer;margin:0}
.att-name input{width:15px;height:15px;accent-color:var(--accent)}
.att-addr{max-width:210px;white-space:normal;line-height:1.35}

/* Bulk fill bar above the month grid */
.bulk-fill{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;
  padding:10px 14px;margin:0 0 10px;border:1px dashed var(--line-strong);
  border-radius:9px;background:var(--canvas);font-size:12.5px}
.bulk-fill label{display:inline-flex;align-items:center;gap:6px;margin:0}
.bulk-fill select{width:auto;padding:4px 8px;font-size:12.5px}

/* ================================================================
   ADMISSION FORM — three printable A4 pages
   Laid out in mm so what appears on screen is what comes out of the
   printer, and the toolbar is dropped from the print.
   ================================================================ */
.af-toolbar{display:flex;gap:10px;align-items:center;padding:14px 18px;background:var(--canvas);
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.af-page{width:210mm;min-height:297mm;background:#fff;margin:12px auto;padding:12mm 11mm;
  box-shadow:0 2px 14px rgba(16,22,43,.25);border:1px solid #000;
  font-family:"Liberation Sans",Arial,Helvetica,sans-serif;font-size:11px;line-height:1.35;color:#000}
.af-tbl{width:100%;border-collapse:collapse;table-layout:fixed}
.af-tbl td{border:1px solid #000;padding:3px 5px;vertical-align:top;min-height:16px}
.af-head{padding:6px 8px}
.af-head-flex{display:flex;align-items:center;gap:12px}
.af-logo{width:78px;height:auto;flex-shrink:0}
.af-head-text{flex:1;text-align:center}
.af-college{font-size:26px;font-weight:800;color:#1a1a4e;letter-spacing:.5px;line-height:1.05}
.af-sub{font-size:10px;margin-top:2px;line-height:1.45}
/* Format 3 only: the place, affiliation and recognition lines that sit between
   the college name and the address block. Named -head- because .af-place is
   already the Date/Place row on the declaration page, and that rule comes
   later in this file, so it would have won. */
.af-headplace{font-size:17px;font-weight:700;color:#1a1a4e;line-height:1.1}
.af-headaffil{font-size:10.5px;font-weight:700;margin-top:1px}
.af-title{font-size:15px;font-weight:800;color:#b00000;margin-top:5px}
.af-to{font-size:11px}
.af-salut{font-weight:700;line-height:1.5}
.af-to p{margin-top:6px;line-height:1.5}
.af-admlbl{text-align:center;font-weight:700;font-size:11px}
.af-admsub{text-align:center;font-size:10px}
.af-admno{text-align:center;font-size:26px;font-weight:800;letter-spacing:1px;padding-top:8px;word-break:break-all}
.af-bar{font-weight:700;font-size:11px}
.af-lbl{font-weight:700;white-space:nowrap}
.af-lbl.wrap{white-space:normal}
.af-photo{text-align:center;color:#888;vertical-align:middle;font-size:10px;line-height:1.5}
.af-photo img{height:150px;object-fit:cover}
.af-addr td{height:46px}
.af-row td{height:20px}
.af-signrow{margin-top:70px;display:flex;justify-content:space-between;padding:0 6px;text-align:center}
.af-signrow .role{font-weight:700;font-size:12px}
.af-signrow .cap{font-weight:700;font-size:11px;margin-top:2px}
.af-decl-title{text-align:center;font-weight:800;font-size:15px;text-decoration:underline;margin:4px 0 16px}
.af-decl p{text-align:justify;margin-bottom:9px;line-height:1.55}
.af-list{margin:4px 0 10px 26px}
.af-list>li{margin-bottom:8px;text-align:justify;line-height:1.55;padding-left:4px}
.af-alpha{list-style:lower-alpha}
/* Renamed from .af-sub, which the header block above also used: the list rule
   came later in the file and won, so the college address under the heading was
   being indented 28px and losing its 10px size. Two different things had the
   same class name. */
.af-sublist{list-style:lower-roman;margin:6px 0 6px 28px}
.af-sublist>li{margin-bottom:6px;text-align:justify;line-height:1.55}
.af-place{display:flex;justify-content:space-between;margin:26px 0 10px;font-weight:700}
.af-date{font-weight:700}

@media print{
  .af-toolbar{display:none}
  .af-page{margin:0;box-shadow:none;border:1px solid #000;width:auto;min-height:0}
  .af-page + .af-page{page-break-before:always}
  /* The section bars and the coloured heading are the form's structure, so they
     have to survive the printer dropping background graphics. */
  .af-page, .af-page *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* =====================================================================
   ADMISSION FORM — FORMAT 2
   The two-page legal-size form. It is deliberately independent of the
   .af- rules above so a change to one layout cannot disturb the other,
   and it prints on legal (8.5x14in) paper, which is what the form is
   drawn for — on A4 the academic record table runs off the page.
   ===================================================================== */
.af2-toolbar{display:flex;gap:10px;align-items:center;padding:14px 18px;background:var(--canvas);
  border-bottom:1px solid var(--line);flex-wrap:wrap}
.af2-page{width:216mm;min-height:356mm;background:#fff;margin:12px auto;padding:9mm 9mm;
  box-shadow:0 2px 20px rgba(16,22,43,.14);color:#000;
  font-family:Calibri,"Segoe UI",Arial,sans-serif;font-size:10.5px;line-height:1.35}

.af2-head{display:flex;align-items:center;gap:10px}
.af2-logo{width:70px;height:auto;flex-shrink:0}
.af2-head-text{flex:1;text-align:center}
.af2-college{font-size:27px;font-weight:800;color:#1a1a7e;letter-spacing:.4px;line-height:1.02}
.af2-place{font-size:19px;font-weight:700;color:#1a1a7e;line-height:1.1}
.af2-line-b{font-size:11px;font-weight:700;margin-top:1px}
.af2-line-s{font-size:10px;margin-top:1px}

.af2-regwrap{display:flex;justify-content:flex-end;margin-top:4px}
.af2-regbox{border:1px solid #000;padding:5px 12px;min-width:150px;font-size:12px}
.af2-regbox .k{font-weight:700}
.af2-regbox .v{font-weight:700;letter-spacing:.5px}

.af2-titlewrap{display:flex;justify-content:center;margin:-14px 0 6px}
.af2-title{border:1px solid #000;padding:4px 14px;font-size:12px;font-weight:700;text-align:center}

.af2-tbl{width:100%;border-collapse:collapse;table-layout:fixed}
.af2-tbl td,.af2-tbl th{border:1px solid #000;padding:3px 5px;vertical-align:top}
.af2-tbl th{font-weight:700;text-align:center;font-size:10px}
.af2-nopad{padding:0 !important}
.af2-top td{vertical-align:top}
.af2-ul{font-weight:700;text-decoration:underline;font-size:11px}
.af2-ins{margin:5px 0 0 16px}
.af2-ins>li{margin-bottom:3px}
.af2-ci-head{padding:3px 5px}
.af2-inner{width:100%;border-collapse:collapse;table-layout:fixed}
.af2-inner td{border:1px solid #000;padding:3px 5px;height:18px}
.af2-inner .k{font-weight:700;text-align:center;width:42%}
.af2-inner .v{text-align:center;font-weight:600}
.af2-photo{text-align:center;color:#666;font-size:10px;vertical-align:middle}
.af2-photo img{width:92px;height:118px;object-fit:cover}

/* Section tags — the red/maroon labels down the left of the form. */
.af2-tag{display:inline-block;background:#c0392b;color:#fff;font-weight:700;font-size:11px;
  padding:3px 12px;margin:7px 0 3px}
.af2-tag-red{background:#e01b24}
.af2-tag-wide{display:block;margin-top:10px}
.af2-tagrow{display:flex;align-items:center;justify-content:space-between}
.af2-note{font-size:10px}

.af2-fields{width:100%;border-collapse:collapse;table-layout:fixed}
.af2-fields td{border:0;border-bottom:1px dotted #555;padding:2px 4px;height:16px;font-size:10px}
.af2-fields .k{font-weight:700;width:44%;border-bottom:0}
/* Rows whose value is a run of tick boxes need the width the label would take. */
.af2-fields tr.wide .k{width:30%}
.af2-fields tr.wide .v{white-space:nowrap}
.af2-fields .v{font-weight:600}
.af2-opt{display:inline-block;margin-right:9px;white-space:nowrap}
.af2-tick{display:inline-block;width:16px;height:13px;border:1px solid #000;text-align:center;
  line-height:12px;font-weight:700;vertical-align:middle}
.af2-cells{display:inline-block;white-space:nowrap}
.af2-cell{display:inline-block;width:13px;height:14px;border:1px solid #000;text-align:center;
  line-height:13px;font-size:9.5px;margin-right:1px}
.af2-sep{display:inline-block;width:6px;text-align:center;font-weight:700}

.af2-subj{padding:4px 5px}
.af2-subjlist{margin:2px 0 6px 18px}
.af2-subjlist>li{border-bottom:1px dotted #555;min-height:14px;margin-bottom:3px;font-weight:600}
.af2-hl-red{background:#e01b24;color:#fff;display:inline-block;padding:1px 6px;text-decoration:none}
.af2-hl-yellow{background:#ffe600;color:#000;display:inline-block;padding:1px 6px;text-decoration:none}
.af2-hl-orange{background:#f08a24;color:#fff;display:inline-block;padding:1px 6px;text-decoration:none}
.af2-addrhead{margin:4px 0 2px 5px}

.af2-acad td{height:17px;font-size:10px}
.af2-acad td.num{text-align:center}
.af2-docs td{height:17px;font-size:10px}
.af2-docs td.num{text-align:center;font-weight:700}

.af2-permit{font-weight:700;font-size:10px;margin:5px 0 0}
.af2-footrow{display:flex;justify-content:space-between;align-items:flex-end;
  margin-top:26px;font-size:10.5px;gap:16px}
.af2-footrow-2{margin-top:40px;justify-content:space-around}
.af2-sign{font-weight:700;text-align:center}

.af2-decl p{text-align:justify;margin:6px 0;line-height:1.4}
.af2-decl-list{margin:4px 0 0 20px}
.af2-decl-list>li{text-align:justify;margin-bottom:4px;line-height:1.35}

@media print{
  /* No @page rule here on purpose: app.css is loaded by every screen, and a
     page-size rule is document-wide — setting Legal here would turn every
     receipt, report and ID card sheet legal-size too. The admission form
     declares its own paper in its own view. */
  .af2-toolbar{display:none}
  .af2-page{margin:0;padding:0;box-shadow:none;width:auto;min-height:0}
  .af2-page + .af2-page{page-break-before:always}
  /* The coloured section tags carry the form's structure, so they have to
     survive the printer dropping background graphics. */
  .af2-page, .af2-page *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .af2-tbl,.af2-fields,.af2-inner{page-break-inside:auto}
  .af2-tbl tr,.af2-fields tr,.af2-inner tr{page-break-inside:avoid}
}

/* ===========================================================================
   Modal
   A small dialog for the handful of places that were using window.prompt():
   taking a payment, asking for a date and an amount. prompt() cannot show a
   date picker, cannot validate, and cannot be styled, so a counter clerk got a
   bare browser box with no idea what format to type.

   Opened by adding .open; nothing here depends on a JS library.
   =========================================================================== */
.modal{position:fixed;inset:0;z-index:600;display:none;align-items:center;justify-content:center;padding:16px}
.modal.open{display:flex}
.modal-veil{position:absolute;inset:0;background:rgba(16,22,43,.46)}
.modal-box{position:relative;z-index:1;background:var(--surface);border-radius:var(--radius);
  box-shadow:0 10px 40px rgba(16,22,43,.26);width:100%;max-width:420px;max-height:92vh;overflow:auto}
/* Landscape. A form of twenty fields in a 420px column is a thousand pixels
   tall and scrolls on every screen; across a wide box the same fields sit
   four to a row and fit. .form-grid is auto-fit, so the columns appear on
   their own -- only the width of the box has to change.
   Scoped to a class rather than applied to .modal-box, because the short
   confirm dialogs on other screens read better narrow. */
.modal-box.wide{max-width:980px}
.modal-head{display:flex;align-items:flex-start;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.modal-head h2{margin:0;font-size:15px;font-weight:700}
.modal-head .sub{font-size:12px;color:var(--text-2);margin-top:2px}
.modal-x{margin-left:auto;background:none;border:0;font-size:20px;line-height:1;cursor:pointer;
  color:var(--text-3);padding:0 2px}
.modal-x:hover{color:var(--text)}
.modal-body{padding:16px}
.modal-foot{display:flex;gap:8px;justify-content:flex-end;align-items:center;
  padding:12px 16px;border-top:1px solid var(--line);background:var(--canvas)}
.modal-foot .spacer{margin-right:auto;font-size:12px;color:var(--text-2)}
@media print{.modal{display:none !important}}
/* Below the wide box's own width there is nothing to be gained from it, and
   a 980px box on a tablet would be the one thing that scrolls sideways. */
@media (max-width:1020px){.modal-box.wide{max-width:100%}}

/* ---------------------------------------------------------------
   Student console (Views/Student/Profile.cshtml)

   The head is a four-part strip: photograph, identity, portal login and
   balance. It collapses to one column on a phone rather than squeezing,
   because the login block is read aloud at a counter and must stay legible.
   --------------------------------------------------------------- */
.sc-head{
  display:grid;grid-template-columns:auto 1fr auto auto;gap:18px;align-items:center;
  background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:16px 18px;margin-bottom:16px;
}
.sc-photo{position:relative;flex:none;width:92px}
.sc-photo img,.sc-noface{
  width:92px;height:112px;object-fit:cover;border-radius:10px;
  border:1px solid var(--line);background:var(--canvas);display:block;
}
.sc-noface{
  display:flex;align-items:center;justify-content:center;
  font-size:30px;font-weight:700;color:var(--accent);background:var(--accent-soft);
}
.sc-photo-btn{
  display:block;margin-top:6px;text-align:center;cursor:pointer;
  font-size:11px;font-weight:650;color:var(--accent);
}
.sc-photo-btn input{display:none}
.sc-id{min-width:0}
.sc-name{font-size:21px;font-weight:700;line-height:1.2}
.sc-meta{
  display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center;
  font-size:12.5px;color:var(--text-2);margin-top:4px;
}
.sc-login{
  border:1px solid var(--line);border-radius:11px;padding:9px 13px;min-width:190px;
  background:var(--canvas);
}
.sc-login > .label,.sc-bal > .label{
  font-size:10.5px;color:var(--text-3);letter-spacing:.04em;text-transform:uppercase;
}
.sc-login-row{display:flex;gap:8px;align-items:baseline;font-size:12.5px;margin-top:3px}
.sc-login-row > span{color:var(--text-3);min-width:34px}
.sc-login-none{display:flex;gap:8px;align-items:center;margin-top:4px}
.sc-login-foot{font-size:11px;color:var(--text-3);margin-top:5px}
.sc-bal{text-align:right;min-width:150px}
.sc-bal .value{font-size:21px;font-weight:700}
.sc-bal .value.owed{color:var(--danger)}
.sc-bal .value.clear{color:var(--accent)}
.sc-bal .foot{font-size:11px;color:var(--text-3);margin-top:2px}

/* One-off charges, listed beside the form. Capped so the list scrolls inside
   its own card rather than making the page taller than the form next to it. */
.oc-list{max-height:62vh;overflow:auto}
.oc-for{font-size:11px;color:var(--text-3);margin-top:1px}

/* The split under a receipt that was paid over the dues: what settled a fee
   head and what is being held. Without it the amount column said 15,000 on a
   session charged 5,000 and nothing accounted for the difference. */
.sc-adv{font-size:11px;color:var(--text-3);font-weight:600;margin-top:1px;white-space:nowrap}

/* The office's notes against one session: all five spare columns on one
   line, with the Save button at the end of it. Each box shrinks evenly
   rather than one taking the slack, so the row reads as five equal notes. */
.sc-remark{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.sc-remark-box{flex:1 1 150px;min-width:0;display:flex;flex-direction:column;gap:4px}
.sc-remark-box label{font-size:11px;font-weight:600;color:var(--text-3);margin:0}
.sc-remark .btn{flex:none}
@media (max-width:860px){
  /* Five boxes across a phone would be five characters wide each. */
  .sc-remark-box{flex:1 1 100%}
}

/* One card per session row. */
.sc-card{margin-bottom:14px}
.sc-figs{
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:12px;
}
.sc-fig{
  border:1px solid var(--line);border-radius:10px;padding:9px 12px;background:var(--canvas);
}
.sc-fig span{
  display:block;font-size:10.5px;color:var(--text-3);
  letter-spacing:.04em;text-transform:uppercase;
}
.sc-fig b{font-size:17px;font-weight:700}
.sc-fig em{display:block;font-size:10.5px;color:var(--text-3);font-style:normal;margin-top:1px}
.sc-fig.owed b{color:var(--danger)}

@media (max-width:1100px){
  .sc-head{grid-template-columns:auto 1fr;}
  .sc-login,.sc-bal{grid-column:span 2}
  .sc-bal{text-align:left}
  .sc-figs{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:620px){
  .sc-head{grid-template-columns:1fr;justify-items:start}
  .sc-login,.sc-bal{grid-column:auto;width:100%}
  .sc-figs{grid-template-columns:1fr}
}

/* ---------------------------------------------------------------
   ID CARD FORMAT 12 — a college's own layout, drawn to a supplied sample

   Black on white with a ruled label/value list, the validity set vertically
   beside the photograph, and the subjects as boxes on the back.

   LANDSCAPE, 86 x 54mm. The sample was drawn tall, but 54mm of height will
   not stack eight labelled rows under a header, so the rows run in TWO
   label/value pairs across — the markup emits them in order and the grid
   wraps them, so nothing in the view changes. The address is the one value
   that needs the full width and spans.
   --------------------------------------------------------------- */
.idc.f12{
  background:#fff;color:#000;border:.35mm solid #000;border-radius:1.6mm;
  padding:1.6mm 2.2mm;display:flex;flex-direction:column;
  font-family:'Times New Roman',Georgia,serif;
}
.idc.f12 .n-top{
  display:flex;justify-content:space-between;font-size:5.2px;line-height:1.1;
}
.idc.f12 .n-cn{
  text-align:center;font-size:15px;font-weight:700;line-height:1.05;margin-top:.4mm;
}
.idc.f12 .n-ad{text-align:center;font-size:5.2px;line-height:1.15}
/* Session and title share one line here; stacked they cost 5mm of 54. */
.idc.f12 .n-ses,
.idc.f12 .n-ttl{
  text-align:center;font-size:7px;font-weight:700;text-decoration:underline;
  display:inline-block;
}
.idc.f12 .n-ses{margin-right:7mm}
.idc.f12 .n-headline{text-align:center;margin-top:.8mm}

.idc.f12 .n-body{display:flex;gap:2.4mm;margin-top:1.3mm;flex:1;min-height:0}
.idc.f12 .n-left{display:flex;gap:.9mm;flex:none}
.idc.f12 .n-valid{
  writing-mode:vertical-rl;transform:rotate(180deg);
  font-size:5px;font-weight:700;letter-spacing:.04em;text-align:center;
}
.idc.f12 .n-photo{
  width:19mm;height:25mm;border:.3mm solid #000;overflow:hidden;
  display:flex;align-items:center;justify-content:center;flex:none;
}
.idc.f12 .n-photo img{width:100%;height:100%;object-fit:cover}
.idc.f12 .n-photo span{font-size:17px;font-weight:700}

/* Two label/value pairs across. The view emits them in order and the grid
   wraps, so Name sits beside Father Name, Class beside Roll No., and so on.

   The rows are spread down the body rather than stacked at the top: four
   lines of type is 10mm of the 37mm the body has, and bunched at the top
   they left the lower half of the card blank. Each value carries the rule
   that gives the format its name, so the spacing reads as a ruled form
   instead of a gap. */
.idc.f12 .n-rows{
  flex:1;min-width:0;display:grid;
  grid-template-columns:auto minmax(0,1fr) auto minmax(0,1fr);
  column-gap:2.2mm;align-content:space-between;
  font-size:7.4px;line-height:1.2;
}
.idc.f12 .n-k{white-space:nowrap;padding-bottom:.5mm}
.idc.f12 .n-v{
  font-weight:700;min-width:0;overflow-wrap:anywhere;
  padding-bottom:.5mm;border-bottom:.2mm solid #000;
}
.idc.f12 .n-v.n-wide{grid-column:2 / -1}
.idc.f12 .n-sign{
  display:flex;justify-content:space-between;font-size:6px;font-weight:700;
  margin-top:auto;padding-top:.8mm;
}

/* ---- the back ---- */
.idc.f12.back{justify-content:flex-start}
.idc.f12 .n-sub-h{font-size:6.4px;font-weight:700;margin-top:1.4mm}
.idc.f12 .n-boxes{display:grid;grid-template-columns:repeat(4,1fr);margin-top:.9mm}
.idc.f12 .n-boxes.three{grid-template-columns:repeat(3,1fr)}
.idc.f12 .n-box{
  border:.25mm solid #000;min-height:8mm;padding:.6mm;
  font-size:5px;line-height:1.1;display:flex;align-items:center;
  justify-content:center;text-align:center;overflow:hidden;
}
/* One shared border between neighbours, as on the sample. */
.idc.f12 .n-box + .n-box{border-left:0}
/* Side by side on a wide back, where stacked they would not fit 54mm. */
.idc.f12 .n-qr{display:flex;gap:3mm;align-items:center;margin-top:auto;padding-top:1.2mm}
.idc.f12 .n-qr-box{
  border:.25mm solid #9BC3A6;background:#F2F8F3;border-radius:1mm;
  padding:.9mm;text-align:center;flex:none;width:19mm;
}
.idc.f12 .n-qr-box img{width:100%;height:auto;display:block}
.idc.f12 .n-qr-cap{font-size:5px;font-weight:700;color:#1C6B33;margin-top:.5mm}
.idc.f12 .n-qr-none{font-size:5px;color:#777;padding:6mm 0}
.idc.f12 .n-qr-txt{
  flex:1;text-align:center;font-size:8px;font-weight:700;line-height:1.35;
}