:root{
  --green-deep:#0b6e4f;
  --green-mid:#127a57;
  --green-pale:#e7f2ec;
  --red-accent:#c8122e;
  --red-pale:#fbe9ea;
  --amber:#946400;
  --amber-pale:#fdf1da;
  --gold:#b8923f;
  --sand:#f7f4ea;
  --paper:#fffdf7;
  --ink:#1c2620;
  --ink-soft:#4c5850;
  --line:#d9d2bd;
  --line-strong:#b9ae8f;
  --shadow:0 10px 30px -12px rgba(11,110,79,0.25);
  --radius:14px;

  /* ---------- Typography tokens — Tajawal is the ONLY font in the app ---------- */
  --font-sans:'Tajawal', sans-serif;
  --fw-light:300; --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700;
  --fs-display:clamp(2rem, 1.6rem + 1.6vw, 3rem);       /* 32px → 48px */
  --fs-h1:clamp(1.5rem, 1.3rem + 0.8vw, 2.25rem);        /* 24px → 36px */
  --fs-h2:clamp(1.375rem, 1.2rem + 0.7vw, 1.875rem);     /* 22px → 30px */
  --fs-h3:clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);       /* 20px → 24px */
  --fs-h4:1.25rem;    /* 20px */
  --fs-h5:1.125rem;   /* 18px */
  --fs-h6:1rem;       /* 16px */
  --fs-body-lg:1.125rem; /* 18px */
  --fs-body:1rem;        /* 16px */
  --fs-small:0.875rem;   /* 14px */
  --fs-caption:0.75rem;  /* 12px */
  --lh-heading:1.25;
  --lh-body:1.7;

  /* ---------- Spacing scale (8px baseline) ---------- */
  --space-1:4px; --space-2:8px; --space-3:16px; --space-4:24px; --space-5:32px; --space-6:48px;

  /* ---------- Radius scale ---------- */
  --radius-sm:8px; --radius-md:10px; --radius-lg:14px; --radius-xl:18px; --radius-pill:999px;

  /* ---------- Motion ---------- */
  --transition:200ms cubic-bezier(.4,0,.2,1);
  --transition-fast:120ms ease;

  /* ---------- Elevation ---------- */
  --shadow-sm:0 1px 3px rgba(20,30,20,.08);
  --shadow-md:0 8px 20px -8px rgba(20,30,20,.20);
  --shadow-lg:var(--shadow);
  --focus-ring:0 0 0 3px var(--green-pale), 0 0 0 1px var(--green-deep);
}

/* ---------- Dark mode ----------
   Toggled by adding "dark-mode" to <html> (see the inline anti-flash
   script in index.html's <head>, and the toggle button wired in app.js).
   It's on <html> rather than <body> specifically so that inline script can
   set it before <body> even exists, avoiding a flash of the light theme on
   load. Overriding the design tokens here is enough to re-skin every
   component that already reads var(--paper)/var(--ink)/etc — which is
   nearly everything, since the whole stylesheet was built on these tokens.
   The remaining handful of components that hardcode "#fff" as a literal
   surface color (inputs, dropdowns, table rows, chat bubbles — mostly in
   chat.css) get their own explicit dark-mode overrides right next to where
   they're defined, rather than collected here, so each stays next to the
   rule it's correcting. */
html.dark-mode{
  color-scheme:dark;
  --green-deep:#22a374; --green-mid:#2bbf8a;
  --gold:#d4ab55;
  --red-accent:#ef4157; --amber:#e0a83f;
  --green-pale:rgba(34,163,116,.16); --red-pale:rgba(239,65,87,.14); --amber-pale:rgba(224,168,63,.16);
  --sand:#10140f; --paper:#182019;
  --ink:#eef3ee; --ink-soft:#9fb0a4;
  --line:#2b3630; --line-strong:#3c4a41;
  --shadow:0 10px 30px -12px rgba(0,0,0,.55);
  --shadow-sm:0 1px 3px rgba(0,0,0,.35);
  --shadow-md:0 8px 20px -8px rgba(0,0,0,.45);
}
/* Printed documents (the enrollment certificate) should always come out on
   a plain white/light background regardless of which theme the screen is
   using — dark ink on a dark page would be invisible on paper. */
@media print{
  html.dark-mode{
    --green-deep:#0b6e4f; --green-mid:#127a57; --gold:#b8923f;
    --red-accent:#c8122e; --amber:#946400;
    --green-pale:#e7f2ec; --red-pale:#fbe9ea; --amber-pale:#fdf1da;
    --sand:#f7f4ea; --paper:#fffdf7; --ink:#1c2620; --ink-soft:#4c5850;
    --line:#d9d2bd; --line-strong:#b9ae8f;
  }
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;
  /* Safety net, not the fix itself: the real overflow sources (button rows,
     panel headers) are corrected above with flex-wrap + min-width:0. This
     just guarantees that if anything else ever pokes past the edge, it gets
     clipped instead of creating a page-wide horizontal scrollbar. */
  overflow-x:hidden; width:100%;
}
body{
  background:var(--sand);
  background-image:
    linear-gradient(var(--sand),var(--sand)),
    repeating-linear-gradient(0deg, rgba(11,110,79,0.035) 0px, rgba(11,110,79,0.035) 1px, transparent 1px, transparent 26px);
  color:var(--ink);
  font-family:var(--font-sans);
  font-weight:var(--fw-regular);
  font-size:var(--fs-body);
  min-height:100vh; min-height:100dvh;
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
  transition:background-color var(--transition), color var(--transition);
}
html.dark-mode body{
  background-image:
    linear-gradient(var(--sand),var(--sand)),
    repeating-linear-gradient(0deg, rgba(34,163,116,0.05) 0px, rgba(34,163,116,0.05) 1px, transparent 1px, transparent 26px);
}
/* #app is the single mount point (see index.html) — topbar, page content,
   and footer are injected into it as siblings on every route. Making it a
   column flexbox (instead of leaving each page to guess the topbar's pixel
   height, which breaks the moment the topbar wraps to two lines) lets
   #page-slot reliably fill "whatever height is left" on any page that needs
   it — most importantly the chat page, see chat.css. Normal pages are
   unaffected: without a bounded height on #app, #page-slot's flex:1 just
   behaves like ordinary block flow and the page scrolls with the document
   as before. */
#app{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;}
#page-slot{flex:1 1 auto;min-height:0;min-width:0;display:flex;flex-direction:column;}
h1,h2,h3,h4,h5,h6,.display{font-family:var(--font-sans);font-weight:var(--fw-bold);line-height:var(--lh-heading);}
a{color:inherit;text-decoration:none;}
button, input, select, textarea{font-family:inherit;font-weight:inherit;}
::selection{background:var(--gold);color:#fff;}

/* ---------- Top bar ---------- */
.topbar{
  position:sticky;top:0;z-index:50;
  background:linear-gradient(180deg, var(--paper), #fffef9);
  border-bottom:3px solid var(--green-deep);
  box-shadow:0 2px 0 var(--gold), var(--shadow);
}
.topbar-inner{
  max-width:1180px;margin:0 auto;padding:16px 22px 14px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;position:relative;text-align:center;
}
.brand{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:14px;text-align:center;}
.brand img{height:52px;width:auto;filter:drop-shadow(0 2px 3px rgba(0,0,0,.15));}
.brand-text{text-align:center;}
.brand-text h1{font-size:16px;margin:0;color:var(--green-deep);font-weight:700;}
.brand-text p{font-size:12px;margin:2px 0 0;color:var(--ink-soft);font-weight:500;}
.nav-actions{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:10px;width:100%;padding-top:10px;border-top:1px dashed var(--line-strong);
}
/* Desktop: the whole action row (up to 10+ items on the admin bar) is
   forced onto a single, fixed, non-scrollable line — never wraps, never
   scrolls, never becomes a slider. flex-wrap:nowrap alone guarantees no
   second line; overflow:hidden guarantees no scrollbar/draggable strip can
   ever appear even mid-adjustment. The actual fitting (shrinking
   font-size/padding/gap only, never hiding an item) is done in JS —
   fitNavActions() in app.js — via the --nav-* custom properties read
   below, because unlike a diagram title this row's total width depends on
   how many nav items the current role has, which plain CSS (clamp()/vw)
   has no way to know; JS measures the row's real scrollWidth and steps
   these variables down only as far as needed to make it fit. Mobile
   (<=720px) is untouched and keeps the burger-menu dropdown defined
   below — fitNavActions() explicitly skips it. */
@media(min-width:721px){
  .nav-actions{
    flex-wrap:nowrap;
    justify-content:center;
    overflow:hidden;
    --nav-font:13px; --nav-pad-x:14px; --nav-pad-y:8px; --nav-gap:10px; --nav-btn-gap:6px;
    gap:var(--nav-gap);
  }
  .nav-actions > *{flex-shrink:0;white-space:nowrap;}
  .nav-actions .btn{
    padding:var(--nav-pad-y) var(--nav-pad-x) !important;
    font-size:var(--nav-font) !important;
    gap:var(--nav-btn-gap);
  }
  .nav-actions .pill{
    padding:calc(var(--nav-pad-y) - 1px) var(--nav-pad-x);
    font-size:var(--nav-font);
  }
}

.nav-burger{
  position:absolute;top:14px;inset-inline-end:16px;
  width:38px;height:38px;border-radius:10px;border:1.5px solid var(--line-strong);
  background:#fff;color:var(--green-deep);font-size:18px;line-height:1;cursor:pointer;
  display:none;align-items:center;justify-content:center;
}
html.dark-mode .nav-burger{ background:var(--paper); }
/* A circular icon button, deliberately styled apart from the plain text
   .btn-ghost links around it — a colored ring + a filled brand-green icon
   makes it read as "the one control that isn't page navigation" at a
   glance, and gives it a large enough hit target to be an easy tap target
   on mobile, not just a small emoji tucked into a text button. */
.theme-toggle-btn{
  width:40px;height:40px;padding:0;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:50%;border:1.6px solid var(--green-deep);
  background:var(--green-pale);color:var(--green-deep);
  cursor:pointer;transition:background var(--transition), transform var(--transition), box-shadow var(--transition);
}
.theme-toggle-btn:hover{ background:var(--green-deep); color:#fff; box-shadow:0 6px 16px -6px rgba(11,110,79,.5); }
.theme-toggle-btn:active{ transform:scale(.93); }
.theme-toggle-btn:focus-visible{ box-shadow:var(--focus-ring); }
.theme-toggle-btn svg{ display:block; }
/* Below 720px the full nav-actions row (5–7 pills/buttons depending on
   role) wraps across 3–4 lines and, since the topbar sits above #page-slot
   in #app's column flex layout, that wrapped height is taken directly out
   of the space every page below it has to work with — on the chat page in
   particular this is what was making the chat shell look "قصيرة" (short)
   on phones: the topbar itself was eating a large chunk of a screen that's
   already tight on height. Collapsing the actions behind the burger button
   (already wired up in app.js, just missing this CSS) keeps the topbar to
   a single compact row on mobile, same as WhatsApp/Telegram's app bars. */
@media(max-width:720px){
  .topbar-inner{padding:14px 50px 12px;}
  .brand-text h1{font-size:14px;}
  .brand-text p{font-size:11px;}
  .nav-burger{display:flex;}
  .nav-actions{
    display:none; flex-direction:column; align-items:stretch; justify-content:flex-start;
    gap:8px; width:auto; min-width:220px; max-width:88vw;
    position:absolute; top:calc(100% + 8px); inset-inline-end:12px; inset-inline-start:auto;
    background:#fff; border:1px solid var(--line-strong); border-top:1px solid var(--line-strong);
    border-radius:12px; box-shadow:0 16px 32px -10px rgba(0,0,0,.25); padding:12px;
    z-index:60;
  }
  html.dark-mode .nav-actions{ background:var(--paper); }
  .nav-actions.open{display:flex;}
  .nav-actions .pill{align-self:center;}
  .nav-actions .theme-toggle-btn{align-self:center;}
}
.pill{
  font-size:12.5px;padding:6px 14px;border-radius:99px;
  border:1.5px solid var(--line-strong);background:#fff;color:var(--ink-soft);font-weight:700;
}
html.dark-mode .pill{ background:var(--paper); }
.pill.status-ok{border-color:var(--green-deep);color:var(--green-deep);background:var(--green-pale);}

/* ---------- Buttons — design system ----------
   One base class (.btn) + variant classes (color/intent) + size classes,
   all driven by the tokens above so every button in the app shares the
   same radius, motion, and focus treatment. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 22px;border-radius:var(--radius-md);border:1.5px solid transparent;
  font-family:var(--font-sans);font-weight:var(--fw-semibold);font-size:15px;line-height:1;
  cursor:pointer;user-select:none;white-space:nowrap;outline:none;
  transition:background-color var(--transition), border-color var(--transition),
             color var(--transition), box-shadow var(--transition), transform var(--transition-fast);
}
.btn svg, .btn .icon{flex-shrink:0;display:inline-flex;align-items:center;}
.btn:active:not([disabled]):not(.is-loading){transform:translateY(1px);}
.btn:focus-visible{box-shadow:var(--focus-ring);}
.btn-ghost:focus-visible, .btn-link:focus-visible{box-shadow:0 0 0 3px var(--green-pale);}

/* Variants */
.btn-primary{background:var(--green-deep);color:#fff;box-shadow:0 6px 16px -6px rgba(11,110,79,.55);}
.btn-primary:hover{background:var(--green-mid);box-shadow:0 8px 20px -6px rgba(11,110,79,.6);}
.btn-primary:active:not([disabled]):not(.is-loading){background:var(--green-deep);}

.btn-secondary{background:var(--ink);color:#fff;box-shadow:var(--shadow-sm);}
.btn-secondary:hover{background:#333f37;}

.btn-success{background:var(--green-deep);color:#fff;box-shadow:0 6px 16px -6px rgba(11,110,79,.55);}
.btn-success:hover{background:var(--green-mid);}

.btn-warning{background:var(--gold);color:#fff;box-shadow:0 6px 16px -6px rgba(184,146,63,.5);}
.btn-warning:hover{background:#a17f36;}

.btn-outline{background:transparent;border-color:var(--green-deep);color:var(--green-deep);}
.btn-outline:hover{background:var(--green-pale);}

.btn-danger{background:var(--red-accent);color:#fff;box-shadow:0 6px 16px -6px rgba(200,18,46,.45);}
.btn-danger:hover{background:#a80f26;}
.btn-danger-outline{background:transparent;border-color:var(--red-accent);color:var(--red-accent);}
.btn-danger-outline:hover{background:var(--red-pale);}

.btn-ghost{background:transparent;border-color:transparent;color:var(--ink-soft);}
.btn-ghost:hover{background:rgba(76,88,80,.08);color:var(--ink);}

.btn-link{background:transparent;border-color:transparent;color:var(--green-deep);padding-inline:2px;text-decoration:underline;text-underline-offset:3px;box-shadow:none;}
.btn-link:hover{color:var(--green-mid);}

.btn-block{width:100%;}

/* Sizes */
.btn-sm{padding:8px 14px;font-size:13px;border-radius:var(--radius-sm);gap:6px;}
.btn-lg{padding:14px 26px;font-size:16.5px;border-radius:var(--radius-lg);}
.btn-xl{padding:16px 32px;font-size:18px;border-radius:var(--radius-lg);}

/* States */
.btn[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none;}
.btn.is-loading{color:transparent !important;pointer-events:none;position:relative;}
.btn.is-loading::after{
  content:"";position:absolute;width:16px;height:16px;border-radius:50%;
  border:2px solid rgba(255,255,255,.55);border-top-color:#fff;
  animation:btn-spin .7s linear infinite;
}
.btn-outline.is-loading::after, .btn-ghost.is-loading::after, .btn-link.is-loading::after, .btn-danger-outline.is-loading::after{
  border-color:rgba(11,110,79,.3);border-top-color:var(--green-deep);
}
@keyframes btn-spin{to{transform:rotate(360deg);}}
@media(prefers-reduced-motion:reduce){
  .btn{transition:none;}
  .btn.is-loading::after{animation-duration:1.2s;}
}

/* ---------- Layout shells ---------- */
.page{max-width:1180px;margin:0 auto;padding:32px 22px 80px;width:100%;}
.page-narrow{max-width:760px;}
@media(max-width:480px){
  .page{padding:20px 14px 60px;}
}
.center-shell{
  min-height:calc(100vh - 90px);display:flex;align-items:center;justify-content:center;padding:40px 18px;
}

/* ---------- Hero (landing) ---------- */
.hero{
  background:
    radial-gradient(1000px 260px at 15% -10%, rgba(200,18,46,0.06), transparent),
    radial-gradient(1000px 260px at 90% -20%, rgba(11,110,79,0.10), transparent);
  border-radius:22px;padding:52px 40px;position:relative;overflow:hidden;
  border:1px solid var(--line);
}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:var(--red-accent);
  background:var(--red-pale);border:1px solid #f1c7cd;padding:6px 14px;border-radius:99px;margin-bottom:18px;
}
.hero h2{font-size:34px;margin:0 0 14px;color:var(--green-deep);font-weight:700;line-height:1.35;}
.hero p{font-size:16px;color:var(--ink-soft);max-width:620px;margin:0 0 26px;}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;}
.seal{
  position:absolute;left:34px;top:34px;width:118px;height:118px;border-radius:50%;
  border:3px dashed var(--gold);display:flex;align-items:center;justify-content:center;
  transform:rotate(-14deg);opacity:.85;
}
.seal-inner{
  width:92px;height:92px;border-radius:50%;border:2px solid var(--gold);
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  color:var(--gold);font-weight:700;font-size:11px;line-height:1.3;
}
@media (max-width:720px){.seal{display:none;}.hero h2{font-size:26px;}}

.steps-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:34px;}
.step-mini{
  background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:16px 14px;text-align:center;
}
.step-mini .num{
  width:32px;height:32px;border-radius:50%;background:var(--green-deep);color:#fff;
  font-weight:700;display:flex;align-items:center;justify-content:center;margin:0 auto 10px;font-size:14px;
}
.step-mini h4{margin:0 0 4px;font-size:13.5px;color:var(--ink);}
.step-mini p{margin:0;font-size:11.5px;color:var(--ink-soft);}
@media(max-width:720px){.steps-strip{grid-template-columns:1fr 1fr;}}

/* ---------- Cards / Panels ---------- */
.panel{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px;box-shadow:var(--shadow);max-width:100%;overflow-wrap:break-word;
}
.panel + .panel{margin-top:20px;}
@media(max-width:480px){
  .panel{padding:16px;}
}
.panel-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px;padding-bottom:14px;border-bottom:1px dashed var(--line-strong);flex-wrap:wrap;}
.panel-header h3{margin:0;font-size:18px;color:var(--green-deep);min-width:0;overflow-wrap:break-word;}
.panel-header .badge-num{
  width:30px;height:30px;border-radius:8px;background:var(--green-pale);color:var(--green-deep);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;
}

/* ---------- Auth ---------- */
.auth-card{width:100%;max-width:430px;}
.tabs{display:flex;background:var(--green-pale);border-radius:12px;padding:4px;margin-bottom:22px;}
.tab-btn{flex:1;padding:10px;border:none;background:transparent;border-radius:var(--radius-sm);font-weight:var(--fw-semibold);font-size:13.5px;color:var(--ink-soft);cursor:pointer;transition:background-color var(--transition), color var(--transition), box-shadow var(--transition);}
.tab-btn:hover:not(.active){color:var(--ink);}
.tab-btn.active{background:var(--green-deep);color:#fff;box-shadow:0 4px 10px -4px rgba(11,110,79,.5);}
.tab-btn:focus-visible{box-shadow:var(--focus-ring);}

.field{margin-bottom:var(--space-3);}
.field label{display:block;font-size:var(--fs-small);font-weight:var(--fw-semibold);margin-bottom:6px;color:var(--ink);}
.field .hint{font-size:var(--fs-caption);color:var(--ink-soft);margin-top:4px;}
.field input[type=text],
.field input[type=email],
.field input[type=password],
.field input[type=tel],
.field input[type=date],
.field input[type=number],
.field select,
.field textarea{
  width:100%;min-height:46px;padding:11px 14px;border:1.6px solid var(--line-strong);border-radius:var(--radius-md);background:#fff;
  font-size:var(--fs-body);font-weight:var(--fw-regular);color:var(--ink);outline:none;
  transition:border-color var(--transition), box-shadow var(--transition);
}
html.dark-mode .field input[type=text],
html.dark-mode .field input[type=email],
html.dark-mode .field input[type=password],
html.dark-mode .field input[type=tel],
html.dark-mode .field input[type=date],
html.dark-mode .field input[type=number],
html.dark-mode .field select,
html.dark-mode .field textarea{ background:var(--paper); color-scheme:dark; }
.field input::placeholder, .field textarea::placeholder{color:var(--ink-soft);opacity:.65;}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--green-deep);box-shadow:var(--focus-ring);}
.field textarea{resize:vertical;min-height:78px;}
.field-hint{ font-size:12px; margin-top:5px; min-height:15px; font-weight:700; }
.field-hint.checking{ color:var(--ink-soft); font-weight:400; }
.field-hint.ok{ color:#1a8f5e; }
.field-hint.bad{ color:var(--red-accent); }
html.dark-mode .field-hint.ok{ color:#3fd08f; }
.field.flagged input,.field.flagged select,.field.flagged textarea{border-color:var(--red-accent);background:var(--red-pale);}

/* ---------- Unified field validation (visual status) ----------
   Applied by the central validation engine in app.js (see
   ensureFieldControlWrap/setFieldStatus) to every validated field in the
   project — signup, login, change-password, and the application wizard.
   Text-like inputs get a colored ✓/✕ badge inside the field itself;
   selects/radio groups (native browser chrome we don't want to fight)
   just get a colored border + the message below, same as everything else. */
.field-control{ position:relative; }
.field-control input[type=text],
.field-control input[type=email],
.field-control input[type=tel],
.field-control input[type=date],
.field-control input[type=number],
.field-control textarea{ padding-inline-end:38px; }
.field-status-icon{
  position:absolute; inset-inline-end:9px; top:50%; transform:translateY(-50%);
  width:20px; height:20px; border-radius:50%; display:none; align-items:center; justify-content:center;
  font-size:11px; font-weight:900; line-height:1; color:#fff; pointer-events:none;
}
/* .field-control only ever wraps the control itself (not the <label>
   above it — see ensureFieldControlWrap in app.js), so top:50% here is
   already relative to the input/textarea's own box, not the whole .field.
   Multi-line textareas still want the badge pinned near the first line
   rather than dead-center of a tall box, hence the override below. */
.field-control textarea ~ .field-status-icon{ top:20px; transform:none; }
.field-status-icon.ok{ display:flex; background:#1a8f5e; }
.field-status-icon.bad{ display:flex; background:var(--red-accent); }
html.dark-mode .field-status-icon.ok{ background:#3fd08f; }
/* Password fields already reserve inset-inline-end for the show/hide
   toggle (see .password-field-wrap below) — the status badge goes on the
   opposite side so the two never overlap. */
.password-field-wrap input[type=password],
.password-field-wrap input[type=text]{ padding-inline-start:36px; }
.password-field-wrap .field-status-icon{ inset-inline-start:8px; inset-inline-end:auto; }
.field-valid input, .field-valid select, .field-valid textarea{ border-color:#1a8f5e !important; }
.field-invalid input, .field-invalid select, .field-invalid textarea{ border-color:var(--red-accent) !important; }
html.dark-mode .field-valid input, html.dark-mode .field-valid select, html.dark-mode .field-valid textarea{ border-color:#3fd08f !important; }
.field-invalid .radio-row{ box-shadow:0 0 0 1.5px var(--red-accent) inset; border-radius:8px; padding:6px; margin:-6px; }

/* ---------- Password field show/hide toggle ---------- */
.password-field-wrap{position:relative;}
.password-field-wrap input[type=password],
.password-field-wrap input[type=text]{padding-inline-end:44px;}
.password-toggle-btn{
  position:absolute;top:50%;inset-inline-end:6px;transform:translateY(-50%);
  width:32px;height:32px;padding:0;border:none;background:transparent;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  color:var(--ink-soft);cursor:pointer;
  transition:background var(--transition),color var(--transition);
}
.password-toggle-btn svg{width:19px;height:19px;display:block;}
.password-toggle-btn:hover{background:var(--paper);color:var(--ink);}
.password-toggle-btn:focus-visible{outline:2px solid var(--green-deep);outline-offset:1px;}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media(max-width:560px){.row2{grid-template-columns:1fr;}}
.radio-row{display:flex;gap:18px;}
.radio-opt{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:600;}
.error-msg{background:var(--red-pale);border:1px solid #f1c7cd;color:var(--red-accent);padding:11px 15px;border-radius:var(--radius-md);font-size:var(--fs-small);margin-bottom:14px;font-weight:var(--fw-semibold);}
.info-msg{background:var(--green-pale);border:1px solid #bfe0cf;color:var(--green-deep);padding:11px 15px;border-radius:var(--radius-md);font-size:var(--fs-small);margin-bottom:14px;font-weight:var(--fw-semibold);}
.field-error{color:var(--red-accent);font-size:12.5px;font-weight:600;margin-top:4px;min-height:0;}
.warning-msg{background:var(--amber-pale);border:1px solid #f3ddaa;color:var(--amber);padding:11px 15px;border-radius:var(--radius-md);font-size:var(--fs-small);margin-bottom:14px;font-weight:var(--fw-semibold);}

/* ---------- Wizard ---------- */
.wizard-shell{display:grid;grid-template-columns:230px 1fr;gap:24px;align-items:start;}
@media(max-width:820px){.wizard-shell{grid-template-columns:1fr;}}
.wizard-nav{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:18px;position:sticky;top:90px;}
.wnav-item{display:flex;align-items:center;gap:10px;padding:10px 8px;border-radius:9px;font-size:13.5px;font-weight:700;color:var(--ink-soft);}
.wnav-item .dot{width:24px;height:24px;border-radius:50%;background:#eee;color:#999;display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:700;flex-shrink:0;}
html.dark-mode .wnav-item .dot{ background:var(--line); color:var(--ink-soft); }
.wnav-item.active{background:var(--green-pale);color:var(--green-deep);}
.wnav-item.active .dot{background:var(--green-deep);color:#fff;}
.wnav-item.done .dot{background:var(--gold);color:#fff;}
.wnav-item.done{color:var(--ink);}

.upload-box{
  border:2px dashed var(--line-strong);border-radius:12px;padding:18px;text-align:center;background:#fff;
  cursor:pointer;transition:.15s border-color;position:relative;
}
html.dark-mode .upload-box{ background:var(--paper); }
.upload-box:hover{border-color:var(--green-deep);}
.upload-box.filled{border-style:solid;border-color:var(--green-deep);background:var(--green-pale);}
.upload-box.rejected{border-color:var(--red-accent);background:var(--red-pale);}
.upload-box input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;}
.upload-box .icon{font-size:26px;margin-bottom:6px;}
.upload-box .label{font-weight:700;font-size:13.5px;}
.upload-box .sub{font-size:11.5px;color:var(--ink-soft);margin-top:3px;}
.upload-preview{width:70px;height:70px;object-fit:cover;border-radius:8px;margin:0 auto 8px;display:block;border:1px solid var(--line);}
.uploads-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;}

.wizard-actions{display:flex;justify-content:space-between;margin-top:26px;padding-top:18px;border-top:1px dashed var(--line-strong);}

/* ---------- Stepper (status tracker) ---------- */
.tracker{display:flex;align-items:flex-start;justify-content:space-between;margin:10px 0 6px;}
.tstep{flex:1;text-align:center;position:relative;}
.tstep:not(:last-child):after{
  content:"";position:absolute;top:17px;right:50%;width:100%;height:3px;background:var(--line);z-index:0;
}
.tstep.complete:not(:last-child):after{background:var(--green-deep);}
.tstep .circ{
  width:34px;height:34px;border-radius:50%;background:#fff;border:3px solid var(--line);margin:0 auto 8px;
  display:flex;align-items:center;justify-content:center;font-size:15px;position:relative;z-index:1;font-weight:700;color:var(--ink-soft);
}
html.dark-mode .tstep .circ{ background:var(--paper); }
.tstep.complete .circ{border-color:var(--green-deep);background:var(--green-deep);color:#fff;}
.tstep.current .circ{border-color:var(--gold);color:var(--gold);}
.tstep.rejected .circ{border-color:var(--red-accent);background:var(--red-accent);color:#fff;}
.tstep .tlabel{font-size:12px;font-weight:700;color:var(--ink-soft);}
.tstep.complete .tlabel,.tstep.current .tlabel{color:var(--ink);}

/* ---------- Status badge (stamp) ---------- */
.stamp{
  display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
  width:108px;height:108px;border-radius:50%;border:3px solid currentColor;position:relative;
  transform:rotate(-8deg);font-weight:700;text-align:center;line-height:1.25;
}
.stamp:before{content:"";position:absolute;inset:6px;border:1px solid currentColor;border-radius:50%;opacity:.55;}
.stamp span{font-size:13px;position:relative;z-index:1;padding:0 8px;}
.stamp.approved{color:var(--green-deep);}
.stamp.rejected{color:var(--red-accent);}
.stamp.pending{color:var(--gold);}

/* ---------- Tables ---------- */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px;}
table{width:100%;border-collapse:collapse;background:#fff;font-size:13.5px;min-width:680px;}
thead th{background:var(--green-pale);color:var(--green-deep);font-weight:700;font-size:12.5px;padding:12px 14px;text-align:right;border-bottom:2px solid var(--green-deep);}
tbody td{padding:12px 14px;border-bottom:1px solid var(--line);}
tbody tr:hover{background:#fafaf3;}
html.dark-mode table{ background:var(--paper); }
html.dark-mode tbody tr:hover{ background:var(--sand); }
.status-chip{padding:4px 11px;border-radius:99px;font-size:11.5px;font-weight:700;display:inline-block;}
.status-chip.draft{background:#eee;color:#666;}
html.dark-mode .status-chip.draft{background:var(--line);color:var(--ink-soft);}
.status-chip.pending{background:var(--amber-pale);color:var(--amber);}
.status-chip.pending_payment{background:var(--amber-pale);color:var(--amber);}
.status-chip.pending_review{background:#dbe9f7;color:#1d5b93;}
.status-chip.rejected{background:var(--red-pale);color:var(--red-accent);}
.status-chip.approved{background:var(--green-pale);color:var(--green-deep);}

/* ---------- notifications list (🔔) ---------- */
.notif-row:hover{ background:var(--sand); }
.notif-row:last-child{ border-bottom:none !important; }
html.dark-mode .notif-row:hover{ background:var(--paper); }

/* ---------- Review (admin) field rows ---------- */
.review-field{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:12px 0;border-bottom:1px dotted var(--line-strong);}
.review-field:last-child{border-bottom:none;}
.review-field .rf-label{font-size:12px;color:var(--ink-soft);font-weight:700;margin-bottom:3px;}
.review-field .rf-value{font-size:14.5px;font-weight:600;}
.flag-toggle{
  flex-shrink:0;padding:6px 12px;border-radius:8px;border:1.5px solid var(--line-strong);background:#fff;
  font-size:12px;font-weight:700;cursor:pointer;color:var(--ink-soft);
}
html.dark-mode .flag-toggle{ background:var(--paper); }
.flag-toggle.on{background:var(--red-accent);border-color:var(--red-accent);color:#fff;}
.flag-note{margin-top:8px;width:100%;}
.flag-note textarea{width:100%;border:1.5px solid var(--red-accent);border-radius:8px;padding:8px 10px;font-size:13px;background:var(--red-pale);}

/* ============================================================
   ADMIN — Side-by-side review & audit screen (pageAdminAudit)
   ============================================================ */
.audit-topbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin:16px 0;}
.audit-topbar h3{margin:0;font-size:18px;}
/* Desktop: two independently-scrollable columns side by side. Since the
   document is dir="rtl", the first child here (.audit-info-pane) renders
   on the right and the second (.audit-docs-pane) on the left — exactly
   "معلومات الحكم يمين، الوثائق يسار" — without any RTL-fighting overrides. */
.audit-split{display:flex;gap:18px;align-items:flex-start;}
.audit-info-pane{flex:0 0 38%;max-width:38%;position:sticky;top:12px;max-height:calc(100vh - 24px);overflow-y:auto;}
.audit-docs-pane{flex:1;min-width:0;display:flex;flex-direction:column;gap:14px;}
.audit-mobile-tabs{display:none;}
.audit-doclist{display:flex;flex-direction:column;gap:8px;max-height:260px;overflow-y:auto;}
.audit-doc-item{
  display:flex;align-items:center;gap:10px;width:100%;text-align:start;
  padding:10px 12px;border:1.5px solid var(--line-strong);border-radius:10px;
  background:var(--paper);cursor:pointer;font-family:inherit;
}
.audit-doc-item:disabled{opacity:.55;cursor:not-allowed;}
.audit-doc-item.active{border-color:var(--green-deep);box-shadow:0 0 0 2px var(--green-pale);}
.audit-doc-icon{font-size:18px;flex-shrink:0;}
.audit-doc-title{flex:1;font-size:13.5px;font-weight:600;}
.audit-doc-badge{font-size:11.5px;font-weight:700;white-space:nowrap;color:var(--ink-soft);}
.audit-doc-item.audit-doc-ok .audit-doc-badge{color:#1a8f5e;}
.audit-doc-item.audit-doc-ok{border-color:#1a8f5e;}
.audit-doc-item.audit-doc-warn .audit-doc-badge{color:#a9720b;}
.audit-doc-item.audit-doc-warn{border-color:#e0a634;}
.audit-doc-item.audit-doc-bad .audit-doc-badge{color:var(--red-accent);}
.audit-doc-item.audit-doc-bad{border-color:var(--red-accent);}
.audit-preview-panel{display:flex;flex-direction:column;}
.audit-preview{
  min-height:340px;max-height:60vh;border:1.5px dashed var(--line-strong);border-radius:12px;
  display:flex;align-items:center;justify-content:center;overflow:hidden;background:#f4f6f4;
  position:relative;
}
html.dark-mode .audit-preview{background:#10150f;}
.audit-preview-empty{text-align:center;padding:30px;}
.audit-img-wrap{width:100%;height:60vh;max-height:60vh;overflow:hidden;display:flex;align-items:center;justify-content:center;cursor:grab;touch-action:none;}
.audit-img-wrap:active{cursor:grabbing;}
.audit-img{max-width:100%;max-height:100%;object-fit:contain;transition:transform .04s linear;user-select:none;-webkit-user-drag:none;}
.audit-pdf-frame{width:100%;height:60vh;border:none;background:#fff;}
.audit-zoom-controls{display:flex;gap:8px;align-items:center;margin-top:10px;flex-wrap:wrap;}
.audit-status-bar{margin-top:12px;padding-top:12px;border-top:1px dashed var(--line-strong);}
.audit-status-bar textarea{width:100%;border:1.5px solid var(--red-accent);border-radius:8px;padding:8px 10px;font-size:13px;background:var(--red-pale);}

/* Phone/Tablet: collapse the two columns into a tab switcher — "معلومات
   الحكم" / "الوثائق" — instead of a cramped side-by-side layout. */
@media(max-width:900px){
  .audit-mobile-tabs{display:flex;gap:8px;margin:14px 0;}
  .audit-tab-btn{flex:1;padding:10px;border-radius:10px;border:1.5px solid var(--line-strong);background:#fff;font-weight:700;font-size:13.5px;cursor:pointer;font-family:inherit;}
  html.dark-mode .audit-tab-btn{background:var(--paper);}
  .audit-tab-btn.active{border-color:var(--green-deep);background:var(--green-pale);color:var(--green-deep);}
  .audit-split{flex-direction:column;}
  .audit-info-pane, .audit-docs-pane{display:none;flex:1 1 auto;max-width:100%;position:static;max-height:none;}
  .audit-info-pane.audit-mobile-visible, .audit-docs-pane.audit-mobile-visible{display:flex;flex-direction:column;}
  .audit-preview, .audit-img-wrap, .audit-pdf-frame{height:48vh;max-height:48vh;}
}


.reject-note-card{background:var(--red-pale);border:1px solid #f1c7cd;border-radius:10px;padding:14px 16px;margin-bottom:12px;}
.reject-note-card b{color:var(--red-accent);}

/* ---------- Force right alignment on LTR-script fields ----------
   Several fields hold Latin/numeric data (Latin name, phone, username,
   email, shoe/clothing size, CCP) and are given dir="ltr" so the text
   itself types and reads left-to-right (correct digit/letter order,
   correct cursor behaviour) — but the page itself is RTL, and every one
   of these fields must still visually sit flush against the right edge
   of its box, in every state (empty placeholder or filled, Arabic-
   adjacent layout or not). Without this rule, dir="ltr" alone makes the
   browser left-align the field's own text-align:start, which visually
   breaks the field out of the RTL form layout. This is deliberately
   scoped to form controls only (not every dir="ltr" element in the
   app — e.g. the certificate already positions its own LTR text with
   an inline style). */
.field input[dir="ltr"], .field select[dir="ltr"], .field textarea[dir="ltr"],
.password-field-wrap input[dir="ltr"]{
  text-align:right;
}

/* ---------- Certificate ---------- */
.cert{
  background:var(--paper);border:2px solid var(--green-deep);border-radius:16px;padding:0;overflow:hidden;position:relative;
}
.cert-head{
  background:linear-gradient(135deg,var(--green-deep),var(--green-mid));color:#fff;padding:22px 28px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.cert-head .htext h2{margin:0;font-size:18px;}
.cert-head .htext p{margin:4px 0 0;font-size:12px;opacity:.9;}
.cert-head img{height:56px;background:#fff;border-radius:10px;padding:5px;}
.cert-body{padding:26px 30px;}
.cert-title{text-align:center;margin-bottom:16px;}
.cert-title h1{font-size:22px;color:var(--green-deep);margin:0 0 4px;}
.cert-title p{margin:0;color:var(--ink-soft);font-size:12.5px;font-weight:700;}
.cert-name-row{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:18px;padding:14px 18px;background:var(--green-pale);border-radius:12px;}
.cert-name-block .k{font-size:11.5px;color:var(--ink-soft);font-weight:700;margin-bottom:4px;}
.cert-name-value{font-weight:700;font-size:22px;color:var(--green-deep);}
.cert-birth-value{font-size:14px;font-weight:700;color:var(--ink);}
/* In-app view only: the Arabic name/surname, the Latin name/surname, and
   the birth date/place are all centered within their box, regardless of
   text length — plain text-align:center, so it holds for any string.
   Reverted back to the original right-alignment under @media print below,
   so the printed/PDF certificate is completely unaffected. */
.cert-name-center{text-align:center;}
.cert-photo{width:130px;height:130px;object-fit:cover;border-radius:12px;border:3px solid #fff;box-shadow:0 2px 10px rgba(0,0,0,.15);flex-shrink:0;}
.cert-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;}
.cert-cell{padding:10px 16px;border-bottom:1px solid var(--line);border-left:1px solid var(--line);}
.cert-cell:nth-child(odd){border-left:none;}
.cert-cell .k{font-size:11px;color:var(--ink-soft);font-weight:700;margin-bottom:3px;}
.cert-cell .v{font-size:14px;font-weight:700;}
@media(max-width:640px){.cert-grid{grid-template-columns:1fr;}.cert-cell{border-left:none !important;}.cert-name-row{flex-direction:column-reverse;text-align:center;}}
.cert-declaration-title{margin-top:18px;}
.cert-declaration-text{font-size:12px;color:var(--ink-soft);line-height:1.7;margin:6px 0 0;}
.cert-footer{margin-top:18px;padding-top:14px;border-top:1px dashed var(--line-strong);}
.signature-line{width:240px;max-width:100%;height:44px;border-bottom:1.5px solid var(--ink-soft);}
.cert-signature-img{max-width:240px;max-height:80px;object-fit:contain;display:block;}
.cert-actions{display:flex;gap:10px;margin-top:22px;}
@media print{
  .no-print{display:none !important;}
  .topbar, .site-footer{display:none !important;}
  body{background:#fff;}
  .page{padding:0;max-width:100%;}
  @page{size:A4;margin:9mm;}
  .cert{box-shadow:none;border-width:1.5px;page-break-inside:avoid;break-inside:avoid;width:100%;box-sizing:border-box;}
  .panel{padding:0;border:none;box-shadow:none;background:transparent;}
  .cert-head{padding:14px 22px;}
  .cert-head .htext h2{font-size:15px;}
  .cert-head .htext p{font-size:10.5px;}
  .cert-head img{height:44px;}
  .cert-body{padding:16px 22px;}
  .cert-title{margin-bottom:10px;}
  .cert-title h1{font-size:18px;}
  .cert-name-row{padding:10px 14px;margin-bottom:12px;}
  .cert-name-value{font-size:18px;}
  /* Print/PDF must keep the certificate exactly as it was before this
     change — restore the original right-alignment here regardless of the
     screen-only centering rule above. */
  .cert-name-center{text-align:right;}
  .cert-birth-value{font-size:12px;}
  .cert-photo{width:96px;height:96px;}
  .cert-cell{padding:6px 14px;}
  .cert-cell .v{font-size:12.5px;}
  .cert-declaration-title{margin-top:10px;font-size:12.5px;}
  .cert-declaration-text{font-size:10.5px;line-height:1.5;}
  .cert-footer{margin-top:10px;padding-top:8px;}
  .signature-line{height:30px;}
  .cert-signature-img{max-height:56px;}
}

/* ---------- Signature pad (referee e-signature) ---------- */
.sigpad-wrap{
  background:#fff;border:1.5px dashed var(--line-strong);border-radius:12px;
  padding:8px;touch-action:none;max-width:420px;
}
html.dark-mode .sigpad-wrap{ background:#fff; } /* signature must stay legible ink-on-white even in dark mode */
.sigpad-canvas{
  width:100%;height:180px;display:block;border-radius:8px;background:#fff;
  cursor:crosshair;touch-action:none;
}
.sigpad-actions{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap;}
.sigpad-saved-preview{
  background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:14px;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;max-width:420px;
}
.sigpad-saved-preview img{max-width:220px;max-height:90px;object-fit:contain;}
.sigpad-status{font-size:13px;font-weight:700;color:var(--green-deep);}

/* ---------- Whole-platform disabled notice ---------- */
.site-disabled-shell{
  min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;
}
.site-disabled-card{
  max-width:480px;width:100%;text-align:center;background:var(--paper);border:1.5px solid var(--line);
  border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);padding:44px 32px;
}
.site-disabled-card img{height:64px;margin-bottom:18px;}
.site-disabled-card h2{color:var(--green-deep);margin:0 0 10px;font-size:22px;}
.site-disabled-card p{color:var(--ink-soft);margin:0;line-height:1.7;}
.site-disabled-card .admin-entry{margin-top:26px;font-size:12.5px;}

/* ---------- Pending-activation: contact-admin button ---------- */
.btn-contact-admin{
  font-size:15px;padding:14px 26px;
  animation:pulseContactAdmin 2.2s ease-in-out infinite;
  text-align:center;
}
@keyframes pulseContactAdmin{
  0%,100%{ box-shadow:0 0 0 0 rgba(29,91,147,.35); }
  50%{ box-shadow:0 0 0 10px rgba(29,91,147,0); }
}
@media(max-width:480px){
  /* .btn's base white-space:nowrap makes this long label overflow the
     viewport on phones (it can't wrap, so it spills past one edge instead
     of sitting centered) — override just for this button, just on mobile. */
  .btn-contact-admin{
    display:flex;width:100%;max-width:100%;box-sizing:border-box;
    white-space:normal;line-height:1.45;text-align:center;
    padding:14px 18px;
  }
}

/* ---------- Registration countdown (home page) ---------- */
.reg-countdown{
  margin-top:22px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 20px;max-width:460px;
  margin-inline:auto;text-align:center;
}
.reg-countdown-label{font-size:13px;font-weight:var(--fw-semibold);color:var(--ink-soft);margin-bottom:12px;}
.reg-countdown-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.reg-countdown-unit{
  background:#fff;border:1.5px solid var(--line-strong);border-radius:var(--radius-sm);
  text-align:center;padding:10px 4px;
}
html.dark-mode .reg-countdown-unit{ background:var(--paper); }
.reg-countdown-num{display:block;font-size:24px;font-weight:800;color:var(--green-deep);font-variant-numeric:tabular-nums;}
.reg-countdown-suffix{display:block;font-size:11px;color:var(--ink-soft);margin-top:2px;}
.reg-countdown.reg-countdown-expired .reg-countdown-num{color:var(--red-accent);}
.notice-closed{background:var(--red-pale);border:1px solid #f1c7cd;color:var(--red-accent);padding:12px 16px;border-radius:var(--radius-md);font-size:14px;font-weight:var(--fw-semibold);max-width:460px;}

/* ---------- Admin: on/off switch (registration control panel) ---------- */
.switch-row{display:flex;align-items:center;gap:12px;}
.switch{position:relative;display:inline-block;width:46px;height:26px;flex-shrink:0;}
.switch input{opacity:0;width:0;height:0;}
.switch-slider{
  position:absolute;cursor:pointer;inset:0;background:var(--line-strong);border-radius:999px;
  transition:background-color var(--transition);
}
.switch-slider::before{
  content:"";position:absolute;height:20px;width:20px;left:3px;top:3px;background:#fff;border-radius:50%;
  transition:transform var(--transition);box-shadow:var(--shadow-sm);
}
.switch input:checked + .switch-slider{background:var(--green-deep);}
.switch input:checked + .switch-slider::before{transform:translateX(-20px);}
.switch-label{font-size:14.5px;font-weight:var(--fw-semibold);color:var(--ink);}

/* ---------- Empty state ---------- */
.empty{
  text-align:center;padding:50px 20px;color:var(--ink-soft);
}
.empty .icon{font-size:44px;margin-bottom:12px;}

/* ---------- Footer ---------- */
.site-footer{border-top:1px solid var(--line);margin-top:60px;padding:26px 22px;text-align:center;color:var(--ink-soft);font-size:12.5px;}
.site-footer-credit{margin-top:8px;font-size:11.5px;font-weight:var(--fw-medium);color:var(--gold);opacity:.85;}

/* Utility */
/* .flex is used app-wide for action-button rows (approve/reject, save/cancel,
   etc). Buttons use white-space:nowrap by design (so a single button's label
   never wraps mid-word), which means a *row* of several buttons has no way
   to shrink — without flex-wrap the row simply overflows its card and drags
   the whole page into horizontal scroll on narrow screens. wrap is the
   correct fix: each button keeps its own single-line label, and the row
   itself reflows to multiple lines instead of overflowing. */
.flex{display:flex;flex-wrap:wrap;}
.flex-between{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;}
.gap-8{gap:8px;} .gap-12{gap:12px;} .gap-16{gap:16px;}
.mt-8{margin-top:8px;} .mt-16{margin-top:16px;} .mt-24{margin-top:24px;}
.mb-12{margin-bottom:12px;} .mb-16{margin-bottom:16px;}
.text-sm{font-size:12.5px;} .muted{color:var(--ink-soft);}
.center-txt{text-align:center;}
.section-title{font-size:14px;font-weight:700;color:var(--green-deep);margin:22px 0 12px;padding-bottom:8px;border-bottom:2px solid var(--green-pale);}

/* ---------- Referee lists (قوائم الحكام) — builder + live preview + print ---------- */
.reflist-radio-group{display:flex;flex-wrap:wrap;gap:16px;margin-top:6px;}
.reflist-radio-group label{display:flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;cursor:pointer;}
.reflist-checks{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:6px;}
.reflist-checks label{display:flex;align-items:center;gap:6px;font-size:13.5px;cursor:pointer;}
.reflist-manual-list{max-height:280px;overflow-y:auto;border:1px solid var(--line);border-radius:10px;padding:8px 12px;background:var(--paper);}
.reflist-manual-item{display:flex;align-items:center;gap:8px;padding:6px 2px;font-size:13.5px;cursor:pointer;border-bottom:1px solid var(--line);}
.reflist-manual-item:last-child{border-bottom:none;}
#reflist-manual-search{width:100%;padding:9px 12px;border:1px solid var(--line);border-radius:8px;font-size:13.5px;background:#fff;color:var(--ink);}

/* Outer frame (item 4): sized to the full A4 page rather than to however
   many rows the table has — 279mm is A4's 297mm height minus the 9mm+9mm
   @page margin used below and in reflistSyncPageSizeStyle(); the landscape
   variant swaps to A4's 210mm height minus the same margins (192mm). A
   short list simply leaves the extra space empty inside the frame; a long
   list overflows onto additional pages exactly like any tall printed
   element (min-height never clips content), each continuing the frame
   border via the "border" declared here. box-sizing:border-box keeps the
   border+padding inside that measured height instead of adding to it. */
.reflist-print{
  background:#fff;color:#1c2620;border:1px solid var(--line);border-radius:14px;
  padding:22px 26px;box-shadow:var(--shadow-sm);
  box-sizing:border-box;min-height:279mm;
  display:flex;flex-direction:column;
}
.reflist-landscape{min-height:192mm;}
/* Item 5+6: logo + association name centered as one group — a *centered*
   flex column (not RTL's default right-alignment) regardless of the
   surrounding dir="rtl". text-align:center on the text block keeps the
   Arabic text itself rendering RTL (word order, punctuation) while the
   block as a whole sits in the middle of the page, not pinned to the right
   edge the way plain RTL flow would place it. */
.reflist-print-head{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;margin-bottom:6px;padding-bottom:14px;border-bottom:2px solid var(--green-pale);
  text-align:center;width:100%;
}
.reflist-print-head img{height:52px;}
.reflist-print-headtext{text-align:center;width:100%;}
.reflist-print-headtext h2{margin:0;font-size:16px;color:var(--green-deep);}
/* Item 3: the list title itself — big, bold, centered, and forced to a
   single line (white-space:nowrap here; fitReflistTitle() in app.js then
   shrinks the font-size, only as far as needed, so a long title never
   wraps or spills past the page edge). clamp() gives a sensible size
   before that per-title JS adjustment even runs. */
.reflist-title{
  margin:6px 0 18px;text-align:center;font-weight:800;color:var(--ink);
  font-size:clamp(16px, 3vw, 26px);
  white-space:nowrap;overflow:hidden;width:100%;
}
.reflist-table{width:100%;border-collapse:collapse;font-size:13px;}
.reflist-table th, .reflist-table td{border:1px solid var(--line-strong);padding:8px 10px;text-align:center;}
.reflist-table thead th{background:var(--green-pale);color:var(--green-deep);font-weight:700;}
.reflist-table td:nth-child(2){text-align:right;font-weight:600;}
.reflist-sig-col{min-width:110px;}
.reflist-sig-img{max-width:100px;max-height:40px;object-fit:contain;display:block;margin:0 auto;}

@media print{
  .reflist-print{border:1.2px solid #333;box-shadow:none;border-radius:0;padding:14px 18px;}
  .reflist-print-head img{height:42px;}
  .reflist-title{font-size:clamp(15px, 2.6vw, 22px);margin:4px 0 14px;}
  .reflist-table{font-size:11.5px;}
  .reflist-table th, .reflist-table td{padding:6px 8px;}
  .reflist-table thead{display:table-header-group;} /* repeat header row on every printed page */
  .reflist-table tr{page-break-inside:avoid;break-inside:avoid;}
  .reflist-sig-col{min-width:90px;height:34px;}
  .reflist-sig-img{max-height:30px;}
  .reflist-landscape{width:100%;}
}