/* ═══ Examination System — shared styles ═══ */
/* Themes (same token set as Haneen) */
[data-theme="rose-dawn"]      { --primary:#9D4E63; --primary-dark:#7E3B4E; --surface:#FBF5F0; --surface-alt:#F5E6E0; --accent:#B03A4B; --accent-dark:#8E2E3C; --ink:#3D2A30; --muted:#8A6E75; --line:#3a3a3a; --uiline:#E8D5CF; }
[data-theme="lavender-mist"]  { --primary:#7C5CBF; --primary-dark:#6446A3; --surface:#F7F4FC; --surface-alt:#ECE5F7; --accent:#B03A6E; --accent-dark:#8E2E58; --ink:#2E2440; --muted:#7A6E94; --line:#3a3a3a; --uiline:#DCD3EE; }
[data-theme="peach-blossom"]  { --primary:#C26A52; --primary-dark:#A5553F; --surface:#FBF6EF; --surface-alt:#F4E8DB; --accent:#B0532E; --accent-dark:#8E4224; --ink:#3A2B23; --muted:#8C7A6C; --line:#3a3a3a; --uiline:#E8DACB; }
[data-theme="oxford-navy"]    { --primary:#1E3A5F; --primary-dark:#16293F; --surface:#F4F6F8; --surface-alt:#E8EDF2; --accent:#C0392B; --accent-dark:#96281B; --ink:#1C2733; --muted:#5C6B7A; --line:#3a3a3a; --uiline:#D8E0E8; }
[data-theme="graphite-pine"]  { --primary:#2B3A35; --primary-dark:#1E2A26; --surface:#F5F5F2; --surface-alt:#E9EAE4; --accent:#B0532E; --accent-dark:#8E4224; --ink:#212826; --muted:#66706B; --line:#3a3a3a; --uiline:#D8DBD2; }
[data-theme="yougrade-blue"]   { --primary:#0D47A1; --primary-dark:#082F6B; --surface:#F4F8FD; --surface-alt:#E3EEFA; --accent:#D97706; --accent-dark:#B45309; --ink:#1A2B3C; --muted:#5B7185; --line:#3a3a3a; --uiline:#D5E3F2; }

body { font-family:'Manrope','Readex Pro',sans-serif; overflow-x:clip; }
[dir="rtl"] body { font-family:'Readex Pro','Manrope',sans-serif; }
.font-serif, h1,h2,h3 { font-family:'Bebas Neue','El Messiri',sans-serif; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] .font-serif { font-family:'El Messiri','Bebas Neue',sans-serif; }

.paper { background-color:var(--surface);
  background-image: radial-gradient(circle at 20% 30%, rgba(0,0,0,.025) 0%, transparent 40%),
                    radial-gradient(circle at 80% 70%, rgba(0,0,0,.03) 0%, transparent 40%); }

/* Buttons */
.btn { font-size:.8rem; font-weight:600; padding:7px 14px; border-radius:7px; transition:transform .1s; display:inline-block; cursor:pointer; }
.btn:active { transform:scale(.97); }
.btn-p { background:var(--primary); color:#fff; } .btn-p:hover { background:var(--primary-dark); }
.btn-a { background:var(--accent); color:#fff; }  .btn-a:hover { background:#fff0; background-color:var(--accent-dark); }
.btn-g { background:#fff; color:var(--muted); border:1px solid var(--uiline); }
.btn-g:hover { color:var(--ink); }
.btn-danger { background:#fff; color:#B4434E; border:1px solid #E5B8BB; } .btn-danger:hover { background:#B4434E; color:#fff; }
.btn-warn { background:var(--warn, #B45309); color:#fff; } .btn-warn:hover { background:#92400E; }

/* Cards & inputs */
.card { background:#fff; border:1px solid var(--uiline); border-radius:10px; box-shadow:0 1px 3px rgba(0,0,0,.05); }
.inp { width:100%; border:1px solid var(--uiline); border-radius:7px; padding:8px 10px; font-size:.85rem; background:#fff; color:var(--ink); }
.inp:focus { outline:2px solid var(--primary); outline-offset:-1px; border-color:transparent; }
.lbl { display:block; font-size:.72rem; font-weight:600; color:var(--muted); margin-bottom:4px; text-transform:uppercase; letter-spacing:.04em; }
select.inp { padding:7px 8px; }
.inp[type="number"] { padding:7px 8px; }
textarea.inp { min-height:70px; }

/* ─── Admin shell ─── */
.admin-sidebar { transition: width .18s ease; }
.admin-sidebar .nav-label { white-space: nowrap; }
.admin-nav-item { display:flex; align-items:center; gap:12px; font-size:.85rem; color:rgba(255,255,255,.85); border-inline-start:3px solid transparent; text-decoration:none; transition:background .12s ease; }
.admin-nav-item:hover { background:rgba(255,255,255,.08); color:#fff; }
.admin-nav-item.active { background:rgba(255,255,255,.12); color:#fff; border-inline-start-color:var(--accent); }

/* Collapsible sidebar (icons-only) */
.sb-collapsed .admin-sidebar { width:4.5rem; }
.sb-collapsed .admin-sidebar .nav-label,
.sb-collapsed .admin-sidebar .sb-brand-text,
.sb-collapsed .admin-sidebar .sb-group,
.sb-collapsed .admin-sidebar .sb-school-form,
.sb-collapsed .admin-sidebar .sb-school-name { display:none; }
.sb-collapsed .admin-sidebar .sb-brand { padding:.75rem .25rem; }
.sb-collapsed .admin-sidebar .sb-brand img { height:1.9rem; }
.sb-collapsed .admin-sidebar .admin-nav-item { justify-content:center; padding-inline:0; }
.sb-collapsed .admin-sidebar #sb-toggle { align-self:center; margin-inline-end:0; }
.sb-collapsed .sb-toggle-icon, [dir="rtl"] .sb-toggle-icon { transform:scaleX(-1); }
[dir="rtl"].sb-collapsed .sb-toggle-icon { transform:none; }
[dir="rtl"] .crumb-sep { transform:scaleX(-1); }

/* School selector under the logo — icon-only when collapsed */
.sb-school-icon { display:none; }
.sb-collapsed .admin-sidebar .sb-school { padding:0 .25rem .5rem; }
.sb-collapsed .admin-sidebar .sb-school-icon { display:inline-flex; }

.btn-press { transition:transform .1s ease; }
.btn-press:active { transform:scale(.97); }

/* Badges */
.badge { display:inline-flex; align-items:center; padding:2px 10px; border-radius:999px; font-size:.7rem; font-weight:700; }
.b-draft     { background:#EAE3D3; color:#7A6520; }
.b-published { background:#D9EAD9; color:#2F6B3C; }
.b-archived  { background:#E4E4E4; color:#666; }
.b-auto      { background:#DCEEEE; color:#0F4C4C; }
.b-manual    { background:#E7E0F5; color:#6446A3; }

details.acc > summary { list-style:none; cursor:pointer; padding:14px 18px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
details.acc > summary::-webkit-details-marker { display:none; }
details.acc > summary .acc-caret { margin-inline-start:auto; transition:transform .15s; color:var(--muted); font-size:.8rem; }
details.acc[open] > summary .acc-caret { transform:rotate(180deg); }
.b-mixed     { background:#F5E6C8; color:#9A7516; }
.b-assigned  { background:#D8E5F5; color:#1E3A5F; }
.b-drafting  { background:#F5E6C8; color:#9A7516; }
.b-submitted { background:#DCEEEE; color:#0F4C4C; }
.b-approved  { background:#D9EAD9; color:#2F6B3C; }
.b-returned  { background:#F5D8D8; color:#96342F; }
.b-unassigned{ background:#E4E4E4; color:#666; }

/* Tables */
.tbl { width:100%; border-collapse:collapse; font-size:.83rem; }
.tbl th { text-align:start; font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:700; padding:8px 10px; border-bottom:1px solid var(--uiline); }
.tbl td { padding:9px 10px; border-bottom:1px solid var(--uiline); color:var(--ink); }
.tbl tr:last-child td { border-bottom:none; }

/* Searchable select (js/searchable.js) */
.ss-pop { position:fixed; z-index:2000; background:#fff; border:1px solid var(--uiline); border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.15); }
.ss-q { font-size:12px; padding:6px 9px; }
.ss-opt:hover { background:var(--surface-alt); }
.ss-opt.ss-on { background:var(--surface-alt); }
.ss-sel { color:var(--primary); }

/* Modal */
.modal-bk { position:fixed; inset:0; background:rgba(20,20,30,.45); z-index:40; display:flex; justify-content:center; padding:16px; overflow-y:auto; }
.modal { background:#fff; border-radius:12px; width:100%; max-width:560px; box-shadow:0 20px 50px rgba(0,0,0,.25); margin:auto; max-height:calc(100vh - 32px); max-height:calc(100dvh - 32px); overflow-y:auto; }
.modal-lg { max-width:760px; }

/* Selects styled light-on-dark still need readable option popups */
select option { color: #1c1c2e; background: #fff; }

/* Flash toasts */
.flash { position:fixed; top:14px; inset-inline:0; margin-inline:auto; width:max-content; max-width:90vw; z-index:3001; padding:10px 18px; border-radius:9px; font-size:.82rem; font-weight:600; box-shadow:0 8px 24px rgba(0,0,0,.18); color:#fff; border:1px solid transparent; }
.flash-success { background:#2F6B3C; border-color:#2F6B3C; }
.flash-error   { background:#96342F; border-color:#96342F; }
.flash-warning { background:#9A7516; border-color:#9A7516; }
.flash-info    { background:var(--ink); border-color:var(--ink); }

/* Schedule grid */
.grid-cell { min-height:52px; border:1px dashed var(--uiline); border-radius:6px; padding:4px; cursor:pointer; font-size:11px; }
.grid-cell:hover { border-color:var(--primary); border-style:solid; }
.grid-cell.filled { border-style:solid; background:color-mix(in srgb, var(--primary) 7%, white); }
.grid-cell.filled[draggable="true"] { cursor:grab; }
.grid-cell.drag-src { opacity:.4; }
.grid-cell.drop-ok { border-color:var(--primary); box-shadow:0 0 0 2px color-mix(in srgb, var(--primary) 40%, transparent); background:color-mix(in srgb, var(--primary) 14%, white); }
.grid-cell.drop-no { border-color:var(--danger); opacity:.55; }
.btn:disabled, .btn[disabled] { opacity:.45; cursor:not-allowed; pointer-events:none; }
.photo-thumbs img { cursor:zoom-in; }
.photo-spin { width:22px; height:22px; border-radius:50%; border:3px solid var(--uiline); border-top-color:var(--primary); animation:ygspin .7s linear infinite; }
@keyframes ygspin { to { transform:rotate(360deg); } }
.grid-cell.holiday { background:var(--surface-alt); border-style:solid; border-color:var(--uiline); cursor:default; color:var(--muted); }

/* Exam player palette */
.qpal { width:34px; height:34px; border-radius:8px; border:1px solid var(--uiline); background:#fff; font-size:12px; font-weight:700; color:var(--muted); cursor:pointer; display:flex; align-items:center; justify-content:center; }
.qpal.answered { background:var(--primary); color:#fff; border-color:var(--primary); }
.qpal.later { background:#F5E6C8; color:#9A7516; border-color:#E0C98F; }
.qpal.cur { outline:2px solid var(--accent); outline-offset:1px; }

/* Slide-to-verify */
.slide-verify { position:relative; border-radius:9px; border:1px solid var(--uiline); background:#fff; overflow:hidden; height:48px; user-select:none; touch-action:none; }
.slide-verify .fill { position:absolute; inset-block:0; inset-inline-start:0; background:color-mix(in srgb, var(--primary) 18%, transparent); width:0; }
.slide-verify .knob { position:absolute; inset-block:4px; inset-inline-start:4px; width:56px; border-radius:7px; background:var(--primary); color:#fff; display:flex; align-items:center; justify-content:center; font-size:16px; cursor:grab; }
.slide-verify.done .knob { background:#2F6B3C; }
.slide-verify .hint { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:.78rem; color:var(--muted); pointer-events:none; }

/* Template designer — section rail */
.sec { display:flex; align-items:center; gap:8px; padding:9px 10px; border:1px solid var(--uiline); border-radius:8px; background:#fff; cursor:pointer; }
.sec:hover { border-color:var(--primary); }
.sec.on { border-color:var(--primary); outline:2px solid color-mix(in srgb, var(--primary) 30%, transparent); background:color-mix(in srgb, var(--primary) 5%, white); }
.sec .letter { width:24px; height:24px; border-radius:6px; background:var(--surface-alt); color:var(--primary); font-weight:700; font-size:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }

/* Question-type picker cards */
.qtype { display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border:1px solid var(--uiline); border-radius:9px; background:#fff; cursor:pointer; text-align:start; }
.qtype:hover { border-color:var(--primary); background:color-mix(in srgb, var(--primary) 5%, white); }
.qtype:has(input:checked) { border-color:var(--primary); outline:2px solid color-mix(in srgb, var(--primary) 30%, transparent); background:color-mix(in srgb, var(--primary) 5%, white); }
.qtype .ico { width:30px; height:30px; border-radius:7px; background:var(--surface-alt); display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; }

/* Off-day chips */
.daychip { width:32px; height:28px; border-radius:6px; border:1px solid var(--uiline); font-size:10px; font-weight:700; color:var(--muted); background:#fff; cursor:pointer; }
.daychip.on { background:var(--primary); color:#fff; border-color:var(--primary); }
.holchip { display:inline-flex; align-items:center; gap:6px; padding:3px 9px; border-radius:999px; font-size:10.5px; font-weight:600; background:var(--surface-alt); color:var(--ink); }
.holchip button { color:var(--muted); font-weight:700; line-height:1; border:none; background:none; cursor:pointer; padding:0; }
.holchip button:hover { color:#B4434E; }

/* Printable sheet */
.sheet { background:#fff; border:2px solid var(--line); }

.ok   { color:#2F6B3C; } .warn { color:#9A7516; } .err { color:#96342F; }
.mut  { color:var(--muted); }

@media print {
  body { background:#fff; }
  .no-print { display:none !important; }
  .sheet { border:1.5px solid #000; }
}

/* Help center — contextual ? marks + article body typography */
.help-q {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.15rem; height: 1.15rem; border-radius: 9999px;
    font-size: .72rem; font-weight: 700; text-decoration: none;
    color: var(--muted); border: 1.5px solid var(--uiline);
    vertical-align: middle; margin-inline-start: .25rem;
}
.help-q:hover { color: var(--primary); border-color: var(--primary); }
.help-body p { margin: 0 0 .7rem; }
.help-body ul, .help-body ol { margin: 0 0 .8rem; padding-inline-start: 1.25rem; }
.help-body ul { list-style: disc; }
.help-body ol { list-style: decimal; }
.help-body li { margin-bottom: .35rem; }
.help-body a { color: var(--primary); text-decoration: underline; }
.help-body code { background: rgba(0,0,0,.06); padding: .1rem .35rem; border-radius: .3rem; font-size: .85em; }
.help-body strong { font-weight: 700; }
.help-img { max-width: 100%; border-radius: .5rem; border: 1px solid var(--uiline); margin: .5rem 0; }

.help-img { max-width:100%; border-radius:.5rem; border:1px solid var(--uiline); margin:.5rem 0; cursor:zoom-in; }
.help-img.zoom { position:fixed; inset:5%; width:90%; z-index:2000; cursor:zoom-out; box-shadow:0 20px 60px rgba(0,0,0,.5); background:#fff; }