/* ═══════════════════════════════════════════════════════════════
   ثقيل — Unified Enterprise Design System
   Shared tokens + components for: admin · customer · company · owner
   Style: Saudi professional enterprise (navy + gold)
   ═══════════════════════════════════════════════════════════════ */

/* ───── Arabic-friendly web font ───── */
/* Brand typography, per the trademark filing: Tajawal carries the Arabic
   wordmark and all Arabic text; Sora carries Latin text and — importantly —
   the tabular numerals used for tracking identifiers, so order numbers line
   up in a column instead of drifting. */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800;900&family=Sora:wght@400;500;600;700;800&display=swap');

/* ───── Design tokens ───── */
:root {
  /* Brand — Navy + Gold */
  --t-navy-950:#0b1220;
  --t-navy-900:#0f172a;
  --t-navy-800:#1e293b;
  --t-navy-700:#334155;
  --t-navy-600:#475569;
  --t-navy-500:#64748b;
  --t-navy-400:#94a3b8;
  --t-navy-300:#cbd5e1;
  --t-navy-200:#e2e8f0;
  --t-navy-100:#f1f5f9;
  --t-navy-50: #f8fafc;

  --t-gold-900:#78350f;
  --t-gold-800:#92400e;
  --t-gold-700:#b45309;
  --t-gold-600:#d97706;
  --t-gold-500:#f59e0b;
  --t-gold-400:#fbbf24;
  --t-gold-300:#fcd34d;
  --t-gold-100:#fef3c7;
  --t-gold-50: #fffbeb;

  /* Semantics */
  --t-primary:       var(--t-navy-900);
  --t-primary-soft:  var(--t-navy-800);
  --t-accent:        var(--t-gold-600);
  --t-accent-hover:  var(--t-gold-700);
  --t-accent-soft:   var(--t-gold-50);

  /* Status */
  --t-success:#059669;
  --t-success-soft:#d1fae5;
  --t-warn:#d97706;
  --t-warn-soft:#fef3c7;
  --t-danger:#dc2626;
  --t-danger-soft:#fee2e2;
  --t-info:#0891b2;
  --t-info-soft:#cffafe;

  /* Surface + text */
  --t-bg:       var(--t-navy-50);
  --t-surface:  #ffffff;
  --t-surface-2:var(--t-navy-100);
  --t-text:     var(--t-navy-900);
  --t-text-2:   var(--t-navy-600);
  --t-text-3:   var(--t-navy-400);
  --t-border:   var(--t-navy-200);
  --t-border-strong: var(--t-navy-300);

  /* Radii */
  --t-r-sm:6px;  --t-r-md:10px;  --t-r-lg:14px;  --t-r-xl:18px;  --t-r-2xl:24px;  --t-r-pill:9999px;

  /* Spacing scale */
  --t-s-1:4px; --t-s-2:8px; --t-s-3:12px; --t-s-4:16px; --t-s-5:20px; --t-s-6:24px; --t-s-8:32px; --t-s-10:40px;

  /* Shadows — layered for depth */
  --t-sh-xs:0 1px 2px rgba(15,23,42,.06);
  --t-sh-sm:0 1px 3px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.04);
  --t-sh-md:0 4px 10px -2px rgba(15,23,42,.08), 0 2px 4px -1px rgba(15,23,42,.04);
  --t-sh-lg:0 10px 24px -4px rgba(15,23,42,.12), 0 4px 8px -2px rgba(15,23,42,.06);
  --t-sh-xl:0 20px 40px -8px rgba(15,23,42,.18), 0 8px 16px -4px rgba(15,23,42,.08);
  --t-sh-gold:0 8px 22px rgba(217,119,6,.35);

  /* Typography */
  --t-font:'Tajawal','Sora','Segoe UI','Tahoma','Arial',system-ui,-apple-system,sans-serif;
  --t-font-latin:'Sora','Tajawal',system-ui,-apple-system,sans-serif;
  /* Brand colours — the three protected in the filing. Nothing else may
     enter the mark itself. */
  --t-brand-navy:#1E3A8A;
  --t-brand-orange:#F59E0B;
  --t-brand-white:#FFFFFF;
  --t-fs-xs:11px; --t-fs-sm:12px; --t-fs-md:14px; --t-fs-lg:16px; --t-fs-xl:18px; --t-fs-2xl:22px; --t-fs-3xl:28px; --t-fs-4xl:34px;

  /* Motion */
  --t-dur:180ms;
  --t-ease:cubic-bezier(.4,0,.2,1);

  /* ─── Per-app brand tokens (task #350, from official identity PDF) ──
     One logo, four colors. Each app "signs" itself via body class.
     Only these tokens (`--brand-*`) are per-app; the rest of the design
     system (navy/gold) stays shared. Zero risk of colliding with any
     legacy inline styles. */
  --brand-color:    var(--t-gold-500);        /* owner default */
  --brand-color-2:  var(--t-gold-700);        /* darker end of gradient */
  --brand-soft:     var(--t-gold-50);         /* soft chip/tint */
  --brand-on:       #ffffff;                  /* text on brand color */
}

/* Per-app brand assignments (from deck) — activate with body class */
body.t-brand-admin    { --brand-color:#0F172A; --brand-color-2:#020617; --brand-soft:rgba(15,23,42,.08);  --brand-on:#fff; }
body.t-brand-owner    { --brand-color:#F59E0B; --brand-color-2:#B45309; --brand-soft:#FEF3C7;               --brand-on:#fff; }
body.t-brand-customer { --brand-color:#3B82F6; --brand-color-2:#1D4ED8; --brand-soft:rgba(59,130,246,.10); --brand-on:#fff; }
body.t-brand-company  { --brand-color:#0D5B66; --brand-color-2:#064047; --brand-soft:rgba(13,91,102,.12); --brand-on:#fff; }

/* Opt-in components — use these class names in new/updated markup only.
   They don't override existing inline styles, so nothing breaks. */
.tq-btn-brand{
  background: linear-gradient(180deg, var(--brand-color), var(--brand-color-2));
  color: var(--brand-on);
  border: none; border-radius:10px;
  padding:12px 20px; font-weight:800; font-family:var(--t-font);
  cursor:pointer; box-shadow:0 4px 12px color-mix(in srgb, var(--brand-color) 40%, transparent);
  transition: transform .15s var(--t-ease);
}
.tq-btn-brand:hover{ transform: translateY(-1px); }
.tq-chip-brand{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 12px; border-radius:99px;
  background: var(--brand-soft); color: var(--brand-color);
  font-size:12px; font-weight:800;
}
.tq-hero-brand{
  background: linear-gradient(135deg, var(--brand-color), var(--brand-color-2));
  color: var(--brand-on);
  border-radius:16px; padding:20px;
}
/* ─── Brand icons (task #353, from official لغة الأيقونات PDF) ──
   Opt-in only. Use like: <span class="tq-i tq-i-truck"></span>
   The <span> defaults to 1em × 1em (inherits font-size), so it inline-flows
   with text. For larger, wrap in an element with a bigger font-size. */
.tq-i{
  display:inline-block; width:1em; height:1em;
  background-repeat:no-repeat; background-position:center; background-size:contain;
  vertical-align:-.15em;  /* baseline alignment with text */
}
/* Sizing helpers */
.tq-i-16{ width:16px; height:16px; } .tq-i-20{ width:20px; height:20px; }
.tq-i-24{ width:24px; height:24px; } .tq-i-32{ width:32px; height:32px; }
.tq-i-40{ width:40px; height:40px; } .tq-i-48{ width:48px; height:48px; }
.tq-i-64{ width:64px; height:64px; }
/* The 24 icons */
.tq-i-shipment    { background-image:url("./icons/tq-shipment.png"); }
.tq-i-package     { background-image:url("./icons/tq-package.png"); }
.tq-i-truck       { background-image:url("./icons/tq-truck.png"); }
.tq-i-container   { background-image:url("./icons/tq-container.png"); }
.tq-i-warehouse   { background-image:url("./icons/tq-warehouse.png"); }
.tq-i-delivered   { background-image:url("./icons/tq-delivered.png"); }
.tq-i-location    { background-image:url("./icons/tq-location.png"); }
.tq-i-route       { background-image:url("./icons/tq-route.png"); }
.tq-i-live-signal { background-image:url("./icons/tq-live-signal.png"); }
.tq-i-eta         { background-image:url("./icons/tq-eta.png"); }
.tq-i-map         { background-image:url("./icons/tq-map.png"); }
.tq-i-search      { background-image:url("./icons/tq-search.png"); }
.tq-i-account     { background-image:url("./icons/tq-account.png"); }
.tq-i-basket      { background-image:url("./icons/tq-basket.png"); }
.tq-i-cart        { background-image:url("./icons/tq-cart.png"); }
.tq-i-store       { background-image:url("./icons/tq-store.png"); }
.tq-i-payment     { background-image:url("./icons/tq-payment.png"); }
.tq-i-favorite    { background-image:url("./icons/tq-favorite.png"); }
.tq-i-done        { background-image:url("./icons/tq-done.png"); }
.tq-i-alert       { background-image:url("./icons/tq-alert.png"); }
.tq-i-shield      { background-image:url("./icons/tq-shield.png"); }
.tq-i-lock        { background-image:url("./icons/tq-lock.png"); }
.tq-i-refresh     { background-image:url("./icons/tq-refresh.png"); }
.tq-i-list        { background-image:url("./icons/tq-list.png"); }

.tq-live-point{
  position:relative; display:inline-block;
  width:14px; height:14px; border-radius:50%; background:#F59E0B;
  box-shadow:0 0 0 3px rgba(245,158,11,.25);
}
.tq-live-point::before{
  content:''; position:absolute; inset:-6px; border-radius:50%;
  background:#F59E0B; opacity:.35;
  animation: tq-pulse 1.6s ease-out infinite;
}
@keyframes tq-pulse{ 0%{transform:scale(.6);opacity:.5} 100%{transform:scale(1.8);opacity:0} }

/* Dark surface override (used via body.t-dark) */
body.t-dark {
  --t-bg:       #0b1220;
  --t-surface:  #111a2e;
  --t-surface-2:#0f172a;
  --t-text:     #f1f5f9;
  --t-text-2:   #94a3b8;
  --t-text-3:   #64748b;
  --t-border:   #1e293b;
  --t-border-strong:#334155;
}

/* ───── Global resets (non-intrusive) ───── */
*, *::before, *::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  font-family: var(--t-font);
  background: var(--t-bg);
  color: var(--t-text);
  font-feature-settings: "ss01", "ss02";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--t-navy-300); border-radius:var(--t-r-pill); }
::-webkit-scrollbar-thumb:hover { background: var(--t-navy-400); }
body.t-dark ::-webkit-scrollbar-thumb { background: var(--t-navy-700); }

input, select, textarea, button { font-family: inherit; }
button { cursor:pointer; }
a { color: var(--t-accent); text-decoration:none; }

/* ───── Typography utilities ───── */
.t-h1 { font-size:var(--t-fs-3xl); font-weight:800; letter-spacing:-.5px; color:var(--t-text); }
.t-h2 { font-size:var(--t-fs-2xl); font-weight:800; letter-spacing:-.3px; color:var(--t-text); }
.t-h3 { font-size:var(--t-fs-xl);  font-weight:700; color:var(--t-text); }
.t-h4 { font-size:var(--t-fs-lg);  font-weight:700; color:var(--t-text); }
.t-body { font-size:var(--t-fs-md); color:var(--t-text-2); line-height:1.55; }
.t-caption { font-size:var(--t-fs-xs); color:var(--t-text-3); letter-spacing:.2px; }
.t-label { font-size:var(--t-fs-xs); font-weight:700; color:var(--t-text-2); text-transform:uppercase; letter-spacing:.6px; }

/* ───── Surfaces ───── */
.t-surface { background:var(--t-surface); border:1px solid var(--t-border); border-radius:var(--t-r-lg); }
.t-card {
  background:var(--t-surface);
  border:1px solid var(--t-border);
  border-radius:var(--t-r-lg);
  box-shadow:var(--t-sh-sm);
  padding:var(--t-s-5);
  transition:box-shadow var(--t-dur) var(--t-ease), transform var(--t-dur) var(--t-ease);
}
.t-card:hover { box-shadow:var(--t-sh-md); }
.t-card-flat { background:var(--t-surface); border:1px solid var(--t-border); border-radius:var(--t-r-lg); padding:var(--t-s-5); }
.t-card-lifted {
  background:var(--t-surface); border:1px solid var(--t-border);
  border-radius:var(--t-r-xl); box-shadow:var(--t-sh-lg); padding:var(--t-s-6);
}

/* Hero / stat card with navy→gold accent */
.t-card-hero {
  background:linear-gradient(135deg, var(--t-navy-900) 0%, var(--t-navy-800) 60%, var(--t-navy-700) 100%);
  color:#fff;
  border-radius:var(--t-r-xl);
  padding:var(--t-s-6);
  position:relative; overflow:hidden;
  box-shadow:var(--t-sh-lg);
}
.t-card-hero::after{
  content:"";position:absolute;inset:auto -40px -40px auto;width:180px;height:180px;
  background:radial-gradient(circle, rgba(245,158,11,.35), transparent 70%);
  pointer-events:none;
}
.t-card-gold {
  background:linear-gradient(135deg, var(--t-gold-500), var(--t-gold-700));
  color:#fff; border-radius:var(--t-r-xl); padding:var(--t-s-6);
  box-shadow:var(--t-sh-gold);
}

/* ───── Buttons ───── */
.t-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 18px; border-radius:var(--t-r-md); font-size:var(--t-fs-md); font-weight:700;
  border:1px solid transparent; background:var(--t-surface-2); color:var(--t-text);
  transition:all var(--t-dur) var(--t-ease); white-space:nowrap; line-height:1;
}
.t-btn:hover { transform:translateY(-1px); box-shadow:var(--t-sh-sm); }
.t-btn:active { transform:translateY(0); }
.t-btn-primary {
  background:linear-gradient(180deg, var(--t-navy-800), var(--t-navy-900));
  color:#fff; box-shadow:var(--t-sh-sm);
}
.t-btn-primary:hover { background:linear-gradient(180deg, var(--t-navy-700), var(--t-navy-800)); box-shadow:var(--t-sh-md); }
.t-btn-accent {
  background:linear-gradient(180deg, var(--t-gold-500), var(--t-gold-600));
  color:#fff; box-shadow:var(--t-sh-gold);
}
.t-btn-accent:hover { background:linear-gradient(180deg, var(--t-gold-400), var(--t-gold-500)); }
.t-btn-outline {
  background:transparent; border:1px solid var(--t-border-strong); color:var(--t-text);
}
.t-btn-outline:hover { background:var(--t-surface-2); }
.t-btn-ghost { background:transparent; color:var(--t-text-2); }
.t-btn-ghost:hover { background:var(--t-surface-2); color:var(--t-text); }
.t-btn-danger { background:var(--t-danger); color:#fff; }
.t-btn-danger:hover { background:#b91c1c; }
.t-btn-sm { padding:6px 12px; font-size:var(--t-fs-sm); border-radius:var(--t-r-sm); }
.t-btn-lg { padding:14px 24px; font-size:var(--t-fs-lg); border-radius:var(--t-r-lg); }
.t-btn-block { width:100%; }
.t-btn:disabled { opacity:.55; cursor:not-allowed; transform:none !important; box-shadow:none !important; }

/* ───── Inputs ───── */
.t-input, .t-select, .t-textarea {
  width:100%; padding:11px 14px; font-size:var(--t-fs-md);
  background:var(--t-surface); color:var(--t-text);
  border:1px solid var(--t-border-strong); border-radius:var(--t-r-md);
  transition:border-color var(--t-dur) var(--t-ease), box-shadow var(--t-dur) var(--t-ease);
  outline:none;
}
.t-input:focus, .t-select:focus, .t-textarea:focus {
  border-color:var(--t-accent);
  box-shadow:0 0 0 3px rgba(217,119,6,.15);
}
.t-input::placeholder { color:var(--t-text-3); }
.t-field { display:flex; flex-direction:column; gap:6px; margin-bottom:var(--t-s-4); }
.t-field-label { font-size:var(--t-fs-xs); font-weight:700; color:var(--t-text-2); letter-spacing:.3px; }
.t-field-hint { font-size:var(--t-fs-xs); color:var(--t-text-3); }
.t-field-error { font-size:var(--t-fs-xs); color:var(--t-danger); font-weight:600; }

/* ───── Badges + chips ───── */
.t-badge {
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 10px; font-size:var(--t-fs-xs); font-weight:700;
  border-radius:var(--t-r-pill); background:var(--t-surface-2); color:var(--t-text-2);
  border:1px solid var(--t-border);
}
.t-badge-success { background:var(--t-success-soft); color:var(--t-success); border-color:transparent; }
.t-badge-warn    { background:var(--t-warn-soft);    color:var(--t-warn);    border-color:transparent; }
.t-badge-danger  { background:var(--t-danger-soft);  color:var(--t-danger);  border-color:transparent; }
.t-badge-info    { background:var(--t-info-soft);    color:var(--t-info);    border-color:transparent; }
.t-badge-navy    { background:var(--t-navy-100);     color:var(--t-navy-800);border-color:transparent; }
.t-badge-gold    { background:var(--t-gold-100);     color:var(--t-gold-800);border-color:transparent; }

.t-chip {
  padding:6px 14px; font-size:var(--t-fs-sm); font-weight:600;
  border-radius:var(--t-r-pill); background:var(--t-surface);
  border:1px solid var(--t-border); color:var(--t-text-2);
  cursor:pointer; transition:all var(--t-dur) var(--t-ease); white-space:nowrap;
}
.t-chip:hover { background:var(--t-surface-2); }
.t-chip.is-active {
  background:var(--t-navy-900); color:#fff; border-color:var(--t-navy-900);
}

/* ───── Topbar ───── */
.t-topbar {
  position:sticky; top:0; z-index:30;
  background:linear-gradient(180deg, var(--t-navy-900), var(--t-navy-800));
  color:#f1f5f9; padding:14px 20px;
  border-bottom:1px solid var(--t-navy-700);
  box-shadow:var(--t-sh-md);
  display:flex; align-items:center; justify-content:space-between;
}
.t-topbar-brand { display:flex; align-items:center; gap:10px; font-weight:800; font-size:var(--t-fs-lg); }
.t-topbar-brand-dot {
  width:34px; height:34px; border-radius:9px;
  background:linear-gradient(135deg, var(--t-gold-400), var(--t-gold-600));
  display:flex; align-items:center; justify-content:center; font-size:18px; color:#fff;
  box-shadow:var(--t-sh-gold);
}

/* ───── Tabs ───── */
.t-tabs {
  display:flex; gap:2px; background:var(--t-surface-2); padding:4px;
  border-radius:var(--t-r-md); border:1px solid var(--t-border);
}
.t-tab {
  flex:1; padding:8px 14px; font-size:var(--t-fs-sm); font-weight:700;
  color:var(--t-text-2); background:transparent; border:none; border-radius:var(--t-r-sm);
  transition:all var(--t-dur) var(--t-ease); cursor:pointer;
}
.t-tab:hover { color:var(--t-text); }
.t-tab.is-active { background:var(--t-surface); color:var(--t-text); box-shadow:var(--t-sh-xs); }

/* ───── Bottom nav (mobile apps) ───── */
.t-bottomnav {
  position:fixed; bottom:0; inset-inline:0;
  background:var(--t-surface); border-top:1px solid var(--t-border);
  padding:10px 8px calc(10px + env(safe-area-inset-bottom));
  display:flex; justify-content:space-around; align-items:center;
  box-shadow:0 -4px 20px rgba(15,23,42,.08);
  z-index:40;
}
.t-bottomnav-item {
  flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:6px 4px; color:var(--t-text-3); font-size:10px; font-weight:600;
  background:transparent; border:none; cursor:pointer;
  transition:color var(--t-dur) var(--t-ease);
}
.t-bottomnav-item.is-active { color:var(--t-navy-900); }
body.t-dark .t-bottomnav-item.is-active { color:var(--t-gold-400); }

/* ───── Tables ───── */
.t-table { width:100%; border-collapse:collapse; font-size:var(--t-fs-sm); }
.t-table th {
  text-align:start; padding:12px 14px; font-weight:700; color:var(--t-text-2);
  background:var(--t-surface-2); border-bottom:1px solid var(--t-border); letter-spacing:.3px;
  font-size:var(--t-fs-xs); text-transform:uppercase;
}
.t-table td { padding:14px; border-bottom:1px solid var(--t-border); color:var(--t-text); }
.t-table tr:last-child td { border-bottom:none; }
.t-table tr:hover td { background:var(--t-surface-2); }

/* ───── Stat tile ───── */
.t-stat {
  background:var(--t-surface); border:1px solid var(--t-border); border-radius:var(--t-r-lg);
  padding:var(--t-s-5); display:flex; flex-direction:column; gap:6px;
  transition:all var(--t-dur) var(--t-ease);
}
.t-stat:hover { box-shadow:var(--t-sh-md); transform:translateY(-1px); }
.t-stat-label { font-size:var(--t-fs-xs); color:var(--t-text-3); font-weight:700; letter-spacing:.4px; text-transform:uppercase; }
.t-stat-value { font-size:var(--t-fs-3xl); font-weight:800; color:var(--t-text); line-height:1.1; }
.t-stat-delta { font-size:var(--t-fs-xs); color:var(--t-success); font-weight:700; }
.t-stat-delta.is-down { color:var(--t-danger); }

/* ───── Divider + section ───── */
.t-divider { height:1px; background:var(--t-border); margin:var(--t-s-5) 0; border:none; }
.t-section-title { display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--t-s-3); }

/* ───── Animations ───── */
@keyframes tFadeIn { from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);} }
@keyframes tSlideUp{ from{opacity:0; transform:translateY(24px);} to{opacity:1; transform:translateY(0);} }
@keyframes tPulseDot{ 0%,100%{transform:scale(1); opacity:1;} 50%{transform:scale(1.35); opacity:.55;} }
@keyframes tShimmer { 0%{background-position:-400px 0;} 100%{background-position:400px 0;} }
.t-fade { animation:tFadeIn .28s var(--t-ease); }
.t-slide-up { animation:tSlideUp .3s var(--t-ease); }
.t-pulse-dot { animation:tPulseDot 1.6s var(--t-ease) infinite; }
.t-skeleton {
  background:linear-gradient(90deg, var(--t-surface-2) 0%, var(--t-border) 40%, var(--t-surface-2) 80%);
  background-size:400px 100%; animation:tShimmer 1.4s linear infinite;
  border-radius:var(--t-r-md);
}

/* ───── Layout helpers ───── */
.t-row { display:flex; align-items:center; gap:var(--t-s-3); }
.t-col { display:flex; flex-direction:column; gap:var(--t-s-3); }
.t-grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--t-s-3); }
.t-grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--t-s-3); }
.t-grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--t-s-3); }
.t-scroll-x { overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:thin; }
.t-scroll-x::-webkit-scrollbar { height:4px; }

/* ───── Avatar ───── */
.t-avatar {
  width:40px; height:40px; border-radius:var(--t-r-pill);
  background:linear-gradient(135deg, var(--t-navy-700), var(--t-navy-900));
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:var(--t-fs-md);
}
.t-avatar-gold { background:linear-gradient(135deg, var(--t-gold-500), var(--t-gold-700)); }

/* ───── Empty state ───── */
.t-empty { text-align:center; padding:var(--t-s-8) var(--t-s-4); color:var(--t-text-3); }
.t-empty-icon { font-size:40px; margin-bottom:var(--t-s-3); opacity:.6; }

/* ───── Modal / sheet ───── */
.t-overlay {
  position:fixed; inset:0; background:rgba(15,23,42,.55);
  display:flex; align-items:flex-end; justify-content:center; z-index:100;
  animation:tFadeIn .25s var(--t-ease);
}
.t-overlay-center { align-items:center; }
.t-sheet {
  background:var(--t-surface); border-radius:var(--t-r-2xl) var(--t-r-2xl) 0 0;
  width:100%; max-width:480px; padding:var(--t-s-6);
  animation:tSlideUp .3s var(--t-ease);
  max-height:92vh; overflow-y:auto;
}
.t-modal {
  background:var(--t-surface); border-radius:var(--t-r-xl);
  width:calc(100% - 40px); max-width:480px; padding:var(--t-s-6);
  box-shadow:var(--t-sh-xl); animation:tFadeIn .25s var(--t-ease);
}

/* ───── App shell for mobile apps (customer / owner) ───── */
.t-app-shell {
  max-width:480px; margin:0 auto; min-height:100vh;
  background:var(--t-bg); position:relative;
  box-shadow:0 0 60px rgba(15,23,42,.08);
}
.t-app-body { padding:var(--t-s-4) var(--t-s-4) 96px; }

/* ───── Helpers ───── */
.t-text-accent { color:var(--t-accent); }
.t-text-muted  { color:var(--t-text-3); }
.t-text-danger { color:var(--t-danger); }
.t-text-success{ color:var(--t-success); }
.t-bg-surface  { background:var(--t-surface); }
.t-bg-soft     { background:var(--t-surface-2); }
.t-radius-lg   { border-radius:var(--t-r-lg); }
.t-radius-xl   { border-radius:var(--t-r-xl); }
.t-shadow-sm   { box-shadow:var(--t-sh-sm); }
.t-shadow-md   { box-shadow:var(--t-sh-md); }
.t-shadow-lg   { box-shadow:var(--t-sh-lg); }
.t-sep         { width:1px; align-self:stretch; background:var(--t-border); }

/* RTL + dir-agnostic margins via logical props already used throughout */

/* ───── Focus accessibility ───── */
/* Audit fix (P1-16): this rule was correct and had no effect whatsoever. The
   four apps write `outline:'none'` in INLINE styles 76 times, and an inline
   declaration outranks any stylesheet rule no matter how specific — so keyboard
   and screen-reader users had no visible focus indicator anywhere in the
   product. `!important` in a stylesheet DOES outrank a plain inline
   declaration, which is the single lever that fixes all 76 sites at once.
   Scoped to :focus-visible, so pointer users still see no ring. */
:focus-visible {
  outline:3px solid rgba(217,119,6,.55) !important;
  outline-offset:2px !important;
  border-radius:var(--t-r-sm);
}
/* Interactive elements get a stronger ring — these are what a keyboard user
   actually traverses, and several sit on dark headers where amber alone is
   hard to make out. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
  outline:3px solid #2563eb !important;
  outline-offset:2px !important;
  box-shadow:0 0 0 5px rgba(37,99,235,.25) !important;
}

/* ───── Modal scroll-lock (P1-2 frontend audit fix) ─────
   Locks body scroll when any full-viewport overlay is present.
   Uses :has() (modern Chrome/Safari/Firefox 2023+) to detect overlays
   without requiring every modal to add/remove a body class manually.
   Common overlay shapes in our codebase: position:fixed + inset:0 OR
   high z-index. The selector matches direct children of body that look
   like overlays — narrow enough to avoid false matches on sticky headers. */
@supports selector(:has(*)) {
  body:has(> div[style*="position:fixed"][style*="inset:0"]),
  body:has(> div[style*="position: fixed"][style*="inset:0"]),
  body:has(> .t-overlay),
  body:has(> .t-modal),
  body.t-modal-open {
    overflow: hidden;
  }
}

/* Fallback: opt-in class for explicit control where :has() unavailable. */
body.t-modal-open { overflow: hidden; }

/* ───── Print-friendly (for owner/company dashboards) ───── */
@media print {
  body { background:#fff; }
  .t-bottomnav, .t-topbar { display:none; }
}


/* ── Latin text and figures ─────────────────────────────────────────────
   Sora only where the content is actually Latin. Applying it globally would
   override Tajawal for Arabic, and Sora has no Arabic glyphs — every Arabic
   screen would fall back to a system face and the whole product would change
   typeface. Scope it to elements explicitly marked ltr. */
[dir="ltr"], [lang="en"], .t-latin, .t-num {
  font-family: var(--t-font-latin);
}
/* Tracking identifiers, order numbers, IBANs, plate numbers: tabular figures
   so digits align vertically in lists. */
.t-num, [data-num] { font-variant-numeric: tabular-nums; font-feature-settings:'tnum' 1; }