/* ID Verification — shared shell for the capture console and the review dashboard.
   Palette taken from the Egypt Healthcare Authority mark: navy wordmark, teal and
   green in the seal, taupe on the ring.
   Light only. */

:root {
  /* neutrals carrying a trace of the mark's navy */
  --ground:      #f2f5f8;
  --surface:     #ffffff;
  --surface-sunk:#e9eef4;
  --line:        #d9e1ea;
  --line-strong: #bcc9d8;
  --ink:         #10233f;
  --ink-soft:    #45586f;
  --ink-faint:   #6f8296;

  /* brand */
  --navy:        #12315c;
  --teal:        #16becf;
  --leaf:        #7bcb4a;
  --taupe:       #9e8163;

  /* one accent, spent sparingly */
  --accent:      #12315c;
  --accent-ink:  #ffffff;
  --accent-wash: #e4eef5;

  /* semantic, separate from the accent */
  --ok:          #1f6b4d;
  --ok-wash:     #e2efe8;
  --warn:        #8a5a12;
  --warn-wash:   #f6ecd9;
  --crit:        #9e3529;
  --crit-wash:   #f7e4e1;

  --radius:   10px;
  --radius-s: 6px;
  --shadow:   0 1px 2px rgba(20, 27, 40, .06), 0 8px 24px -16px rgba(20, 27, 40, .3);

  --font-display: "IBM Plex Serif", Georgia, "Times New Roman", serif;
  --font-body:    "IBM Plex Sans", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
}

:root { color-scheme: light; }

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 15px/1.55 var(--font-body);
  -webkit-font-smoothing: antialiased;
}

/* ---------- shell ---------- */

.topbar {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 20;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 12px 20px;
  flex-wrap: wrap;
}

.brand { display: flex; align-items: center; gap: 12px; margin-inline-end: auto; min-width: 0; }
.brand img { height: 84px; width: auto; display: block; border-radius: 4px; }
.brand .divider { width: 1px; align-self: stretch; background: var(--line); margin: 2px 0; }
.brand .lockup { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.brand strong {
  font: 600 17px/1.2 var(--font-display);
  letter-spacing: -.01em;
}
.brand .org {
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* A hairline in the seal's own colours, so the brand reads even before the
   logo file is dropped in. */
.topbar { border-bottom: 1px solid var(--line); box-shadow: inset 0 -3px 0 -1px transparent; }
.brand-rule {
  height: 3px;
  background: linear-gradient(90deg, var(--navy) 0 42%, var(--teal) 42% 78%, var(--leaf) 78% 92%, var(--taupe) 92% 100%);
}

nav { display: flex; gap: 4px; }
nav a {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 14px;
  padding: 5px 11px;
  border-radius: 99px;
}
nav a:hover { background: var(--surface-sunk); color: var(--ink); }
nav a[aria-current="page"] { background: var(--accent-wash); color: var(--accent); font-weight: 600; }

.wrap {
  max-width: 1060px;
  margin: 0 auto;
  padding: 28px 20px calc(72px + env(safe-area-inset-bottom, 0px));
}
.wrap.wide { max-width: none; }   /* dashboard: use the whole screen for the table */

.page-head { margin-bottom: 22px; }
.page-head h1 {
  font: 600 26px/1.25 var(--font-display);
  margin: 0 0 4px;
  text-wrap: balance;
  letter-spacing: -.015em;
}
.page-head p { margin: 0; color: var(--ink-soft); max-width: 64ch; }

/* ---------- surfaces ---------- */

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
}

.stack { display: flex; flex-direction: column; gap: 16px; }

/* A step is a panel with its ordinal in the gutter — the console really is a
   sequence, so the numbering carries information rather than decorating. */
.step { display: grid; grid-template-columns: 30px 1fr; gap: 16px; align-items: start; }
.step > .ord {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 99px;
  background: var(--surface-sunk);
  color: var(--ink-soft);
  font: 600 13px/1 var(--font-mono);
  border: 1px solid var(--line);
  margin-top: 2px;
}
.step h2 {
  font: 600 15px/1.3 var(--font-body);
  margin: 0 0 2px;
}
.step .endpoint {
  font: 12px/1.4 var(--font-mono);
  color: var(--ink-faint);
  margin: 0 0 14px;
  word-break: break-all;
}
.step .panel { padding: 16px; }

/* ---------- controls ---------- */

label { display: block; font-size: 12px; font-weight: 600; color: var(--ink-soft); margin-bottom: 5px; }

input[type="text"], input[type="tel"], input[type="password"], input[type="file"], select, textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-s);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}
input[type="text"], input[type="tel"], input[type="password"], textarea, select { font-size: 14px; }
input.mono { font-family: var(--font-mono); letter-spacing: .02em; }
textarea { min-height: 62px; resize: vertical; }

input:focus-visible, select:focus-visible, textarea:focus-visible,
button:focus-visible, a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

button {
  font: 600 14px/1 var(--font-body);
  padding: 9px 15px;
  border-radius: var(--radius-s);
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
  cursor: pointer;
}
button:hover:not(:disabled) { filter: brightness(1.07); }
button:disabled { opacity: .45; cursor: default; }

button.ghost { background: transparent; color: var(--accent); }
button.ghost:hover:not(:disabled) { background: var(--accent-wash); filter: none; }

button.quiet {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--ink-soft);
  font-weight: 500;
}
button.quiet:hover:not(:disabled) { background: var(--surface-sunk); color: var(--ink); filter: none; }

button.small { padding: 5px 10px; font-size: 13px; }

.field-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.field-row > * { flex: 1 1 190px; min-width: 0; }
.field-row > .shrink { flex: 0 0 auto; }

.hint { color: var(--ink-faint); font-size: 13px; margin: 10px 0 0; }
.hint:first-child { margin-top: 0; margin-bottom: 12px; }

/* ---------- status vocabulary ---------- */

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 9px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 600;
  background: var(--surface-sunk);
  color: var(--ink-soft);
  white-space: nowrap;
}
.pill::before {
  content: ""; width: 6px; height: 6px; border-radius: 99px;
  background: currentColor;
}
.pill.ok   { background: var(--ok-wash);   color: var(--ok); }
.pill.warn { background: var(--warn-wash); color: var(--warn); }
.pill.crit { background: var(--crit-wash); color: var(--crit); }
.pill.flat::before { display: none; }

.flag {
  display: inline-block;
  font: 11px/1.6 var(--font-mono);
  padding: 1px 7px;
  border-radius: var(--radius-s);
  background: var(--warn-wash);
  color: var(--warn);
  margin: 2px 4px 2px 0;
}

.status-line { font-size: 13px; margin-top: 12px; color: var(--ink-soft); min-height: 1em; }
.status-line.err { color: var(--crit); }
.status-line.good { color: var(--ok); }

pre.json {
  background: var(--surface-sunk);
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 12px;
  border-radius: var(--radius-s);
  margin: 12px 0 0;
  overflow-x: auto;
  font: 12px/1.6 var(--font-mono);
  white-space: pre-wrap;
  word-break: break-word;
}

/* hidden must win over any display rule below, or empty images show their alt text */
[hidden] { display: none !important; }

img.evidence {
  display: block;
  max-width: 100%;
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--surface-sunk);
}

/* ---------- the number itself ----------
   C · YYMMDD · GG · SSSS · K. Every segment on the card means something, so the
   dashboard shows the number the way the card is actually laid out. */

.nid { display: flex; gap: 6px; flex-wrap: wrap; align-items: flex-end; margin-top: 4px; }
.nid .seg { display: flex; flex-direction: column; gap: 3px; }
.nid .seg b {
  font: 600 18px/1 var(--font-mono);
  letter-spacing: .06em;
  padding: 7px 9px;
  border-radius: var(--radius-s);
  background: var(--surface-sunk);
  border: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}
.nid .seg i {
  font: 500 9px/1 var(--font-body);
  font-style: normal;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-align: center;
}
.nid .seg.key b { border-color: var(--accent); color: var(--accent); }

/* ---------- tables ---------- */

.table-scroll { overflow-x: auto; margin: 0 -18px; padding: 0 18px; }

table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
thead th {
  text-align: left;
  font: 600 11px/1.4 var(--font-body);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: 0 12px 8px 0;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
tbody td {
  padding: 10px 12px 10px 0;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
tbody tr.selected { background: var(--accent-wash); }
tbody tr.clickable { cursor: pointer; }
tbody tr.clickable:hover { background: var(--surface-sunk); }
td.mono, .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
td.num { text-align: right; font-variant-numeric: tabular-nums; }

.empty { color: var(--ink-faint); padding: 28px 0; text-align: center; font-size: 14px; }

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

/* ---------- dashboard ---------- */

/* Counts first, then the list, then the one case you clicked. */
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}
.tile {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
}
.tile:hover { border-color: var(--line-strong); }
.tile[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-wash); }
.tile .n {
  font: 600 24px/1 var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.tile .k {
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
/* The severity stripe is the only place a tile spends color. */
.tile.ok   .n { color: var(--ok); }
.tile.warn .n { color: var(--warn); }
.tile.crit .n { color: var(--crit); }

.dash {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
@media (max-width: 900px) {
  .dash { grid-template-columns: minmax(0, 1fr); }
}

.detail-pane { position: sticky; top: calc(96px + env(safe-area-inset-top, 0px)); }
@media (max-width: 900px) { .detail-pane { position: static; } }

.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 13.5px; margin-top: 14px; }
.kv dt { color: var(--ink-faint); }
.kv dd { margin: 0; }

.rule { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }

.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 14px; }
.toolbar > * { flex: 0 1 auto; }
.toolbar .grow { flex: 1 1 160px; }


@media (max-width: 560px) {
  .brand img { height: 64px; }
  .brand .divider { display: none; }
}

/* ---------- mode banner ---------- */
.banner {
  border-radius: var(--radius-s);
  padding: 10px 12px;
  font-size: 13px;
  margin-bottom: 18px;
  border: 1px solid transparent;
}
.banner.warn { background: var(--warn-wash); color: var(--warn); border-color: currentColor; }
.banner.ok   { background: var(--ok-wash);   color: var(--ok);   border-color: currentColor; }

/* ---------- spend summary ---------- */
/* Three readings of the same thing — money, tokens, model — so the row reads as one
   object rather than three cards. */
.spend {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 18px;
  margin-bottom: 18px;
}
.spend > div { display: flex; flex-direction: column; gap: 3px; }
.spend .k {
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.spend .n { font: 600 20px/1.2 var(--font-mono); font-variant-numeric: tabular-nums; }
.spend .sub { font-size: 12px; color: var(--ink-faint); }

/* ---------- employee upload and sign-in: one narrow column, phone first ---------- */
.wrap.narrow { max-width: 520px; }
.form-stack { display: grid; gap: 16px; }
.form-stack label small { font-weight: 400; color: var(--ink-faint); }
.form-stack button[type="submit"] { width: 100%; padding-block: 14px; font-size: 1rem; }
.ar { font-family: var(--font-body); color: var(--ink-faint); font-weight: 400; }
.result { margin-top: 16px; padding: 14px 16px; border-radius: var(--radius-s); background: var(--surface-sunk); }
.result.ok   { background: var(--ok-wash);   color: var(--ok); }
.result.warn { background: var(--warn-wash); color: var(--warn); }
.result.crit { background: var(--crit-wash); color: var(--crit); }
.who { font-size: .85rem; color: var(--ink-soft); display: flex; gap: 10px; align-items: center; }
.form-stack input { font-size: 16px; }   /* below 16px, iOS zooms the page on focus */

/* ---------- employee page: Arabic, right to left ---------- */
body.employee {
  --font-body:    "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  --font-display: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  font-family: var(--font-body);
}
body.employee .page-head h1 { font-weight: 700; letter-spacing: 0; }
body.employee .page-head p,
body.employee .result { line-height: 1.8; }
body.employee label { font-size: 15px; }
body.employee .brand img { height: 96px; }
body.employee .topbar { justify-content: space-between; }
body.employee input[dir="ltr"] { text-align: right; }
body.employee input[dir="ltr"]:placeholder-shown { text-align: right; }
@media (max-width: 560px) {
  body.employee .brand img { height: 72px; }
}

/* ---------- photo picker: camera or gallery ---------- */
.visually-hidden { position: absolute; inset-inline-start: 0; top: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; opacity: 0; }
.photo-pick { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
@media (max-width: 420px) { .photo-pick { grid-template-columns: 1fr; } }
.pick-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 52px; padding: 10px 12px; margin: 0;
  border: 1.5px solid var(--line-strong); border-radius: var(--radius-s);
  background: var(--surface); color: var(--ink);
  font-size: 15px; font-weight: 600; text-align: center; cursor: pointer;
}
.pick-btn.primary { background: var(--accent-wash); border-color: var(--accent); color: var(--accent); }
.pick-btn:active { transform: translateY(1px); }
.pick-btn.disabled { opacity: .5; pointer-events: none; }

/* ---------- phones: nothing may be wider than the screen ---------- */
html, body { max-width: 100%; overflow-x: hidden; }
img { max-width: 100%; height: auto; }
body.employee .form-stack > div { position: relative; min-width: 0; }
body.employee .form-stack input { max-width: 100%; }
body.employee .pick-btn { white-space: normal; line-height: 1.3; overflow-wrap: anywhere; }
body.employee .page-head h1,
body.employee .page-head p,
body.employee .result,
body.employee .status-line { overflow-wrap: anywhere; }
@media (max-width: 560px) {
  body.employee .topbar { padding: 10px 16px; justify-content: center; }
  body.employee .wrap { padding-left: 16px; padding-right: 16px; padding-top: 20px; }
  body.employee .page-head h1 { font-size: 22px; }
  body.employee .panel { padding: 14px; }
}

/* ---------- employee page: the form block sits in the middle of the screen ---------- */
body.employee { min-height: 100dvh; display: flex; flex-direction: column; }
body.employee main.wrap {
  flex: 1;
  width: 100%;
  max-width: 520px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 24px;
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}
body.employee .page-head { text-align: center; }
body.employee .page-head p { margin-inline: auto; }
body.employee .topbar .brand { margin-inline: auto; justify-content: center; }

/* ---------- success popup ---------- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  background: rgba(16, 35, 63, .55);
  animation: fade-in .15s ease-out;
}
.modal {
  width: 100%; max-width: 360px;
  background: var(--surface); border-radius: 14px;
  padding: 28px 22px 22px; text-align: center;
  box-shadow: 0 20px 50px -12px rgba(0, 0, 0, .35);
  animation: pop-in .2s ease-out;
}
.modal-icon {
  width: 64px; height: 64px; margin: 0 auto 14px;
  border-radius: 50%; display: grid; place-items: center;
  background: var(--ok-wash); color: var(--ok);
  font-size: 34px; font-weight: 700; line-height: 1;
}
.modal h2 { margin: 0 0 8px; font-size: 21px; color: var(--ink); }
.modal p  { margin: 0 0 20px; color: var(--ink-soft); line-height: 1.8; }
.modal button { width: 100%; padding-block: 13px; font-size: 16px; }
@keyframes fade-in { from { opacity: 0; } }
@keyframes pop-in  { from { opacity: 0; transform: scale(.94); } }

/* ---------- in-page camera: live view with a card-shaped guide ---------- */
.camera-view { position: fixed; inset: 0; z-index: 200; background: #000; }
.camera-view video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.camera-mask { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
/* Egyptian ID card is ISO/IEC 7810 ID-1: 85.60 × 53.98 mm. The huge shadow dims everything
   outside the frame. */
.card-frame {
  width: min(90vw, calc(62vh * 1.586));
  aspect-ratio: 85.6 / 53.98;
  border: 3px solid #fff;
  border-radius: 14px;
  box-shadow: 0 0 0 200vmax rgba(0, 0, 0, .55);
}
.camera-hint {
  position: absolute; left: 0; right: 0; top: max(24px, env(safe-area-inset-top));
  margin: 0; text-align: center; color: #fff; font-size: 17px; font-weight: 600; line-height: 1.6;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}
.camera-hint small { font-weight: 400; font-size: 14px; opacity: .85; }
.camera-bar {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 18px 28px calc(22px + env(safe-area-inset-bottom));
  display: flex; align-items: center; justify-content: space-between;
}
.camera-shot {
  width: 74px; height: 74px; padding: 0; border-radius: 50%;
  background: #fff; border: 5px solid rgba(255, 255, 255, .45); background-clip: padding-box;
}
.camera-shot:active { transform: scale(.94); }
.camera-close, .camera-spacer { width: 48px; height: 48px; }
.camera-close {
  padding: 0; border-radius: 50%; font-size: 20px; line-height: 1;
  background: rgba(0, 0, 0, .45); color: #fff; border: 0;
}
@media (orientation: landscape) {
  .card-frame { width: min(70vw, calc(50vh * 1.586)); }
}

/* ---------- required fields and per-field errors ---------- */
.req { color: #e11d1d; font-weight: 700; margin-inline-start: 2px; }
.field-error { color: #e11d1d; font-size: 14px; font-weight: 600; line-height: 1.6; margin-top: 6px; }
.field-error:empty { display: none; }
input.invalid { border-color: #e11d1d !important; box-shadow: 0 0 0 3px rgba(225, 29, 29, .15); }
.modal-icon.error { background: #fdecec; color: #e11d1d; }
.modal-icon.error + h2 { color: #e11d1d; }

/* ---------- dashboard live indicator ---------- */
.live { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #9aa5b1; }
.live.on { background: #16a34a; box-shadow: 0 0 0 0 rgba(22, 163, 74, .5); animation: live-pulse 2s infinite; }
@keyframes live-pulse { 70% { box-shadow: 0 0 0 7px rgba(22, 163, 74, 0); } 100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); } }

.nid-cell { white-space: nowrap; letter-spacing: .02em; }
.nid-cell.doubtful { color: #b45309; text-decoration: underline dotted; }

/* ---------- row delete ---------- */
.row-delete {
  padding: 5px 10px; font-size: 12.5px; font-weight: 600;
  background: transparent; color: #c62828; border: 1px solid #f1b5b5; border-radius: 6px;
}
.row-delete:hover:not(:disabled) { background: #fdecec; border-color: #e57373; }