/* Sihati360 visual identity — design tokens + shared components (Oct 22 2026, brand book «Sihati360 - Visual Identity.pdf»).
   Loaded last in <head> by s360_brand_filter (meddy-app/s360_brand.php) on every Sihati360-branded page. */
/* fonts: self-hosted, SIL OFL 1.1 — see /assets/fonts/LICENSE.txt */
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400 800;font-display:swap;src:url(/assets/fonts/montserrat-latin-ext-400-800.woff2) format('woff2');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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400 800;font-display:swap;src:url(/assets/fonts/montserrat-latin-400-800.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:'Tajawal';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/tajawal-arabic-400.woff2) format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-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, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/tajawal-arabic-500.woff2) format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-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, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/tajawal-arabic-700.woff2) format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-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, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:800;font-display:swap;src:url(/assets/fonts/tajawal-arabic-800.woff2) format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-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, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}

/* ── tokens ─────────────────────────────────────────────────────────────── */
:root{
  /* brand colours — exact values from the brand book */
  --s360-green:#18A248; --s360-navy:#113144; --s360-ocean:#146C94; --s360-teal:#077F8D;
  /* accessible UI variants: white text on #18A248 is 3.3:1 (fails small text) → buttons/links use green-ui (4.8:1) */
  --s360-green-ui:#12843B; --s360-green-ui-hover:#0E6E31; --s360-green-50:#E9F6EE; --s360-green-100:#CDEBD8;
  --s360-navy-900:#0C2533; --s360-navy-700:#16405A; --s360-navy-50:#EBF0F3;
  --s360-ocean-hover:#0F5A7C; --s360-ocean-50:#E8F3F8; --s360-teal-50:#E6F4F5;
  /* neutrals: white + subtle cool greys for clinical clarity */
  --s360-bg:#F5F8FA; --s360-surface:#FFFFFF; --s360-surface-2:#F8FAFB; --s360-line:#DDE5EB; --s360-line-strong:#C6D2DB;
  --s360-ink:#13262F; --s360-muted:#5B6E7A; /* muted on white 5.4:1 */
  /* status — meaning preserved, never brand-coloured */
  --s360-ok:#0F7A4A; --s360-ok-bg:#E6F5EC; --s360-warn:#9A5B00; --s360-warn-bg:#FFF4DE; --s360-bad:#B42318; --s360-bad-bg:#FDECEA; --s360-info:#146C94; --s360-info-bg:#E8F3F8;
  /* typography: Montserrat for Latin, Tajawal for Arabic (Kurdish too); per-glyph fallback */
  --s360-font:"Montserrat","Tajawal","Noto Kufi Arabic","Segoe UI",Tahoma,system-ui,sans-serif;
  --s360-font-mono:ui-monospace,Menlo,Consolas,monospace;
  --s360-fs-xs:12px; --s360-fs-sm:13.5px; --s360-fs-md:15px; --s360-fs-lg:18px; --s360-fs-xl:24px; --s360-fs-2xl:32px;
  /* spacing / radii / shadows / motion */
  --s360-sp-1:4px; --s360-sp-2:8px; --s360-sp-3:12px; --s360-sp-4:16px; --s360-sp-5:24px; --s360-sp-6:32px; --s360-sp-7:48px;
  --s360-r-sm:8px; --s360-r-md:12px; --s360-r-lg:16px; --s360-r-xl:24px; --s360-r-pill:999px;
  --s360-shadow-1:0 1px 2px rgba(17,49,68,.06); --s360-shadow-2:0 1px 2px rgba(17,49,68,.05),0 8px 24px rgba(17,49,68,.07); --s360-shadow-3:0 18px 48px rgba(17,49,68,.16);
  --s360-focus:0 0 0 3px rgba(20,108,148,.35); --s360-ease:cubic-bezier(.2,.7,.2,1);
}
/* the older pages' own variables point at the tokens (html:root wins over a page's later :root) */
html:root{
  --navy:var(--s360-navy); --navy-2:var(--s360-navy-700); --accent:var(--s360-ocean); --accent-soft:var(--s360-ocean-50);
  --ink:var(--s360-ink); --muted:var(--s360-muted); --mut:var(--s360-muted); --line:var(--s360-line); --bg:var(--s360-bg); --card:var(--s360-surface);
  --teal:var(--s360-teal); --teal-dark:#066A75; --teal-soft:var(--s360-teal-50); --blue:var(--s360-ocean); --lime:var(--s360-green); --green:var(--s360-green);
  --ok:var(--s360-ok); --warn:#B76E00; --bad:var(--s360-bad); --shadow:var(--s360-shadow-2);
}
.cc-ui{--navy:var(--s360-navy);--teal:var(--s360-teal);--teal2:#066A75;--accent:var(--s360-teal);--ink:var(--s360-ink);--line:var(--s360-line);--bg:var(--s360-bg)}

/* ── base ───────────────────────────────────────────────────────────────── */
:where(html.s360) body{font-family:var(--s360-font);color:var(--s360-ink);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
:where(html.s360) body:not([style*="background"]){background-color:var(--s360-bg)}
:where(html.s360) :is(button,input,select,textarea){font-family:inherit}
:where(html.s360) :is(h1,h2,h3,h4){font-family:var(--s360-font);letter-spacing:-.01em}  /* colour stays inherited: dark heroes use white */
:where(html.s360) .cc-ui :is(h1,h2,h3){font-family:var(--s360-font)}
:where(html.s360) :is(code,pre,kbd,samp,.sqlbox,.secret){font-family:var(--s360-font-mono)}
:where(html.s360)[lang=ar] body,:where(html.s360)[dir=rtl] body{line-height:1.75}
:where(html.s360) a{color:var(--s360-ocean)} :where(html.s360) a:hover{color:var(--s360-ocean-hover)}
:where(html.s360) ::selection{background:var(--s360-green-100);color:var(--s360-navy)}
/* phone numbers, emails, ids keep their order inside Arabic text */
:where(html.s360) :is(a[href^="tel:"],a[href^="mailto:"],.ltr,[dir=ltr]){unicode-bidi:isolate}
:where(html.s360) :is(input[type=tel],input[type=email],input[type=url]){direction:ltr}
:where(html.s360)[dir=rtl] :is(input[type=tel],input[type=email],input[type=url]){text-align:right}

/* keyboard focus: visible ring everywhere */
:where(html.s360) :focus-visible{outline:2px solid var(--s360-ocean);outline-offset:2px;border-radius:4px}
:where(html.s360) :is(input,select,textarea):focus-visible{outline:2px solid rgba(20,108,148,.55);outline-offset:0}

/* ── shared components (app.css classes) ────────────────────────────────── */
:where(html.s360) .card{border-color:var(--s360-line);border-radius:var(--s360-r-lg);box-shadow:var(--s360-shadow-1)}
:where(html.s360) .card h3{color:var(--s360-navy)}
:where(html.s360) .kpi{border-radius:var(--s360-r-lg);border-color:var(--s360-line);box-shadow:var(--s360-shadow-1);position:relative;overflow:hidden}
:where(html.s360) .kpi .val{color:var(--s360-navy);font-weight:800}
:where(html.s360) th{background:var(--s360-surface-2);color:var(--s360-navy);border-bottom-color:var(--s360-line)}
:where(html.s360) tbody tr:hover{background:#F3F8FA}
:where(html.s360) .btn{background:var(--s360-green-ui);color:#fff;border-radius:var(--s360-r-md);font-weight:700;transition:background .15s var(--s360-ease),box-shadow .15s,transform .12s}
:where(html.s360) .btn:hover{background:var(--s360-green-ui-hover);color:#fff;text-decoration:none}
:where(html.s360) .btn:active{transform:translateY(1px)}
:where(html.s360) .btn:disabled,:where(html.s360) .btn[disabled],:where(html.s360) button:disabled{opacity:.55;cursor:not-allowed;transform:none}
:where(html.s360) .btn.ghost{background:#fff;color:var(--s360-navy);border:1px solid var(--s360-line-strong)}
:where(html.s360) .btn.ghost:hover{border-color:var(--s360-ocean);color:var(--s360-ocean);background:var(--s360-ocean-50)}
:where(html.s360) .tag{background:var(--s360-ocean-50);color:var(--s360-navy);border-radius:var(--s360-r-sm)}
:where(html.s360) .chips a{border-color:var(--s360-line);color:var(--s360-navy)}
:where(html.s360) .chips a:hover{border-color:var(--s360-green);color:var(--s360-green-ui)}
:where(html.s360) .filters :is(select,input),:where(html.s360) .login input,:where(html.s360) .form :is(input,select,textarea){border-color:var(--s360-line-strong);border-radius:var(--s360-r-md)}
:where(html.s360) .score .sb i{background:var(--s360-green)}
:where(html.s360) .tl li:before{background:var(--s360-green);box-shadow:0 0 0 2px var(--s360-green-50)}
:where(html.s360) .banner::before{background:linear-gradient(180deg,var(--s360-green),var(--s360-teal))}
:where(html.s360) .answer{background:var(--s360-ocean-50);border-color:#CFE5EE}
:where(html.s360) .err{border-inline-start:4px solid var(--s360-bad)}
:where(html.s360) .okmsg{border-inline-start:4px solid var(--s360-ok)}
:where(html.s360) .login{border-radius:var(--s360-r-xl);box-shadow:var(--s360-shadow-3);border-color:var(--s360-line);position:relative;overflow:hidden}
:where(html.s360) .login::before{content:"";position:absolute;inset-inline:0;top:0;height:5px;background:linear-gradient(90deg,var(--s360-green),var(--s360-teal),var(--s360-ocean))}
:where(html.s360) nav.main a.on{background:var(--s360-green-ui)}
:where(html.s360) .pill{border-radius:var(--s360-r-pill)}

/* ── staff layout (views/layout.php) ────────────────────────────────────── */
:where(html.s360) .shell .side{background:linear-gradient(180deg,var(--s360-navy) 0%,var(--s360-navy-900) 100%)}
:where(html.s360) .shell .side .brand{border-bottom-color:rgba(255,255,255,.12)}
:where(html.s360) .shell .side .brand small{color:#A9C4D2;letter-spacing:.14em;font-weight:600}
:where(html.s360) .shell .side a.on,:where(html.s360) .cc-ui .shell .side a.on{background:rgba(24,162,72,.20);color:#fff;box-shadow:inset 4px 0 0 var(--s360-green)}
:where(html.s360)[dir=rtl] .shell .side a.on,:where(html.s360)[dir=rtl] .cc-ui .shell .side a.on{box-shadow:inset -4px 0 0 var(--s360-green)}
:where(html.s360) .shell .side .smain a.smi.on,:where(html.s360) .shell .side .ws .wsm a.on{background:rgba(24,162,72,.20)}
:where(html.s360) .shell .side .s360-mark{display:flex;align-items:center;gap:10px}
:where(html.s360) .shell .side .s360-mark img{width:34px;height:auto;flex:none}
:where(html.s360) .tb{border-image:linear-gradient(90deg,var(--s360-green),var(--s360-teal),var(--s360-ocean)) 1}
:where(html.s360) .tb .tbi{border-radius:var(--s360-r-md);color:var(--s360-navy)}
:where(html.s360) .tb .tbi:hover{border-color:var(--s360-green);color:var(--s360-green-ui)}
:where(html.s360) .tb form.gs{border-radius:var(--s360-r-md);background:var(--s360-surface-2)}
:where(html.s360) .tb form.gs:focus-within{border-color:var(--s360-ocean);box-shadow:var(--s360-focus);background:#fff}
@media(max-width:700px){:where(html.s360) .tb .menu{background:var(--s360-navy);border-color:var(--s360-navy)}}
:where(html.s360) .pageback{border-radius:var(--s360-r-md);color:var(--s360-navy)!important}
:where(html.s360) .pageback:hover{border-color:var(--s360-green);background:var(--s360-green-50)}
:where(html.s360) .askq button{background:var(--s360-green-ui)}

/* ── platform console (views/platform_layout.php) ───────────────────────── */
:where(html.s360) .pside{background:linear-gradient(180deg,var(--s360-navy),var(--s360-navy-900));color:#D3E1E8}
:where(html.s360) .pside a{color:#D3E1E8} :where(html.s360) .pside a:hover{background:rgba(255,255,255,.08)}
:where(html.s360) .pside a.on{background:rgba(24,162,72,.20);color:#fff;box-shadow:inset 4px 0 0 var(--s360-green)}
:where(html.s360)[dir=rtl] .pside a.on{box-shadow:inset -4px 0 0 var(--s360-green)}
:where(html.s360) .pside .pb img{display:block;width:170px;height:auto;margin:0 0 6px}
:where(html.s360) .pside .pb small{color:#A9C4D2}
:where(html.s360) .seg a.on{background:var(--s360-navy)}
:where(html.s360) .kp div{border-radius:var(--s360-r-lg)}

/* ── states shared by every page ────────────────────────────────────────── */
:where(html.s360) [aria-busy=true]{cursor:progress}
:where(html.s360) .s360-empty{text-align:center;color:var(--s360-muted);padding:var(--s360-sp-6) var(--s360-sp-4)}
:where(html.s360) dialog{border:1px solid var(--s360-line);border-radius:var(--s360-r-lg);box-shadow:var(--s360-shadow-3)}
:where(html.s360) dialog::backdrop{background:rgba(12,37,51,.45)}
@media (prefers-reduced-motion:reduce){:where(html.s360) *{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ── print: brand colours stay, decoration goes ─────────────────────────── */
@media print{
  :where(html.s360) body{background:#fff!important;color:#000}
  :where(html.s360) .login::before,:where(html.s360) .kpi{box-shadow:none}
  :where(html.s360) *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* ── sign-in pages: brand motif + platform mark ─────────────────────────── */
:where(html.s360) .login::after{content:"";position:absolute;inset-inline-end:-46px;bottom:-56px;width:170px;height:188px;background:url(/assets/brand/sihati360-symbol.svg) no-repeat center/contain;opacity:.06;pointer-events:none;z-index:-1}
:where(html.s360) .login{isolation:isolate}
:where(html.s360) .s360-by{text-align:center;margin:-6vh auto 24px;opacity:.85}
:where(html.s360) .s360-by img{height:26px;width:auto}