/* ============================================================
* UMS — Shared Stylesheet
* Color scheme: Amritsar University — Crimson & Royal Blue
* Primary: Crimson #C8102E (logo dominant)
* Accent: Royal Blue #004B96 (logo secondary)
* Neutral: Deep ink #1A1A2E (near-black with blue undertone)
* ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:wght@400;500;600;700&family=Inter+Tight:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
:root{
/* Core brand colours pulled from institute logo */
--crimson: #C8102E; /* primary — logo crimson red */
--crimson-dk: #9B0C22; /* darkened crimson */
--crimson-lt: #F5D6DB; /* tint for backgrounds */
--royal: #004B96; /* secondary — logo royal blue */
--royal-dk: #003370; /* darkened blue */
--royal-lt: #D6E4F5; /* tint for backgrounds */
/* Neutrals */
--ink: #1A1A2E; /* deep ink with blue undertone */
--paper: #FAF9F7; /* warm off-white */
--cream: #F3F0EA; /* warmer cream for panels */
--line: #E2DDD6; /* subtle border */
--muted: #5A6478; /* secondary text */
--subtle: #8A93A6; /* placeholder / hint text */
/* Semantic aliases kept for backward compat */
--navy: var(--royal);
--navy-dark: var(--royal-dk);
--gold: var(--crimson); /* replaces gold accent */
--gold-dark: var(--crimson-dk);
--rose: #C8102E;
--green: #1E6B3C;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--paper);color:var(--ink);font-family:'Inter Tight',system-ui,sans-serif;font-size:14.5px;line-height:1.5}
a{color:var(--royal);text-decoration:none}
a:hover{color:var(--crimson-dk)}
.font-display{font-family:'Fraunces',serif;font-feature-settings:"ss01"}
.font-mono{font-family:'JetBrains Mono',monospace}
img{max-width:100%;display:block}
/* Grain overlay */
body::before{
content:"";position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.04;mix-blend-mode:multiply;
background-image:url("data:image/svg+xml;utf8,");
}
/* Utility */
.rule{height:1px;background:linear-gradient(90deg,transparent,var(--ink) 15%,var(--ink) 85%,transparent)}
.rule-gold{height:2px;background:linear-gradient(90deg,transparent,var(--crimson) 15%,var(--crimson) 85%,transparent)}
.ornament{font-family:'Fraunces';font-weight:400;letter-spacing:.4em}
.label{font-family:'JetBrains Mono';font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:.35rem}
.headline{letter-spacing:-0.03em;line-height:.95}
.eyebrow{font-family:'JetBrains Mono';font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;color:var(--crimson-dk)}
.hint{font-size:.75rem;color:var(--subtle);margin-top:.35rem}
/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;border:none;font-family:inherit;
letter-spacing:.08em;text-transform:uppercase;font-size:.72rem;font-weight:600;
padding:.75rem 1.2rem;transition:all .2s;text-decoration:none}
.btn-primary{background:var(--crimson);color:#fff}
.btn-primary:hover{background:var(--crimson-dk);color:#fff}
.btn-gold{background:var(--crimson);color:#fff;font-weight:700}
.btn-gold:hover{background:var(--crimson-dk);color:#fff}
.btn-blue{background:var(--royal);color:#fff;font-weight:600}
.btn-blue:hover{background:var(--royal-dk);color:#fff}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--cream)}
.btn-danger{background:transparent;color:var(--crimson);border:1px solid var(--crimson)}
.btn-danger:hover{background:var(--crimson);color:#fff}
.btn-sm{padding:.4rem .75rem;font-size:.65rem}
/* Input fields */
.field{background:transparent;border:none;border-bottom:1px solid var(--ink);font-family:inherit;
font-size:.95rem;padding:.55rem .1rem;width:100%;outline:none;transition:border-color .2s;
color:var(--ink)}
.field:focus{border-bottom-color:var(--crimson)}
.field:disabled{color:var(--subtle);cursor:not-allowed}
select.field{appearance:none;background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:right .3rem center;padding-right:1.4rem}
textarea.field{border:1px solid var(--ink);padding:.7rem;min-height:80px;resize:vertical}
.chk{width:16px;height:16px;accent-color:var(--crimson);margin-right:.4rem;vertical-align:middle}
/* Layout: dashboard shell */
.shell{display:flex;min-height:100vh;position:relative;z-index:2}
/* Sidebar — crimson top bar + deep ink body */
.side{background:var(--ink);color:#cdd4e3;width:250px;flex-shrink:0;overflow-y:auto;position:sticky;top:0;height:100vh}
.side-top{padding:1.2rem;display:flex;gap:.75rem;align-items:center;border-bottom:2px solid var(--crimson)}
.seal{width:40px;height:40px;border:2px solid var(--crimson);background:var(--crimson);color:#fff;
display:flex;align-items:center;justify-content:center;font-family:'Fraunces';font-weight:700;font-size:1.2rem;
box-shadow:inset 0 0 0 2px rgba(255,255,255,.2)}
.nav-section{font-family:'JetBrains Mono';font-size:.78rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;padding:1.1rem .65rem .45rem;color:#c3cce4}
.nav-subsection{font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:.5rem 1rem .2rem 1.15rem;color:#aeb7cf;border-left:2px solid #2a3550;margin-left:.15rem}
.nav-item{display:flex;align-items:center;gap:.7rem;padding:.6rem 1rem;font-size:.85rem;border-left:2px solid transparent;cursor:pointer;transition:all .15s;color:#cdd4e3;text-decoration:none}
.nav-item:hover{background:#0d1220;color:#fff;border-left-color:rgba(200,16,46,.5)}
.nav-item.active{background:#0d1220;color:#fff;border-left-color:var(--crimson)}
.nav-item svg{width:16px;height:16px;flex-shrink:0}
.side-tip{margin:1rem .8rem;padding:1rem;background:#121a2d;border:1px solid #1c2638}
.side-tip-title{font-family:'JetBrains Mono';font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--crimson);margin-bottom:.4rem}
.side-tip-body{font-size:.75rem;line-height:1.5;color:#9ba5bc}
/* Top bar — thin crimson accent line at top */
.main{flex:1;min-width:0}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:1rem 2rem;
border-bottom:1px solid var(--line);background:#fff;border-top:3px solid var(--crimson)}
.topbar-left{display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap}
.topbar-right{display:flex;align-items:center;gap:.75rem}
.avatar{width:32px;height:32px;background:var(--crimson);color:#fff;
display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono';font-size:.7rem;font-weight:700}
.user-chip{display:flex;align-items:center;gap:.6rem;padding:.4rem .8rem;background:var(--cream)}
.user-chip-name{font-size:.82rem;font-weight:600;line-height:1.1}
.user-chip-role{font-family:'JetBrains Mono';font-size:.6rem;letter-spacing:.15em;text-transform:uppercase;color:var(--subtle);line-height:1.1}
.content{padding:2rem 2.5rem}
/* Page header */
.page-head{margin-bottom:2rem}
.page-title{font-family:'Fraunces';font-weight:600;font-size:3rem;letter-spacing:-0.03em;line-height:.98}
.page-title em{font-style:italic;color:var(--royal)}
.page-sub{font-size:.95rem;color:var(--muted);margin-top:.5rem;max-width:640px}
/* Tile / Card */
.tile{background:#fff;border:1px solid var(--line);transition:all .25s}
.tile-pad{padding:1.5rem}
.tile:hover{box-shadow:0 10px 24px -12px rgba(26,26,46,.12)}
.tile-head{display:flex;align-items:center;justify-content:space-between;padding:1.1rem 1.3rem;border-bottom:1px solid var(--line);background:#FBF9F7}
.tile-head-title{font-family:'Fraunces';font-weight:600;font-size:1.3rem;line-height:1.1}
.tile-head-sub{font-family:'JetBrains Mono';font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--subtle);margin-bottom:.25rem}
/* Grid */
.grid{display:grid;gap:1rem}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.form-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.8rem 2rem}
.form-grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:1.8rem 2rem}
.col-span-2{grid-column:span 2}
.col-span-3{grid-column:span 3}
/* Stats */
.stat{background:#fff;border:1px solid var(--line);padding:1.2rem}
.stat-k{font-family:'JetBrains Mono';font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.stat-v{font-family:'Fraunces';font-size:3rem;font-weight:600;line-height:1;margin-top:1rem}
.stat-sub{font-family:'JetBrains Mono';font-size:.68rem;color:var(--subtle);margin-top:.5rem}
.stat-icon{width:32px;height:32px;display:flex;align-items:center;justify-content:center;float:right}
.tone-navy{color:var(--royal);background:var(--royal-lt)}
.tone-gold{color:var(--crimson-dk);background:var(--crimson-lt)}
.tone-green{color:#1E6B3C;background:rgba(30,107,60,.1)}
.tone-rose{color:var(--crimson);background:var(--crimson-lt)}
/* Table */
.tbl{width:100%;border-collapse:collapse;background:#fff}
.tbl th{font-family:'JetBrains Mono';font-size:.65rem;letter-spacing:.18em;text-transform:uppercase;
text-align:left;padding:.7rem .9rem;color:var(--muted);border-bottom:2px solid var(--crimson);background:#FBF9F7}
.tbl td{padding:.85rem .9rem;border-bottom:1px solid var(--line);font-size:.88rem;vertical-align:middle}
.tbl tr:hover td{background:#FBF9F7}
.tbl .actions{text-align:right;white-space:nowrap}
/* Pills */
.pill{display:inline-block;padding:.15rem .55rem;font-family:'JetBrains Mono';font-size:.6rem;
letter-spacing:.12em;text-transform:uppercase;border:1px solid currentColor}
.pill-green{color:#1E6B3C}
.pill-gold{color:var(--crimson-dk)}
.pill-rose{color:var(--crimson)}
.pill-navy{color:var(--royal)}
.pill-crimson{color:var(--crimson);background:var(--crimson-lt);border-color:var(--crimson)}
/* Flash */
.flash{padding:1rem 1.3rem;margin-bottom:1.5rem;border-left:3px solid;background:#fff;font-size:.9rem}
.flash-ok{border-color:#1E6B3C;color:#1a3d2a;background:rgba(30,107,60,.07)}
.flash-err{border-color:var(--crimson);color:#6b1020;background:var(--crimson-lt)}
.flash strong{font-family:'JetBrains Mono';font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;margin-right:.5rem}
/* Tab bar */
.tab-bar{display:flex;gap:0;border-bottom:1px solid var(--line);margin-bottom:1.5rem}
.tab{padding:.8rem 1.2rem;font-family:'JetBrains Mono';font-size:.68rem;letter-spacing:.15em;
text-transform:uppercase;border-bottom:2px solid transparent;cursor:pointer;color:var(--muted);
text-decoration:none;transition:all .2s}
.tab:hover{color:var(--ink)}
.tab.active{color:var(--crimson);border-bottom-color:var(--crimson)}
/* Form section heading */
.form-section{padding:1.8rem;border-bottom:1px solid var(--line)}
.form-section:last-child{border-bottom:none}
.form-section-title{font-family:'JetBrains Mono';font-size:.68rem;letter-spacing:.25em;
text-transform:uppercase;color:var(--royal);margin-bottom:1.5rem}
/* Login page specific */
.login-wrap{display:flex;min-height:100vh;position:relative;z-index:2}
.login-left{flex:5;background:var(--ink);color:var(--cream);padding:3.5rem;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between}
/* Crimson accent stripe across login left panel */
.login-left::after{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--crimson)}
.login-right{flex:7;display:flex;align-items:center;justify-content:center;padding:2rem;position:relative}
.parchment{background:
radial-gradient(ellipse at top left, rgba(200,16,46,.07), transparent 50%),
radial-gradient(ellipse at bottom right, rgba(0,75,150,.06), transparent 50%),
var(--cream);
box-shadow:0 1px 0 rgba(0,0,0,.04),0 24px 60px -20px rgba(26,26,46,.25);
width:100%;max-width:440px;padding:3rem;position:relative}
/* Top border in crimson */
.parchment::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--crimson),var(--royal))}
.grid-bg{position:absolute;inset:0;opacity:.04;background-image:linear-gradient(#1A1A2E 1px,transparent 1px),linear-gradient(90deg,#1A1A2E 1px,transparent 1px);background-size:40px 40px}
.demo-hint{margin-top:1.5rem;padding:.9rem;border:1px dashed var(--crimson);background:rgba(200,16,46,.05);
font-size:.76rem;line-height:1.55;color:#4a5366}
/* Badge on dashboard */
.activity-item{display:flex;gap:.8rem;margin-bottom:1.2rem}
.activity-ico{width:32px;height:32px;background:var(--cream);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.activity-title{font-size:.88rem;font-weight:600;line-height:1.2}
.activity-sub{font-size:.74rem;color:var(--subtle);margin-top:.15rem}
.activity-time{font-family:'JetBrains Mono';font-size:.62rem;color:#b1b7c5;margin-top:.15rem}
/* Responsive */
@media (max-width:900px){
.side{width:100%;height:auto;position:relative}
.shell{flex-direction:column}
.form-grid,.form-grid-2{grid-template-columns:1fr}
.grid-4{grid-template-columns:repeat(2,1fr)}
.grid-3,.grid-2{grid-template-columns:1fr}
.page-title{font-size:2rem}
.login-wrap{flex-direction:column}
.login-left{padding:2rem}
}
/* ==================================================================
* PHONES AND TABLETS
*
* The shell was built for a desktop: a 250px sidebar always on screen, three
* columns of form fields, and wide tables. On a phone that produces a page you
* have to scroll sideways to read, with tap targets too small to hit — which
* is exactly the situation a teacher is in when marking attendance in a lab.
*
* Nothing above this line is changed. Everything here is a media query, so the
* desktop layout is untouched and only narrow screens are affected.
* ================================================================== */
/* the drawer button lives in the topbar and is hidden on a desktop */
.navtoggle{display:none;align-items:center;justify-content:center;width:44px;height:44px;
margin-right:.6rem;border:1px solid var(--line,#dde3ec);border-radius:8px;background:#fff;
color:var(--ink,#1e293b);font-size:1.35rem;line-height:1;cursor:pointer;flex:0 0 auto}
.navscrim{display:none;position:fixed;inset:0;background:rgba(15,23,42,.5);z-index:59}
body.nav-open .navscrim{display:block}
/* ---------------- tablet and below ---------------- */
@media (max-width: 1024px){
.form-grid{grid-template-columns:repeat(2,1fr);gap:1.1rem 1.2rem}
.form-grid-2{grid-template-columns:repeat(2,1fr);gap:1.1rem 1.2rem}
.topbar{padding:.8rem 1.1rem}
.side{width:210px}
}
/* ---------------- phones, and tablets in portrait ---------------- */
@media (max-width: 900px){
/* The sidebar slides in over the page instead of holding a column open.
It keeps its own scroll, so a long menu is still reachable. */
.side{position:fixed;top:0;left:0;height:100vh;width:min(82vw,290px);z-index:60;
transform:translateX(-100%);transition:transform .22s ease;box-shadow:0 0 24px rgba(0,0,0,.35)}
body.nav-open .side{transform:translateX(0)}
.navtoggle{display:inline-flex}
.shell{display:block}
.main{width:100%}
/* The top bar is the one row that must never overflow, because the menu
button lives in it: if the page can be pushed sideways the button drifts
off screen and the menu becomes unreachable. So the left side is allowed
to shrink and truncate, and the right side keeps its buttons at full size. */
.topbar{padding:.7rem .9rem;gap:.5rem;flex-wrap:nowrap}
.topbar-left{gap:.35rem;min-width:0;flex:1 1 auto;flex-wrap:nowrap;overflow:hidden}
/* min-width:0 is what actually lets a flex item shrink; without it the name
is cut off mid-letter instead of ending in an ellipsis. */
.topbar-left>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* the session strip is the first thing worth dropping on a small screen */
.topbar-left .font-mono{display:none}
.topbar-left span[style*="1.1rem"]{font-size:.95rem}
.topbar-right{flex:0 0 auto;gap:.35rem}
/* the name and role are already shown on the left — the chip only repeats them */
.topbar-right .user-chip{display:none}
/* the notification panel is wider than a phone; pin it to the screen instead */
#plcBellPanel{width:min(92vw,330px);right:-.6rem}
.page-head{padding:1rem .9rem .4rem}
.page-title{font-size:1.35rem;line-height:1.2}
.page-sub{font-size:.85rem}
/* content padding shrinks so text is not squeezed into a narrow column */
.content,.tile-pad{padding-left:.9rem;padding-right:.9rem}
.tile{border-radius:8px}
/* one field per row — two half-width fields on a phone are unusable */
.form-grid,.form-grid-2,.form-grid-4{grid-template-columns:1fr;gap:.9rem}
.col-span-2,.col-span-3,.col-span-4{grid-column:span 1}
/* A wide table scrolls INSIDE its tile rather than pushing the page sideways.
Without this the whole layout scrolls and the menu button drifts away. */
.tile{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{max-width:100%}
.tbl{font-size:.82rem}
.tbl th,.tbl td{padding:.5rem .45rem}
/* buttons and fields become thumb-sized and stop shrinking to fit */
.btn{min-height:42px;padding:.55rem .9rem;font-size:.86rem}
.btn-sm{min-height:36px}
/* :not() matters — a min-height on a radio or a checkbox stretches the box
itself into an oval instead of enlarging the tap area. Those two are sized
in the touch block further down. */
.field,input:not([type=radio]):not([type=checkbox]),select,textarea{
min-height:42px;font-size:16px} /* 16px stops iOS zooming on focus */
textarea.field{min-height:88px}
/* Sized here as well as in the pointer:coarse block below — a phone-width
window is the case that block does not catch, and the day-grid and
timetable screens are mostly bare tick boxes. */
input[type=checkbox],input[type=radio]{width:20px;height:20px}
/* a row of buttons wraps instead of overflowing */
.btn-row,.actions,.tile-head{flex-wrap:wrap;gap:.5rem}
.tile-head{align-items:flex-start}
/* stat tiles stack */
.kpi,.stat-row{flex-wrap:wrap}
/* ---- marking attendance from a phone --------------------------------
* This is the screen a teacher stands in front of a class using, so it gets
* more than a shrink. The serial number is dropped (the roll number already
* identifies the row), the name is given the width it needs, and Present /
* Absent become two pills side by side that show which one is chosen — the
* bare radio dot is too small to read at arm's length and too small to hit.
* The radios stay in the markup, so the form posts exactly as it does on a
* desktop and no saving logic changes. */
.att-roster th:first-child,.att-roster td:first-child{display:none}
.att-roster{font-size:.84rem}
.att-roster th,.att-roster td{padding:.55rem .35rem;vertical-align:middle}
.att-roster td:nth-child(3){min-width:7.5rem} /* Student */
/* nowrap belongs on the pill pair only. Put it on the whole cell and the long
fee-defaulter sentence in some rows is forced onto one line, which stretches
the table far past the screen and pushes the pills out of reach. */
.att-roster td:last-child{white-space:normal}
.att-roster td:last-child .pill+span{display:block;font-size:.7rem}
.att-roster label.pa{display:inline-flex;align-items:center;justify-content:center;
margin:0 .25rem 0 0 !important;min-width:3.4rem;min-height:38px;padding:.3rem .5rem;
border:1px solid var(--line,#dde3ec);border-radius:8px;background:#fff;
font-size:.78rem !important;line-height:1;white-space:nowrap;cursor:pointer}
/* The radio stays VISIBLE inside the pill on purpose. The colour fill below
needs :has(), which older phone browsers do not have; if it is missing the
teacher can still see the dot and tell Present from Absent. */
.att-roster label.pa input{width:16px;height:16px;margin:0 .3rem 0 0;flex:0 0 auto}
.att-roster label.pa:has(input:checked){font-weight:700;border-width:2px}
.att-roster label.pa:has(input[value="P"]:checked){background:#e6f4ea;border-color:#1e8e3e;color:#137333}
.att-roster label.pa:has(input[value="A"]:checked){background:#fce8e6;border-color:#d93025;color:#c5221f}
}
/* ---- the roster as a card list on a phone ---------------------------------
* Below 600px a five-column table cannot give both the name and the two pills
* enough room — the pills end up stacked in a narrow column and each one is a
* small target. So each student becomes a card instead: identity on one line,
* the two choices side by side underneath at half the screen each. Still the
* same table and the same radios, so the form posts unchanged. */
@media (max-width: 600px){
.att-roster,.att-roster tbody,.att-roster td{display:block;width:auto}
.att-roster thead{display:none}
/* the card is a flex row that wraps: identity first, choices forced below */
.att-roster tr{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem;
border:1px solid var(--line,#dde3ec);border-radius:10px;
margin:0 0 .5rem;padding:.45rem .6rem;background:#fff}
/* .tbl.att-roster, not .att-roster — the generic .tbl cell padding is set
again in the 480px block below this one and would otherwise win on order
and put ~13px of dead space back into every card. */
.tbl.att-roster td{border:0;padding:0;font-size:.85rem}
.att-roster td:nth-child(2){color:#5a6478} /* roll */
.att-roster td:nth-child(3){font-weight:600;flex:1 1 auto;min-width:0} /* name */
.att-roster td:nth-child(4){color:#5a6478;font-size:.76rem;flex:0 0 100%} /* father's name — its own line under the name */
.att-roster td:nth-child(5){color:#5a6478;font-size:.76rem} /* group */
/* the two choices take a full line of their own, half the width each */
.att-roster td:last-child{flex:0 0 100%;display:flex;gap:.5rem;margin-top:.35rem}
.att-roster label.pa{flex:1 1 0;min-width:0;margin:0 !important;min-height:40px}
}
/* ---------------- small phones ---------------- */
@media (max-width: 480px){
.page-title{font-size:1.2rem}
.tbl{font-size:.78rem}
.tbl th,.tbl td{padding:.45rem .35rem}
/* A form's submit button is easier to hit full width. The top bar and any
row of buttons are excluded, or the sign-out button would take a line of
its own and push the menu button off the screen. */
.content .btn{width:100%;justify-content:center}
.btn-inline,.btn-row .btn,.tile-head .btn,.actions .btn,td .btn,th .btn{width:auto}
/* the sign-out label goes, the icon stays */
.topbar-right .btn{font-size:0;padding:.5rem .6rem}
.topbar-right .btn svg{margin:0}
}
/* ---------------- touch devices of any width ----------------
A stylus or finger needs a bigger target than a mouse pointer, even on a
large tablet, so this keys on the pointer rather than the width. */
@media (pointer: coarse){
.btn,.field,input[type=submit],input[type=button],select{min-height:42px}
input[type=checkbox],input[type=radio]{width:20px;height:20px}
/* attendance: the P / A controls are tapped a hundred times in a class */
.att-mark label,.att-mark .btn,td label{padding:.35rem .5rem}
a{-webkit-tap-highlight-color:rgba(31,78,121,.15)}
}
/* nothing of the drawer should survive into print */
@media print{
.side,.navtoggle,.navscrim,.topbar{display:none !important}
.shell{display:block}
.main{width:100%}
}
/* ============================================================================
* SMALL-SCREEN SAFETY NET
* ----------------------------------------------------------------------------
* The responsive rules above cover the classes the layout declares — .form-grid,
* .grid-2, the tables, the sidebar. What they could not reach was the styling
* written INLINE on individual screens, and there is a great deal of it: 161
* fixed min-widths and 442 flex rows that never wrap.
*
* An inline style beats a stylesheet rule, so on a phone a
* `style="min-width:360px"` select simply took 360px it did not have. Measured
* on acad_lab_internal.php at a 265px viewport, one such select stuck 129px past
* the edge and dragged the whole page sideways with it. A `display:flex` row with
* no wrap did the same thing differently: instead of overflowing it squeezed its
* children until their text ran together, which is the "two columns overlapping"
* on a phone.
*
* Fixing 600-odd inline styles by hand would be a large change with a large
* chance of breaking a screen. These four rules fix the whole class of problem
* in one place, and they live inside the phone/tablet media query, so the
* desktop layout is bit-for-bit what it was.
* ========================================================================== */
@media (max-width: 900px){
/* 1 — no control may demand more width than the screen has. min-width beats
max-width in CSS, so the inline value has to be neutralised outright;
!important is the only thing that outranks a style attribute. */
.content [style*="min-width"]{min-width:0 !important}
/* 2 — and it must not overflow its container either way */
.content .field,.content .form-control,.content select,
.content input,.content textarea{max-width:100%}
/* 3 — a row of controls wraps onto the next line instead of crushing its
children into each other. This is what stops the text overlapping. */
.content [style*="display:flex"],
.content [style*="display: flex"]{flex-wrap:wrap}
/* 4 — a filter bar's fields each take a sensible share of the row rather than
one hogging it. Grows to fill, shrinks when it must, never below 11rem
unless the screen itself is narrower. */
.content form [style*="display:flex"]>div,
.content form [style*="display: flex"]>div{flex:1 1 11rem;min-width:0}
/* 5 — an INLINE GRID with fixed pixel columns collapses to one column.
This is what hid the dashboard's "Recent Leave Applications": the tile
held `display:grid;grid-template-columns:220px 1fr`, which on a 347px
tile resolves to 220 + 332 = 552px. The table therefore began 234px in
and ran 192px past the screen. The page itself could not scroll, so that
content was simply unreachable — scrolling sideways revealed nothing,
because the only thing that could scroll was the tile, and a phone gives
no visible scrollbar to say so.
Grids built with auto-fit / auto-fill are ALREADY responsive by
definition and are deliberately left alone. */
.content [style*="display:grid"]:not([style*="auto-fit"]):not([style*="auto-fill"]),
.content [style*="display: grid"]:not([style*="auto-fit"]):not([style*="auto-fill"]){
grid-template-columns:1fr !important;
}
/* 6 — a table too wide to fit still scrolls inside its tile, which is right,
but on a phone there is no scrollbar to hint at it. A soft shadow on the
right edge shows there is more, and the momentum scrolling makes the
swipe feel native. */
.content .tile{scrollbar-width:thin}
.content .tile::-webkit-scrollbar{height:6px}
.content .tile::-webkit-scrollbar-thumb{background:#c7cedb;border-radius:3px}
/* Long unbroken strings — a subject code, an email, a file name — wrap rather
than forcing the page wider than the screen. */
/* Long values (a roll number, an e-mail, a subject code) break rather than
widen the page — but NEVER inside a table.
`overflow-wrap:anywhere` is not only a wrapping rule: it lowers an
element's MIN-CONTENT width to a single character. A table is then free to
shrink to whatever box it sits in, so instead of the .tile scrolling
sideways the columns collapse and the text stacks one word — often one
letter — per line. Measured on Low Attendance at 375px: "Jaskaranpreet
Singh" in a 51px column, the roll number in 31px, and the tile reporting
nothing to scroll because everything had been squeezed to fit.
overflow-wrap INHERITS, so listing .tile/.card alone is not enough — the
cells inside them must be put back explicitly. */
.content .tile,.content .card{overflow-wrap:anywhere}
.content table th,.content table td{overflow-wrap:normal}
}
/* ── A STUDENT WHO HAS LEFT THE INSTITUTE ──────────────────────────────
Marked in red wherever they still appear. They are off the roll — out of
attendance and out of every class count — but their row is kept in the lists
they were in, at the end, so a class list still tells the whole story of who
was in that class. See includes/student_left.php for the ordering rule.
Colour alone is never the only signal: these rows also carry a LEFT pill and
sit last, so the meaning survives a black-and-white print and a reader who
cannot separate red from grey. */
tr.stu-left > td, tr.stu-left > th { color:#b91c1c; }
tr.stu-left { background:#fff7f7; }
tr.stu-left .text-muted { color:#d08b8b; }
tr.stu-left .pill { color:#b91c1c; border-color:#eebcbc; background:#fff2f2; }
@media print { tr.stu-left > td { color:#000; font-style:italic; } }