/* ExamCommittee: right-to-left Arabic UI (spec 05 UI-01). No external CSS framework, no web fonts from the internet. */
:root {
    --ink: #1d2733;
    --muted: #5d6b7a;
    --line: #d5dce4;
    --bg: #f4f6f9;
    --panel: #ffffff;
    --accent: #1f5f8b;
    --accent-ink: #ffffff;
    --ok: #1e7b4f;
    --warn: #a35a00;
    --error: #b42318;
    --lifted: #7a3fb0;
    font-family: "Sakkal Majalla", "Traditional Arabic", "Segoe UI", "Noto Naskh Arabic", "Amiri", Tahoma, Arial, sans-serif;
    font-size: 17px;
    color: var(--ink);
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); }
body { direction: rtl; text-align: right; }
a { color: var(--accent); }
h1 { font-size: 1.6rem; margin: 0 0 1rem; }
h2 { font-size: 1.25rem; margin: 1.2rem 0 .6rem; }

.shell { min-height: 100vh; display: flex; flex-direction: column; }
.topbar { display: flex; gap: 1rem; align-items: center; padding: .6rem 1.2rem; background: var(--accent); color: var(--accent-ink); }
.topbar .brand { color: var(--accent-ink); font-weight: bold; text-decoration: none; margin-inline-end: auto; }
.topbar .user { opacity: .9; }
.topbar .link, .topbar a { color: var(--accent-ink); background: none; border: none; cursor: pointer; font: inherit; text-decoration: underline; }
.inline { display: inline; margin: 0; }
.body { display: flex; flex: 1; }
.sidebar { width: 14rem; background: var(--panel); border-inline-start: 1px solid var(--line); padding: 1rem .5rem; }
.content { flex: 1; padding: 1.2rem 1.6rem; overflow-x: auto; }
.nav { list-style: none; margin: 0; padding: 0; }
.nav li a { display: block; padding: .45rem .8rem; border-radius: .3rem; text-decoration: none; color: var(--ink); }
.nav li a.active { background: var(--accent); color: var(--accent-ink); }
.nav .group { margin-top: .8rem; color: var(--muted); font-size: .85rem; padding: 0 .8rem; }

.account-page { min-height: 100vh; display: grid; place-items: center; }
.account-card { background: var(--panel); padding: 2rem 2.4rem; border-radius: .6rem; box-shadow: 0 2px 12px rgba(0,0,0,.08); width: min(28rem, 92vw); }
.account-card .brand { font-size: 1.4rem; color: var(--accent); }

.field { margin-bottom: .9rem; display: flex; flex-direction: column; gap: .3rem; }
input, select, textarea { font: inherit; padding: .35rem .5rem; border: 1px solid var(--line); border-radius: .3rem; background: #fff; }
input[type=checkbox] { width: auto; }
button { font: inherit; padding: .35rem .9rem; border: 1px solid var(--line); border-radius: .3rem; background: #fff; cursor: pointer; }
button.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
button.danger { background: var(--error); color: #fff; border-color: var(--error); }
button:disabled { opacity: .5; cursor: not-allowed; }
.validation-message { color: var(--error); font-size: .9rem; }
.hint { color: var(--muted); font-size: .9rem; }
.check { display: inline-flex; gap: .3rem; align-items: center; margin-inline-end: 1rem; }
fieldset { border: 1px solid var(--line); border-radius: .4rem; margin: .6rem 0; }

.alert { padding: .6rem .9rem; border-radius: .4rem; margin: .6rem 0; }
.alert-error { background: #fdecea; color: var(--error); }
.alert-ok { background: #e7f5ee; color: var(--ok); }
.alert-info { background: #e8f1f8; color: var(--accent); }
.alert-warn { background: #fff4e5; color: var(--warn); }
.badge { display: inline-block; padding: 0 .4rem; border-radius: .6rem; background: #eef2f6; color: var(--muted); font-size: .8rem; margin-inline-start: .3rem; }
.badge.default { background: #eef2f6; }
.badge.year { background: #e8f1f8; color: var(--accent); }
.badge.stage { background: #fff4e5; color: var(--warn); }

.panel { background: var(--panel); border: 1px solid var(--line); border-radius: .5rem; padding: 1rem 1.2rem; margin: 1rem 0; }
.filters { display: flex; flex-wrap: wrap; gap: .8rem; align-items: end; margin-bottom: 1rem; }
.filters label { display: flex; flex-direction: column; gap: .2rem; font-size: .9rem; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .8rem; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: .5rem; padding: .8rem 1rem; }
.card .value { font-size: 1.6rem; font-weight: bold; }
.card.bad .value { color: var(--error); }

table.grid { border-collapse: collapse; background: var(--panel); width: 100%; }
table.grid th, table.grid td { border: 1px solid var(--line); padding: .3rem .5rem; vertical-align: middle; }
table.grid th { background: #eef2f6; font-weight: normal; color: var(--muted); }
table.grid td.num, table.grid th.num { text-align: center; }
table.grid td.json { font-family: Consolas, monospace; font-size: .8rem; max-width: 22rem; overflow-wrap: anywhere; }
table.grid tr.readonly td { background: #f7f7f7; color: var(--muted); }
table.grid tr.failed td.final { color: var(--error); font-weight: bold; }
table.grid tr.lifted td.final { color: var(--lifted); font-weight: bold; }
table.grid td.reduced { color: var(--warn); font-weight: bold; }
table.grid td.actions { white-space: nowrap; }
table.grid input.cell { width: 5.2rem; text-align: center; }
table.grid input.cell.invalid { border-color: var(--error); background: #fdecea; }
table.grid input.cell.saved { border-color: var(--ok); }

.context-bar { display: flex; gap: 1rem; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: .5rem; padding: .5rem 1rem; margin-bottom: 1rem; }
.context-bar label { display: flex; gap: .4rem; align-items: center; }
.tabs { display: flex; gap: .3rem; margin-bottom: .8rem; }
.tabs button.active { background: var(--accent); color: var(--accent-ink); }
.histogram { display: flex; align-items: end; gap: .3rem; height: 9rem; padding: .5rem; background: var(--panel); border: 1px solid var(--line); }
.histogram .bar { flex: 1; background: var(--accent); position: relative; min-height: 2px; }
.histogram .bar span { position: absolute; top: -1.3rem; inset-inline: 0; text-align: center; font-size: .8rem; }
.histogram-labels { display: flex; gap: .3rem; padding: 0 .5rem .8rem; }
.histogram-labels span { flex: 1; text-align: center; font-size: .75rem; color: var(--muted); }
table.grid tr.selected td, table.grid tr.changed td.after { background: #e8f1f8; font-weight: bold; }
.confirm-box button { margin-inline-start: .5rem; }

@media print {
    .topbar, .sidebar, .context-bar, button { display: none !important; }
    .content { padding: 0; }
}