/* MASAR BioTime console. Colours are tokens on :root (light only). */

/* The fonts of MASAR HRMS (src/index.css there): Quicksand for Latin, Al Mohanad for Arabic with Noto Naskh Arabic
   as fallback, Baloo Bhaijaan 2 for the MASAR wordmark. Served from static/fonts. */
@font-face { font-family: "Quicksand Variable"; font-style: normal; font-display: swap; font-weight: 300 700; src: url("fonts/quicksand-latin-wght-normal.woff2") format("woff2-variations"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Quicksand Variable"; font-style: normal; font-display: swap; font-weight: 300 700; src: url("fonts/quicksand-latin-ext-wght-normal.woff2") format("woff2-variations"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Al Mohanad"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/al-mohanad.ttf") format("truetype"); }
@font-face { font-family: "Noto Naskh Arabic Variable"; font-style: normal; font-display: swap; font-weight: 400 700; src: url("fonts/noto-naskh-arabic-arabic-wght-normal.woff2") format("woff2-variations"); unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC; }
@font-face { font-family: "Baloo Bhaijaan 2 Variable"; font-style: normal; font-display: swap; font-weight: 400 800; src: url("fonts/baloo-bhaijaan-2-latin-wght-normal.woff2") format("woff2-variations"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

:root {
  --brand: #0f8ea7;
  --brand-strong: #0b6f83;
  --brand-soft: #cfe7ec;
  --bg: #6f8f96;
  --surface: #e3ecee;
  --surface-2: #d8e4e7;
  --surface-3: #cbdbde;
  --border: #c3d4d8;
  --border-strong: #a8bfc4;
  --text: #1d3a40;
  --text-strong: #12282d;
  --muted: #4e6a70;
  --ok: #15803d;
  --ok-bg: #e8f8ef;
  --warn: #b45309;
  --warn-bg: #fff4e0;
  --bad: #c0263d;
  --bad-bg: #ffeef0;
  --info: #1d63c9;
  --info-bg: #e9f1ff;
  --violet: #6d3fc6;
  --violet-bg: #f1ebff;
  --shadow: 0 1px 2px rgb(18 40 45 / 0.10), 0 10px 26px rgb(18 40 45 / 0.12);
  --radius: 14px;
  --focus: 0 0 0 3px rgb(15 142 167 / 0.35);
  --font-family-en: "Quicksand Variable", "Noto Naskh Arabic Variable", system-ui, "Segoe UI", Tahoma, Arial, sans-serif;
  --font-family-ar: "Quicksand Variable", "Al Mohanad", "Noto Naskh Arabic Variable", "Segoe UI", Tahoma, Arial, sans-serif;
  --font-brand: "Baloo Bhaijaan 2 Variable", "Quicksand Variable", sans-serif;
  --font: var(--font-family-en);
  /* The page itself (sidebar, headings on the page background) */
  --page-ink: #f2f7f8;
  --page-ink-muted: #d9e6e8;
  --side: #587880;
  --field: #f0f5f6;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
:root[lang="ar"] { --font: var(--font-family-ar); }
body { background: var(--bg); color: var(--text); font: 15px/1.55 var(--font); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--brand); }
code, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9em; }
:focus-visible { outline: none; box-shadow: var(--focus); }
[hidden] { display: none !important; }

.boot { display: grid; place-items: center; min-height: 100vh; }
.spinner { width: 28px; height: 28px; border: 3px solid var(--border); border-top-color: var(--brand); border-radius: 50%; animation: spin 0.8s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Layout */
.shell { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }
.side { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 4px; padding: 18px 14px; background: var(--surface); border-inline-end: 1px solid var(--border); overflow-y: auto; }
.brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 18px; }
.brand img { width: 36px; height: 36px; }
.brand strong { display: block; font-family: var(--font-brand); font-size: 17px; font-weight: 600; letter-spacing: 0.01em; color: var(--text-strong); }
.brand small { color: var(--muted); font-size: 12px; }
.nav { display: grid; gap: 2px; }
.nav a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; color: var(--text); text-decoration: none; }
.nav a:hover { background: var(--surface-3); }
.nav a.active { background: var(--brand-soft); color: var(--brand-strong); font-weight: 700; }
.nav .count { margin-inline-start: auto; min-width: 22px; padding: 0 6px; border-radius: 999px; background: var(--warn-bg); color: var(--warn); font-size: 12px; text-align: center; }
.side-foot { margin-top: auto; display: grid; gap: 8px; padding-top: 16px; border-top: 1px solid var(--border); font-size: 13px; color: var(--muted); }
.side-foot .row { display: flex; gap: 6px; flex-wrap: wrap; }

.main { min-width: 0; padding: 24px clamp(16px, 3vw, 36px) 48px; }
.topbar { display: none; }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.page-head h1 { margin: 0; font-size: clamp(22px, 3vw, 28px); color: var(--text-strong); }
.page-head p { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* Cards */
.grid { display: grid; gap: 16px; }
.grid.kpis { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
@media (max-width: 420px) { .grid.kpis { grid-template-columns: 1fr 1fr; gap: 10px; } .kpi strong { font-size: 24px; } }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; min-width: 0; }
.card h2 { margin: 0 0 12px; font-size: 16px; color: var(--text-strong); display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.kpi span { display: block; color: var(--muted); font-size: 13px; }
.kpi strong { display: block; margin-top: 4px; font-size: 30px; line-height: 1.1; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.kpi small { color: var(--muted); font-size: 12px; }
.kpi.alert strong { color: var(--warn); }

.bars { display: flex; align-items: flex-end; gap: 3px; height: 120px; padding-top: 6px; }
.bars div { flex: 1; min-width: 4px; background: var(--brand); border-radius: 4px 4px 0 0; opacity: 0.85; position: relative; }
.bars div:hover { opacity: 1; }
.bars-axis { display: flex; justify-content: space-between; color: var(--muted); font-size: 11px; margin-top: 4px; direction: ltr; }

.list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.list li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); flex-wrap: wrap; }
.list li .grow { flex: 1; min-width: 0; }
.list small { color: var(--muted); }

/* Badges, dots */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; background: var(--surface-3); color: var(--muted); }
.badge.ok { background: var(--ok-bg); color: var(--ok); }
.badge.warn { background: var(--warn-bg); color: var(--warn); }
.badge.bad { background: var(--bad-bg); color: var(--bad); }
.badge.info { background: var(--info-bg); color: var(--info); }
.badge.violet { background: var(--violet-bg); color: var(--violet); }
.badge.brand { background: var(--brand-soft); color: var(--brand-strong); }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--border-strong); flex: none; }
.dot.ok { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-bg); }
.dot.bad { background: var(--bad); }
.dot.warn { background: var(--warn); }

/* Buttons & forms */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; padding: 7px 14px; border-radius: 10px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); cursor: pointer; font-weight: 600; white-space: nowrap; text-decoration: none; }
.btn:hover:not(:disabled) { background: var(--surface-3); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn.primary:hover:not(:disabled) { background: var(--brand-strong); }
.btn.danger { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 45%, transparent); }
.btn.quiet { border-color: transparent; background: transparent; }
.btn.sm { min-height: 30px; padding: 4px 10px; font-size: 13px; border-radius: 8px; }

.field { display: grid; gap: 5px; font-size: 13px; }
.field > span { color: var(--muted); font-weight: 600; }
.field small { color: var(--muted); }
.input { width: 100%; min-height: 38px; padding: 7px 11px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface); color: var(--text); }
.input:focus { border-color: var(--brand); box-shadow: var(--focus); outline: none; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 14px; }
.check { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; cursor: pointer; }
.check input { margin-top: 4px; accent-color: var(--brand); }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.filters .input { width: auto; min-width: 140px; flex: 1 1 150px; }

/* Tables */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { padding: 10px 12px; text-align: start; font-size: 12px; font-weight: 700; color: var(--muted); background: var(--surface-2); border-bottom: 1px solid var(--border); white-space: nowrap; }
td { padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
td small { display: block; color: var(--muted); font-size: 12px; }
td.num, th.num { text-align: end; font-variant-numeric: tabular-nums; }
.ltr { direction: ltr; unicode-bidi: isolate; }
.empty { padding: 32px; text-align: center; color: var(--muted); }
.pager { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; color: var(--muted); font-size: 13px; flex-wrap: wrap; }

/* Notices */
.notice { display: flex; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--info-bg); color: var(--text); margin-bottom: 14px; font-size: 14px; }
.notice.warn { background: var(--warn-bg); }
.notice.bad { background: var(--bad-bg); }
.notice.ok { background: var(--ok-bg); }
.notice strong { display: block; }
.steps { margin: 6px 0 0; padding-inline-start: 1.3em; }
.steps li { margin-bottom: 6px; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; font-size: 14px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; overflow-wrap: anywhere; }

/* Device cards */
.devices { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.device { display: grid; gap: 12px; }
.device header { display: flex; align-items: flex-start; gap: 10px; }
.device header .grow { flex: 1; min-width: 0; }
.device header strong { display: block; color: var(--text-strong); font-size: 16px; }
.device header small { color: var(--muted); }
.device .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center; }
.device .stats div { padding: 8px 4px; border-radius: 10px; background: var(--surface-2); }
.device .stats b { display: block; font-size: 18px; color: var(--text-strong); }
.device .stats span { font-size: 11px; color: var(--muted); }
.device .err { font-size: 13px; color: var(--bad); background: var(--bad-bg); padding: 8px 10px; border-radius: 10px; overflow-wrap: anywhere; }
.device.pending { border-style: dashed; border-color: var(--warn); }

/* Dialog */
.dialog { width: min(680px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); color: var(--text); box-shadow: 0 30px 80px rgb(0 0 0 / 0.3); }
.dialog::backdrop { background: rgb(8 15 22 / 0.55); }
.dialog form, .dialog .body { display: grid; gap: 14px; padding: 20px; }
.dialog h3 { margin: 0; font-size: 18px; color: var(--text-strong); }
.dialog .foot { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; padding-top: 6px; }
.secret { display: flex; gap: 8px; align-items: center; padding: 10px; border-radius: 10px; background: var(--surface-3); overflow-wrap: anywhere; }

/* Toasts */
.toasts { position: fixed; inset-block-end: 16px; inset-inline-end: 16px; display: grid; gap: 8px; z-index: 50; width: min(380px, calc(100vw - 32px)); }
.toast { padding: 12px 14px; border-radius: 12px; background: var(--text-strong); color: var(--bg); box-shadow: var(--shadow); font-size: 14px; animation: rise 0.2s ease-out; }
.toast.bad { background: var(--bad); color: #fff; }
.toast.ok { background: var(--ok); color: #fff; }
@keyframes rise { from { transform: translateY(8px); opacity: 0; } }

/* Sign-in: a brand panel beside the form; on phones the form alone with a compact brand bar. */
.auth { min-height: 100vh; display: grid; grid-template-columns: minmax(360px, 46%) 1fr; background: var(--bg); }
.auth-hero {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
  padding: clamp(28px, 4vw, 56px); color: #fff; overflow: hidden;
  background:
    radial-gradient(1200px 600px at 110% -10%, rgb(255 255 255 / 0.16), transparent 60%),
    radial-gradient(800px 500px at -20% 120%, rgb(0 0 0 / 0.25), transparent 60%),
    linear-gradient(150deg, #0b5f71 0%, #0f8ea7 55%, #20b8c9 100%);
}
.auth-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.18;
  background-image: radial-gradient(rgb(255 255 255 / 0.55) 1px, transparent 1.4px);
  background-size: 22px 22px;
  mask-image: linear-gradient(180deg, #000 0%, transparent 75%);
}
.auth-hero > * { position: relative; z-index: 1; }
.auth-hero__brand, .auth-mobile-brand { display: flex; align-items: center; gap: 12px; }
.auth-hero__brand img { width: 44px; height: 44px; border-radius: 12px; box-shadow: 0 6px 18px rgb(0 0 0 / 0.2); }
.auth-hero__brand span, .auth-mobile-brand span { font-family: var(--font-brand); font-weight: 600; font-size: 22px; letter-spacing: 0.01em; }
.auth-hero__copy h2 { margin: 0 0 12px; font-size: clamp(26px, 2.6vw, 36px); line-height: 1.25; font-weight: 700; }
.auth-hero__copy p { margin: 0 0 28px; max-width: 34ch; font-size: 16px; line-height: 1.7; opacity: 0.9; }
.auth-hero__copy ul { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.auth-hero__copy li { display: flex; align-items: center; gap: 12px; font-size: 15px; }
.auth-hero__copy li span { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 11px; background: rgb(255 255 255 / 0.14); border: 1px solid rgb(255 255 255 / 0.22); }
.auth-hero svg, .auth-panel svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.auth-hero__foot { opacity: 0.7; font-size: 12px; }

.auth-panel { display: flex; flex-direction: column; min-width: 0; padding: 20px clamp(16px, 4vw, 48px) 32px; }
.auth-top { display: flex; align-items: center; justify-content: flex-end; gap: 12px; min-height: 44px; }
.auth-mobile-brand { display: none; color: var(--text-strong); }
.auth-mobile-brand img { width: 34px; height: 34px; border-radius: 10px; }
.auth-mobile-brand span { font-size: 18px; }
.auth-lang { min-height: 36px; padding: 6px 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); cursor: pointer; font-weight: 600; }
.auth-lang:hover { background: var(--surface-3); }
.auth-card { flex: 1; display: grid; place-items: center; }
.auth-form { width: min(400px, 100%); display: grid; gap: 18px; }
.auth-form h1 { margin: 0; font-size: clamp(26px, 3vw, 32px); color: var(--text-strong); font-weight: 700; }
.auth-sub { margin: -8px 0 6px; color: var(--muted); font-size: 15px; line-height: 1.6; overflow-wrap: anywhere; }
.auth-sub b { color: var(--text-strong); }
.auth-field { display: grid; gap: 7px; font-size: 14px; font-weight: 600; color: var(--text); }
.auth-input { position: relative; display: flex; align-items: center; }
.auth-input > svg { position: absolute; inset-inline-start: 14px; color: var(--muted); pointer-events: none; }
.auth-input input, .auth-field--code input {
  width: 100%; min-height: 50px; padding: 12px 16px; padding-inline-start: 46px; border: 1.5px solid var(--border-strong); border-radius: 13px;
  background: var(--surface); color: var(--text-strong); font-size: 16px; transition: border-color 0.15s, box-shadow 0.15s;
}
.auth-input input[name="password"] { padding-inline-end: 48px; }
.auth-input input:focus, .auth-field--code input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px rgb(15 142 167 / 0.15); }
.auth-eye { position: absolute; inset-inline-end: 6px; display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); cursor: pointer; }
.auth-eye:hover, .auth-eye[aria-pressed="true"] { color: var(--brand); background: var(--brand-soft); }
.auth-field--code input { padding: 14px 16px; text-align: center; font: 700 30px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 0.45em; }
.auth-submit {
  position: relative; min-height: 52px; border: 0; border-radius: 13px; cursor: pointer; color: #fff; font-size: 16px; font-weight: 700;
  background: linear-gradient(135deg, #0f8ea7, #20b8c9); box-shadow: 0 10px 24px rgb(15 142 167 / 0.28); transition: transform 0.12s, box-shadow 0.15s, opacity 0.15s;
}
.auth-submit:hover:not(:disabled) { box-shadow: 0 12px 28px rgb(15 142 167 / 0.36); }
.auth-submit:active:not(:disabled) { transform: translateY(1px); }
.auth-submit:disabled { opacity: 0.75; cursor: progress; }
.auth-submit.is-busy::before { content: ""; display: inline-block; width: 16px; height: 16px; margin-inline-end: 10px; vertical-align: -3px; border: 2px solid rgb(255 255 255 / 0.5); border-top-color: #fff; border-radius: 50%; animation: spin 0.8s linear infinite; }
.auth-error { margin: -4px 0 0; padding: 10px 12px; border-radius: 11px; background: var(--bad-bg); color: var(--bad); font-size: 14px; }
.auth-secure { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.auth-secure svg { width: 17px; height: 17px; color: var(--ok); }
.auth-badge { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--brand-soft); color: var(--brand-strong); }
.auth-badge svg { width: 26px; height: 26px; }
.auth-row { display: flex; justify-content: space-between; gap: 12px; }
.auth-link { border: 0; background: none; padding: 4px 0; color: var(--brand); font-weight: 600; cursor: pointer; }
.auth-link:disabled { color: var(--muted); cursor: default; font-weight: 500; }
.auth-note { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }

@media (max-width: 900px) {
  .auth { grid-template-columns: 1fr; }
  .auth-hero { display: none; }
  .auth-top { justify-content: space-between; }
  .auth-mobile-brand { display: flex; }
  .auth-card { place-items: start center; padding-top: clamp(24px, 8vh, 72px); }
}

@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .side { position: fixed; inset-block: 0; inset-inline-start: 0; width: 270px; z-index: 40; transform: translateX(-105%); transition: transform 0.2s; box-shadow: var(--shadow); }
  [dir="rtl"] .side { transform: translateX(105%); }
  .side.open { transform: none !important; }
  .topbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; position: sticky; top: 0; z-index: 30; padding: 10px 16px; background: var(--surface); border-bottom: 1px solid var(--border); }
  .topbar .brand { padding: 0; }
  .main { padding: 16px 16px 40px; }
  .kv { grid-template-columns: 1fr; }
  .kv dt { margin-top: 6px; }
}

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

/* ---------------------------------------------------------------- Sea mist (design option 1) */
.side { background: var(--side); border-inline-end-color: rgb(255 255 255 / 0.08); color: var(--page-ink); }
.side .brand strong { color: var(--page-ink); }
.side .brand small, .side-foot { color: var(--page-ink-muted); }
.side-foot { border-top-color: rgb(255 255 255 / 0.16); }
.nav a { color: var(--page-ink); }
.nav a:hover { background: rgb(255 255 255 / 0.10); }
.nav a.active { background: var(--surface); color: var(--brand-strong); }
.side-foot .btn { background: rgb(255 255 255 / 0.10); border-color: rgb(255 255 255 / 0.22); color: var(--page-ink); }
.side-foot .btn:hover:not(:disabled) { background: rgb(255 255 255 / 0.18); }
.topbar { background: var(--side); border-bottom-color: rgb(255 255 255 / 0.10); color: var(--page-ink); }
.topbar .brand strong { color: var(--page-ink); }
.topbar .btn { background: rgb(255 255 255 / 0.10); border-color: rgb(255 255 255 / 0.22); color: var(--page-ink); }
.page-head h1 { color: var(--page-ink); }
.page-head p { color: var(--page-ink-muted); }
.page-head .badge { background: rgb(255 255 255 / 0.14); color: var(--page-ink); }
.input, .auth-input input, .auth-field--code input { background: var(--field); }
.btn { background: var(--field); }
.btn.quiet { background: transparent; }
.pager { color: var(--page-ink-muted); }
.pager .btn { color: var(--text); }
.boot .spinner { border-color: rgb(255 255 255 / 0.3); border-top-color: var(--page-ink); }

/* Cards with an icon tile */
.kpi { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 12px; }
.kpi .kpi-icon { grid-row: span 3; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: var(--brand); color: #fff; }
.kpi-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.kpi.alert .kpi-icon { background: var(--warn); }
@media (min-width: 421px) { .grid.kpis { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } }
.kpi > span:not(.kpi-icon) { line-height: 1.35; }
.kpi > span:not(.kpi-icon) { grid-column: 2; }
.kpi > strong, .kpi > small { grid-column: 2; margin-top: 0; }
.card h2 .card-icon { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--brand-soft); color: var(--brand-strong); margin-inline-end: 8px; vertical-align: middle; }
.card h2 .card-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Filter bar (employees) */
.filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px; margin-bottom: 12px; border-radius: 14px; background: var(--side); }
.filter-bar .input { width: auto; flex: 1 1 200px; min-width: 150px; border-color: transparent; }
.filter-bar select.input { flex: 0 1 190px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 6px 13px; border: 0; border-radius: 999px; background: var(--field); color: var(--text); font-weight: 600; font-size: 13px; cursor: pointer; }
.chip b { min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--surface-3); font-size: 12px; text-align: center; }
.chip[aria-pressed="true"] { background: var(--brand); color: #fff; }
.chip[aria-pressed="true"] b { background: rgb(255 255 255 / 0.22); }
.filter-count { margin-inline-start: auto; color: var(--page-ink); font-size: 13px; }

/* Sign-in: the form sits on a card over the mid-tone page */
.auth-panel { background: var(--bg); }
.auth-card { place-items: center; }
.auth-form { padding: clamp(22px, 4vw, 34px); border-radius: 22px; background: var(--surface); box-shadow: var(--shadow); }
.auth-lang { background: rgb(255 255 255 / 0.14); border-color: rgb(255 255 255 / 0.28); color: var(--page-ink); }
.auth-lang:hover { background: rgb(255 255 255 / 0.22); }
.auth-mobile-brand { color: var(--page-ink); }

/* Mixed Arabic / English data: each name, place or company on its own line, laid out in its own direction, so
   Arabic data reads right in the English console and English names read right in the Arabic one. Long values
   (addresses, serials) wrap or end in "…" instead of running into the text beside them. Sizes are unchanged. */
.list li .grow > strong, .list li .grow > small, .device header small { display: block; }
.list li strong, .list li small, .device header strong, .device header small, td, .kv dd, .auth-sub b { unicode-bidi: plaintext; overflow-wrap: anywhere; }
.list li .grow > small.ltr, .device header small.ltr { unicode-bidi: isolate; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list li > small { flex: 0 1 auto; max-width: 48%; text-align: end; }
.list li > .badge { flex: none; }

/* The company the console works in (from MASAR): its logo, name and MASAR code above each page */
.company-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding: 10px 14px; border-radius: 16px; background: var(--side); color: var(--page-ink); }
.company-bar__text { flex: 1; min-width: 0; }
.company-bar__text strong { display: block; font-size: 16px; unicode-bidi: plaintext; overflow-wrap: anywhere; }
.company-bar__text small { color: var(--page-ink-muted); font-size: 12px; }
.company-bar .btn { background: rgb(255 255 255 / 0.12); border-color: rgb(255 255 255 / 0.25); color: var(--page-ink); }
.co-logo { width: 44px; height: 44px; flex: none; border-radius: 12px; object-fit: contain; background: #fff; padding: 4px; }
.co-logo--initials { display: grid; place-items: center; padding: 0; background: var(--brand); color: #fff; font-weight: 700; font-size: 16px; }
.co-logo--lg { width: 72px; height: 72px; border-radius: 18px; }
.co-logo--initials.co-logo--lg { font-size: 24px; }

/* Company picker after sign-in */
.picker { min-height: 100vh; display: grid; align-content: center; justify-items: center; gap: 24px; padding: 32px 16px; background: var(--bg); }
.picker__head { display: grid; justify-items: center; gap: 8px; text-align: center; color: var(--page-ink); }
.picker__head h1 { margin: 8px 0 0; font-size: clamp(24px, 3vw, 30px); }
.picker__head p { margin: 0; max-width: 46ch; color: var(--page-ink-muted); }
.picker__grid { width: min(900px, 100%); display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.picker__item { display: grid; justify-items: center; gap: 8px; padding: 22px 16px; border: 2px solid transparent; border-radius: 20px; background: var(--surface); color: var(--text); cursor: pointer; box-shadow: var(--shadow); transition: border-color 0.15s, transform 0.12s; }
.picker__item:hover { border-color: var(--brand); }
.picker__item:active { transform: translateY(1px); }
.picker__item strong { font-size: 17px; color: var(--text-strong); unicode-bidi: plaintext; overflow-wrap: anywhere; text-align: center; }
.picker__code { font-size: 13px; color: var(--muted); }
.picker__code b { color: var(--brand-strong); }
.picker__item small { color: var(--muted); }
.picker__out { color: var(--page-ink); }