/* Dynamic School Platform - web client styles.
   --primary / --secondary are replaced at runtime with each school's own branding. */
:root { --primary:#1F4E9E; --secondary:#EAF1FF; --ink:#1c2534; --mute:#6b7689; --line:#e3e8f0; --bg:#f4f6fb; --card:#fff;
        --ok:#1e8e4e; --okbg:#e5f6ec; --warn:#b26a00; --warnbg:#fff3dc; --bad:#c62828; --badbg:#fde8e8; --info:#1565c0; --infobg:#e3f0ff; }
* { box-sizing:border-box; }
html, body { margin:0; height:100%; }
body { font:14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif; color:var(--ink); background:var(--bg); }
a { color:var(--primary); text-decoration:none; } a:hover { text-decoration:underline; }
h1 { font-size:20px; margin:0 0 4px; } h2 { font-size:16px; margin:0 0 10px; } h3 { font-size:14px; margin:14px 0 6px; }
.mute { color:var(--mute); } .small { font-size:12px; } .right { text-align:right; } .nowrap { white-space:nowrap; } .hide { display:none !important; }

/* ---------- layout ---------- */
.app { display:grid; grid-template-columns:224px minmax(0,1fr); min-height:100vh; }
.side { background:#fff; border-right:1px solid var(--line); padding:14px 10px 80px; position:sticky; top:0; height:100vh; overflow-y:auto; }
.brand { display:flex; gap:10px; align-items:center; padding:4px 8px 14px; font-weight:700; color:var(--primary); line-height:1.2; }
.brand img, .brand .logo { width:38px; height:38px; border-radius:8px; object-fit:contain; flex:none; }
.brand .logo { background:var(--primary); color:#fff; display:grid; place-items:center; font-size:17px; }
.side a.nav { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:8px; color:var(--ink); margin-bottom:2px; }
.side a.nav:hover { background:var(--bg); text-decoration:none; }
.side a.nav.on { background:var(--primary); color:#fff; font-weight:600; }
.side a.nav .ico { width:18px; text-align:center; }
.side a.nav .cnt { margin-left:auto; background:var(--bad); color:#fff; border-radius:10px; padding:0 7px; font-size:11px; }
.side .grp { font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--mute); margin:14px 10px 4px; }
.top { display:flex; align-items:center; gap:10px; padding:10px 20px; background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20; }
.top .grow { flex:1; position:relative; max-width:440px; }
.top input.search { width:100%; padding:8px 12px; border:1px solid var(--line); border-radius:20px; background:var(--bg); }
.results { position:absolute; top:40px; left:0; right:0; background:#fff; border:1px solid var(--line); border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.12); z-index:30; max-height:60vh; overflow:auto; }
.results a { display:block; padding:8px 12px; color:var(--ink); border-bottom:1px solid var(--line); } .results a:hover { background:var(--bg); text-decoration:none; }
.top .spacer { flex:1; }
.iconbtn { border:0; background:none; cursor:pointer; font-size:18px; position:relative; padding:6px 8px; border-radius:8px; } .iconbtn:hover { background:var(--bg); }
.iconbtn .dot { position:absolute; top:0; right:0; background:var(--bad); color:#fff; font-size:10px; border-radius:9px; padding:0 5px; }
.menu-btn { display:none; }
.main { padding:18px 20px 90px; max-width:1500px; }
.pagehead { display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px; margin-bottom:14px; } .pagehead .grow { flex:1; min-width:200px; }
.crumb { color:var(--mute); font-size:12px; }
.bottom-nav { display:none; }

/* ---------- pieces ---------- */
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px; margin-bottom:14px; }
.grid2 { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px; }
.kpis { display:grid; grid-template-columns:repeat(auto-fill,minmax(168px,1fr)); gap:12px; margin-bottom:14px; }
.kpi { border-radius:12px; padding:13px 14px; background:var(--secondary); cursor:default; border:1px solid transparent; }
.kpi.link { cursor:pointer; } .kpi.link:hover { border-color:var(--primary); }
.kpi .l { font-size:12px; color:var(--mute); } .kpi .v { font-size:21px; font-weight:700; margin-top:2px; } .kpi .s { font-size:11px; color:var(--mute); }
.kpi.g { background:#e5f6ec; } .kpi.o { background:#fff1e0; } .kpi.r { background:#fde8e8; } .kpi.p { background:#f0e9ff; } .kpi.y { background:#fff8d9; }
.btn { border:1px solid var(--line); background:#fff; color:var(--ink); padding:7px 13px; border-radius:8px; cursor:pointer; font:inherit; white-space:nowrap; }
.btn:hover { border-color:var(--primary); } .btn:disabled { opacity:.55; cursor:not-allowed; }
.btn.primary { background:var(--primary); border-color:var(--primary); color:#fff; } .btn.danger { color:var(--bad); border-color:#f1c4c4; } .btn.ok { background:var(--ok); color:#fff; border-color:var(--ok); }
.btn.sm { padding:3px 9px; font-size:12px; } .btn.block { width:100%; padding:10px; }
.toolbar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:12px; } .toolbar .grow { flex:1; min-width:160px; }
input, select, textarea { font:inherit; color:inherit; padding:7px 9px; border:1px solid #cfd6e2; border-radius:8px; background:#fff; max-width:100%; }
input:focus, select:focus, textarea:focus { outline:2px solid var(--secondary); border-color:var(--primary); }
.tblwrap { overflow-x:auto; border:1px solid var(--line); border-radius:10px; background:#fff; }
table.tbl { border-collapse:collapse; width:100%; }
.tbl th { text-align:left; font-size:12px; color:var(--mute); font-weight:600; padding:9px 10px; background:#f8fafd; border-bottom:1px solid var(--line); white-space:nowrap; position:sticky; top:0; }
.tbl td { padding:8px 10px; border-bottom:1px solid var(--line); vertical-align:middle; } .tbl tr:last-child td { border-bottom:0; }
.tbl td.wide { min-width:210px; } .tbl tr.click { cursor:pointer; } .tbl tr.click:hover td { background:#f8fafd; } .tbl td.num, .tbl th.num { text-align:right; font-variant-numeric:tabular-nums; }
.empty { padding:26px; text-align:center; color:var(--mute); } .errbox { padding:18px; border:1px solid #f1c4c4; background:var(--badbg); border-radius:10px; color:var(--bad); }
.spinner { padding:30px; text-align:center; color:var(--mute); }
.badge { display:inline-block; padding:1px 9px; border-radius:10px; font-size:11.5px; font-weight:600; background:#eef1f6; color:#4a5568; white-space:nowrap; }
.badge.ok { background:var(--okbg); color:var(--ok); } .badge.warn { background:var(--warnbg); color:var(--warn); } .badge.bad { background:var(--badbg); color:var(--bad); } .badge.info { background:var(--infobg); color:var(--info); }
.tabs { display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:14px; overflow-x:auto; }
.tabs button { border:0; background:none; padding:9px 13px; cursor:pointer; font:inherit; color:var(--mute); border-bottom:2px solid transparent; white-space:nowrap; }
.tabs button.on { color:var(--primary); border-bottom-color:var(--primary); font-weight:600; }
.dl { display:grid; grid-template-columns:150px 1fr; gap:5px 12px; } .dl dt { color:var(--mute); } .dl dd { margin:0; word-break:break-word; }
.chips { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.chip { border:1px solid var(--line); background:#fff; border-radius:20px; padding:6px 14px; cursor:pointer; font:inherit; } .chip.on { background:var(--primary); color:#fff; border-color:var(--primary); }
.bars { display:flex; align-items:flex-end; gap:10px; height:150px; padding-top:8px; }
.bars .col { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; gap:4px; min-width:0; }
.bars .pair { display:flex; align-items:flex-end; gap:3px; height:100%; width:100%; justify-content:center; }
.bars .bar { width:42%; max-width:26px; background:var(--primary); border-radius:4px 4px 0 0; min-height:2px; } .bars .bar.b2 { background:#f28b6b; }
.bars .lab { font-size:11px; color:var(--mute); white-space:nowrap; } .bars .val { font-size:11px; }
.hbar { display:grid; grid-template-columns:minmax(120px,220px) 1fr 100px; gap:10px; align-items:center; padding:5px 0; cursor:pointer; } .hbar:hover { background:#f8fafd; }
.hbar .track { background:#eef1f6; border-radius:6px; height:12px; overflow:hidden; } .hbar .fill { background:var(--primary); height:100%; }
.legend { display:flex; gap:14px; font-size:12px; color:var(--mute); margin-top:6px; } .legend i { display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:5px; background:var(--primary); } .legend i.b2 { background:#f28b6b; }

/* ---------- forms / modal / toast ---------- */
.modal-bg { position:fixed; inset:0; background:rgba(15,23,42,.45); z-index:100; display:flex; align-items:flex-start; justify-content:center; padding:5vh 12px; overflow-y:auto; }
.modal { background:#fff; border-radius:14px; width:100%; max-width:660px; padding:20px; box-shadow:0 20px 60px rgba(0,0,0,.25); } .modal.wide { max-width:980px; }
.modal h2 { display:flex; justify-content:space-between; align-items:center; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px 14px; } .field.full { grid-column:1 / -1; }
.field label { display:block; font-size:12px; color:var(--mute); margin-bottom:3px; } .field label b { color:var(--bad); }
.field input, .field select, .field textarea { width:100%; } .field .help { font-size:11px; color:var(--mute); margin-top:2px; }
.field.err input, .field.err select, .field.err textarea { border-color:var(--bad); background:#fff8f8; } .field .msg { color:var(--bad); font-size:12px; margin-top:2px; }
.form-error { background:var(--badbg); color:var(--bad); padding:9px 12px; border-radius:8px; margin-bottom:10px; }
.form-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:16px; }
.toasts { position:fixed; right:16px; bottom:16px; z-index:200; display:flex; flex-direction:column; gap:8px; max-width:min(420px,92vw); }
.toast { background:#1c2534; color:#fff; padding:11px 14px; border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.25); } .toast.bad { background:var(--bad); } .toast.ok { background:var(--ok); }
.toast small { opacity:.8; display:block; margin-top:3px; }

/* ---------- grids (attendance / marks / spreadsheet entry / timetable) ---------- */
.seg { display:inline-flex; border:1px solid #cfd6e2; border-radius:8px; overflow:hidden; }
.seg button { border:0; background:#fff; padding:5px 11px; cursor:pointer; font:inherit; border-right:1px solid #cfd6e2; } .seg button:last-child { border-right:0; }
.seg button.on.PRESENT { background:var(--ok); color:#fff; } .seg button.on.ABSENT { background:var(--bad); color:#fff; } .seg button.on.LATE { background:#f59e0b; color:#fff; } .seg button.on.LEAVE, .seg button.on.HALF_DAY { background:var(--info); color:#fff; }
.sheet { border-collapse:collapse; } .sheet th, .sheet td { border:1px solid var(--line); padding:0; }
.sheet th { background:#f8fafd; font-size:12px; padding:6px 8px; white-space:nowrap; position:sticky; top:0; z-index:2; } .sheet th.req { color:var(--bad); }
.sheet td.fix, .sheet th.fix { position:sticky; left:0; background:#f8fafd; z-index:1; padding:4px 8px; white-space:nowrap; font-size:12px; }
.sheet td input, .sheet td select { border:0; border-radius:0; width:100%; min-width:92px; padding:6px 7px; background:transparent; }
.sheet td.bad { background:var(--badbg); outline:1px solid var(--bad); } .sheet td.warnc { background:var(--warnbg); }
.sheet td.ro { background:#f4f6fb; color:var(--mute); padding:6px 8px; }
.tt td { min-width:120px; height:58px; padding:5px 7px !important; cursor:pointer; vertical-align:top; font-size:12px; } .tt td:hover { background:var(--secondary); }
.qr { max-width:340px; margin:0 auto; } .qr svg { width:100%; height:auto; border:8px solid #fff; border-radius:12px; box-shadow:0 2px 12px rgba(0,0,0,.12); }
.bigcode { font-size:44px; font-weight:800; letter-spacing:.14em; text-align:center; font-variant-numeric:tabular-nums; }
.note { background:var(--secondary); border-radius:10px; padding:10px 12px; margin-bottom:12px; } .note.warn { background:var(--warnbg); } .note.bad { background:var(--badbg); }
.notif { display:flex; gap:10px; padding:11px 4px; border-bottom:1px solid var(--line); cursor:pointer; } .notif.unread { background:#f5f9ff; } .notif .t { font-weight:600; }
.thread .c { background:var(--bg); border-radius:10px; padding:9px 12px; margin-bottom:8px; }

/* ---------- login ---------- */
.login-wrap { min-height:100vh; display:grid; place-items:center; padding:20px; background:linear-gradient(160deg,var(--secondary),#fff 60%); }
.login { background:#fff; border-radius:16px; box-shadow:0 12px 40px rgba(0,0,0,.12); padding:28px; width:100%; max-width:390px; }
.login .logo-big { width:74px; height:74px; margin:0 auto 10px; border-radius:16px; background:var(--primary); color:#fff; display:grid; place-items:center; font-size:32px; overflow:hidden; }
.login .logo-big img { width:100%; height:100%; object-fit:contain; background:#fff; }
.login h1 { text-align:center; color:var(--primary); } .login .sub { text-align:center; color:var(--mute); margin-bottom:18px; }
.login .field { margin-bottom:12px; } .demo { margin-top:16px; font-size:12px; color:var(--mute); border-top:1px dashed var(--line); padding-top:12px; }
.demo button { margin:3px 4px 0 0; }

/* ---------- v2.2: menu close, back / home, devices, password, dates ---------- */
.side-bg, .side-x, .phone-only { display:none; }
.backbtn, .homebtn { font-size:20px; }
.devlist .dev { border:1px solid var(--line); border-radius:10px; padding:10px 12px; margin-bottom:8px; } .devlist .dev.cur { background:var(--secondary); }
.dev-name { word-break:break-word; }
.pw-wrap { position:relative; } .pw-wrap input { padding-right:42px; }
.pw-eye { position:absolute; right:4px; top:50%; transform:translateY(-50%); border:0; background:none; cursor:pointer; font-size:17px; padding:4px 6px; }
.login .keep { display:flex; align-items:center; gap:8px; font-size:13px; margin:2px 0 2px; cursor:pointer; } .login .keep input { width:18px; height:18px; margin:0; }
.login .keep-help { margin:0 0 12px 26px; }
.dwrap { position:relative; display:inline-block; min-width:140px; vertical-align:middle; }
.dwrap .dshow { display:block; padding:7px 30px 7px 9px; border:1px solid #cfd6e2; border-radius:8px; background:#fff; white-space:nowrap; font-variant-numeric:tabular-nums; }
.dwrap .dshow::after { content:'📅'; position:absolute; right:8px; top:50%; transform:translateY(-50%); font-size:13px; }
.dwrap .dshow.ph { color:var(--mute); } .dwrap.off .dshow { background:#f4f6fb; color:var(--mute); }
.dwrap input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; padding:0; border:0; }
.dwrap input:focus + .dshow, .dwrap:focus-within .dshow { outline:2px solid var(--secondary); border-color:var(--primary); }
.field .dwrap { display:block; width:100%; }
.results.inline { position:static; box-shadow:none; margin-top:10px; max-height:none; }

/* ---------- phone ---------- */
@media (max-width:900px) {
  .app { grid-template-columns:minmax(0,1fr); }
  .side { position:fixed; z-index:60; left:0; top:0; width:min(290px,84vw); transform:translateX(-105%); transition:transform .2s; box-shadow:4px 0 24px rgba(0,0,0,.2); visibility:hidden; }
  .side.open { transform:none; visibility:visible; } .menu-btn { display:block; }
  .side-bg { display:block; position:fixed; inset:0; background:rgba(15,23,42,.45); z-index:55; opacity:0; pointer-events:none; transition:opacity .2s; }
  .side-bg.on { opacity:1; pointer-events:auto; }
  .side-x { display:block; position:absolute; top:8px; right:6px; font-size:20px; z-index:2; }
  .side .brand { padding-right:40px; }
  .phone-only { display:inline-block; } .homebtn { display:none !important; }
  .top { padding:8px 6px; gap:4px; } .top .grow { display:none; } .top .title { font-weight:700; color:var(--primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; flex:0 1 auto; }
  .top .title.away { display:none; }
  .top select { max-width:132px; padding:6px 4px; }
  .main { padding:12px 10px 90px; } .grid2, .form-grid { grid-template-columns:minmax(0,1fr); } .dl { grid-template-columns:118px 1fr; }
  .bottom-nav { display:flex; position:fixed; bottom:0; left:0; right:0; background:#fff; border-top:1px solid var(--line); z-index:50; padding-bottom:env(safe-area-inset-bottom); }
  .bottom-nav a { flex:1; text-align:center; padding:7px 2px 6px; color:var(--mute); font-size:11px; } .bottom-nav a.on { color:var(--primary); font-weight:700; }
  .bottom-nav a span { display:block; font-size:19px; line-height:1.1; }
  .kpis { grid-template-columns:repeat(2,minmax(0,1fr)); } .kpi .v { font-size:18px; } .hbar { grid-template-columns:100px 1fr 76px; } .bigcode { font-size:34px; }
  .modal-bg { padding:2vh 8px; } .modal { padding:16px 14px; }
}
/* v2.2 tables become cards on a phone: one card per row, "Label: value" lines, nothing cut off on the right */
@media (max-width:700px) {
  .tblwrap { border:0; background:none; overflow:visible; }
  table.tbl, .tbl tbody, .tbl tfoot, .tbl tr, .tbl td { display:block; width:100%; }
  .tbl thead { display:none; }
  .tbl tr { background:#fff; border:1px solid var(--line); border-radius:10px; padding:8px 12px; margin-bottom:8px; }
  .tbl tr.click:hover td { background:none; }
  .tbl td { border:0; padding:3px 0; display:flex; gap:12px; align-items:center; justify-content:space-between; text-align:right; min-height:24px; word-break:break-word; }
  .tbl td:empty { display:none; }
  .tbl td::before { content:attr(data-label); color:var(--mute); font-size:12px; text-align:left; flex:0 0 auto; max-width:45%; }
  .tbl td[data-label=""]::before, .tbl td:not([data-label])::before { display:none; }
  .tbl td[data-label=""], .tbl td:not([data-label]) { justify-content:flex-start; text-align:left; flex-wrap:wrap; }
  .tbl td:first-child { font-weight:600; }
  .tbl td.num { text-align:right; }
  .tbl tfoot tr { background:var(--secondary); }
  .tbl td.wide { min-width:0; }
}
@media (min-width:901px) { .top .title { display:none; } }
@media print { .side, .top, .bottom-nav, .toolbar, .btn { display:none !important; } .app { display:block; } }

/* ---------- v2.2 role permissions ---------- */
.permgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:12px; margin-top:6px; }
.permarea { border:1px solid var(--line); border-radius:10px; padding:8px 10px; }
.permhead { font-weight:700; margin-bottom:4px; }
.permrow { display:flex; gap:8px; align-items:flex-start; padding:4px 0; cursor:pointer; font-size:13px; } .permrow input { margin-top:2px; flex:none; }

/* ---------- v2.2 photos ---------- */
.avatar { display:inline-block; object-fit:cover; border-radius:8px; flex:none; background:#eef1f6; vertical-align:middle; }
.avatar.ph { display:inline-grid; place-items:center; color:var(--primary); font-weight:700; background:var(--secondary); line-height:1; }
.avatar.me { width:30px; height:30px; border-radius:50%; }
.mebtn { padding:3px 6px; }
.who { display:inline-flex; gap:9px; align-items:center; text-align:left; }
.photobox { display:flex; flex-direction:column; align-items:center; gap:8px; margin-bottom:12px; }
.photoprev { display:flex; justify-content:center; margin:6px 0 12px; }
.photo-actions { justify-content:center; }
.profilerow { display:flex; gap:16px; align-items:flex-start; } .profilerow .kpis { flex:1; }
.kidcard { display:flex; gap:16px; align-items:center; } .kidcard .photobox { margin:0; }
.kidchip { display:inline-flex; align-items:center; gap:8px; } .kidchip .avatar { border-radius:6px; }
.markcards { display:flex; flex-direction:column; gap:8px; margin-bottom:6px; }
.markcard { display:grid; grid-template-columns:auto 1fr auto; gap:6px 12px; align-items:center; background:#fff; border:1px solid var(--line); border-radius:10px; padding:8px 12px; }
.markcard.bad { border-color:var(--bad); background:#fff8f8; }
.markcard .cellmsg { grid-column:1 / -1; color:var(--bad); font-size:12px; } .markcard .cellmsg:empty { display:none; }
.markwho .roll { font-size:12px; font-weight:700; color:var(--primary); }
.markbox { display:flex; align-items:center; gap:6px; } .markbox.ro { font-weight:600; }
.markin { width:76px; text-align:center; font-size:16px; padding:8px 6px; }
.sheet .markin { width:84px; font-size:14px; padding:6px 7px; border:0; border-radius:0; }
@media (max-width:700px) {
  .profilerow { flex-direction:column; align-items:stretch; } .profilerow .photobox { align-self:center; }
  /* v2.7: a compact child card on phones, so the app tiles are visible without scrolling */
  .kidcard { flex-direction:row; text-align:left; gap:12px; padding:12px; }
  .kidcard .photobox { gap:4px; } .kidcard .photobox .avatar, .kidcard .photobox img { width:64px !important; height:85px !important; font-size:22px !important; }
  .kidcard .photobox .btn { font-size:11px; padding:3px 6px; } .kidcard h2 { font-size:18px; }
  .kidcard + .kpis .kpi { padding:10px 12px; } .kidcard + .kpis .kpi .v { font-size:20px; }
}

/* ---------------------------------------------------------------- v2.3 modules */
.about { padding:0; overflow:hidden; }
.about-head { display:flex; justify-content:space-between; gap:10px; width:100%; border:0; background:none; padding:10px 12px; font:inherit; color:var(--ink); cursor:pointer; text-align:left; }
.about-body { padding:0 12px 10px; font-size:13px; line-height:1.5; } .about-how { margin:4px 0 0; padding-left:20px; } .about-how li { margin:2px 0; }
.pbar { background:#eef1f6; border-radius:6px; height:10px; overflow:hidden; min-width:80px; } .pbar i { display:block; height:100%; background:var(--primary); border-radius:6px; }
.pbar.ok i { background:var(--ok); } .pbar.warn i { background:#f59e0b; } .pbar.bad i { background:var(--bad); }
.tiles { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:12px; margin-bottom:14px; }
.tile { background:#fff; border:1px solid var(--line); border-radius:12px; padding:12px 14px; cursor:pointer; } .tile:hover { border-color:var(--primary); }
.tile .l { font-size:12px; color:var(--mute); } .tile .v { font-size:20px; font-weight:700; margin:2px 0; word-break:break-word; } .tile .s { font-size:11px; color:var(--mute); }
.funnel .row { display:grid; grid-template-columns:110px 1fr 46px; gap:10px; align-items:center; margin:5px 0; font-size:13px; }
.stopline { display:flex; flex-direction:column; gap:8px; }
.stopcard { border:1px solid var(--line); border-radius:12px; padding:10px 12px; background:#fff; }
.stopcard.done { background:#f1f8f3; } .stopcard h3 { margin:0 0 6px; font-size:15px; display:flex; justify-content:space-between; gap:8px; align-items:center; }
.kidrow { display:flex; align-items:center; gap:8px; padding:6px 0; border-top:1px dashed var(--line); flex-wrap:wrap; } .kidrow .who { flex:1; min-width:140px; }
.bigbtn { font-size:16px; padding:12px 18px; border-radius:10px; }
.calgrid { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; } .calgrid .dh { font-size:11px; color:var(--mute); text-align:center; }
.calgrid .d { min-height:64px; border:1px solid var(--line); border-radius:8px; padding:3px 5px; background:#fff; font-size:11px; overflow:hidden; }
.calgrid .d.out { background:#fafbfd; color:#b6bfcc; } .calgrid .d.today { border-color:var(--primary); box-shadow:inset 0 0 0 1px var(--primary); }
.calgrid .ev { display:block; border-radius:4px; padding:1px 4px; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; background:var(--secondary); }
.calgrid .ev.HOLIDAY { background:#fde2e2; } .calgrid .ev.EXAM { background:#fff1cc; } .calgrid .ev.PTM { background:#dff3e6; }
.ttgrid td { padding:5px 6px !important; font-size:12px; min-width:86px; vertical-align:top; } .ttgrid td b { display:block; }
.levelpick { display:flex; gap:3px; } .levelpick button { border:1px solid var(--line); background:#fff; border-radius:6px; padding:3px 7px; cursor:pointer; font:inherit; font-size:12px; }
.levelpick button.on.BEGINNER { background:#f9d7d7; } .levelpick button.on.PROFICIENT { background:#fff1cc; } .levelpick button.on.ADVANCED { background:#d6f0de; }
.qrbox { display:flex; gap:20px; flex-wrap:wrap; align-items:center; } .qrbox .qr svg { width:220px; height:220px; }
@media (max-width:700px) { .calgrid .d { min-height:46px; } .calgrid .ev { font-size:9px; } .funnel .row { grid-template-columns:86px 1fr 36px; } .bigbtn { width:100%; } }
@media print { .side, .top, .bottom-nav, .toolbar, .about, .tabs { display:none !important; } .main { padding:0 !important; } }

/* ---------------------------------------------------------------- v2.4 wall of fame, class page */
.achgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:12px; }
.ach { display:flex; gap:12px; background:#fff; border:1px solid var(--line); border-radius:12px; padding:12px; }
/* v2.7: "featured" is a soft gold background + the badge, not a border (a border looked like a selection);
   every card now shows the same border on hover / tap, so there is one clear "this one" signal */
.ach.featured { background:linear-gradient(135deg,#fffaf0,#fff 60%); }
.ach:hover, .ach:focus-within { border-color:var(--primary); }
.ach .achmedal { font-size:34px; width:58px; height:58px; display:grid; place-items:center; background:var(--secondary); border-radius:12px; flex:none; }
.ach .achphoto { width:58px; height:58px; object-fit:cover; border-radius:12px; flex:none; }
.ach .achbody { min-width:0; flex:1; } .ach .achtitle { font-weight:700; line-height:1.3; margin-bottom:2px; }
.ach .achact { display:flex; gap:6px; flex-wrap:wrap; margin-top:6px; } .ach.compact { padding:10px; }
.podium { display:flex; justify-content:center; align-items:flex-end; gap:14px; padding:10px 0 4px; }
.pod { text-align:center; width:120px; display:flex; flex-direction:column; align-items:center; gap:3px; }
.pod .medal { font-size:26px; margin-top:-14px; } .pod .step { width:100%; border-radius:8px 8px 0 0; color:#fff; font-weight:700; padding:6px 0; margin-top:4px; }
.pod.p1 .step { background:#d4a017; height:64px; } .pod.p2 .step { background:#9aa5b1; height:46px; } .pod.p3 .step { background:#c07a43; height:34px; }
.classhead { display:flex; align-items:center; gap:12px; }
.pubach { background:#fff8e1; border-radius:10px; padding:10px 12px; margin-bottom:12px; font-size:13px; } .pubach ul { margin:6px 0 0; padding-left:18px; }
@media (max-width:700px) { .pod { width:96px; } .achgrid { grid-template-columns:1fr; } }

/* v2.6 2-step sign-in */
.rcodes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin: 10px 0; }
.rcodes code { background: var(--secondary, #EAF1FF); padding: 6px; border-radius: 6px; text-align: center; font-size: 15px; letter-spacing: 1px; }

/* =============================== v2.7 campus life =============================== */
/* parent app: sections as icon tiles in one sideways-scrolling row */
.tabs.apptiles { display:flex; border-bottom:0; gap:8px; padding:4px 2px 10px; scroll-snap-type:x proximity; }
.tabs.apptiles button { display:flex; flex-direction:column; align-items:center; gap:4px; flex:0 0 84px; padding:10px 6px; border:1px solid var(--line);
  border-radius:14px; background:#fff; color:var(--text, #222); white-space:normal; font-size:12px; line-height:1.2; scroll-snap-align:start; text-align:center; }
.tabs.apptiles button .ti { font-size:24px; line-height:1; }
.tabs.apptiles button.on { border-color:var(--primary); background:var(--secondary); color:var(--primary); border-bottom-width:1px; }
.schoollinks { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin:18px 0 6px; }
.schoollinks a { padding:8px 12px; border:1px solid var(--line); border-radius:20px; background:#fff; text-decoration:none; color:inherit; font-size:13px; }
/* gallery */
.albums { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:12px; }
.album { border:1px solid var(--line); border-radius:14px; background:#fff; padding:0; overflow:hidden; text-align:left; cursor:pointer; font:inherit; }
.album:hover { border-color:var(--primary); }
.album-cover { position:relative; aspect-ratio:4/3; background:var(--secondary); display:grid; place-items:center; font-size:34px; }
.album-cover img { width:100%; height:100%; object-fit:cover; display:block; }
.album-count { position:absolute; right:8px; bottom:8px; background:rgba(0,0,0,.6); color:#fff; font-size:12px; padding:2px 8px; border-radius:10px; }
.album-meta { padding:10px 12px; }
.photogrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:6px; }
.photogrid .ph { position:relative; }
.photogrid .ph-open { border:0; padding:0; background:var(--secondary); width:100%; aspect-ratio:1; overflow:hidden; border-radius:8px; cursor:zoom-in; display:block; }
.photogrid .ph-open img { width:100%; height:100%; object-fit:cover; display:block; }
.photogrid .ph-act { position:absolute; top:6px; right:6px; display:flex; gap:4px; }
.lightbox { position:fixed; inset:0; background:#000; z-index:200; display:flex; align-items:center; justify-content:center; touch-action:pan-y; }
.lightbox .lb-img { width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.lightbox .lb-img img { max-width:100%; max-height:100%; object-fit:contain; }
.lightbox .lb-wait { color:#aaa; }
.lightbox .lb-top { position:absolute; top:0; left:0; right:0; display:flex; align-items:center; gap:10px; padding:10px 14px; color:#fff; z-index:2;
  background:linear-gradient(rgba(0,0,0,.6),transparent); padding-top:max(10px, env(safe-area-inset-top)); }
.lightbox .lb-btn { background:rgba(255,255,255,.15); color:#fff; border:0; border-radius:20px; width:40px; height:40px; font-size:18px; cursor:pointer; }
.lightbox .lb-nav { position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.15); color:#fff; border:0; width:44px; height:64px; font-size:34px; cursor:pointer; z-index:2; }
.lightbox .lb-nav.prev { left:6px; border-radius:0 10px 10px 0; } .lightbox .lb-nav.next { right:6px; border-radius:10px 0 0 10px; }
.lightbox .lb-cap { position:absolute; bottom:16px; left:0; right:0; text-align:center; color:#fff; }
@media (max-width:700px) { .lightbox .lb-nav { display:none; } .photogrid { grid-template-columns:repeat(3,1fr); } .albums { grid-template-columns:repeat(2,1fr); } }
.checkgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:4px; max-height:220px; overflow:auto; }
/* messages */
.threads { display:flex; flex-direction:column; gap:6px; }
.thread { display:flex; gap:10px; align-items:center; text-align:left; border:1px solid var(--line); border-radius:12px; background:#fff; padding:10px 12px; cursor:pointer; font:inherit; width:100%; min-width:0; }
.thread.unread { border-color:var(--primary); background:var(--secondary); }
.thread .grow { min-width:0; } .ellipsis { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.thread .count, .count { background:var(--primary); color:#fff; border-radius:10px; padding:1px 8px; font-size:12px; }
.tavatar { width:40px; height:40px; border-radius:50%; background:var(--secondary); color:var(--primary); display:grid; place-items:center; font-weight:700; flex:none; }
.chat { display:flex; flex-direction:column; gap:8px; max-height:55vh; overflow:auto; padding:10px; background:#f4f6fa; border-radius:12px; }
.bubble { max-width:82%; background:#fff; border:1px solid var(--line); border-radius:14px 14px 14px 4px; padding:8px 12px; align-self:flex-start; }
.bubble.mine { align-self:flex-end; background:var(--secondary); border-color:transparent; border-radius:14px 14px 4px 14px; }
.bubble-text { white-space:pre-wrap; word-break:break-word; } .bubble-time { font-size:11px; color:var(--mute); text-align:right; margin-top:2px; }
.chat-input { display:flex; gap:8px; margin-top:10px; align-items:flex-end; } .chat-input textarea { flex:1; }
/* pre-primary */
.kidgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:10px; }
.kid { border:1px solid var(--line); border-radius:12px; background:#fff; padding:10px 12px; display:flex; flex-direction:column; gap:6px; }
.kid.done { opacity:.75; } .kid-head { display:flex; gap:10px; align-items:center; } .kid-act { display:flex; gap:6px; flex-wrap:wrap; }
.repgrid { display:grid; grid-template-columns:1fr 1fr; gap:6px; align-items:end; }
.repf { display:flex; flex-direction:column; gap:2px; min-width:0; } .repf > span { font-size:11px; color:var(--mute); } .repf.full { grid-column:1 / -1; } .naprow { display:flex; gap:4px; align-items:center; }
select.mini, input.mini { padding:6px; font-size:13px; min-width:0; width:100%; }
.persons { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:10px; margin-top:8px; }
.person { display:flex; flex-direction:column; align-items:center; gap:4px; border:1px solid var(--line); border-radius:12px; padding:10px; background:#fff; font:inherit; cursor:pointer; }
.person img, .person .noph { width:90px; height:110px; object-fit:cover; border-radius:10px; background:var(--secondary); display:grid; place-items:center; font-size:30px; }
button.person:hover { border-color:var(--primary); }
.card.ask { border:2px solid #f5a623; background:#fff8ec; }
.daycard .dayrows { display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:8px; }
.daycard .dayrows > div { display:flex; flex-direction:column; background:#f7f9fc; border-radius:10px; padding:8px; }
.journey { display:flex; flex-direction:column; gap:10px; } .jitem { display:flex; gap:10px; align-items:flex-start; }
.jphoto { width:110px; height:82px; object-fit:cover; border-radius:10px; flex:none; }
/* attendance calendar */
.attcard .attpct { font-size:30px; font-weight:700; color:var(--primary); }
.attcard .attnums { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-top:6px; } .attcard .attnums > div { display:flex; flex-direction:column; }
.attnums b.ok { color:var(--ok, #2e7d32); } .attnums b.bad { color:var(--bad); } .attnums b.warn { color:#b26a00; }
.cal { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.cal-h { text-align:center; font-size:12px; color:var(--mute); }
.cal-d { aspect-ratio:1; border-radius:10px; background:#f4f6fa; display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:12px; }
.cal-d b { font-size:12px; } .cal-d.today { outline:2px solid var(--primary); }
.cal-d.st-PRESENT { background:#e6f4ea; color:#1e6b34; } .cal-d.st-ABSENT { background:#fdecea; color:#b3261e; } .cal-d.st-LATE, .cal-d.st-HALF_DAY { background:#fff4e0; color:#8a5300; }
.cal-d.st-LEAVE { background:#e8f0fe; color:#1a4fb5; }

/* v2.7 language picker in the top bar */
.langpick select { padding:4px 6px; font-size:12px; border-radius:16px; width:auto; max-width:90px; }
@media (max-width:700px) {
  .langpick select { max-width:58px; padding:3px 2px; font-size:11px; }
  /* the header must never be wider than the phone: the branch name shrinks with "…" */
  .top > .badge.info { min-width:0; max-width:92px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:0 1 auto; }
  .top > select { min-width:0; max-width:110px; flex:0 1 auto; } .top .langpick { flex:none; } .top { overflow:hidden; }
}

/* v2.7 Indian scripts: use the phone's / computer's own Telugu and Hindi fonts (Android: Noto, Windows: Nirmala UI, Apple: Kohinoor / Telugu Sangam) */
html[lang="te"] body { font-family:'Noto Sans Telugu','Nirmala UI','Telugu Sangam MN','Kohinoor Telugu','Gautami','Mandali',system-ui,sans-serif; }
html[lang="hi"] body { font-family:'Noto Sans Devanagari','Nirmala UI','Kohinoor Devanagari','Mangal',system-ui,sans-serif; }

/* ---------- v2.8 hidden features ---------- */
.side a.nav .cnt.soft { background:var(--mute); }
.featrow { display:flex; gap:12px; align-items:center; padding:10px 0; border-top:1px solid var(--line); }
.featrow:first-of-type { border-top:0; }
.featrow .ico { width:28px; text-align:center; font-size:18px; flex:none; }
.featrow .grow { flex:1; min-width:0; }
.featrow.off b { color:var(--mute); }
.featrow.pick { cursor:pointer; } .featrow.pick input { width:auto; flex:none; }
.badge.lvl { font-size:11px; }
.tilesnote { text-align:right; margin:-4px 2px 8px; }
@media (max-width:700px) { .featrow { gap:8px; } .featrow .btn { flex:none; } }

/* ---------- v2.8 list filter ---------- */
.fhide { display:none !important; }
.filterbar { display:flex; flex-wrap:wrap; align-items:center; margin-bottom:8px; gap:6px; } .filterbar .fq { min-width:140px; } .filterbar select { width:auto; max-width:180px; }
.filterbar .fico { font-size:14px; opacity:.7; }
@media (max-width:700px) { .filterbar select { max-width:46%; } .filterbar .fcount { width:100%; } }

/* ---------- v2.8 own order (arrange) ---------- */
.tabs .tabarr { align-self:center; margin-left:auto; padding:4px 10px; cursor:pointer; color:var(--mute); border-radius:8px; user-select:none; flex:none; }
.tabs .tabarr:hover, .tabs .tabarr:focus { background:var(--secondary); color:var(--primary); outline:none; }
.tabs.apptiles .tabarr { margin-left:0; color:var(--mute); }
.arrlist { max-height:60vh; overflow-y:auto; margin-bottom:10px; }
.arrrow { display:flex; align-items:center; gap:8px; padding:7px 4px; border-bottom:1px solid var(--line); background:var(--card); }
.arrrow .grip { cursor:grab; color:var(--mute); } .arrrow .pos { width:22px; text-align:right; color:var(--mute); font-size:12px; }
.arrrow .ico { width:22px; text-align:center; } .arrrow .grow { flex:1; min-width:0; }
@media (max-width:700px) { .arrrow .grip { display:none; } .arrrow .btn.sm { padding:5px 10px; } }

/* ---------- v2.8 drag the menu ---------- */
#nav a.nav { -webkit-touch-callout:none; -webkit-user-drag:none; }
#nav.sorting { user-select:none; -webkit-user-select:none; }
#nav.sorting a.nav { transition:transform .12s; }
#nav a.nav.dragging { background:var(--secondary); color:var(--primary); box-shadow:0 6px 18px rgba(0,0,0,.18); transform:scale(1.03); position:relative; z-index:2; cursor:grabbing; }
.navhint { font-size:11px; color:var(--mute); padding:12px 10px 4px; }