/* ============================================================================
   THE GATE INVESTMENTS — RTL POLISH PASS (cross-surface)
   ----------------------------------------------------------------------------
   Universal Arabic/RTL fixes loaded on every surface (public site, client
   portal, admin panel). Solves the recurring layout-parity issues:

   - Heading sizes that were shrinking in Arabic because the previous
     em-based multipliers cascaded against a relaxed body font-size.
   - Mixed-direction flex/grid items (icons that need to sit on the leading
     edge in both LTR and RTL).
   - Margin/padding asymmetry that flipped the wrong way.
   - Numeric KPIs that read right-to-left (forced LTR display).
   - Buttons + chips that lost their gap on the RTL side.
   - Topbar elements that mis-aligned after the lang switch.

   Everything here is a *correction* — base styles continue to live in
   site.css / admin-core.css / account.css. Loading this file LATE in the
   cascade ensures the corrections always win.
   ============================================================================ */

/* === Global Arabic font baseline ====================================== */
html[dir="rtl"]{
  font-family:'Tajawal','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
}
html[dir="rtl"] body{
  font-family:'Tajawal','Inter',sans-serif;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

/* === Force LTR for any tabular number block — Arabic readers expect
       prices, dates, codes, phone numbers to keep digit order. ============ */
html[dir="rtl"] .kpi-val,
html[dir="rtl"] .k-val,
html[dir="rtl"] .stat-val,
html[dir="rtl"] .iv,
html[dir="rtl"] .v,
html[dir="rtl"] .atn-count,
html[dir="rtl"] .price,
html[dir="rtl"] .dq-circle b,
html[dir="rtl"] .col-num,
html[dir="rtl"] .t-code,
html[dir="rtl"] .u-mono,
html[dir="rtl"] [data-numeric],
html[dir="rtl"] [href^="tel:"],
html[dir="rtl"] [href^="mailto:"]{
  direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums;
}
/* Right-align the tabular number columns so they line up flush in RTL */
html[dir="rtl"] .tbl .col-num{text-align:left}

/* === Directional icon flips ========================================== */
html[dir="rtl"] .fa-arrow-left,
html[dir="rtl"] .fa-arrow-right,
html[dir="rtl"] .fa-arrow-trend-up,
html[dir="rtl"] .fa-arrow-up-right-from-square,
html[dir="rtl"] .fa-arrow-right-from-bracket,
html[dir="rtl"] .fa-chevron-left,
html[dir="rtl"] .fa-chevron-right,
html[dir="rtl"] .fa-angle-left,
html[dir="rtl"] .fa-angle-right,
html[dir="rtl"] .fa-up-right-from-square,
html[dir="rtl"] .fa-arrow-rotate-cw,
html[dir="rtl"] .atn-arrow{
  transform:scaleX(-1);display:inline-block;
}
/* But these icons should NOT flip — they're symmetric or non-directional */
html[dir="rtl"] .brand i,
html[dir="rtl"] .av i,
html[dir="rtl"] .fa-magnifying-glass,
html[dir="rtl"] .fa-search{
  transform:none;
}

/* === Logical spacing — fix any places where margin-left / margin-right
       got hard-coded and didn't flip. =================================== */
html[dir="rtl"] [class*="ms-auto"]{margin-left:0;margin-right:auto}
html[dir="rtl"] [class*="me-auto"]{margin-right:0;margin-left:auto}

/* === Admin shell tweaks ===============================================
   IA Sprint · Issue 5 — the four topbar RTL overrides that used to live here
   were REMOVED. admin-core.css now styles the topbar with LOGICAL properties
   (margin-inline-start, padding-inline, …) that mirror automatically:
     · the .gsearch / .gsearch .kbd overrides were redundant (same result); and
     · the .actions + .crumb overrides actively CREATED an LTR/RTL asymmetry —
       a second auto-margin split the topbar's right cluster, and a border +
       padding appeared on the breadcrumb in RTL only.
   Removing them makes the topbar render identically in Arabic and English. */
html[dir="rtl"] .who-menu{right:auto;left:0}
html[dir="rtl"] .who-menu a,html[dir="rtl"] .who-menu button{text-align:right}

html[dir="rtl"] .sb-link.is-active::before{left:auto;right:-12px;border-radius:3px 0 0 3px}
html[dir="rtl"] .sb-section .sb-heading .sb-chev{margin-left:0;margin-right:auto}
html[dir="rtl"] .sb-link .sb-pill{margin-left:0;margin-right:auto}
html[dir="rtl"] .sb-search input{padding:7px 30px 7px 10px}
html[dir="rtl"] .sb-search i{left:auto;right:22px}

/* Atn arrow already rotated above — restore translate direction */
html[dir="rtl"] .atn-item:hover{transform:translateX(-2px)}
html[dir="rtl"] .atn-item:hover .atn-arrow{transform:scaleX(-1) translateX(2px)}

/* === Admin tables in RTL — column alignment + action column ============ */
html[dir="rtl"] .tbl thead th{text-align:right}
html[dir="rtl"] .tbl .col-actions{text-align:left}
html[dir="rtl"] .row-btn{margin-left:0;margin-right:3px}

/* === Modals — flip header close + footer alignment ==================== */
html[dir="rtl"] .modal-head .close{margin-left:0;margin-right:auto}
html[dir="rtl"] .modal-foot{justify-content:flex-start}

/* === Toolbar QBox ===================================================== */
html[dir="rtl"] .qbox input{padding:7px 32px 7px 12px}
html[dir="rtl"] .qbox i{left:auto;right:11px}

/* === Forms — Arabic typography lift inside admin / portal =============== */
html[dir="rtl"] .field input,
html[dir="rtl"] .field select,
html[dir="rtl"] .field textarea{font-size:13.5px;line-height:1.6}
html[dir="rtl"] .field label{font-size:11.5px;letter-spacing:.4px}
html[dir="rtl"] .checks label{font-size:13.5px}
html[dir="rtl"] .field-ar input,
html[dir="rtl"] .field-ar textarea{
  direction:rtl;text-align:right;font-family:'Tajawal',sans-serif;font-size:14px;
}
/* Even on EN pages, Arabic-input fields read RTL */
.field-ar input,.field-ar textarea{
  direction:rtl;text-align:right;font-family:'Tajawal',sans-serif;
}

/* === Pills / status badges — keep size identical across directions ===== */
html[dir="rtl"] .pill,
html[dir="rtl"] .role-badge,
html[dir="rtl"] .ff-status-pill{font-size:10.5px;letter-spacing:.5px}

/* === Buttons in admin — guarantee Arabic doesn't shrink ================ */
html[dir="rtl"] .btn{font-size:13px;line-height:1.2}
html[dir="rtl"] .btn.b-sm{font-size:12px}
html[dir="rtl"] .btn.b-lg{font-size:14px}
html[dir="rtl"] .btn-bar{font-size:12px}
html[dir="rtl"] .btn-modal{font-size:13px}

/* === Empty states — bigger Arabic labels =============================== */
html[dir="rtl"] .empty h3{font-size:15px;letter-spacing:.1px}
html[dir="rtl"] .empty p{font-size:13.5px;line-height:1.7}

/* === Sidebar headings + pills ========================================= */
html[dir="rtl"] .sb-section .sb-heading{font-size:9.5px;letter-spacing:1.4px}
html[dir="rtl"] .sb-link{font-size:13px}
html[dir="rtl"] .sb-link .sb-pill{font-size:9.5px;letter-spacing:.4px}

/* === Page header in admin ============================================= */
html[dir="rtl"] .page-head h1{font-size:21.5px;letter-spacing:0;line-height:1.25}
html[dir="rtl"] .page-head .lead{font-size:13.5px;line-height:1.7}
html[dir="rtl"] .page-head .eyebrow{font-size:10.5px;letter-spacing:1.6px}

/* === KPI cards — number stays readable, label larger ================== */
html[dir="rtl"] .kpi .k-val{font-size:20px;letter-spacing:-.01em}
html[dir="rtl"] .kpi .k-lbl{font-size:10.5px;letter-spacing:.6px}
html[dir="rtl"] .kpi .k-hint{font-size:11.5px}

/* === Activity items =================================================== */
html[dir="rtl"] .activity-item{font-size:13px}
html[dir="rtl"] .activity-item .ai-meta{font-size:11px;margin-left:0;margin-right:auto}

/* === Atn queue items ================================================== */
html[dir="rtl"] .atn-item .atn-title{font-size:13px}
html[dir="rtl"] .atn-item .atn-sub{font-size:11.5px}
html[dir="rtl"] .atn-item .atn-count{font-size:18px}

/* === Cmd+K palette ==================================================== */
html[dir="rtl"] .cmdk-search{direction:rtl}
html[dir="rtl"] .cmdk-search .kbd{margin-right:auto;margin-left:0}
html[dir="rtl"] .cmdk-item .meta{margin-right:auto;margin-left:0}
html[dir="rtl"] .cmdk-section h6{text-align:right}

/* === Toast — center alignment unchanged but text reads RTL ============ */
html[dir="rtl"] .toast{font-size:13.5px}

/* === Account / portal common sections ================================ */
html[dir="rtl"] .account-shell{font-size:14.5px;line-height:1.7}
html[dir="rtl"] .account-card h3{font-size:17px}
html[dir="rtl"] .account-card .lead{font-size:13.5px;line-height:1.7}

/* === Auth pages ======================================================= */
html[dir="rtl"] .auth-card h1{font-size:clamp(28px, 3.5vw, 38px);line-height:1.3}
html[dir="rtl"] .auth-card .auth-lead{font-size:14.5px;line-height:1.75}
html[dir="rtl"] .auth-tabs button{font-size:14px}
html[dir="rtl"] .auth-form .field input{font-size:15.5px}

/* === Trending dashboard hero + KPIs =================================== */
html[dir="rtl"] .tr-eyebrow{font-size:13px;letter-spacing:1.6px}
html[dir="rtl"] .tr-kpi-lbl{font-size:11px;letter-spacing:.5px}
html[dir="rtl"] .tr-kpi-val{font-size:30px;direction:ltr;display:inline-block}

/* === Sub-tabs in admin ================================================ */
html[dir="rtl"] .sub-tabs button{font-size:13.5px}
html[dir="rtl"] .sub-tabs .count{margin-right:6px;margin-left:0;font-size:10.5px}

/* === Final guard: NEVER let Arabic shrink below this baseline ========== */
html[dir="rtl"] body{font-size:max(16px, 1rem)}

/* === Compact-mode admin fixes (referenced by .app.is-collapsed below) === */
html[dir="rtl"] .app.is-collapsed .sidebar:hover .sb-link .sb-pill{margin-right:auto;margin-left:0}