/* Shared design system: login, chat and admin.
   Logical properties throughout, so Arabic (RTL) and English (LTR) share one stylesheet. */
:root{
  --ink:#0e2038; --paper:#eef1f5; --surface:#fff; --line:#d5dbe4; --line-soft:#e6eaf0;
  --muted:#5a6a7e; --brand:#1b4f9c; --brand-ink:#fff; --brand-soft:#e4ecf8;
  --signal:#d4252b; --signal-soft:#fcebec;
  --ok:#17744a; --ok-soft:#e3f3ea; --warn:#8f5a00; --warn-soft:#fff1d6;
  --field:#0e7c86; --field-soft:#def3f4;
  --glass:#0a1018; --seg:#ffb020; --seg-off:rgba(255,176,32,.09);
  --r-panel:12px; --r-ctl:8px;
  --font:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,"Noto Sans Arabic","Noto Kufi Arabic",Tahoma,"Helvetica Neue",Arial,sans-serif;
  --focus:0 0 0 3px rgba(27,79,156,.35);
  color-scheme:light;
}
@media(prefers-color-scheme:dark){:root{
  --ink:#e6ecf4; --paper:#0c1118; --surface:#141c26; --line:#263243; --line-soft:#1d2733;
  --muted:#8fa0b4; --brand:#5aa2ff; --brand-ink:#06111f; --brand-soft:#16273d;
  --signal:#ff7b80; --signal-soft:#3a1719;
  --ok:#5fcf93; --ok-soft:#10291c; --warn:#f0b254; --warn-soft:#302308;
  --field:#4cc3cf; --field-soft:#0f2b2e;
  --focus:0 0 0 3px rgba(90,162,255,.45); color-scheme:dark;
}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.6 var(--font);font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
:lang(ar) body,html[lang=ar] body{line-height:1.8}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.01em;line-height:1.3}
:lang(ar) h1,:lang(ar) h2{letter-spacing:0}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--brand)}
.hidden{display:none!important}
.mut{color:var(--muted)}
:focus-visible{outline:none;box-shadow:var(--focus);border-radius:var(--r-ctl)}

/* controls */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4em;background:var(--brand);color:var(--brand-ink);border:1px solid transparent;border-radius:var(--r-ctl);padding:.5em 1.05em;font-weight:600;line-height:1.35;text-decoration:none;transition:filter .12s}
.btn:hover{filter:brightness(1.07)}
.btn:disabled{opacity:.5;cursor:default;filter:none}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{background:var(--brand-soft);filter:none}
.btn.danger{background:var(--signal);color:#fff}
.btn.sm{padding:.28em .75em;font-size:.88rem}
input,select,textarea{width:100%;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-ctl);padding:.55em .75em;transition:border-color .12s}
input:hover,select:hover,textarea:hover{border-color:color-mix(in srgb,var(--brand) 45%,var(--line))}
input:focus,select:focus,textarea:focus{border-color:var(--brand)}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:.7}
select:disabled{opacity:.55}
label{display:block;font-size:.85rem;font-weight:600;color:var(--muted);margin-bottom:.25em}

/* chips: state words, never decoration */
.chip{display:inline-block;border-radius:6px;padding:.05em .55em;font-size:.8rem;font-weight:600;background:var(--line-soft);color:var(--muted);vertical-align:middle}
.chip.ok{background:var(--ok-soft);color:var(--ok)}
.chip.warn{background:var(--warn-soft);color:var(--warn)}
.chip.bad{background:var(--signal-soft);color:var(--signal)}
.chip.field{background:var(--field-soft);color:var(--field)}
.chip.manual{background:var(--brand-soft);color:var(--brand)}

/* panels */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-panel);padding:1.1rem 1.2rem;margin-bottom:1rem}

/* seven-segment display (see segdisplay.js) */
.ssd{display:inline-block;background:var(--glass);border-radius:10px;padding:.7rem .9rem;border:1px solid #000;box-shadow:inset 0 2px 10px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.04)}
.ssd-row{display:flex;gap:calc(var(--ch,2.6rem)*.2);direction:ltr}
.ssd svg{height:var(--ch,2.6rem);width:calc(var(--ch,2.6rem)*.58);overflow:visible;transform:skewX(-5deg)}
.ssd .on{fill:var(--seg);filter:drop-shadow(0 0 3px rgba(255,176,32,.55))}
.ssd .off{fill:var(--seg-off)}
.ssd text{fill:var(--seg);font:700 40px/1 ui-monospace,Consolas,monospace}
.ssd.boot .on{animation:segon .5s both}
@keyframes segon{0%{opacity:0}45%{opacity:.15}60%{opacity:.9}100%{opacity:1}}
@media(prefers-reduced-motion:reduce){.ssd.boot .on{animation:none}}

/* tabs (admin) */
.tabs{display:flex;gap:.25rem;border-bottom:1px solid var(--line);margin-bottom:1.1rem;overflow-x:auto;scrollbar-width:thin}
.tabs button{background:none;border:0;border-bottom:2px solid transparent;padding:.65rem .9rem;color:var(--muted);font-weight:600;white-space:nowrap;border-radius:0;margin-bottom:-1px}
.tabs button:hover{color:var(--ink)}
.tabs button[aria-selected=true]{color:var(--brand);border-bottom-color:var(--brand)}
.tabs .badge{background:var(--signal);color:#fff;border-radius:999px;font-size:.72rem;padding:0 .5em;margin-inline-start:.35em}

/* tables */
.tablewrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.92rem}
th,td{text-align:start;padding:.55rem .6rem;border-bottom:1px solid var(--line-soft);vertical-align:top}
th{color:var(--muted);font-weight:600;font-size:.82rem;border-bottom-color:var(--line)}
tr:last-child td{border-bottom:0}

/* misc */
.toast{position:fixed;inset-inline:1rem;bottom:1.2rem;max-width:420px;margin-inline:auto;background:var(--ink);color:var(--paper);padding:.65rem 1rem;border-radius:var(--r-ctl);z-index:50;box-shadow:0 8px 28px rgba(0,0,0,.25)}
.bar{height:6px;background:var(--line);border-radius:3px;overflow:hidden;margin-top:.3rem}.bar i{display:block;height:100%;background:var(--brand)}
.menu{position:relative}
.menu>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.5rem;padding:.3rem .6rem;border:1px solid var(--line);border-radius:var(--r-ctl);background:var(--surface);font-weight:600;font-size:.9rem}
.menu>summary::-webkit-details-marker{display:none}
.menu>summary::after{content:"";width:.45em;height:.45em;border-inline-end:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg) translateY(-2px)}
.menu[open]>summary{border-color:var(--brand)}
.menu .pop{position:absolute;inset-inline-end:0;top:calc(100% + .35rem);min-width:210px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-panel);padding:.35rem;box-shadow:0 12px 32px rgba(0,0,0,.18);z-index:30}
.menu .pop a,.menu .pop button{display:block;width:100%;text-align:start;background:none;border:0;padding:.5rem .7rem;border-radius:6px;color:var(--ink);text-decoration:none;font-size:.94rem}
.menu .pop a:hover,.menu .pop button:hover{background:var(--brand-soft)}
.menu .pop hr{border:0;border-top:1px solid var(--line-soft);margin:.3rem 0}
.wordmark{display:flex;align-items:center;gap:.7rem;min-width:0}
.wordmark b{font-weight:700;letter-spacing:-.01em;white-space:nowrap}
.wordmark i{width:1px;align-self:stretch;background:var(--line);margin-block:.2rem}
.wordmark span{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.6rem 1.1rem;background:var(--surface);border-bottom:1px solid var(--line)}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
.topbar .wordmark{flex:1 1 auto}
.wordmark b{overflow:hidden;text-overflow:ellipsis;flex:0 1 auto;min-width:0}
@media(max-width:560px){.wordmark i,.wordmark span{display:none}}

.logo{display:block;height:34px;width:auto;max-width:100%}
.haslogo{display:none!important}
.wordmark picture{display:flex}
@media(max-width:560px){.logo{height:30px}}

/* A logo with dark-blue parts is unreadable on dark backgrounds: seat it on a white plate unless logo-dark.* exists */
.logo.plate{background:#fff;padding:.35rem .7rem;border-radius:10px;box-sizing:content-box}
@media(prefers-color-scheme:dark){picture:not(.hasdark)>.logo{background:#fff;padding:.2rem .55rem;border-radius:8px;box-sizing:content-box;height:30px}}