/* Al Azhar School System – phone first (portrait 9:16), same layout on any desktop width */
:root{--brand:#7b2a2c;--brand-d:#4a1416;--brand-m:#652022;--gold:#ffffff;--bg:#f7f1f1;--ink:#2b1616;--mut:#6b5656;--line:#ead9d9;--ok:#1e8449;--warn:#c27a0e;--bad:#b03a2e;--r:14px}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:"Segoe UI","Noto Sans Tamil","Noto Sans Sinhala",Roboto,Arial,sans-serif;background:var(--bg);color:var(--ink);font-size:15.5px;line-height:1.45;min-height:100vh}
a{color:var(--brand)}
img{max-width:100%}
/* side menu */
.side{position:fixed;left:0;top:0;bottom:0;width:270px;background:var(--brand-d);color:#f6e9e9;padding:14px 12px 90px;overflow-y:auto;z-index:40;transform:translateX(-100%);transition:transform .2s}
body.open .side{transform:none;box-shadow:4px 0 18px rgba(0,0,0,.35)}
.shade{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:35}body.open .shade{display:block}
.logo{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.crest{width:42px;height:42px;border-radius:50%;background:var(--gold);color:var(--brand-d);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;flex:none}
.logo b{font-size:14px;display:block}.logo span{font-size:11.5px;opacity:.8}
.fix,.grp{display:flex;justify-content:space-between;align-items:center;padding:11px 12px;border-radius:10px;margin:5px 0 3px;font-weight:700;color:#fff;text-decoration:none;font-size:14.5px;min-height:44px}
.grp{background:#8e3436;cursor:pointer;list-style:none}.grp::-webkit-details-marker{display:none}
.fix.on{background:#8e3436}
.sub{margin:2px 0 4px 12px;border-left:2px solid #6f9bd1;padding-left:8px}
.sub a{display:flex;align-items:center;min-height:42px;padding:6px 10px;border-radius:8px;font-size:14px;color:#f6e9e9;text-decoration:none}
.sub a.on{background:var(--brand-m);border-left:3px solid #fff;color:#fff;font-weight:700}
/* top bar */
.top{position:sticky;top:0;background:var(--brand);color:#fff;display:flex;align-items:center;gap:8px;padding:8px 10px;z-index:30;min-height:56px;box-shadow:0 1px 4px rgba(0,0,0,.2)}
.top .ttl{flex:1;min-width:0}.top h1{font-size:16.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top small{display:block;font-size:12px;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ib{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;border-radius:10px;background:var(--brand-m);color:#fff;border:1px solid rgba(255,255,255,.25);font-size:19px;text-decoration:none;position:relative;cursor:pointer;flex:none;padding:0 8px}
.ib .n{position:absolute;top:-4px;right:-4px;background:#e74c3c;color:#fff;border-radius:10px;font-size:11px;padding:1px 6px;font-weight:700}
.main{padding:12px 12px 96px;max-width:1100px;margin:0 auto}
/* bottom bar (phone) */
.bnav{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--line);display:flex;z-index:30;padding-bottom:env(safe-area-inset-bottom)}
.bnav a{flex:1;text-align:center;text-decoration:none;color:var(--mut);font-size:11.5px;padding:7px 2px 6px;min-height:58px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.bnav a i{font-style:normal;font-size:21px;line-height:1}.bnav a.on{color:var(--brand);font-weight:700}
/* cards and blocks */
.card{background:#fff;border-radius:var(--r);padding:14px;box-shadow:0 1px 3px rgba(20,40,80,.12);margin-bottom:12px}
.card h3{font-size:12.5px;text-transform:uppercase;color:#7d5a5a;margin-bottom:10px;letter-spacing:.4px}
.card h2{font-size:17px;margin-bottom:8px}
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:12px}
.cards .card{margin:0;padding:12px}.big{font-size:24px;font-weight:800;line-height:1.1}.sm{font-size:13px;color:var(--mut)}
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:12px}
.tile{background:#fff;border-radius:var(--r);padding:12px 6px;text-align:center;text-decoration:none;color:var(--ink);box-shadow:0 1px 3px rgba(20,40,80,.12);min-height:88px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font-size:13px;font-weight:600}
.tile i{font-style:normal;font-size:26px}.tile .n{background:#e74c3c;color:#fff;border-radius:9px;padding:0 6px;font-size:11px}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.row.sp{justify-content:space-between}
.grow{flex:1;min-width:0}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:10px;padding:10px 15px;font-weight:700;font-size:14.5px;cursor:pointer;border:1px solid transparent;text-decoration:none;font-family:inherit;min-height:44px;line-height:1.2;text-align:center}
.bp{background:var(--brand);color:#fff}.bo{background:#fff;border-color:var(--brand);color:var(--brand)}.bg{background:var(--ok);color:#fff}.bd{background:#fff;border-color:var(--bad);color:var(--bad)}.br{background:var(--bad);color:#fff}.bw{background:#25D366;color:#063}.by{background:#f4c542;color:#3a2a00}
.btn.full{width:100%}.btn.s{min-height:36px;padding:6px 10px;font-size:13px}
/* forms */
label{display:block;font-size:13px;color:#7d5a5a;margin:0 0 4px;font-weight:700}
input,select,textarea{width:100%;border:1px solid #dcc4c4;border-radius:10px;padding:10px 12px;background:#fff;font-size:16px;font-family:inherit;min-height:46px;color:var(--ink)}
textarea{min-height:90px}
input[type=checkbox],input[type=radio]{width:22px;height:22px;min-height:0;accent-color:var(--brand);vertical-align:middle}
input[type=file]{padding:8px}
.f{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin-bottom:12px}
.f>div{min-width:0}
.check{display:flex;align-items:center;gap:10px;min-height:44px;font-weight:600;color:var(--ink);font-size:15px}
.hint{font-size:12.5px;color:var(--mut);margin-top:4px}
.err-t{color:var(--bad);font-size:13px;margin-top:4px}
.actions{position:sticky;bottom:64px;background:linear-gradient(transparent,var(--bg) 30%);padding:10px 0 2px;display:flex;gap:8px;z-index:5}
.actions .btn{flex:1}
/* lists made for thumbs */
.list{background:#fff;border-radius:var(--r);box-shadow:0 1px 3px rgba(20,40,80,.12);margin-bottom:12px;overflow:hidden}
.li{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink);min-height:56px}
.li:last-child{border-bottom:0}.li .t{flex:1;min-width:0}.li .t b{display:block;font-size:15.5px}.li .t span{display:block;font-size:13px;color:var(--mut)}
a.li:active{background:#f9f1f1}
.av{width:40px;height:40px;border-radius:50%;background:#f2e2e2;color:var(--brand);display:flex;align-items:center;justify-content:center;font-weight:800;flex:none}
/* tables (desktop) */
.tw{overflow:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:14px}
td,th{padding:9px 8px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{color:#7d5a5a;font-size:12.5px;background:#fbf7f7;white-space:nowrap}
.r{text-align:right}.c{text-align:center}
/* chips, pills, alerts */
.pill{border-radius:8px;padding:2px 8px;font-size:12px;font-weight:700;display:inline-block}
.g1{background:#d5f0dd;color:#1e7a43}.p1{background:#fde0dc;color:#b03a2e}.p2{background:#fdebd0;color:#a66208}.b1{background:#f1e0e0;color:#2a5aa0}.n1{background:#f2ecec;color:#6b5656}
.alert{border-radius:12px;padding:11px 13px;margin-bottom:12px;font-size:14.5px}
.ok{background:#e3f4e8;border:1px solid #9fd0aa}.err{background:#fde8e4;border:1px solid #e0a095}.warn{background:#fff4d6;border:1px solid #ffffff}.info{background:#f6e9e9;border:1px solid #cfa6a6}
.seg{display:flex;border-radius:10px;overflow:hidden;border:1px solid var(--brand);background:#fff}
.seg a,.seg label{flex:1;text-align:center;padding:10px 6px;font-weight:700;font-size:14px;color:var(--brand);text-decoration:none;margin:0;min-height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.seg a.on,.seg input:checked+span{background:var(--brand);color:#fff}
.seg input{display:none}.seg label span{display:block;width:100%;padding:10px 4px;border-radius:0}
.chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;margin-bottom:10px}
.chip{flex:none;border:1px solid #c49393;border-radius:20px;padding:8px 14px;font-size:14px;background:#fff;color:var(--brand);text-decoration:none;font-weight:600;white-space:nowrap}
.chip.on{background:var(--brand);color:#fff;border-color:var(--brand)}
/* attendance grid: big tap boxes */
.att{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.att label{background:#fff;border:2px solid #d6b9b9;border-radius:12px;padding:10px;display:flex;gap:8px;align-items:center;margin:0;color:var(--ink);font-weight:600;font-size:14px;min-height:56px;cursor:pointer}
.att input{display:none}.att .no{font-size:12px;color:var(--mut);display:block;font-weight:400}
.att label.ab{background:#fde0dc;border-color:#e08070}.att label.lt{background:#fdebd0;border-color:#e8b45a}.att label.ex{background:#f6e9e9;border-color:#8fb0db}
/* live board */
.clock{font-size:34px;font-weight:800;color:var(--brand);font-variant-numeric:tabular-nums;line-height:1}
.lb{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.lb a,.lb div.x{border-radius:12px;padding:8px;text-decoration:none;color:#fff;min-height:70px;display:flex;flex-direction:column;justify-content:space-between;font-size:12px}
.lb b{font-size:15px}.lb .st-ok{background:#1e8449}.lb .st-cv{background:#d68910}.lb .st-no{background:#c0392b}.lb .st-free{background:#7f8c9d}
.legend{display:flex;gap:12px;flex-wrap:wrap;font-size:13px;margin:8px 0}.legend i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:4px;vertical-align:-1px}
/* timetable grid */
.tt td,.tt th{text-align:center;padding:6px 4px;font-size:12.5px;min-width:74px}.tt td small{display:block;color:var(--mut);font-size:11.5px}
.tt td.empty{color:#c7b3b3}.tt .now{outline:3px solid var(--brand);outline-offset:-3px}
.login{max-width:420px;margin:6vh auto;padding:0 16px}
.login .card{padding:22px}.login h1{color:var(--brand);font-size:21px;margin-bottom:4px}
.pager{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}.pager a,.pager span{padding:8px 12px;border:1px solid var(--line);border-radius:8px;background:#fff;text-decoration:none;font-size:14px}
.empty{color:var(--mut);text-align:center;padding:22px 10px;font-size:14.5px}
.kv{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px 14px}.kv b{display:block;font-size:12px;color:#7d5a5a;text-transform:uppercase}
.bar{height:10px;border-radius:6px;background:#f3e7e7;overflow:hidden}.bar>i{display:block;height:100%;background:var(--ok)}
.muted{color:var(--mut)}.nowrap{white-space:nowrap}.mt{margin-top:12px}.mb{margin-bottom:12px}.hide{display:none}
.lang{display:flex;gap:4px}.lang a{color:#fff;font-size:12.5px;font-weight:700;text-decoration:none;padding:6px 8px;border-radius:8px;background:var(--brand-m)}.lang a.on{background:var(--gold);color:var(--brand-d)}
.qr{width:100%;max-width:240px}
/* wider screens: same order, more room; side menu stays a drawer so the layout is identical maximised or not */
@media (min-width:700px){
  body{font-size:15px}
  .main{padding:18px 20px 40px}
  .f.f2{grid-template-columns:repeat(2,minmax(0,1fr))}.f.f3{grid-template-columns:repeat(3,minmax(0,1fr))}.f .w2{grid-column:span 2}
  .cards{grid-template-columns:repeat(4,minmax(0,1fr))}
  .tiles{grid-template-columns:repeat(6,minmax(0,1fr))}
  .actions{bottom:0}
  .bnav{display:none}
}
@media (min-width:1100px){
  .side{transform:none;box-shadow:none}
  .top,.main{margin-left:270px}.main{max-width:none}
  body.open .side{box-shadow:none}.shade{display:none!important}
  .menu-btn{display:none}
  html.hide-side .side{transform:translateX(-100%)}html.hide-side .top,html.hide-side .main{margin-left:0}html.hide-side .menu-btn{display:inline-flex}
}
/* phones: tables turn into cards */
@media (max-width:699px){
  table.stack,table.stack tbody,table.stack tr,table.stack td{display:block;width:100%}
  table.stack thead{display:none}
  table.stack tr{background:#fff;border:1px solid var(--line);border-radius:12px;margin-bottom:8px;padding:6px 10px}
  table.stack td{border:0;padding:4px 0;text-align:left!important}
  table.stack td[data-l]::before{content:attr(data-l);display:block;font-size:11.5px;color:#7d5a5a;font-weight:700;text-transform:uppercase}
}
@media print{
  .side,.top,.bnav,.noprint,.alert,.actions{display:none!important}
  .main{margin:0!important;padding:0!important;max-width:none}
  body{background:#fff;font-size:12px}.card{box-shadow:none!important;border:1px solid #ccc;break-inside:avoid}
  a{color:#000;text-decoration:none}.tw{overflow:visible!important}
}

/* ---- title bar (same style as JTJM) ---- */
.top{gap:10px;padding:8px 14px;min-height:64px}
.top .menu-btn{display:inline-flex!important;align-items:center;justify-content:center;width:46px;height:46px;flex:none;background:var(--brand-m);color:#fff;border:1.5px solid var(--gold);border-radius:10px;font-size:22px;cursor:pointer;font-family:inherit}
.top h1{font-size:19px;font-weight:800}
.who{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;flex:none}
.who b{font-size:14px;white-space:nowrap}
.who .tag{background:var(--gold);color:var(--brand-d);font-weight:800;font-size:12.5px;padding:4px 10px;border-radius:999px}
.tb{display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 14px;border-radius:10px;font-weight:700;font-size:14.5px;text-decoration:none;border:0;cursor:pointer;font-family:inherit;white-space:nowrap;position:relative;color:#fff}
.tb-in{background:#1e8449}.tb-pw{background:#e9a520;color:#3a2600}.tb-lo{background:#c0392b}.tb-bell{background:var(--brand-m);border:1px solid rgba(255,255,255,.25);padding:0 11px;font-size:18px}
.tb .n{position:absolute;top:-5px;right:-5px;background:#e74c3c;color:#fff;border-radius:10px;font-size:11px;padding:1px 6px;font-weight:700}
.seg-l{display:inline-flex;border-radius:10px;overflow:hidden;border:1px solid var(--gold);height:44px}
.seg-l a{display:inline-flex;align-items:center;padding:0 12px;font-weight:700;font-size:13.5px;color:#fff;background:var(--brand-m);text-decoration:none}
.seg-l a.on{background:var(--gold);color:var(--brand-d)}
@media (max-width:1250px){.tb .t{display:none}.tb{padding:0 11px}}
@media (max-width:760px){
  .top{flex-wrap:wrap;row-gap:8px;padding:8px 10px}
  .top .ttl{flex:1 1 calc(100% - 60px)}
  .who{width:100%;gap:6px}.who b.hide-sm{display:none}
  .tb,.seg-l{height:40px}.top .menu-btn{width:42px;height:42px}.top h1{font-size:17px}
  .who form{margin-left:auto}
}

/* password eye */
.pw-wrap{position:relative;display:block}.pw-wrap input{padding-right:52px!important;width:100%}
.pw-eye{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:44px;height:40px;border:0;background:transparent;color:var(--brand);cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:8px}
.pw-eye:hover{background:#f6e9e9}
input::-ms-reveal,input::-ms-clear{display:none}