/* Shared by the public pages and the admin panel: font, tokens, reset, buttons, badges, alerts, form basics.
   Layout uses logical properties only (start/end), so the RTL page needs no mirrored rules. */

/* Tajawal, self-hosted (Google Fonts is not reliably reachable from Syria). Latin digits come from the latin subset. */
@font-face{font-family:"Tajawal";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/tajawal-400-ar.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:"Tajawal";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/tajawal-400-la.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:700;font-display:swap;src:url(fonts/tajawal-700-ar.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:"Tajawal";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/tajawal-700-la.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:800;font-display:swap;src:url(fonts/tajawal-800-ar.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:"Tajawal";font-style:normal;font-weight:800;font-display:swap;src:url(fonts/tajawal-800-la.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}

:root{
  /* tier 1 — raw palette */
  --teal-50:#f0fdfa; --teal-100:#ccfbf1; --teal-600:#0f766e; --teal-700:#115e59; --teal-800:#134e4a;
  --slate-900:#0f172a; --slate-700:#334155; --slate-600:#475569; --slate-300:#cbd5e1; --slate-100:#f1f5f9;

  /* tier 2 — roles */
  --primary:var(--teal-600); --primary-hover:var(--teal-700); --primary-soft:var(--teal-50);
  --bg:#f3f7fb; --card:#fff; --text:var(--slate-900); --text-muted:var(--slate-600);
  --border:rgba(148,163,184,.38); --border-strong:var(--slate-300);
  --focus-ring:0 0 0 4px rgba(15,118,110,.22);
  --radius:14px; --radius-sm:10px;
  --shadow:0 1px 2px rgba(15,23,42,.04),0 8px 24px rgba(15,23,42,.06);
  --font:"Tajawal","Noto Sans Arabic","Segoe UI",system-ui,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* status triplets: text, fill, line */
  --danger:#be123c;  --danger-bg:#fff1f2;  --danger-line:#fda4af;
  --warning:#b45309; --warning-bg:#fffbeb; --warning-line:#fde68a;
  --success:#15803d; --success-bg:#f0fdf4; --success-line:#86efac;
  --info:#1d4ed8;    --info-bg:#eff6ff;    --info-line:#93c5fd;
  --neutral:#475569; --neutral-bg:#f1f5f9; --neutral-line:#cbd5e1;
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--font);font-size:15px;line-height:1.7;color:var(--text);background:var(--bg);min-block-size:100vh}
img{max-inline-size:100%;display:block}
a{color:var(--primary)}
a:hover{color:var(--primary-hover)}
h1{font-size:1.6rem;line-height:1.3;font-weight:800}
h2{font-size:1.15rem;line-height:1.4;font-weight:800}
ul,ol{padding-inline-start:1.4em}
code,.hash{font-family:var(--mono);font-size:.85em;direction:ltr;unicode-bidi:isolate}
.hash{word-break:break-all;display:inline-block;background:var(--neutral-bg);border:1px solid var(--neutral-line);
  border-radius:6px;padding:2px 6px}
:focus-visible{outline:3px solid var(--primary);outline-offset:2px}

/* numbers, dates, versions, identifiers: never mirrored, Latin digits, aligned */
.num,.ltr,time{direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums}
.muted{color:var(--text-muted)}
.hint{color:var(--text-muted);font-size:.82rem;line-height:1.6}
.visually-hidden{position:absolute !important;inline-size:1px;block-size:1px;overflow:hidden;clip:rect(0 0 0 0);
  clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;inset-inline-start:12px;inset-block-start:-60px;z-index:100;background:var(--card);padding:8px 14px;border-radius:8px}
.skip:focus{inset-block-start:12px}
.prose{white-space:normal;overflow-wrap:anywhere}
.small{font-size:.85rem}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px 16px;border-radius:var(--radius-sm);
  border:1px solid transparent;font:inherit;font-weight:700;font-size:.92rem;line-height:1.4;text-decoration:none;cursor:pointer;
  background:var(--neutral-bg);color:var(--text);transition:background .15s,border-color .15s,color .15s;white-space:nowrap}
.btn:hover{text-decoration:none}
.btn--primary{background:var(--primary);color:#fff}
.btn--primary:hover{background:var(--primary-hover);color:#fff}
.btn--secondary{background:var(--primary-soft);color:var(--teal-800);border-color:var(--teal-100)}
.btn--secondary:hover{background:var(--teal-100);color:var(--teal-800)}
.btn--ghost{background:transparent;color:var(--text);border-color:var(--border-strong)}
.btn--ghost:hover{background:var(--neutral-bg);color:var(--text)}
.btn--danger{background:var(--danger);color:#fff}
.btn--danger:hover{background:#9f1239;color:#fff}
.btn--danger-soft{background:var(--danger-bg);color:var(--danger);border-color:var(--danger-line)}
.btn--danger-soft:hover{background:#ffe4e6;color:var(--danger)}
.btn--sm{padding:5px 10px;font-size:.8rem;border-radius:8px}
.btn--xl{padding:16px 28px;font-size:1.15rem;border-radius:16px}
.btn--block{inline-size:100%}
.btn[disabled]{opacity:.5;cursor:not-allowed}

/* badges: generated only by badge() in View.php, one rule per tone */
.badge{display:inline-flex;align-items:center;gap:4px;padding:1px 8px;border-radius:999px;font-size:.74rem;font-weight:700;
  border:1px solid;white-space:nowrap;line-height:1.7;vertical-align:middle}
.badge--success{background:var(--success-bg);color:var(--success);border-color:var(--success-line)}
.badge--danger {background:var(--danger-bg); color:var(--danger); border-color:var(--danger-line)}
.badge--warning{background:var(--warning-bg);color:var(--warning);border-color:var(--warning-line)}
.badge--info   {background:var(--info-bg);   color:var(--info);   border-color:var(--info-line)}
.badge--neutral{background:var(--neutral-bg);color:var(--neutral);border-color:var(--neutral-line)}

/* alerts */
.alert{padding:12px 16px;border-radius:var(--radius-sm);margin-block-end:16px;border:1px solid;border-inline-start-width:5px;font-weight:500}
.alert--success{background:var(--success-bg);border-color:var(--success-line);border-inline-start-color:var(--success);color:#14532d}
.alert--danger {background:var(--danger-bg); border-color:var(--danger-line); border-inline-start-color:var(--danger); color:#881337}
.alert--warning{background:var(--warning-bg);border-color:var(--warning-line);border-inline-start-color:var(--warning);color:#78350f}
.alert--info   {background:var(--info-bg);   border-color:var(--info-line);   border-inline-start-color:var(--info);   color:#1e3a8a}

/* form basics */
label{font-weight:700;font-size:.88rem}
input,select,textarea{font:inherit;font-size:.95rem;color:var(--text);background:var(--card);border:1px solid var(--border-strong);
  border-radius:var(--radius-sm);padding:9px 12px;inline-size:100%;min-inline-size:0}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none;border-color:var(--primary);box-shadow:var(--focus-ring)}
input[readonly]{background:var(--neutral-bg);color:var(--text-muted)}
input[aria-invalid="true"],textarea[aria-invalid="true"],select[aria-invalid="true"]{border-color:var(--danger);background:var(--danger-bg)}
input[type="checkbox"],input[type="radio"]{inline-size:auto;accent-color:var(--primary);block-size:1.05em;aspect-ratio:1}
textarea{resize:vertical;min-block-size:70px}
.field{display:flex;flex-direction:column;gap:6px;min-inline-size:0}
.field__error{color:var(--danger);font-size:.84rem;font-weight:700}
.req{color:var(--danger)}

@media print{
  .skip,.btn,form button,.topbar,.site-header,.site-footer,.share,dialog{display:none !important}
  body{background:#fff}
}