/* Shared by the phone upload page and the dashboard: colours, type, and the basic pieces
   (buttons, fields, cards, chips, tables, toasts, dialogs). Page files add their own layout on top.
   Font: Almarai (Boutros International, SIL Open Font License, almarai-OFL.txt), from github.com/google/fonts
   ofl/almarai, converted to woff2 with every glyph kept (Arabic joining needs the whole font). */
@font-face { font-family: "Almarai"; src: url("/static/almarai-300.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Almarai"; src: url("/static/almarai-400.woff2") format("woff2"); font-weight: 400 500; font-display: swap; }
@font-face { font-family: "Almarai"; src: url("/static/almarai-700.woff2") format("woff2"); font-weight: 600 700; font-display: swap; }
@font-face { font-family: "Almarai"; src: url("/static/almarai-800.woff2") format("woff2"); font-weight: 800 900; font-display: swap; }

/* "Inkwell": blue-black ink, paper-coloured text, and fresh-ink blue for the one active thing. Dark is the
   dashboard's default; ui.js sets data-theme. The light theme is paper with the same inks. --card, --text and
   --primary keep their old names so every screen restyles itself. */
:root {
  color-scheme: dark;
  --bg: #0E1220;            /* ink */
  --card: #151A2B;          /* panels */
  --panel-2: #1C2236;       /* inner panels, fields, table heads */
  --line: #2A3148;
  --topbar: #0A0D18;
  --text: #EFEAE0;          /* paper */
  --muted: #A7A398;
  --rule: rgb(239 234 224 / 30%);  /* the ruled line the home headline is written on */
  --accent: #7C93FF;        /* fresh ink: the one active thing (current tab, focus, selection) */
  --primary: #EFEAE0;       /* primary buttons are filled with paper */
  --primary-text: #0E1220;
  --primary-soft: rgb(124 147 255 / 9%);
  --link: #EFEAE0;           /* links are paper, underlined with the ruled line; blue only when pointed at */
  --progress: #79D49A;      /* pages in: progress bars, accepted bars in charts */
  --mark-bad: #FF8A80;      /* rejected pages in charts: told apart from --progress by colour-blind readers too */
  --neutral-bar: #8E8B84;   /* a bar that is only a share (teams), not a status */
  --train: #43C6A8; --val: #B59CF7; --test: #E9A84C;
  --ok: #79D49A; --ok-bg: rgb(121 212 154 / 13%);
  --bad: #FF8A80; --bad-bg: rgb(255 138 128 / 13%);
  --busy: #F2C35B; --busy-bg: rgb(242 195 91 / 13%);
  --info: #A9B8FF; --info-bg: rgb(124 147 255 / 14%);
  --thumb-paper: #EFEAE0;   /* the frame of a page photo */
  --shadow: 0 1px 2px rgb(3 5 12 / 40%);
  --shadow-pop: 0 18px 48px rgb(3 5 12 / 55%);
  --backdrop: rgb(5 7 14 / 66%);
  --radius: 12px; --radius-sm: 8px; --radius-lg: 14px;
  /* one spacing scale for every page: 4 8 12 16 20 24 32 48 */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s7: 32px; --s8: 48px;
  --pad-card: 20px 24px;
  --font: "Almarai", system-ui, "Segoe UI", Tahoma, "Noto Sans Arabic", sans-serif;
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #F3F1EC; --card: #FFFFFF; --panel-2: #ECE9E2; --line: #DCD7CC; --topbar: #FFFFFF;
  --text: #141A2E; --muted: #5E5B53; --rule: rgb(20 26 46 / 22%); --accent: #3149C9;
  --primary: #141A2E; --primary-text: #FFFFFF; --primary-soft: rgb(49 73 201 / 7%); --link: #141A2E; --progress: #1E7A4A;
  --mark-bad: #B42A2A; --neutral-bar: #8A867C;
  --train: #0E8A6F; --val: #6A4FC4; --test: #A86400;
  --ok: #17663F; --ok-bg: #DDF3E6; --bad: #A41E26; --bad-bg: #FCE3E4; --busy: #7A5300; --busy-bg: #FFF1D2;
  --info: #2F45B8; --info-bg: #E6EAFB;
  --thumb-paper: #FFFFFF;
  --shadow: 0 1px 2px rgb(20 26 46 / 8%);
  --shadow-pop: 0 18px 48px rgb(20 26 46 / 18%);
  --backdrop: rgb(20 26 46 / 40%);
}
@media print {  /* paper is always light: hand-outs, previews */
  :root, :root[data-theme] {
    color-scheme: light;
    --bg: #FFFFFF; --card: #FFFFFF; --panel-2: #F2F1EE; --line: #CFCBC2; --text: #000000; --muted: #444444; --topbar: #FFFFFF;
    --primary: #000000; --primary-text: #FFFFFF; --link: #000000;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: color-mix(in oklab, var(--muted) 45%, transparent) transparent; }
input, textarea { caret-color: var(--accent); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.55 var(--font);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { line-height: 1.25; margin: 0; font-weight: 800; }
a { color: var(--link); text-underline-offset: 3px; text-decoration-color: color-mix(in oklab, var(--link) 45%, transparent); }
a:hover, a:focus-visible { color: var(--accent); text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::selection { background: color-mix(in oklab, var(--accent) 35%, transparent); }
.muted { color: var(--muted); font-weight: 400; }
.small { font-size: 14px; margin: 0; }
.ltr { direction: ltr; unicode-bidi: isolate; }
/* Mixed Arabic + English text (texts, references, annotations): every line takes its own direction from its first
   strong character and wraps with its own word order. Labels and other UI text are left as they are. */
.bidi, textarea:not(.ltr):not([dir="ltr"]), pre.target:not(.ltr), .ly-ref > div { unicode-bidi: plaintext; text-align: start; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.92em; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* icons (ui.js): sized by the text around them; ones that point along the reading direction flip in Arabic */
.i { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.2em; }
[dir="rtl"] .i-flip { transform: scaleX(-1); }

.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--pad-card); box-shadow: var(--shadow);
}
.error { color: var(--bad); background: var(--bad-bg); border-radius: var(--radius-sm); padding: 10px 14px; margin: 0; }
.note { color: var(--busy); background: var(--busy-bg); border-radius: var(--radius-sm); padding: 10px 14px; margin: 0; }

/* buttons */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 42px; padding: 8px 18px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--panel-2); color: var(--text); font: inherit; font-weight: 700; cursor: pointer;
  text-decoration: none; -webkit-tap-highlight-color: transparent; user-select: none; white-space: nowrap;
  transition: background-color .15s, border-color .15s, color .15s;
}
.btn:hover { border-color: var(--muted); }
.btn.primary { background: var(--primary); border-color: var(--primary); color: var(--primary-text); }
.btn.primary:hover { filter: brightness(1.08); }
.btn.danger { color: var(--bad); border-color: color-mix(in oklab, var(--bad) 60%, transparent); background: transparent; }
.btn.danger.solid { background: var(--bad); border-color: var(--bad); color: var(--bg); }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.ghost:hover { background: var(--panel-2); }
.btn.small { min-height: 34px; padding: 4px 14px; font-size: 14px; border-radius: var(--radius-sm); gap: 6px; }
.btn:active { transform: scale(.98); }
.btn:disabled, .btn.disabled { opacity: .45; pointer-events: none; }
.link {
  background: none; border: 0; padding: 4px; color: var(--link); font: inherit;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
  text-decoration-color: color-mix(in oklab, var(--link) 45%, transparent);
}
.link:hover, .link:focus-visible { color: var(--accent); text-decoration-color: currentColor; }
.icon-btn {
  display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: 10px;
  border: 1px solid transparent; background: transparent; color: var(--muted); cursor: pointer; font-size: 18px;
}
.icon-btn:hover { color: var(--text); background: var(--panel-2); }

/* form fields */
label { font-weight: 700; }
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="search"], input[type="url"], input[type="date"], select, textarea {
  width: 100%; font: inherit; padding: 10px 14px; border-radius: 10px; min-height: 42px;
  border: 1px solid var(--line); background: var(--panel-2); color: var(--text);
}
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .8; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent; }
textarea { min-height: 96px; resize: vertical; }
input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; accent-color: var(--accent); vertical-align: middle; }

/* status chips: a label always says the state; colour only helps */
.chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px;
  font-size: 13px; font-weight: 700; background: var(--panel-2); color: var(--text); white-space: nowrap;
}
.chip .i { width: 1em; height: 1em; }
.chip.ok, .chip.bad, .chip.busy, .chip.info { box-shadow: inset 0 0 0 1px color-mix(in oklab, currentColor 38%, transparent); }
.chip.ok { background: var(--ok-bg); color: var(--ok); }
.chip.bad { background: var(--bad-bg); color: var(--bad); }
.chip.busy { background: var(--busy-bg); color: var(--busy); }
.chip.info { background: var(--info-bg); color: var(--info); }
/* rounds are not statuses: a neutral chip with the round's own colour dot */
.chip.round::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--rc, var(--muted)); }
.chip.r-train { --rc: var(--train); }
.chip.r-val { --rc: var(--val); }
.chip.r-test { --rc: var(--test); }

/* tables */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
table.data { width: 100%; border-collapse: collapse; font-size: 15px; }
table.data th, table.data td { padding: 12px 16px; text-align: start; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.data th { padding-block: 11px; font-size: 13px; color: var(--muted); font-weight: 700; background: var(--panel-2); white-space: nowrap; }
table.data th:first-child, table.data td:first-child { padding-inline-start: 20px; }
table.data th:last-child, table.data td:last-child { padding-inline-end: 20px; }
table.data tr:last-child td { border-bottom: 0; }
table.data tr.clickable { cursor: pointer; }
table.data tr.clickable:hover td { background: var(--primary-soft); }

/* on a phone a data table is a list of small cards, one per row, each value under its column's name (ui.js) */
@media (max-width: 760px) {
  table.data[data-stacked="cards"], table.data[data-stacked="cards"] tbody, table.data[data-stacked="cards"] tr { display: block; width: 100%; }
  table.data[data-stacked="cards"] thead { display: none; }
  table.data[data-stacked="cards"] tr { padding: 14px 16px; border-bottom: 1px solid var(--line); display: grid; gap: 6px; }
  table.data[data-stacked="cards"] tr:last-child { border-bottom: 0; }
  table.data[data-stacked="cards"] td {
    display: grid; grid-template-columns: minmax(96px, 38%) 1fr; gap: 12px; align-items: center;
    padding: 0; border: 0; text-align: start; min-width: 0;
  }
  table.data[data-stacked="cards"] td::before { content: attr(data-label); color: var(--muted); font-size: 13px; font-weight: 700; }
  table.data[data-stacked="cards"] td[data-label=""] { grid-template-columns: 1fr; }
  table.data[data-stacked="cards"] td[data-label=""]::before { display: none; }
  table.data[data-stacked="cards"] td:first-child { grid-template-columns: 1fr; font-size: 16px; padding-bottom: 2px; }
  table.data[data-stacked="cards"] td:first-child::before { display: none; }
  table.data[data-stacked="cards"] td:empty { display: none; }
  table.data[data-stacked="cards"] td.num { text-align: start; }
  table.data[data-stacked="cards"] .progress-cell, table.data[data-stacked="cards"] .pages { max-width: none; }
}

/* the photo viewer (ui.js): the photo fits the drawer; a click shows it at full size */
.pv { display: grid; place-items: center; background: var(--panel-2); border-radius: var(--radius); overflow: auto; max-height: 74dvh; }
.pv img { max-width: 100%; max-height: 74dvh; display: block; cursor: zoom-in; }
.pv.zoom { place-items: start; }
.pv.zoom img { max-width: none; max-height: none; cursor: zoom-out; }
.pv-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

/* progress bar */
.bar { height: 6px; background: var(--panel-2); border-radius: 3px; overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; background: var(--progress); border-radius: 3px; transition: width .25s; }

/* disclosure: the icon set's chevron instead of the browser's triangle (pointing along the reading direction) */
summary:not(.tab) { list-style: none; display: flex; align-items: center; gap: 8px; cursor: pointer; }
summary:not(.tab)::-webkit-details-marker { display: none; }
summary:not(.tab)::before {
  content: ""; width: 14px; height: 14px; flex: none; background: currentColor; transition: transform .15s;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}
[dir="rtl"] summary:not(.tab)::before { transform: scaleX(-1); }
details[open] > summary:not(.tab)::before { transform: rotate(90deg); }

/* the language switch */
.lang-switch { font-weight: 700; }

/* dialogs: the page's #modal and ui.js confirms (modal <dialog>s in the top layer) */
dialog { color: var(--text); }
dialog:modal { overscroll-behavior: contain; }
dialog::backdrop { background: var(--backdrop); overflow: hidden; overscroll-behavior: contain; }
.confirm-dialog {
  width: min(440px, calc(100% - 32px)); padding: 0; border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--card); box-shadow: var(--shadow-pop);
}
.confirm-box { display: grid; gap: 14px; padding: 20px; margin: 0; }
.confirm-box h2 { font-size: 18px; }
.confirm-msg { white-space: pre-line; color: var(--text); }
.confirm-acts { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }

/* drawers (ui.js): a side panel from the end of the reading direction */
.drawer {
  position: fixed; inset-block: 0; inset-inline: auto 0; margin: 0; width: min(520px, 100vw); height: 100dvh;
  max-width: none; max-height: none; padding: 0; border: 0; border-inline-start: 1px solid var(--line);
  background: var(--card); box-shadow: var(--shadow-pop); grid-template-rows: auto 1fr;
}
.drawer[open] { display: grid; animation: drawer-in .22s ease-out; }
[dir="rtl"] .drawer[open] { animation-name: drawer-in-rtl; }
.drawer.wide { width: min(880px, 100vw); }
.drawer-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px 14px 20px; border-bottom: 1px solid var(--line); }
.drawer-head h2 { flex: 1; font-size: 18px; }
.drawer-body { overflow: auto; overscroll-behavior: contain; padding: 18px 20px 32px; display: grid; gap: 16px; align-content: start; }
@keyframes drawer-in { from { transform: translateX(28px); opacity: 0; } }
@keyframes drawer-in-rtl { from { transform: translateX(-28px); opacity: 0; } }

/* toasts (ui.js): bottom of the screen, above everything */
.toasts {
  position: fixed; inset: auto 0 calc(16px + env(safe-area-inset-bottom)); margin: 0 auto; width: min(460px, calc(100% - 24px));
  padding: 0; border: 0; background: transparent; overflow: visible; display: grid; gap: 8px; z-index: 60;
}
.toasts:not(:popover-open):empty { display: none; }
.toast {
  display: flex; align-items: flex-start; gap: 10px; padding: 12px 12px 12px 14px; border-radius: var(--radius);
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-pop); color: var(--text);
  animation: toast-in .2s ease-out;
}
.toast > .i { margin-top: 2px; font-size: 18px; }
.toast.ok > .i { color: var(--ok); }
.toast.bad > .i { color: var(--bad); }
.toast.warn > .i { color: var(--busy); }
.toast.info > .i { color: var(--info); }
.toast-msg { flex: 1; white-space: pre-line; unicode-bidi: plaintext; text-align: start; }  /* each line keeps its own direction */
.toast-x { border: 0; background: none; color: var(--muted); cursor: pointer; padding: 2px; font-size: 16px; }
.toast.leaving { opacity: 0; transform: translateY(6px); transition: opacity .18s, transform .18s; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

/* "Qalam was updated · Reload" (ui.js): the server restarted with other files; small, under the top bar (ui.js sets
   its top), never in the way */
.update-bar {
  position: fixed; top: calc(8px + env(safe-area-inset-top)); inset-inline: 0; margin: 0 auto; z-index: 65;
  width: min(460px, calc(100% - 24px)); display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 14px;
  border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-pop);
  color: var(--text); animation: update-in .2s ease-out;
}
[dir="rtl"] .update-bar { padding: 8px 14px 8px 8px; }
.update-bar > .i { color: var(--info); font-size: 18px; }
.update-msg { flex: 1; min-width: 0; font-weight: 700; }
.update-x { border: 0; background: none; color: var(--muted); cursor: pointer; padding: 6px; font-size: 16px; display: grid; place-items: center; }
@keyframes update-in { from { opacity: 0; transform: translateY(-8px); } }

/* loading placeholders (ui.js): appear only when loading takes more than a moment */
.skel { display: grid; gap: 16px; animation: skel-in .2s .15s both; }
.skel-row { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.skel-block { display: grid; gap: 12px; padding: 18px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); }
.skel-block.tall { padding: 24px; }
.skel-line { display: block; height: 12px; border-radius: 6px; background: var(--panel-2); }
.skel-line.big { height: 24px; }
.skel-line.thick { height: 18px; }
@keyframes skel-in { from { opacity: 0; } }

/* the logo's marks (ui.js UI.mark, static/logo/): the loop while waiting for an answer, the fast writer while work
   runs, the mascot in big friendly places. Each is its own white tile, like the header's logo, beside its words. */
.mark { display: block; flex: none; }
.waiting, .working { display: flex; align-items: center; gap: var(--s3); }

/* a number that just changed (UI.tick) */
.changed { animation: changed .25s ease-out; border-radius: 4px; }
@keyframes changed { from { background: color-mix(in oklab, var(--accent) 28%, transparent); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}