/* Base styles shared by every page (sec 18.1, 18.10, 19.3, 19.4).
   Logical properties only (tools/lint_css_logical.py). No inline styles anywhere (CSP sec 24.3). */

/* ---- Fonts: self-hosted, same origin only (CSP font-src 'self'); OFL licences in static/fonts/ ---- */
@font-face{font-family:'Cairo';font-style:normal;font-weight:400;font-display:swap;
  src:url(/static/fonts/cairo-arabic-400-normal.woff2) format('woff2');
  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:'Cairo';font-style:normal;font-weight:600;font-display:swap;
  src:url(/static/fonts/cairo-arabic-600-normal.woff2) format('woff2');
  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:'Cairo';font-style:normal;font-weight:700;font-display:swap;
  src:url(/static/fonts/cairo-arabic-700-normal.woff2) format('woff2');
  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:'Cairo';font-style:normal;font-weight:400;font-display:swap;
  src:url(/static/fonts/cairo-latin-400-normal.woff2) format('woff2');
  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:'Cairo';font-style:normal;font-weight:600;font-display:swap;
  src:url(/static/fonts/cairo-latin-600-normal.woff2) format('woff2');
  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:'Cairo';font-style:normal;font-weight:700;font-display:swap;
  src:url(/static/fonts/cairo-latin-700-normal.woff2) format('woff2');
  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:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url(/static/fonts/jetbrains-mono-latin-400-normal.woff2) format('woff2');
  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:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url(/static/fonts/jetbrains-mono-latin-500-normal.woff2) format('woff2');
  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}

/* ---- Reset ---- */
*,*::before,*::after{box-sizing:border-box}
html{color-scheme:dark;-webkit-text-size-adjust:100%}
html,body{margin:0;min-block-size:100%;background:var(--bg);color:var(--text);font-family:var(--font);font-size:14px;line-height:1.5}
h1,h2,h3,h4,p{margin:0}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
img,svg{max-inline-size:100%}
[hidden]{display:none !important}

/* ---- Bidi and numbers (sec 19.4): numbers, times, money and IDs are LTR islands ---- */
.num{direction:ltr;unicode-bidi:isolate;font-family:var(--mono);font-feature-settings:'tnum'}
bdi{unicode-bidi:isolate}
/* A money amount: only the number is .num, the currency word stays text and never wraps away from it (D-340 g9) */
.money{white-space:nowrap}

/* No uppercase tracking on Arabic (sec 19.4) */
[dir="rtl"] *,[dir="rtl"] *::before,[dir="rtl"] *::after{letter-spacing:0 !important;text-transform:none !important}

/* Directional icons mirror in RTL (sec 19.3); logos, media and the org geometry never do */
[dir="rtl"] .dir-icon{transform:scaleX(-1)}

/* ---- Focus ring (sec 18.10): 2px --info, offset 2px ---- */
:focus{outline:none}
:focus-visible{outline:2px solid var(--info);outline-offset:2px}

/* ---- Accessibility helpers ---- */
.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.skip-link{position:absolute;inset-inline-start:8px;inset-block-start:-48px;z-index:100;background:var(--panel2);color:var(--text);
  border:1px solid var(--edge2);border-radius:var(--r-btn);padding-block:6px;padding-inline:12px;text-decoration:none}
.skip-link:focus{inset-block-start:8px}

/* ---- Icons (Lucide sprite, static/icons/sprite.svg) ---- */
.icon{inline-size:16px;block-size:16px;flex:none;vertical-align:middle;stroke:currentColor;fill:none}

/* ---- Buttons ---- */
.btn{display:inline-flex;align-items:center;gap:6px;background:var(--panel2);border:1px solid var(--edge2);color:var(--text);
  border-radius:var(--r-btn);padding-block:6px;padding-inline:10px;cursor:pointer;font-size:13px;text-decoration:none;white-space:nowrap}
.btn:hover{border-color:var(--hover-edge)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn-primary{background:var(--info);border-color:var(--info);color:#fff;font-weight:600}
.btn-primary:hover{border-color:#93c5fd}
.btn-block{inline-size:100%;justify-content:center;padding-block:9px}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;inline-size:32px;block-size:32px;background:var(--panel2);
  border:1px solid var(--edge2);border-radius:var(--r-btn);color:var(--t2);cursor:pointer;padding:0}
.icon-btn:hover{border-color:var(--hover-edge);color:var(--text)}
.icon-btn[aria-pressed="true"]{color:var(--text);border-color:var(--info)}

/* ---- Chips (mono 12px, pill). Arabic chip text falls back to Cairo (the mono font has no Arabic). ---- */
.chip{display:inline-flex;align-items:center;gap:6px;font-family:'JetBrains Mono',var(--font);font-size:12px;border:1px solid var(--edge2);
  border-radius:var(--r-pill);padding-block:3px;padding-inline:10px;color:var(--t2);white-space:nowrap;text-decoration:none;line-height:1.4}
/* Arabic chips use Cairo for the whole text: with the mono stack the Arabic glyphs fell back to Cairo
   but the spaces stayed monospace-wide, tearing words apart ('آخر  تحديث'). Numbers keep the mono
   font through their .num spans (UI-06). */
:lang(ar) .chip{font-family:var(--font)}
.chip-ok,.chip-live{color:var(--ok);border-color:rgba(34,197,94,.45);background:var(--ok-bg)}
.chip-bad{color:#fca5a5;border-color:rgba(239,68,68,.55);background:var(--bad-bg)}
.chip-warn,.chip-demo{color:#fcd34d;border-color:rgba(245,158,11,.55);background:var(--warn-bg)}
a.chip:hover{border-color:var(--hover-edge)}

/* ---- Boxes and empty states ---- */
.box{background:var(--panel2);border:1px solid var(--edge);border-radius:var(--r-box);padding:10px;margin-block-end:10px}
.box-title{margin-block-end:8px;font-size:14px;font-weight:700;display:flex;align-items:center;gap:8px}
.box-link{font-size:12px;color:var(--t2);display:inline-block;margin-block-end:6px}
.box-link:hover{color:var(--text)}
.empty{color:var(--t2);font-size:12px;padding-block:6px}

/* D-363: scroll cue for tables wider than their wrapper (D-346 "Not fixed"): covers in the surface colour scroll
   with the content (local) and hide the edge shades (scroll) at each end the table has reached. CSS only, both
   directions (symmetric layers, by angle and percentage). --scroll-cover must equal the surface the wrapper sits on
   (T-UI-POL-03/04 check it); the shade is --t2 (#9fb0c8) at 30 %. overflow-x stays in admin.css / drawer.css.
   D-371: the tuning scorecard's .tn-table-wrap joins (D-363 Left open); it sits on a .box (--panel2) and its
   overflow-x, border and radius stay in tuning.css, which must not set a background (it loads later: a shorthand
   there would erase the cue). Opaque cells (.tn-table thead th, tr.gate-fail) paint over the shade: it shows on the
   other body rows only. */
.admin-table-wrap,.b5-table-wrap,.tn-table-wrap{--scroll-shade:rgba(159,176,200,.30);
  background:linear-gradient(90deg,var(--scroll-cover) 30%,rgba(0,0,0,0)) 0 0/32px 100% no-repeat local,
    linear-gradient(270deg,var(--scroll-cover) 30%,rgba(0,0,0,0)) 100% 0/32px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%,var(--scroll-shade),rgba(0,0,0,0)) 0 0/12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%,var(--scroll-shade),rgba(0,0,0,0)) 100% 0/12px 100% no-repeat scroll}
.admin-table-wrap{--scroll-cover:var(--panel2)}
.b5-table-wrap{--scroll-cover:var(--panel)}
.tn-table-wrap{--scroll-cover:var(--panel2)}
.fatal{margin:24px;color:var(--t2)}

/* ---- Toasts (sec 19.3): inset-inline-end 16px, top 64px ---- */
.toasts{position:fixed;inset-inline-end:16px;inset-block-start:64px;z-index:60;display:flex;flex-direction:column;gap:8px;
  max-inline-size:min(420px,calc(100vw - 32px))}
.toast{display:flex;align-items:flex-start;gap:8px;background:var(--panel);border:1px solid var(--edge2);border-inline-start-width:3px;
  border-radius:var(--r-card);padding-block:8px;padding-inline:10px;box-shadow:0 12px 30px rgba(0,0,0,.45);font-size:13px}
.toast .icon{margin-block-start:3px}
.toast-text{flex:1}
.toast .icon-btn{inline-size:24px;block-size:24px;border:0;background:transparent}
.toast-info{border-inline-start-color:var(--info)}
.toast-ok{border-inline-start-color:var(--ok)}
.toast-warn{border-inline-start-color:var(--warn)}
.toast-bad{border-inline-start-color:var(--bad)}

/* ---- Modal (<dialog>) ---- */
.modal{background:var(--panel);color:var(--text);border:1px solid var(--edge2);border-radius:var(--r-dept);padding:18px;
  inline-size:min(420px,92vw);box-shadow:0 20px 60px rgba(0,0,0,.6)}
.modal::backdrop{background:rgba(2,6,14,.72)}
.modal-title{font-size:16px;margin-block-end:8px;text-align:center}
.modal-body{color:var(--t2);margin-block-end:12px;text-align:center}
.modal-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-block-start:14px}
/* Popups: title, message and buttons are centred; typed text in a popup stays start-aligned. */
.modal input,.modal textarea,.modal select{text-align:start}

/* ---- Form fields ---- */
.field{display:flex;flex-direction:column;gap:4px;margin-block-end:12px}
.field-label{font-size:13px;color:var(--t2);font-weight:600}
.field-hint{font-size:12px;color:var(--t2)}
.input{background:var(--bg);border:1px solid var(--edge2);border-radius:var(--r-btn);padding-block:8px;padding-inline:10px;color:var(--text);inline-size:100%}
.input:hover{border-color:var(--hover-edge)}
.input:focus-visible{border-color:var(--info)}
/* D-340: on an RTL page an empty field shows its placeholder in the page direction. An empty dir="auto" field resolves
   to LTR, and the key and order-reference fields are dir="ltr" for the code typed into them, so their Arabic hints sat
   at the left (end) edge. CSS `direction` overrides the dir attribute only while the placeholder shows; a typed value
   keeps its own direction. Number fields (.num) keep theirs: their placeholder is a Latin sample ("HH:MM"). */
:root[dir="rtl"] input:not(.num):placeholder-shown,:root[dir="rtl"] textarea:placeholder-shown{direction:rtl}

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