/* ═══════════════════════════════════════════════════════════════════════════
   IES Theme — app-wide design system (v2, restrained)
   Loaded AFTER each page's inline styles, so equal-specificity rules here win.

   Design language: one brand accent, neutral surfaces, soft neutral depth,
   strict type scale, purposeful motion only. No gradients, no glass blur,
   no glow, no decorative animation. See design-review/IES_DESIGN_REVIEW.md.

   Backward compatibility: every legacy token name (--pri/--primary, --glass,
   --grad-brand, --glow, …) is still defined — pointed at restrained values —
   so standalone pages restyle themselves without markup changes.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  color-scheme: light;   /* native controls (date pickers, scrollbars) match */
  /* ── Brand & semantic ── */
  --pri:   #00594F;
  --prid:  #00463E;
  --pril:  #E9F2F0;
  --accent:   var(--pri);   /* legacy second accent — collapsed into brand */
  --accent-2: var(--pri);
  --bg:    #F5F7F6;
  --surf:  #FFFFFF;
  --surf-2:#EFF2F1;
  --bd:    #E3E8E6;
  --bd-strong: #CDD5D2;
  --txt:   #121A17;
  --txt2:  #4A5551;
  --txt3:  #8A948F;
  --dgr:   #B42323;  --dgr-bg:  #FBEAEA;
  --ok:    #1A7F4B;  --ok-bg:   #E4F5EB;
  --warn:  #9A6700;  --warn-bg: #FBF0DB;

  /* ── Legacy decoration tokens → restrained equivalents ── */
  --glass:        var(--surf);
  --glass-border: var(--bd);
  --grad-brand:   var(--pri);        /* solid brand — no gradient */
  --grad-edge:    transparent;
  --glow:         0 2px 8px rgba(18,26,23,.08);  /* soft neutral hover shadow */
  --aurora-1: transparent; --aurora-2: transparent; --aurora-3: transparent;
  --grid-dot: transparent;

  /* ── Elevation (soft, neutral) ── */
  --shadow-xs: 0 1px 2px rgba(18,26,23,.06);
  --shadow-sm: 0 2px 6px rgba(18,26,23,.07);
  --shadow-md: 0 4px 12px rgba(18,26,23,.10);
  --shadow-lg: 0 12px 32px rgba(18,26,23,.14);

  /* ── Long-name aliases (both vocabularies resolve correctly) ── */
  --primary: var(--pri);
  --primary-dark: var(--prid);
  --primary-light: var(--pril);
  --success-text: var(--ok);
  --success-bg: var(--ok-bg);
  --warning-text: var(--warn);
  --warning-bg: var(--warn-bg);
  --danger-text: var(--dgr);
  --danger-bg: var(--dgr-bg);
  --danger: var(--dgr);
  --wrn: var(--warn);
  --wrn-bg: var(--warn-bg);
  --text-primary: var(--txt);
  --text-secondary: var(--txt2);
  --border: var(--bd);
  --border-strong: var(--bd-strong);
  --page-bg: var(--bg);
  --surface: var(--surf);
  --surface-2: var(--surf-2);
  --focus-ring: #1A7A6C;
  --radius: 10px;
  --radius-lg: 14px;

  /* ── New vocabulary (target names for ongoing refactor) ── */
  --brand: var(--pri);
  --brand-strong: var(--prid);
  --brand-tint: var(--pril);
  --text: var(--txt);
  --text-2: var(--txt2);
  --text-3: var(--txt3);
  --page: var(--bg);

  /* Type scale — the ONLY sizes. xs is for uppercase micro-labels only. */
  --text-xs: 11px; --text-sm: 12px; --text-base: 13px; --text-md: 15px;
  --text-lg: 17px; --text-xl: 20px; --text-2xl: 24px; --text-3xl: 32px;

  /* Spacing — 4pt grid */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px;

  /* Radius */
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-full: 999px;

  /* Elevation (new names) */
  --e-0: none;
  --e-1: var(--shadow-xs);
  --e-2: var(--shadow-sm);
  --e-3: var(--shadow-lg);

  /* Motion — opacity/transform only, nothing infinite, movement ≤ 4px */
  --t-fast: 120ms; --t-med: 200ms;
  --ease: cubic-bezier(.25,.1,.25,1);
  --focus: 0 0 0 3px rgba(0,89,79,.35);
}

/* ── Dark theme: neutral stepped surfaces, desaturated brand, no neon ────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --pri:   #3AAF9C;
    --prid:  #57C4B2;
    --pril:  #17332E;
    --bg:    #111514;
    --surf:  #1A201E;
    --surf-2:#232A28;
    --bd:    #2A322F;
    --bd-strong: #39423F;
    --txt:   #E8EEEC;
    --txt2:  #A3B2AC;
    --txt3:  #6B7873;
    --dgr:   #E5726B;  --dgr-bg:  #331717;
    --ok:    #4CC38A;  --ok-bg:   #14291E;
    --warn:  #E8B341;  --warn-bg: #2E2410;
    /* brand fills (header, primary buttons, active nav) stay deep teal so
       white text keeps AA contrast; --pri itself is the lighter link/accent */
    --grad-brand: #1E5E53;
    --glow: 0 2px 8px rgba(0,0,0,.5);
    --shadow-xs: 0 1px 2px rgba(0,0,0,.4);
    --shadow-sm: 0 2px 6px rgba(0,0,0,.45);
    --shadow-md: 0 4px 12px rgba(0,0,0,.5);
    --shadow-lg: 0 16px 40px rgba(0,0,0,.6);
    --focus-ring: #4FB3A2;
    --focus: 0 0 0 3px rgba(58,175,156,.45);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --pri:   #3AAF9C;
  --prid:  #57C4B2;
  --pril:  #17332E;
  --bg:    #111514;
  --surf:  #1A201E;
  --surf-2:#232A28;
  --bd:    #2A322F;
  --bd-strong: #39423F;
  --txt:   #E8EEEC;
  --txt2:  #A3B2AC;
  --txt3:  #6B7873;
  --dgr:   #E5726B;  --dgr-bg:  #331717;
  --ok:    #4CC38A;  --ok-bg:   #14291E;
  --warn:  #E8B341;  --warn-bg: #2E2410;
  --grad-brand: #1E5E53;
  --glow: 0 2px 8px rgba(0,0,0,.5);
  --shadow-xs: 0 1px 2px rgba(0,0,0,.4);
  --shadow-sm: 0 2px 6px rgba(0,0,0,.45);
  --shadow-md: 0 4px 12px rgba(0,0,0,.5);
  --shadow-lg: 0 16px 40px rgba(0,0,0,.6);
  --focus-ring: #4FB3A2;
  --focus: 0 0 0 3px rgba(58,175,156,.45);
}

/* ── Base typography ─────────────────────────────────────────────────────── */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  background: var(--bg);
  color: var(--txt);
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.005em;
}
h1, h2, h3 { color: var(--txt); }

/* ── Header: solid brand bar ─────────────────────────────────────────────── */
.app-header {
  background: var(--grad-brand) !important;
  position: sticky; top: 0; z-index: 50;
  box-shadow: var(--shadow-sm);
}

/* ── Cards & panels: solid surface, hairline border, soft resting shadow ── */
.card, .section-card, .sum-card, .summary-chip, .panel, .box,
.order-card, .cert-card, .form-card, .detail-card, .chip,
.login-card, .quick-action, .metric-card, .cert-item, .order-item {
  background: var(--surf) !important;
  border: 1px solid var(--bd) !important;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--t-fast) var(--ease);
}
.card:hover, .section-card:hover, .sum-card:hover, .summary-chip:hover,
.order-card:hover, .cert-card:hover, .quick-action:hover, .metric-card:hover,
.pay-banner:hover, .cert-item:hover, .order-item:hover {
  box-shadow: var(--shadow-sm);
}

/* ── Tables ──────────────────────────────────────────────────────────────── */
tr:hover td { background: color-mix(in srgb, var(--pril) 55%, var(--surf)) !important; }
td, th { border-color: var(--bd) !important; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn, button[type="submit"], input[type="submit"] {
  border-radius: var(--r-md);
  transition: background var(--t-fast), box-shadow var(--t-fast), filter var(--t-fast);
}
.btn:hover, button[type="submit"]:hover, input[type="submit"]:hover { box-shadow: var(--shadow-sm); }

/* ── Inputs ──────────────────────────────────────────────────────────────── */
input, select, textarea {
  border-radius: var(--r-md);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--pri) !important;
  box-shadow: 0 0 0 3px var(--pril);
  outline: none;
}

/* ── Data numerals: tabular, single typeface ─────────────────────────────── */
.sum-value, .summary-chip .val, .stat-value, .big-num, .emp-total, .kpi,
.metric-value, .balance-pos, .balance-zero, .display-num {
  font-family: inherit;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

/* ── Scrollbar: quiet neutral ────────────────────────────────────────────── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--bd-strong);
  border-radius: 10px; border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--txt3); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .001ms !important; }
}

/* ── Floating theme toggle (injected by ies-boost.js on pages without one) ─ */
.ies-theme-fab {
  position: fixed; bottom: 20px; left: 20px; z-index: 400;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--surf); color: var(--txt);
  border: 1px solid var(--bd);
  box-shadow: var(--shadow-md);
  cursor: pointer; font-size: 17px;
  display: flex; align-items: center; justify-content: center;
  transition: box-shadow var(--t-fast);
}
.ies-theme-fab:hover { box-shadow: var(--shadow-lg); }

/* ── Back link: quiet pill, comfortable tap target ───────────────────────── */
.back-link {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 9px 16px !important;
  margin-bottom: 16px;
  font-size: 13px !important;
  font-weight: 600;
  color: var(--pri) !important;
  text-decoration: none !important;
  background: var(--surf);
  border: 1px solid var(--bd);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--t-fast), background var(--t-fast);
}
.back-link:hover { box-shadow: var(--shadow-sm); background: var(--pril); }

/* ═══════════════════════════════════════════════════════════════════════════
   Academy language selector — per-page EN / العربية / اردو switch
   ═══════════════════════════════════════════════════════════════════════════ */
.acad-lang{
  display:inline-flex; align-items:center; gap:4px;
  padding:4px; border-radius:var(--r-full);
  background:var(--surf); border:1px solid var(--bd);
  box-shadow:var(--shadow-xs);
}
.acad-lang__globe{ font-size:15px; margin:0 4px; opacity:.75; }
.acad-lang__opt{
  font:600 13px/1 'Inter',sans-serif;
  color:var(--txt2);
  padding:6px 12px; border:0; border-radius:var(--r-full);
  background:transparent; cursor:pointer;
  transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.acad-lang__opt:hover{ color:var(--txt); background:var(--pril); }
.acad-lang__opt.is-active{ color:#fff; background:var(--grad-brand); box-shadow:var(--shadow-sm); }
.acad-lang__opt:focus-visible{ outline:2px solid var(--pri); outline-offset:2px; }
.acad-lang__opt[dir="rtl"]{ font-family:'Noto Naskh Arabic','Inter',serif; }
[dir="rtl"] .acad-lang{ flex-direction:row-reverse; }

/* ═══════════════════════════════════════════════════════════════════════════
   Shared component layer — canonical badges, buttons, alerts, tables, modal,
   focus/a11y utilities. Mirrors base.html so standalone pages match exactly.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Numerals ───────────────────────────────────────────────────────────── */
html{font-feature-settings:"tnum" 1}
.tnum{font-variant-numeric:tabular-nums}
.amount{text-align:end;font-variant-numeric:tabular-nums;white-space:nowrap}
th.amount{text-align:end}

/* ── Table wrapper ──────────────────────────────────────────────────────── */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}

/* ── Badges ─────────────────────────────────────────────────────────────── */
.badge{display:inline-block;padding:3px 10px;border-radius:var(--r-full);font-size:var(--text-sm);font-weight:600}
.badge-success{background:var(--ok-bg);color:var(--ok)}
.badge-warning{background:var(--warn-bg);color:var(--warn)}
.badge-danger{background:var(--dgr-bg);color:var(--dgr)}
.badge-neutral{background:var(--surf-2);color:var(--txt2)}
.badge-info{background:var(--pril);color:var(--pri)}

/* ── Buttons (canonical) ────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;min-height:40px;
  border-radius:var(--r-md);font-size:var(--text-base);font-weight:600;cursor:pointer;border:none;
  text-decoration:none;font-family:inherit;
  transition:background var(--t-fast),box-shadow var(--t-fast),filter var(--t-fast)}
.btn-primary{background:var(--grad-brand);color:#fff;box-shadow:var(--shadow-xs)}
.btn-primary:hover{filter:brightness(1.06);box-shadow:var(--shadow-sm)}
.btn-secondary{background:var(--surf);color:var(--txt);border:1px solid var(--bd-strong)}
.btn-secondary:hover{background:var(--pril);color:var(--pri);box-shadow:var(--shadow-xs)}
.btn-danger{background:var(--surf);color:var(--dgr);border:1px solid var(--bd-strong)}
.btn-danger:hover{background:var(--dgr-bg);border-color:var(--dgr)}
.btn-ghost{background:transparent;color:var(--txt2);border:1px solid transparent}
.btn-ghost:hover{background:var(--pril);color:var(--pri)}
.btn-sm{padding:6px 12px;font-size:var(--text-sm);min-height:32px}
@media(pointer:coarse){
  .btn,.btn-sm,.sort-btn,.cancel-btn,.uncancel-btn,.edit-btn,.pager a,
  .chart-tog,.drp-quick-btn,.metric-link{min-height:44px}
}

/* ── Empty state ────────────────────────────────────────────────────────── */
.empty-state{text-align:center;padding:48px 20px;color:var(--txt2)}
.empty-state .icon{font-size:2rem;margin-bottom:10px;color:var(--txt3)}
.empty-state p{font-size:var(--text-base)}

/* ── Alerts ─────────────────────────────────────────────────────────────── */
.alert{padding:12px 16px;border-radius:var(--r-md);font-size:var(--text-base);margin-bottom:16px}
.alert-danger{background:var(--dgr-bg);color:var(--dgr)}
.alert-success{background:var(--ok-bg);color:var(--ok)}
.alert-warning{background:var(--warn-bg);color:var(--warn)}

/* ── Focus ring + a11y utilities ────────────────────────────────────────── */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--focus-ring);outline-offset:2px;border-radius:4px}
/* Pill-style radio groups hide their native input — surface keyboard focus
   on the label instead (certificate forms' Pending/Paid, Cash/Bank, …). */
.radio-opt:focus-within{outline:3px solid var(--focus-ring);outline-offset:2px}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--grad-brand);color:#fff;
  padding:12px 20px;font-weight:700;font-size:var(--text-base);z-index:1000;
  border-radius:0 0 8px 0;text-decoration:none}
.skip-link:focus{left:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ── RTL: keep the theme FAB clear of the WhatsApp FAB (both sit left) ──── */
[dir="rtl"] .ies-theme-fab{left:auto;right:20px;bottom:76px}

/* ── WhatsApp contrast helper ───────────────────────────────────────────────
   White text on #25D366 fails WCAG AA (~1.9:1). Use .wa-solid for any
   WhatsApp CTA that carries text; the icon-only FAB (.tuv-wa-fab) keeps
   #25D366 as a recognizable brand mark. */
.wa-solid{background:#075E54!important;color:#fff!important}

/* ── Modal (typed confirms — used by window.iesConfirm in ies-boost.js) ──── */
.ies-modal-ovl{position:fixed;inset:0;background:rgba(10,15,14,.5);z-index:900;
  display:flex;align-items:center;justify-content:center;padding:20px}
.ies-modal{background:var(--surf);border:1px solid var(--bd);border-radius:var(--radius-lg);
  max-width:420px;width:100%;padding:22px;box-shadow:var(--shadow-lg)}
.ies-modal h3{font-size:var(--text-md);font-weight:600;color:var(--txt);margin:0 0 8px}
.ies-modal p{font-size:var(--text-base);color:var(--txt2);margin:0;line-height:1.5}
.ies-modal .row{display:flex;gap:10px;justify-content:flex-end;margin-top:16px}
.ies-modal input.confirm-word{width:100%;margin-top:10px;padding:9px 12px;
  border:1px solid var(--bd-strong);border-radius:var(--r-md);background:var(--surf);color:var(--txt)}

/* ── Print ──────────────────────────────────────────────────────────────── */
@media print{
  .app-header,.ies-sb,.ies-sb-fab,.ies-theme-fab,.tuv-wa-fab,.back-link,
  .notif-wrap,.acad-lang,nav{display:none!important}
  body::before{display:none}
  body{background:#fff}
}

/* ── Trust strip: token overrides beat the partial's hard-coded colors ──── */
.tuv-chip{background:var(--surf)!important;border:1px solid var(--bd)!important}
.tuv-trust h3,.tuv-strip h3{color:var(--txt2)!important}
.tuv-ref{color:var(--txt2)!important}
.tuv-iso{color:var(--pri)!important}
.tuv-iso>small{color:var(--txt2)!important}
.tuv-trust-divider{background:var(--bd)!important}
.tuv-chip--cert:hover{border-color:var(--pri)!important}