* { margin:0; padding:0; box-sizing:border-box; font-family: Arial, Helvetica, sans-serif; }
body { background:#EEF2F4; color:#2B333A; }
a { text-decoration:none; color:inherit; }
.layout { display:flex; min-height:100vh; }
.sidebar { width:238px; background:#31383F; color:#DDE5E9; flex-shrink:0; }
.sidebar .brand { padding:20px 16px 14px; text-align:center; border-bottom:1px solid #454E56; }
.sidebar .brand img { width:64px; }
.sidebar .brand .bname { font-size:15px; font-weight:bold; color:#fff; margin-top:8px; line-height:1.35; }
.sidebar .brand .bsub { font-size:11px; color:#9FB3BC; margin-top:2px; }
.nav { padding:12px 10px; }
.nav .item { display:block; padding:10px 12px; border-radius:8px; font-size:13.5px; margin-bottom:3px; color:#C9D4DA; }
.nav .item.active { background:#00A9CE; color:#fff; font-weight:bold; }
.nav .item:hover { background:#3D454E; color:#fff; }
.nav .item.active:hover { background:#00A9CE; }
.nav .head { font-size:10.5px; letter-spacing:1px; color:#8FA3AD; margin:14px 12px 6px; text-transform:uppercase; }
.nav .logout { color:#F0B4B4; }
.main { flex:1; min-width:0; }
.topbar { background:#fff; padding:12px 24px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid #DCE3E7; }
.topbar h1 { font-size:19px; color:#26303A; }
.topbar .sub { font-size:12px; color:#75828B; margin-top:2px; }
.userbox { display:flex; align-items:center; gap:10px; font-size:13px; }
.avatar { width:36px; height:36px; border-radius:50%; background:#00A9CE; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:bold; font-size:13px; }
.content { padding:22px 24px; }
.cards { display:flex; gap:16px; flex-wrap:wrap; }
.card { background:#fff; border-radius:12px; padding:18px; box-shadow:0 1px 3px rgba(30,40,50,.08); }
.stat { flex:1; min-width:180px; }
.stat .label { font-size:12px; color:#75828B; text-transform:uppercase; letter-spacing:.5px; }
.stat .value { font-size:27px; font-weight:bold; color:#26303A; margin:6px 0 2px; }
.stat .note { font-size:12px; color:#4E9B47; }
.stat .note.warn { color:#D98E04; }
.grid2 { display:flex; gap:16px; margin-top:16px; flex-wrap:wrap; }
/* Dashboard layout: Quick Actions as one horizontal strip directly
   under the stat cards, then Today's Events and Upcoming SIDE BY
   SIDE in one row (about 55/45, equal height) (requirement by
   Fahad, 2026-10-21). On narrow screens under about 700px the two
   events panels stack. */
.dash-events { flex:1.22 1 340px; }
.dash-upcoming { flex:1 1 300px; }
.dash-quick { margin-top:16px; display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.dash-quick h2 { margin-bottom:0; margin-right:6px; }
@media (max-width: 700px) {
  .dash-events, .dash-upcoming { flex:1 1 100%; }
}
.panel { background:#fff; border-radius:12px; padding:18px; box-shadow:0 1px 3px rgba(30,40,50,.08); }
.panel h2 { font-size:15.5px; color:#26303A; margin-bottom:12px; }
.event { display:flex; gap:12px; padding:9px 0; border-bottom:1px solid #EDF1F3; }
.event:last-child { border-bottom:none; }
.event .time { width:118px; font-size:12px; color:#fff; background:#31383F; border-radius:6px; text-align:center; padding:5px 4px; height:fit-content; }
.event .time.tea { background:#E8A87C; color:#5B3A1E; }
.event .time.ref { background:#8FB6D9; color:#20384F; }
.event .what { font-size:13.5px; font-weight:bold; }
.event .who { font-size:12px; color:#75828B; margin-top:1px; }
table { width:100%; border-collapse:collapse; font-size:13px; }
th { text-align:left; background:#F2F6F8; color:#55636D; padding:10px 10px; font-size:12px; text-transform:uppercase; letter-spacing:.4px; }
td { padding:10px; border-bottom:1px solid #EDF1F3; vertical-align:top; }
.badge { display:inline-block; padding:3px 9px; border-radius:20px; font-size:11.5px; font-weight:bold; }
.b-green { background:#E2F3E0; color:#2E7D26; }
.b-orange { background:#FCEBD2; color:#9C6500; }
.b-blue { background:#DDECF7; color:#1F5C8B; }
.b-grey { background:#E8ECEE; color:#55636D; }
.b-cyan { background:#D6F2F9; color:#00748F; }
.btn { display:inline-block; background:#00A9CE; color:#fff; padding:9px 18px; border-radius:8px; font-size:13.5px; font-weight:bold; }
.btn.dark { background:#31383F; }
.btn.light { background:#fff; color:#00748F; border:1px solid #00A9CE; }
.toolbar { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:14px; }
.input, select.input { padding:9px 12px; border:1px solid #CBD5DB; border-radius:8px; font-size:13.5px; background:#fff; }
label.flabel { display:block; font-size:12px; color:#55636D; margin-bottom:5px; font-weight:bold; }
.fgroup { margin-bottom:13px; }
.fgroup .input { width:100%; }
/* Show password toggle (owner, 2026-10-23): the small checkbox
   under a password field that lets the person check what they
   typed; wired by assets/js/show-password.js. */
.show-pw { display:inline-flex; align-items:center; gap:6px; margin-top:7px; font-size:12.5px; color:#55636D; cursor:pointer; }
.show-pw input { width:15px; height:15px; margin:0; accent-color:#00A9CE; cursor:pointer; }
.kv { font-size:13px; }
.kv td { border-bottom:1px solid #EDF1F3; padding:7px 8px; }
.kv td.k { color:#75828B; width:170px; }
.footer-note { font-size:11.5px; color:#97A5AD; text-align:center; padding:14px; }
.error-box { background:#FDECEC; color:#A12B2B; border:1px solid #F3C2C2; border-radius:8px; padding:10px 12px; font-size:13px; margin-bottom:14px; text-align:left; }

/* Login page (from the approved sample) */
body.login-body { background:#31383F; display:flex; align-items:center; justify-content:center; min-height:100vh; }
.login-wrap { padding:24px 12px; }
.login-card { background:#fff; border-radius:16px; width:400px; max-width:92vw; padding:38px 36px 30px; text-align:center; box-shadow:0 12px 40px rgba(0,0,0,.35); }
.login-card img { width:110px; }
.login-card h1 { font-size:21px; color:#26303A; margin-top:12px; line-height:1.4; }
.login-card .sub { font-size:12.5px; color:#75828B; margin:4px 0 22px; }
.login-card .fgroup { text-align:left; }
.login-card .input { width:100%; padding:11px 12px; }
.login-btn { width:100%; background:#00A9CE; color:#fff; border:none; padding:12px; border-radius:8px; font-size:15px; font-weight:bold; cursor:pointer; }
.login-btn:hover { background:#0092B4; }
.forgot { font-size:12.5px; color:#00748F; margin-top:14px; }
.sysname { color:#9FB3BC; font-size:12px; margin-top:22px; text-align:center; }

/* Students (Task 2) */
.frow { display:flex; gap:14px; flex-wrap:wrap; }
.frow .fgroup { flex:1; min-width:180px; }
.section-title { background:#31383F; color:#fff; padding:9px 14px; border-radius:8px; font-size:14px; font-weight:bold; margin:18px 0 14px; }
.section-title:first-child { margin-top:0; }
.section-title span { color:#5ED3EE; font-weight:normal; font-size:12px; margin-left:8px; }
label.flabel .req { color:#D64545; }
.search { flex:1; min-width:220px; }
.b-red { background:#F8DDDD; color:#A12B2B; }
.btn.red { background:#C0392B; }
.btn.small { padding:6px 12px; font-size:12.5px; }
button.btn { border:none; cursor:pointer; font-family:inherit; }
.ok-box { background:#E8F7EE; color:#1E6B34; border:1px solid #BFE6CC; border-radius:8px; padding:10px 12px; font-size:13px; margin-bottom:12px; }
.warn-box { background:#FFF8EE; border:1px solid #F0D9B0; border-radius:8px; padding:12px 14px; font-size:13px; margin-bottom:14px; }
.photo-thumb { width:38px; height:46px; border-radius:6px; object-fit:cover; border:1px solid #CBD5DB; display:block; }
.photo-frame { width:84px; height:102px; border-radius:10px; background:#D6F2F9; border:2px solid #00A9CE; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#00748F; flex-shrink:0; overflow:hidden; text-align:center; }
.photo-frame img { width:100%; height:100%; object-fit:cover; }
.row-left { background:#FBF3F3; }
input[type="date"].input { min-height:38px; }

/* Back / Home navigation row: shown directly under the topbar on
   every page except the Dashboard (and Login / Change Password),
   so getting back or home is always one click (Fahad, 2026-10-21). */
.page-nav { display:flex; gap:8px; align-items:center; padding:12px 24px 0; }
.pagenav-btn { display:inline-block; background:#FFFFFF; border:1px solid #C3D0D8; color:#00748F; font-weight:bold; font-size:12.5px; line-height:1; padding:7px 13px; border-radius:7px; text-decoration:none; }
.pagenav-btn:hover { background:#EAF4F8; border-color:#00A9CE; }

/* Weekly Planner (Task 4) */
.planner-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.planner-month { font-size:13.5px; font-weight:bold; color:#26303A; padding-top:6px; }
.planner-meta { font-size:13px; color:#55636D; text-align:right; padding-top:6px; line-height:1.45; }
.planner-title { font-size:21px; font-weight:bold; letter-spacing:1px; color:#26303A; text-align:center; }
.planner-week { font-size:14px; font-weight:bold; color:#00748F; text-align:center; margin-top:3px; }
.planner-grid-wrap { padding-bottom:6px; }
/* Screen planner shows TWO days per row, so each day gets a wide,
   comfortable column that is easy to read: row 1 Mon and Tue,
   row 2 Wed and Thu, row 3 Fri and Sat, row 4 Sun alone
   (requirement by Fahad, 2026-10-21; the whole week in one row of
   7 squeezed columns was hard to read). */
.planner-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:12px; margin-top:6px; }
.planner-day { background:#F7FAFB; border:1px solid #E2E9ED; border-radius:10px; padding:11px 10px; min-height:140px; min-width:0; }
.planner-day h3 { font-size:13.5px; color:#26303A; margin-bottom:9px; text-align:center; }
.planner-day h3 span { color:#00748F; }
.planner-entry { border:1px solid #D8E1E6; border-radius:8px; padding:9px 10px; margin-bottom:8px; font-size:13px; line-height:1.45; overflow-wrap:break-word; }
.planner-entry .act { font-weight:bold; color:#26303A; font-size:14px; line-height:1.35; }
.planner-entry .person { font-size:12px; color:#55636D; margin-top:2px; }
.planner-entry .ptime { font-size:12px; color:#55636D; margin-top:1px; }
/* Only on very narrow phone widths does the grid fall back to a
   single day per row. */
@media (max-width: 480px) {
  .planner-grid { grid-template-columns:1fr; }
}
.planner-tea { background:#FCEBD2; }
.planner-ref { background:#DDECF7; }
.planner-asm { background:#E8ECEE; }
.planner-fac { background:#D8F3DC; }
.planner-white { background:#FFFFFF; }
.planner-off { background:#F4F4F4; }
.planner-legend { display:flex; flex-wrap:wrap; gap:7px 18px; margin-top:12px; font-size:12.5px; color:#55636D; }
.planner-legend .legend-item { display:inline-flex; align-items:center; }
.legend-chip { display:inline-block; width:15px; height:15px; border-radius:4px; border:1px solid #C3D0D8; margin-right:6px; }
.planner-empty { font-size:12px; color:#97A5AD; text-align:center; padding:10px 0; }
.entry-actions { margin-top:5px; font-size:11.5px; }
.entry-actions a { color:#00748F; font-weight:bold; margin-right:8px; }
.link-btn { background:none; border:none; color:#A12B2B; font-weight:bold; font-size:11.5px; cursor:pointer; font-family:inherit; padding:0; }
a.glance-row { color:inherit; }
a.glance-row:hover { background:#F4F9FB; }

/* Attendance (Task 5) */
.attendance-status { min-width:132px; }
.attendance-event-fields { margin-bottom:4px; }

/* Welcome banner and colourful tiles (dashboard design direction by
   Fahad, 2026-10-21: a colourful interface of boxes, and clicking a
   box opens its detail). The banner sits at the very top of the staff
   and student dashboards; the tiles replace the old Quick Actions
   button strip and each tile is a link to its section. */
.welcome-banner { background:linear-gradient(135deg, #0F3562, #1D5FA8); border-radius:16px; padding:20px 22px; margin-bottom:16px; box-shadow:0 6px 18px rgba(15,53,98,.25); }
.welcome-banner .wb-assalam { color:#BCD7F5; font-size:13px; letter-spacing:.04em; }
.welcome-banner .wb-name { color:#FFFFFF; font-size:24px; font-weight:800; margin-top:2px; }
.welcome-banner .wb-date { color:#F5C542; font-size:13.5px; font-weight:600; margin-top:4px; }
.tiles { display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; margin-bottom:16px; }
/* Staff dashboard only: breathing room between the stat cards row
   and the tiles grid directly under it, matching the tiles grid
   gap (polish asked by Fahad, 2026-10-23). The student dashboard
   has no stat cards row, so its tiles are not affected. */
.cards + .tiles { margin-top:14px; }
.tile { display:flex; align-items:center; gap:12px; background:#FFFFFF; border-radius:14px; padding:16px; box-shadow:0 3px 10px rgba(23,43,58,.10); text-decoration:none; transition:transform .12s ease, box-shadow .12s ease; }
.tile:hover { transform:translateY(-2px); box-shadow:0 8px 18px rgba(23,43,58,.14); }
.tile .tile-icon { flex:0 0 auto; width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center; color:#FFFFFF; }
.tile .tile-icon svg { width:24px; height:24px; }
.tile .tile-label { color:#22303A; font-size:15px; font-weight:700; line-height:1.25; }
.tile .tile-text { display:flex; flex-direction:column; gap:2px; }
.tile .tile-note { color:#75828B; font-size:12px; font-weight:600; }
.tile-soon { opacity:.72; }
.tile-soon:hover { transform:none; box-shadow:0 3px 10px rgba(23,43,58,.10); }
.chip-cyan { background:#00A9CE; }
.chip-green { background:#2FA84F; }
.chip-lime { background:#6B8E23; }
.chip-orange { background:#F08C1E; }
.chip-purple { background:#7C5CFC; }
.chip-pink { background:#E75480; }
.chip-teal { background:#0E9594; }
.chip-gold { background:#D9A514; }
.chip-blue { background:#2D7DD2; }
.chip-indigo { background:#5468C4; }
@media (max-width: 700px) { .tiles { grid-template-columns:repeat(2, 1fr); } }

/* Clickable boxes on the lower half of the dashboards (Fahad,
   2026-10-21: "yh sb b click able boxes may ker dein jesy pehly
   options kiye hain"). Every Today's Events row and Upcoming item
   is a box that opens the Weekly Planner at that entry's week, the
   glance day rows use the same box style, and the Attendance and
   Students Record panel is two boxes (Attendance opens the report,
   Students Record opens the Students List; for Faculty, who have
   no Students access, the Students Record box is a plain box). */
.click-box { background:#FFFFFF; border:1px solid #E2E9ED; border-radius:12px; box-shadow:0 1px 3px rgba(30,40,50,.08); }
a.click-box { text-decoration:none; color:inherit; transition:transform .12s ease, box-shadow .12s ease; }
a.click-box:hover { transform:translateY(-1px); box-shadow:0 6px 14px rgba(23,43,58,.13); }
.event.click-box { border:1px solid #E2E9ED; border-radius:12px; padding:10px 12px; margin-bottom:8px; }
.event.click-box:last-child { margin-bottom:0; }
.record-box { display:block; padding:12px 14px; }
.record-box .kv td { border-bottom:1px solid #EDF1F3; }
.record-box .kv tr:last-child td { border-bottom:none; }
.record-box + .record-box { margin-top:10px; }
a.badge.chip-link { text-decoration:none; transition:transform .12s ease, box-shadow .12s ease; }
a.badge.chip-link:hover { transform:translateY(-1px); box-shadow:0 4px 10px rgba(23,43,58,.18); }

/* Segmented status tabs on the Students List (Fahad, 2026-10-21:
   left students must have a clear place of their own inside the
   Students tab). All Students, Active and Left Students, each with
   its live count; the Left Students tab shows the left record
   columns (date left, reason, refund amount). Left records are
   never deleted. */
.seg-tabs { display:inline-flex; gap:4px; background:#EEF2F4; border:1px solid #DCE3E7; border-radius:10px; padding:4px; margin-bottom:14px; flex-wrap:wrap; }
.seg-tab { padding:8px 16px; border-radius:8px; font-size:13.5px; font-weight:bold; color:#55636D; text-decoration:none; }
.seg-tab:hover { color:#26303A; background:#FFFFFF; }
.seg-tab.active { background:#31383F; color:#FFFFFF; }

/* Student portal notifications (Fahad, 2026-10-21): a top text slider
   on the student dashboard rotates her notification texts, and the
   latest notification also opens as a full screen popup that closes
   itself after 5 seconds or from its cross button, once per login
   session. */
.notif-slider { position:relative; background:#31383F; color:#FFFFFF; border-radius:12px; padding:12px 16px; margin-bottom:16px; min-height:22px; overflow:hidden; }
.notif-slide { display:none; font-size:13.5px; line-height:1.45; }
.notif-slide.active { display:block; }
.notif-slide-title { font-weight:bold; color:#FFD166; }
.notif-popup-overlay { position:fixed; inset:0; background:rgba(23,32,40,.72); display:flex; align-items:center; justify-content:center; z-index:1000; padding:18px; }
.notif-popup { position:relative; background:#FFFFFF; border-radius:16px; max-width:520px; width:100%; padding:30px 28px 24px; box-shadow:0 18px 44px rgba(0,0,0,.35); text-align:center; }
.notif-popup-title { font-size:19px; font-weight:bold; color:#26303A; margin-bottom:10px; }
.notif-popup-body { font-size:15px; color:#3D4A54; line-height:1.55; margin-bottom:18px; }
.notif-popup-close { position:absolute; top:8px; right:12px; background:none; border:none; font-size:26px; line-height:1; color:#75828B; cursor:pointer; padding:4px; }
.notif-popup-close:hover { color:#26303A; }

/* Student portal polish (Fahad, 2026-10-21): the student pages are
   more colourful and elegant in the brand colours, cyan #00A9CE and
   dark slate #31383F, matching her welcome banner. All classes are
   student scoped (stu- prefix, used only by the student templates
   and the student layout), so staff pages keep their layout. Cards
   are soft white with rounded corners and gentle shadows, section
   headers carry a coloured icon chip, and status badges stay clear:
   Paid and Approved green, Unpaid and Pending amber, Rejected red. */
.stu-layout .sidebar { background:linear-gradient(180deg, #31383F 0%, #232A30 100%); }
.stu-layout .topbar { border-bottom:3px solid #EAF6FA; }
.stu-card { border-radius:16px; border:1px solid #E4EDF0; border-top:4px solid #00A9CE; box-shadow:0 6px 16px rgba(23,43,58,.10); padding:20px; }
.stu-accent-cyan { border-top-color:#00A9CE; }
.stu-accent-green { border-top-color:#2FA84F; }
.stu-accent-gold { border-top-color:#D9A514; }
.stu-accent-purple { border-top-color:#7C5CFC; }
.stu-accent-pink { border-top-color:#E75480; }
.stu-accent-slate { border-top-color:#31383F; }
.stu-head { display:flex; align-items:center; gap:11px; margin-bottom:14px; }
.stu-head h2 { margin:0; font-size:16px; color:#26303A; }
.stu-head-spaced { margin-top:24px; }
.stu-head-icon { width:36px; height:36px; border-radius:11px; display:flex; align-items:center; justify-content:center; color:#FFFFFF; flex:0 0 auto; box-shadow:0 3px 8px rgba(23,43,58,.20); }
.stu-head-icon svg { width:20px; height:20px; }
.stu-card .badge { padding:4px 11px; font-size:12px; }
.stu-card table th { background:#EAF6FA; color:#005E73; }
.stu-card .kv td.k { color:#5B7A86; }
.stu-card .input:focus { outline:2px solid #BDEBF7; border-color:#00A9CE; }
.stu-tiles .tile { border:1px solid #E4EDF0; }
.stu-note { background:#F7FBFC; border:1px solid #E2EDF0; border-left:4px solid #00A9CE; border-radius:10px; padding:13px 15px; margin-bottom:12px; }
.stu-note:last-child { margin-bottom:0; }
.stu-note-title { font-weight:bold; color:#26303A; font-size:14.5px; }
.stu-note-body { font-size:13.5px; margin-top:3px; line-height:1.5; }
.stu-note-date { font-size:11.5px; color:#75828B; margin-top:4px; }
.notif-slider { background:linear-gradient(90deg, #31383F, #42505A); border-left:5px solid #00A9CE; box-shadow:0 4px 12px rgba(23,43,58,.16); }

/* Clickable contact numbers: small WhatsApp and Call links beside every
   number (Fahad, 2026-10-22), in the logo colour family. */
.num-cell { white-space:nowrap; }
.num-wa, .num-call { display:inline-block; font-size:11px; font-weight:bold; padding:2px 8px; border-radius:20px; text-decoration:none; margin-left:4px; }
.num-wa { background:#E2F3E0; color:#2E7D26; }
.num-call { background:#D6F2F9; color:#00748F; }

/* Weekly Plan sections (Weekly Menu, Students Sitting Plan, Host
   Duties): the sheet header band with the school logo and name, the
   page heading bar under it and the meta line (header rule by
   Fahad, 2026-10-22), plus the bordered sheet tables of the
   approved samples. */
.wp-band { text-align:center; margin-bottom:4px; }
.wp-band img { height:56px; }
.wp-band .wp-school { font-size:21px; font-weight:bold; letter-spacing:1px; color:#26303A; margin-top:4px; }
.wp-band .wp-school-sub { font-size:12px; color:#55636D; margin-top:1px; }
.wp-title { background:#31383F; color:#fff; padding:10px 14px; border-radius:8px; font-size:16px; font-weight:bold; text-align:center; margin:10px 0 8px; }
.wp-meta { text-align:center; font-size:13px; color:#55636D; margin-bottom:14px; }
.wp-meta strong { color:#26303A; }
.sheet-table th, .sheet-table td { border:1px solid #D7DEE2; }
.sheet-table td.row-label { background:#F4F8F9; font-weight:bold; color:#005E73; white-space:nowrap; }
.sheet-table td.menu-cell { white-space:pre-line; min-width:120px; }
.muted-note { color:#97A5AD; font-style:italic; }
textarea.input { width:100%; font-family:inherit; resize:vertical; }

/* Demand Form for Canteen: the paper layout table on screen (day
   and menu cells merged across the day's item rows) and the edit
   screen's dynamic item rows. */
.sheet-table td.day-cell { background:#F4F8F9; font-weight:bold; color:#005E73; white-space:nowrap; vertical-align:middle; }
.sheet-table td.menu-cell.demand-menu { vertical-align:middle; }
.demand-item-row { display:flex; gap:8px; align-items:center; margin-bottom:8px; }
.demand-item-row .item-name { flex:2 1 auto; }
.demand-item-row .item-qty { flex:1 1 auto; }

/* Salary (Task 8 remainder, Fahad, 2026-10-22): amounts and names
   stay on one line (owner's no-wrap rule), status badges, and the
   month selector row on the salary pages. */
.sal-nowrap { white-space:nowrap; }
.sal-paid { background:#E3F4E8; color:#1E7A3C; }
.sal-unpaid { background:#FDECEA; color:#B03A2E; }
.sal-monthbar { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:14px; }
.sal-monthbar form { display:flex; gap:8px; align-items:center; }
.sal-monthbar .input { width:auto; }

/* PWA Install App banner (dashboards only, owner, 2026-10-23): the
   layout prints the markup hidden; the pwa-install.js script shows
   it only when the app can be installed, or on iPhone/iPad with
   the Share menu hint. Slate band with the cyan brand accent. */
.pwa-banner { display:flex; align-items:center; gap:12px; background:#31383F; color:#fff; border-radius:14px; padding:12px 14px; margin-bottom:16px; box-shadow:0 4px 12px rgba(23,43,58,.18); }
.pwa-banner[hidden] { display:none; }
.pwa-banner img { height:44px; background:#fff; border-radius:8px; padding:3px; flex:none; }
.pwa-banner-text { flex:1 1 auto; display:flex; flex-direction:column; gap:2px; font-size:13.5px; }
.pwa-banner-text strong { font-size:15px; }
.pwa-banner-text .pwa-ios-hint { color:#BFE6F2; font-size:12.5px; }
.pwa-install-btn { flex:none; border:none; cursor:pointer; font-family:inherit; }
.pwa-banner-close { flex:none; background:none; border:none; color:#fff; font-size:20px; line-height:1; cursor:pointer; padding:2px 6px; font-family:inherit; }

/* =====================================================================
   Mobile layer (owner's report, 2026-10-23: on his phone the
   Director dashboard broke, the sidebar covered the content, the
   welcome banner name squeezed letter by letter, the stat cards
   overflowed and the tiles were clipped at the right edge).

   Everything in this section is ADDITIVE: no rule above this
   comment is changed, and every responsive rule sits inside a
   "@media screen" query, so desktop rendering above 1024px and
   ALL print rendering stay exactly as they were. The only rules
   outside a media query are the two display:none lines for the
   new .menu-btn and .nav-backdrop elements, which are hidden on
   desktop by design and revealed by the 768px block below.
   ===================================================================== */
.menu-btn { display:none; }
.nav-backdrop { display:none; }

/* Tablets and small laptops: a little less air, stat cards may
   sit a touch narrower; the layout itself is still the desktop
   one. */
@media screen and (max-width: 1024px) {
  .content { padding:18px 16px; }
  .topbar { padding:12px 16px; }
  .page-nav { padding:12px 16px 0; }
  .stat { min-width:160px; }
}

/* Phones and small tablets: the sidebar becomes an off-canvas
   drawer, content takes the full width, and every dashboard and
   form pattern gets a phone arrangement. */
@media screen and (max-width: 768px) {
  html, body { overflow-x:hidden; }

  /* Drawer sidebar, closed by default; layout_end()'s script
     toggles the nav-open class on the body. */
  .layout { display:block; }
  .sidebar { position:fixed; top:0; left:0; bottom:0; z-index:1200;
    width:min(280px, 84vw); overflow-y:auto; -webkit-overflow-scrolling:touch;
    transform:translateX(-105%); transition:transform .25s ease; }
  body.nav-open .sidebar { transform:translateX(0);
    box-shadow:0 0 44px rgba(10,18,24,.5); }
  .nav-backdrop { display:block; position:fixed; inset:0; z-index:1100;
    background:rgba(18,26,32,.55); opacity:0; pointer-events:none;
    transition:opacity .25s ease; }
  body.nav-open .nav-backdrop { opacity:1; pointer-events:auto; }
  body.nav-open { overflow:hidden; }
  .main { width:100%; }

  /* Topbar: menu button, then the title, then the user chip,
     all on one row that fits a narrow screen. */
  .menu-btn { display:inline-flex; align-items:center; justify-content:center;
    flex:none; width:40px; height:40px; padding:0; border:1px solid #CBD5DB;
    border-radius:9px; background:#FFFFFF; color:#26303A; font-size:19px;
    line-height:1; cursor:pointer; font-family:inherit; }
  .topbar { padding:10px 12px; gap:10px; }
  .toptitle { flex:1 1 auto; min-width:0; }
  .topbar h1 { font-size:16.5px; line-height:1.25; }
  .topbar .sub { font-size:11px; }
  .userbox { flex:none; gap:8px; font-size:12px; }
  .userbox > div:last-child { min-width:0; }
  .avatar { width:32px; height:32px; font-size:12px; }

  .content { padding:16px 12px; }
  .page-nav { padding:12px 12px 0; }

  /* Welcome banner: the name wraps as words, never squeezes. */
  .welcome-banner { padding:16px; border-radius:14px; }
  .welcome-banner .wb-assalam { font-size:12px; }
  .welcome-banner .wb-name { font-size:20px; line-height:1.25; overflow-wrap:break-word; }
  .welcome-banner .wb-date { font-size:12.5px; }

  /* Stat cards: two neat columns, nothing overflows. */
  .cards { display:grid; grid-template-columns:repeat(2, 1fr); gap:12px; }
  .cards .stat, .stat { min-width:0; }
  .stat { padding:14px; }
  .stat .value { font-size:23px; }
  .cards + .tiles { margin-top:12px; }

  /* Tiles: two columns, full width, nothing clipped. */
  .tiles { grid-template-columns:repeat(2, 1fr); gap:12px; }
  .tile { padding:13px; gap:10px; border-radius:12px; }
  .tile .tile-icon { width:40px; height:40px; border-radius:10px; }
  .tile .tile-label { font-size:14px; }

  /* Panels stack full width; wide tables scroll sideways
     INSIDE their panel instead of stretching the page. */
  .grid2 { flex-direction:column; }
  .grid2 > * { flex:1 1 100%; min-width:0; }
  .panel { padding:14px; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .panel table { min-width:600px; }
  .panel table.kv { min-width:0; }
  .kv td.k { width:38%; }

  /* Forms: one column, inputs full width; toolbars wrap. */
  .frow { flex-direction:column; gap:0; }
  .frow .fgroup { flex:none; width:100%; min-width:0; }
  .input, select.input, textarea.input { max-width:100%; }
  .search { min-width:0; flex:1 1 100%; }
  .toolbar { gap:8px; }
  .sal-monthbar form { flex-wrap:wrap; }
  .demand-item-row { flex-wrap:wrap; }
  .demand-item-row .item-name, .demand-item-row .item-qty { min-width:0; }

  /* Events, tabs and misc rows. */
  .event .time { width:100px; flex:none; }
  .seg-tabs { display:flex; width:100%; }
  .seg-tab { flex:1 1 auto; text-align:center; }
  .planner-head { flex-direction:column; gap:4px; }
  .planner-meta { text-align:left; padding-top:0; }
  .planner-month { padding-top:0; }
  .wp-band img { height:44px; }
  .wp-band .wp-school { font-size:17px; }
  .wp-title { font-size:14px; padding:9px 10px; }

  /* The PWA install banner may wrap its buttons underneath. */
  .pwa-banner { flex-wrap:wrap; }
  .pwa-banner-text { min-width:180px; }
}

/* Small phones: tighter type and padding; the login card gets
   comfortable edges. */
@media screen and (max-width: 480px) {
  .topbar h1 { font-size:15px; }
  .userbox { font-size:11.5px; }
  .avatar { width:30px; height:30px; }
  .welcome-banner { padding:14px; }
  .welcome-banner .wb-name { font-size:18px; }
  .stat { padding:12px; }
  .stat .label { font-size:11px; }
  .stat .value { font-size:21px; }
  .stat .note { font-size:11.5px; }
  .panel { padding:12px; }
  .panel table { min-width:540px; }
  .event { flex-direction:column; gap:6px; }
  .event .time { width:fit-content; }
  .seg-tab { font-size:12px; padding:8px 4px; }
  .notif-popup { padding:24px 18px 20px; }
  .login-wrap { padding:16px 10px; width:100%; }
  .login-card { padding:26px 20px 22px; }
  .login-card img { width:88px; }
  .login-card h1 { font-size:18px; }
}

/* Very narrow phones (foldables closed, older small handsets;
   ordinary 360px phones keep the two columns above): cards and
   tiles go single column so nothing is ever squeezed. */
@media screen and (max-width: 340px) {
  .cards { grid-template-columns:1fr; }
  .tiles { grid-template-columns:1fr; }
  .stat .value { font-size:24px; }
}