/* ===== Fonts (used for the certificate and poster) ===== */
@font-face { font-family:'RKufi'; font-weight:600; font-style:normal; font-display:block; src:url('../fonts/reem-kufi-600.woff') format('woff'); }
@font-face { font-family:'CairoC'; font-weight:600; font-style:normal; font-display:block; src:url('../fonts/cairo-600.woff') format('woff'); }
@font-face { font-family:'CairoC'; font-weight:700; font-style:normal; font-display:block; src:url('../fonts/cairo-700.woff') format('woff'); }
@font-face { font-family:'NKufi'; font-weight:400; font-style:normal; font-display:swap; src:url('../fonts/noto-kufi-arabic-regular.woff') format('woff'); }
@font-face { font-family:'NKufi'; font-weight:700; font-style:normal; font-display:swap; src:url('../fonts/noto-kufi-arabic-bold.woff') format('woff'); }
@font-face { font-family:'NKufi'; font-weight:900; font-style:normal; font-display:swap; src:url('../fonts/noto-kufi-arabic-black.woff') format('woff'); }
@font-face { font-family:'MontC'; font-weight:600; font-style:normal; font-display:block; src:url('../fonts/montserrat-600.woff') format('woff'); }

:root { --navy:#1b365d; --navy2:#12264a; --gold:#c5a059; --bg:#f4f6f9; --line:#e0e4ea; --ok:#2e7d32; --bad:#c62828; --soft:#eef3f8; }
* { box-sizing:border-box; margin:0; padding:0; font-family:'NKufi','Segoe UI',Tahoma,sans-serif; }
body { background:var(--bg); color:#2b2f36; line-height:1.55; min-height:100vh; }
button { cursor:pointer; font-size:13px; }
:focus-visible { outline:3px solid var(--gold); outline-offset:2px; }
.mode { display:none; }
.mode.on { display:block; }

/* Header */
.top-bar { background:linear-gradient(90deg,var(--navy2),var(--navy)); color:#fff; padding:10px 24px; display:flex; justify-content:space-between; align-items:center; border-bottom:3px solid var(--gold); gap:12px; flex-wrap:wrap; }
.brand { display:flex; align-items:center; gap:14px; }
.logo-box { width:64px; height:64px; border-radius:50%; background:#fff; border:2px solid var(--gold); overflow:hidden; flex-shrink:0; }
.logo-box img { width:100%; height:100%; object-fit:cover; display:block; }
.brand h1 { font-size:20px; }
.brand p { font-size:12px; color:#d8c9a3; }
.hdr-right { display:flex; align-items:center; gap:10px; }
.status { font-size:12px; background:#6b7280; padding:4px 10px; border-radius:3px; }
.status.on { background:var(--ok); }
.btn-out { background:transparent; border:1px solid #fff; color:#fff; padding:4px 12px; border-radius:3px; font-size:12px; }

/* Layout */
.main-container { display:flex; max-width:1200px; margin:20px auto; gap:20px; padding:0 12px; align-items:flex-start; }
.sidebar { width:230px; background:#fff; border:1px solid var(--line); border-radius:4px; padding:10px 0; flex-shrink:0; position:sticky; top:12px; }
.sidebar button { display:block; width:100%; text-align:right; background:none; border:none; border-bottom:1px solid #f0f0f0; padding:12px 20px; font-size:14px; color:#555; }
.sidebar button:hover { background:#f7f9fb; }
.sidebar button.active { background:var(--soft); color:var(--navy); font-weight:bold; border-right:4px solid var(--navy); }
.content { flex:1; min-width:0; background:#fff; border:1px solid var(--line); border-radius:4px; padding:22px; }
.page { display:none; }
.page.show { display:block; animation:swap .25s ease; }
@keyframes swap { from { opacity:0; transform:translateX(-14px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce) { .page.show { animation:none; } }
.page-header { font-size:19px; color:var(--navy); border-bottom:2px solid var(--soft); padding-bottom:10px; margin-bottom:18px; display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }
h3.sec { color:var(--navy); font-size:15px; margin:22px 0 10px; padding-right:10px; border-right:4px solid var(--gold); }

/* Forms */
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; margin-bottom:14px; }
label { display:block; font-size:12px; font-weight:bold; color:#666; margin-bottom:5px; }
input[type=text], input[type=number], input[type=date], input[type=email], input[type=password], select, textarea { width:100%; padding:9px 10px; border:1px solid #ccc; border-radius:3px; font-size:13px; background:#fff; }
.ltr { direction:ltr; text-align:left; }
.btn { background:var(--navy); color:#fff; border:none; padding:9px 18px; border-radius:3px; }
.btn:hover { background:var(--navy2); }
.btn.gold { background:var(--gold); color:#222; }
.btn.ghost { background:#fff; color:var(--navy); border:1px solid var(--navy); }
.btn.danger { background:#fff; color:var(--bad); border:1px solid var(--bad); }
.btn.small { padding:5px 10px; font-size:12px; }
.btn:disabled { opacity:.5; cursor:wait; }
.row { display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; margin-bottom:14px; }

/* Table */
.tbl-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; margin-top:12px; font-size:13px; }
th { background:#f8f9fa; color:#444; border:1px solid var(--line); padding:9px; text-align:right; }
td { border:1px solid var(--line); padding:8px; color:#444; vertical-align:middle; }
tr:nth-child(even) td { background:#fafbfc; }
.tag { display:inline-block; padding:2px 7px; border-radius:2px; font-size:11px; font-weight:bold; background:#ffebee; color:var(--bad); }
.empty { text-align:center; padding:26px; color:#888; }

/* Stats / chart */
.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(138px,1fr)); gap:12px; }
.stat { border:1px solid var(--line); border-right:5px solid var(--gold); padding:16px; border-radius:3px; background:#fcfcfd; cursor:pointer; }
.stat b { display:block; font-size:30px; color:var(--navy); }
.stat span { font-size:13px; color:#666; }
.home-cols { display:grid; grid-template-columns:minmax(260px,1fr) 1fr; gap:18px; margin-top:20px; align-items:start; }
@media (max-width:820px) { .home-cols { grid-template-columns:1fr; } }
.card { border:1px solid var(--line); border-radius:4px; padding:16px; }
.card h4 { color:var(--navy); margin-bottom:10px; font-size:15px; }
.chart-wrap { position:relative; height:260px; }
.chart-wrap canvas { max-width:100%; }
.legend { display:flex; gap:16px; justify-content:center; margin-top:8px; font-size:13px; }
.legend i { display:inline-block; width:12px; height:12px; border-radius:2px; margin-left:6px; vertical-align:middle; }

/* Attendance */
.day-cell { text-align:center; }
.day-cell input { width:18px; height:18px; cursor:pointer; accent-color:var(--navy); }
.res { font-size:22px; font-weight:bold; text-align:center; }
.res.ok { color:var(--ok); } .res.no { color:var(--bad); }
.pill { display:inline-block; padding:2px 10px; border-radius:20px; font-size:12px; font-weight:bold; }
.pill.ok { background:#e8f5e9; color:var(--ok); } .pill.no { background:#ffebee; color:var(--bad); }
.note { background:var(--soft); border-right:4px solid var(--navy); padding:10px 14px; font-size:13px; margin-bottom:14px; border-radius:3px; }
.note.warn { background:#fff8e6; border-right-color:var(--gold); }

/* Exams */
.exam-card { border:1px solid var(--line); border-radius:4px; padding:14px; margin-bottom:14px; display:flex; gap:18px; align-items:center; flex-wrap:wrap; }
.exam-card .info { flex:1; min-width:220px; }
.exam-card h3 { color:var(--navy); font-size:16px; margin-bottom:4px; }
.exam-card .meta { font-size:12px; color:#777; margin-bottom:8px; }
.exam-card .url { font-size:11px; color:#666; word-break:break-all; direction:ltr; text-align:left; margin-bottom:10px; }
.qr { background:#fff; padding:6px; border:1px solid var(--line); width:168px; text-align:center; }
.qr svg { display:block; width:100%; height:auto; }
.qr small { font-family:monospace; font-size:12px; letter-spacing:1px; }
.qbox { border:1px dashed #b9c3d0; border-radius:4px; padding:12px; margin-bottom:12px; background:#fbfcfe; }
.qbox .opts { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:8px; }
.opt-line { display:flex; gap:6px; align-items:center; }
.opt-line input[type=radio] { accent-color:var(--ok); }
.toast { position:fixed; bottom:22px; right:50%; transform:translateX(50%); background:var(--navy); color:#fff; padding:10px 20px; border-radius:4px; font-size:13px; display:none; z-index:80; max-width:90vw; text-align:center; }

/* Login */
.login-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:16px; background:linear-gradient(160deg,var(--navy2),var(--navy)); }
.login-card { background:#fff; border-radius:8px; padding:30px 28px; width:100%; max-width:380px; text-align:center; border-top:5px solid var(--gold); }
.login-card .logo-box { width:110px; height:110px; margin:0 auto 12px; }
.login-card h2 { color:var(--navy); font-size:20px; }
.login-card p.sub { color:#777; font-size:12px; margin-bottom:18px; }
.login-card .f { text-align:right; margin-bottom:12px; }
.login-card .btn { width:100%; padding:11px; font-size:14px; }
.err { color:var(--bad); font-size:13px; min-height:20px; margin-bottom:8px; }

/* Student / verify pages */
.stu-wrap { max-width:720px; margin:16px auto; padding:0 12px; }
.panel { background:#fff; border:1px solid var(--line); border-radius:6px; padding:22px; }
.panel h2 { color:var(--navy); font-size:19px; margin-bottom:6px; }
.take-q { margin-bottom:20px; }
.take-q h4 { margin-bottom:8px; color:var(--navy); font-size:15px; }
.take-q label.choice { display:flex; gap:8px; align-items:center; font-weight:normal; font-size:15px; color:#333; padding:10px 12px; border:1px solid var(--line); border-radius:4px; margin-bottom:6px; cursor:pointer; }
.take-q label.choice:has(input:checked) { background:var(--soft); border-color:var(--navy); }
.take-q input[type=radio] { accent-color:var(--navy); width:18px; height:18px; }
.stu-bar { position:sticky; top:0; background:#fff; border-bottom:2px solid var(--soft); padding:10px 0; margin-bottom:14px; display:flex; justify-content:space-between; align-items:center; z-index:5; }
.timer { font-size:20px; font-weight:bold; color:var(--bad); font-variant-numeric:tabular-nums; direction:ltr; }
.score-big { text-align:center; padding:18px 0; }
.score-big b { font-size:64px; color:var(--navy); display:block; line-height:1.2; }
.score-big b small { font-size:28px; color:#888; }
.btn.full { width:100%; padding:12px; font-size:15px; }
.verify-mark { font-size:70px; text-align:center; line-height:1; }
.kv { display:grid; grid-template-columns:130px 1fr; gap:8px 12px; margin-top:16px; font-size:15px; }
.kv span { color:#777; }

.overlay { position:fixed; inset:0; background:rgba(10,20,40,.6); display:none; align-items:flex-start; justify-content:center; z-index:50; padding:16px; overflow:auto; }
.overlay.show { display:flex; }
.modal { background:#fff; border-radius:6px; max-width:720px; width:100%; padding:22px; margin:auto; }
.modal h3 { color:var(--navy); margin-bottom:12px; }
.thumbs { display:flex; gap:10px; flex-wrap:wrap; margin:10px 0; }
.thumb { width:110px; border:1px solid var(--line); border-radius:4px; padding:4px; text-align:center; font-size:11px; background:#fff; }
.thumb img { width:100%; height:130px; object-fit:contain; background:#f4f6f9; display:block; margin-bottom:4px; }
.att-qr { display:flex; gap:18px; flex-wrap:wrap; align-items:center; }
.att-qr .info { flex:1; min-width:230px; }
.pin { font-size:30px; letter-spacing:6px; font-weight:bold; color:var(--navy); direction:ltr; display:inline-block; background:var(--soft); padding:2px 16px; border-radius:4px; }
.en { direction:ltr; unicode-bidi:isolate; display:inline-block; }
td.en { display:table-cell; text-align:right; }
.score-big b, .res { direction:ltr; unicode-bidi:isolate; }
.linkbtn { cursor:pointer; border:none; font-family:inherit; }
.chk { display:flex; gap:8px; align-items:center; font-weight:normal; font-size:13px; color:#333; margin-top:10px; }
@media (max-width:820px) { .main-container { flex-direction:column; } .sidebar { width:100%; position:static; display:flex; overflow-x:auto; padding:0; } .sidebar button { white-space:nowrap; border-bottom:none; border-left:1px solid #f0f0f0; } .sidebar button.active { border-right:none; border-bottom:3px solid var(--navy); } .qbox .opts { grid-template-columns:1fr; } }

/* ---- v3 additions ---- */
.page-header .grow { flex:1; }
.sec-sub { color:#777; font-size:12px; font-weight:normal; }
.stat .sub { display:block; font-size:12px; color:var(--navy); margin-top:2px; }
.stat { transition:transform .15s, box-shadow .15s; }
.stat:hover { transform:translateY(-2px); box-shadow:0 4px 12px rgba(27,54,93,.12); }
.stat.alt { border-right-color:var(--navy); }
.home-cols { grid-template-columns:minmax(260px,1fr) 1fr; }
.recent { list-style:none; }
.recent li { display:flex; justify-content:space-between; gap:10px; padding:8px 0; border-bottom:1px solid #f0f2f5; font-size:13px; }
.recent li small { color:#888; white-space:nowrap; }
.recent li span em { display:block; font-style:normal; font-size:11px; color:#888; }

.chips { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:6px; }
.chip { display:inline-flex; align-items:center; gap:6px; background:var(--soft); border:1px solid #d5deea; color:var(--navy); border-radius:20px; padding:5px 6px 5px 12px; font-size:13px; }
.chip b { background:#fff; border-radius:10px; padding:0 7px; font-size:11px; color:#666; }
.chip button { border:none; background:none; color:#888; font-size:14px; line-height:1; padding:2px 4px; border-radius:50%; }
.chip button:hover { background:#fff; color:var(--bad); }
.div-block { margin-top:18px; }
.div-block > h4 { color:var(--navy); font-size:14px; margin-bottom:8px; padding-right:10px; border-right:4px solid var(--gold); }
.course-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:12px; }
.course { border:1px solid var(--line); border-radius:4px; padding:14px; background:#fcfcfd; cursor:pointer; transition:box-shadow .15s, border-color .15s; border-top:3px solid var(--gold); }
.course:hover { border-color:var(--navy); box-shadow:0 4px 12px rgba(27,54,93,.12); }
.course h5 { color:var(--navy); font-size:15px; margin-bottom:6px; }
.course .meta { font-size:12px; color:#666; display:flex; flex-direction:column; gap:2px; }
.back { margin-bottom:12px; }
.qgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:14px; margin-top:6px; }
.qcard { border:1px solid var(--line); border-radius:4px; padding:14px; display:flex; flex-direction:column; gap:8px; align-items:center; text-align:center; }
.qcard h4 { color:var(--navy); font-size:15px; align-self:stretch; text-align:right; border-bottom:2px solid var(--soft); padding-bottom:6px; }
.qcard .qr { width:190px; }
.qcard .url { font-size:11px; color:#666; word-break:break-all; direction:ltr; text-align:left; align-self:stretch; }
.qcard .btns { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; }
.mat-list { margin-top:12px; }
.mat-item { display:flex; align-items:center; gap:10px; padding:8px 10px; border:1px solid var(--line); border-radius:4px; margin-bottom:6px; font-size:13px; }
.mat-item .nm { flex:1; word-break:break-all; }
.mat-item small { color:#888; }
.ico { width:30px; height:30px; border-radius:4px; background:var(--soft); color:var(--navy); display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:bold; flex-shrink:0; direction:ltr; }

.nm-cell { display:flex; align-items:center; gap:6px; }
.arrow { width:24px; height:24px; border-radius:50%; border:1px solid #cfd8e3; background:#fff; color:var(--navy); font-size:12px; line-height:1; padding:0; flex-shrink:0; transition:background .15s; }
.arrow:hover, .arrow.open { background:var(--navy); color:#fff; border-color:var(--navy); }
.pop { position:fixed; z-index:90; background:#fff; border:1px solid var(--navy); border-top:4px solid var(--gold); border-radius:4px; box-shadow:0 8px 24px rgba(10,20,40,.22); padding:12px 14px; width:290px; display:none; font-size:13px; }
.pop.show { display:block; }
.pop h5 { color:var(--navy); font-size:14px; margin-bottom:8px; }
.pop .kv2 { display:grid; grid-template-columns:78px 1fr; gap:5px 8px; }
.pop .kv2 span { color:#888; }
.pop .kv2 b { font-weight:600; word-break:break-word; }
.pop img.sg { width:100%; height:70px; object-fit:contain; border:1px dashed #cfd8e3; border-radius:3px; margin-top:8px; background:#fff; }
.src-tag { font-size:10px; background:#eef3f8; color:#556; border-radius:8px; padding:1px 7px; margin-right:6px; }

.qbox .opts { display:flex; flex-direction:column; gap:8px; margin-top:8px; }
.opt-line .x { border:none; background:none; color:#999; font-size:16px; padding:0 6px; }
.opt-line .x:hover { color:var(--bad); }
.opt-line input[type=text] { flex:1; }
.tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px; margin-bottom:14px; }
.tile { border:1px solid var(--line); border-radius:4px; padding:10px 12px; background:#fcfcfd; }
.tile b { display:block; font-size:24px; color:var(--navy); }
.tile span { font-size:12px; color:#666; }
.tile.ok b { color:var(--ok); } .tile.no b { color:var(--bad); }
.res-cols { display:grid; grid-template-columns:minmax(220px,300px) 1fr; gap:16px; align-items:start; }
@media (max-width:820px) { .res-cols { grid-template-columns:1fr; } }
.tbl-sm td, .tbl-sm th { padding:6px 8px; }

/* public pages */
.hero { background:linear-gradient(160deg,var(--navy2),var(--navy)); color:#fff; border-radius:6px 6px 0 0; padding:18px 22px; margin:-22px -22px 18px; border-bottom:4px solid var(--gold); }
.hero small { color:#d8c9a3; display:block; margin-bottom:4px; font-size:12px; }
.hero h2 { color:#fff; font-size:21px; margin:0 0 8px; }
.hero .meta { display:flex; flex-wrap:wrap; gap:6px 18px; font-size:13px; color:#e8eef7; }
.frm { display:grid; grid-template-columns:1fr; gap:12px; }
.frm .two { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:520px) { .frm .two { grid-template-columns:1fr; } }
.seg { display:flex; border:1px solid var(--navy); border-radius:4px; overflow:hidden; margin-bottom:14px; }
.seg button { flex:1; border:none; background:#fff; color:var(--navy); padding:10px 6px; font-size:13px; }
.seg button.on { background:var(--navy); color:#fff; font-weight:bold; }
.sigbox { border:1.5px dashed #9fb0c5; border-radius:4px; background:#fff; position:relative; touch-action:none; }
.sigbox canvas { display:block; width:100%; height:170px; touch-action:none; cursor:crosshair; }
.sigbox .ph { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#b4bfcc; font-size:14px; pointer-events:none; }
.sigbox .clr { position:absolute; top:6px; left:6px; font-size:11px; padding:3px 9px; }
.file-row { display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--line); border-radius:4px; margin-bottom:8px; background:#fff; }
.file-row .nm { flex:1; word-break:break-all; font-size:14px; }
.file-row small { color:#888; display:block; }
a.btn { text-decoration:none; display:inline-block; }
.okmark { width:72px; height:72px; border-radius:50%; background:#e8f5e9; color:var(--ok); font-size:40px; display:flex; align-items:center; justify-content:center; margin:6px auto 12px; }
.hide { display:none !important; }
.up-drop { border:2px dashed #b9c3d0; border-radius:4px; padding:14px; display:flex; gap:10px; align-items:center; flex-wrap:wrap; background:#fbfcfe; }

/* ===== v5 ===== */
.cap-off { display:none !important; }
.caps-cell { min-width:320px; }
.cap-chk { display:inline-flex; align-items:center; gap:4px; margin:2px 0 2px 12px; font-size:13px; white-space:nowrap; }
.tg-box { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin:0 0 14px; }
.role-tabs { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin:4px 0 14px; }
.role-tabs button { border:1px solid var(--navy); background:#fff; color:var(--navy); border-radius:20px; padding:5px 14px; font-size:13px; }
.role-tabs button.on { background:var(--navy); color:#fff; }
.roles-tbl td, .roles-tbl th { text-align:center; font-size:12px; }
.roles-tbl td:first-child, .roles-tbl th:first-child { text-align:right; white-space:nowrap; }
.poster-cols { display:grid; grid-template-columns:minmax(260px, 340px) 1fr; gap:22px; align-items:start; }
.poster-form fieldset { border:1px solid var(--line); border-radius:8px; padding:10px 12px 4px; margin-bottom:12px; background:#fff; }
.poster-form legend { font-weight:700; color:var(--navy); padding:0 6px; font-size:14px; }
.poster-form fieldset > div { margin-bottom:10px; }
.poster-form textarea { width:100%; resize:vertical; }
.poster-view { position:sticky; top:12px; }
.poster-view canvas { width:100%; max-width:620px; height:auto; border:1px solid var(--line); border-radius:6px; display:block; background:#eef1f5; box-shadow:0 6px 24px rgba(20,40,80,.12); }
.swatches { display:flex; gap:8px; flex-wrap:wrap; }
.swatches button { width:38px; height:38px; border-radius:50%; border:3px solid #fff; box-shadow:0 0 0 1px var(--line); cursor:pointer; padding:0; }
.swatches button.on { box-shadow:0 0 0 3px var(--navy); }
.chk.inline { display:inline-flex; margin:0 0 0 10px; }
@media (max-width:760px) { .poster-cols { grid-template-columns:1fr; } .poster-view { position:static; } }
.me { font-size:12px; color:#f1e6c8; }
.sub-line { font-size:12px; color:#777; }
.bad-txt { color:var(--bad); font-weight:bold; }
.pill.warn { background:#fff4e0; color:#a86b00; }
.code-row { margin:4px 0 8px; font-size:13px; color:#555; }
.code-row .pin { font-size:22px; padding:0 10px; }
.btns-row { display:flex; flex-wrap:wrap; gap:6px; }
.code-huge { font-size:clamp(56px, 14vw, 120px); font-weight:bold; letter-spacing:12px; color:var(--navy); direction:ltr; text-align:center; margin:14px 0; font-family:'Segoe UI',Tahoma,monospace; }
.code-qr { width:220px; margin:0 auto 12px; }
#codeModal .modal { text-align:center; max-width:860px; }
#codeModal .modal table { text-align:right; }
.timer.low { color:var(--bad); animation:blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity:.55; } }
@media (prefers-reduced-motion:reduce) { .timer.low { animation:none; } }