/* ================================================================
   BASE.CSS — v6.0
   Bootstrap 5 foundation only
   Scope:
   - design tokens (light + dark)
   - global resets
   - light Bootstrap overrides
   - shared helpers (platform-card, service-table, js-hidden)
   ================================================================
   ================================================================

   SCOPE RULE (مرجع دائم للمطورين):
   ┌─────────────────────────────────────────────────────────────┐
   │  base.css   → global tokens + resets + Bootstrap polish     │
   │  auth.css   → shell tokens (#app-wrapper) + auth components │
   │  guest.css  → guest shell components فقط                   │
   │                                                             │
   │  القاعدة: لا يستضيف ملف CSS مكوّنات تخص ملفاً آخر.        │
   │  shell tokens لا تُعرَّف أبداً على :root                    │
   └─────────────────────────────────────────────────────────────┘

   Contains
   ——————————————————————————————————————————————————————————————
   §1a  Global design tokens     (light + dark)
   §1b  Bootstrap brand overrides
   §1c  Component tokens         (NEW v6.0 — nav, dropdown, pill…)
   §2   Global resets
   §3   Bootstrap component polish
   §4   Segmented control
   §5   Shared helpers
   §6   Focus rings
   §7   Reduced motion
   ================================================================ */


/* ================================================================
   §1a  GLOBAL DESIGN TOKENS
   ================================================================ */

:root,
[data-bs-theme="light"] {

  --app-font-sans: 'Inter', 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --app-font-ar:   'IBM Plex Sans Arabic', 'Inter', system-ui, sans-serif;
  --app-font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  --app-fs-xs: 12px;
  --app-fs-sm: 14px;
  --app-fs-md: 15px;
  --app-fs-lg: 18px;
  --app-fs-xl: 26px;

  --app-lh-sm: 1.40;
  --app-lh-md: 1.55;
  --app-lh-lg: 1.65;

  --app-ls-tight:   -0.025em;
  --app-ls-normal:  -0.011em;
  --app-ls-wide:     0.04em;
  --app-ls-widest:   0.09em;

  /* —— Bootstrap body overrides —— */
  --bs-body-font-family: var(--app-font-sans);
  --bs-body-font-size:   var(--app-fs-md);
  --bs-body-font-weight: 400;
  --bs-body-line-height: var(--app-lh-md);

  /* —— Bootstrap radii —— */
  --bs-border-radius:      8px;
  --bs-border-radius-sm:   4px;
  --bs-border-radius-lg:   12px;
  --bs-border-radius-pill: 999px;

  --app-radius-card:  16px;
  --app-radius-panel: 12px;

  /* —— Bootstrap brand colors —— */
  --bs-primary:         #4857fc;
  --bs-primary-rgb:     72, 87, 252;
  --bs-secondary:       #7464fc;
  --bs-secondary-rgb:   116, 100, 252;
  --bs-success:         #2dc077;
  --bs-success-rgb:     45, 192, 119;
  --bs-warning:         #fbd61a;
  --bs-warning-rgb:     251, 214, 26;
  --bs-danger:          #ff3c00;
  --bs-danger-rgb:      255, 60, 0;

  --bs-primary-bg-subtle:       rgba(72, 87, 252, 0.08);
  --bs-primary-border-subtle:   rgba(72, 87, 252, 0.20);
  --bs-primary-text-emphasis:   #2130A8;
  --bs-secondary-bg-subtle:     rgba(116, 100, 252, 0.08);
  --bs-secondary-border-subtle: rgba(116, 100, 252, 0.20);
  --bs-secondary-text-emphasis: #3D2BB5;

  /* —— Ink —— */
  --app-ink-primary:      #0D0D0D;
  --app-ink-secondary:    #5C6878;
  --app-ink-tertiary:     #8993a4;
  --app-ink-accent:       var(--bs-primary);
  --app-ink-accent-hover: #3545e8;

  /* —— Surfaces —— */
  --app-surface-0: #F8F9FC;
  --app-surface-1: #FFFFFF;
  --app-surface-2: #F1F3F8;
  --app-surface-3: #E6E9F0;

  /* —— Bootstrap surface overrides —— */
  --bs-body-bg:      var(--app-surface-0);
  --bs-body-color:   var(--app-ink-primary);
  --bs-secondary-bg: var(--app-surface-2);
  --bs-tertiary-bg:  var(--app-surface-1);
  --bs-border-color: #ebecf0;

  /* —— Borders —— */
  --app-border:        #ebecf0;
  --app-border-strong: #dfe1e6;

  /* —— Shadows —— */
  --app-shadow-xs:    0 1px 2px rgba(0, 0, 0, 0.05);
  --app-shadow-sm:    0 1px 4px rgba(0, 0, 0, 0.07), 0 0 0 1px rgba(0, 0, 0, 0.04);
  --app-shadow-md:    0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
  --app-shadow-float: 0 12px 40px rgba(0, 0, 0, 0.14), 0 3px 10px rgba(0, 0, 0, 0.07);

  /* —— Vibrancy layers —— */
  --app-vibrancy-ultra-bg:         rgba(245, 245, 255, 0.88);
  --app-vibrancy-ultra-fallback:   rgba(247, 247, 255, 0.97);
  --app-vibrancy-ultra-blur:       saturate(200%) blur(32px);
  --app-vibrancy-regular-bg:       rgba(255, 255, 255, 0.78);
  --app-vibrancy-regular-fallback: rgba(255, 255, 255, 0.97);
  --app-vibrancy-regular-blur:     saturate(180%) blur(24px);
  --app-vibrancy-thin-bg:          rgba(255, 255, 255, 0.72);
  --app-vibrancy-thin-fallback:    rgba(252, 252, 255, 0.98);
  --app-vibrancy-thin-blur:        saturate(160%) blur(16px);

  /* —— Pills —— */
  --app-pill-balance-bg:  rgba(48, 209, 88, 0.10);
  --app-pill-balance-ink: #1A7F3C;
  --app-pill-orders-bg:   rgba(72, 87, 252, 0.10);
  --app-pill-orders-ink:  #2130A8;

  /* —— Motion —— */
  --app-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --app-ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --app-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --app-dur-fast:    100ms;
  --app-dur-base:    200ms;
  --app-dur-slow:    350ms;

  /* —— Interaction —— */
  --app-focus-ring: 0 0 0 3px rgba(72, 87, 252, 0.30);

  /*
   * FIX v5.9: color-mix() computed tokens
   * استخدم var(--app-focus-ring-computed) في أي مكان تحتاج focus ring.
   * المتصفحات القديمة (Safari < 15.4) تأخذ الـ fallback الثابتة تلقائياً.
   */
  --app-focus-ring-computed:    rgba(72, 87, 252, 0.20);
  --app-accent-border-computed: rgba(72, 87, 252, 0.35);

  --app-hover-light: rgba(0, 0, 0, 0.04);
  --app-hover-dark:  rgba(255, 255, 255, 0.06);

  --app-card-gloss: rgba(255, 255, 255, 0.60);

  /* —— Legacy aliases (kept for backward compat) —— */
  --app-focus-ring-solid:  var(--app-focus-ring-computed);
  --app-accent-border-mix: var(--app-accent-border-computed);
}

/* —— RTL overrides —— */
html[dir="rtl"] {
  --bs-body-font-family: var(--app-font-ar);
}

/* —— Dark theme —— */
[data-bs-theme="dark"] {

  --bs-primary:     #7464fc;
  --bs-primary-rgb: 116, 100, 252;
  --bs-success:     #2dc077;
  --bs-warning:     #fbd61a;
  --bs-warning-rgb: 251, 214, 26;

  --bs-primary-bg-subtle:       rgba(72, 87, 252, 0.15);
  --bs-primary-border-subtle:   rgba(72, 87, 252, 0.28);
  --bs-primary-text-emphasis:   #a8b0fd;
  --bs-secondary-bg-subtle:     rgba(116, 100, 252, 0.15);
  --bs-secondary-border-subtle: rgba(116, 100, 252, 0.28);
  --bs-secondary-text-emphasis: #b4abfd;

  --app-ink-primary:      #F2F2F7;
  --app-ink-secondary:    #8E8E9A;
  --app-ink-tertiary:     #48484A;
  --app-ink-accent:       #7464fc;
  --app-ink-accent-hover: #8a78fd;

  --app-surface-0: #0C0C0F;
  --app-surface-1: #18181B;
  --app-surface-2: #26262B;
  --app-surface-3: #34343A;

  --bs-body-bg:      var(--app-surface-0);
  --bs-body-color:   var(--app-ink-primary);
  --bs-secondary-bg: var(--app-surface-2);
  --bs-tertiary-bg:  var(--app-surface-1);
  --bs-border-color: rgba(255, 255, 255, 0.08);

  --app-border:        rgba(255, 255, 255, 0.08);
  --app-border-strong: rgba(255, 255, 255, 0.12);

  --app-shadow-xs:    0 1px 2px rgba(0, 0, 0, 0.40);
  --app-shadow-sm:    0 1px 4px rgba(0, 0, 0, 0.40), 0 0 0 1px rgba(255, 255, 255, 0.04);
  --app-shadow-md:    0 4px 12px rgba(0, 0, 0, 0.50), 0 1px 3px rgba(0, 0, 0, 0.30);
  --app-shadow-float: 0 12px 40px rgba(0, 0, 0, 0.70), 0 3px 10px rgba(0, 0, 0, 0.40);

  --app-vibrancy-ultra-bg:         rgba(20, 20, 22, 0.90);
  --app-vibrancy-ultra-fallback:   rgba(16, 16, 18, 0.98);
  --app-vibrancy-regular-bg:       rgba(28, 28, 30, 0.82);
  --app-vibrancy-regular-fallback: rgba(18, 18, 20, 0.98);
  --app-vibrancy-thin-bg:          rgba(36, 36, 40, 0.75);
  --app-vibrancy-thin-fallback:    rgba(22, 22, 26, 0.98);

  --app-pill-balance-bg:  rgba(48, 209, 88, 0.14);
  --app-pill-balance-ink: #2dc077;
  --app-pill-orders-bg:   rgba(116, 100, 252, 0.14);
  --app-pill-orders-ink:  #7464fc;

  /* FIX v6.0: dark mode opacity — ضعف قيم light */
  --app-focus-ring-computed:    rgba(72, 87, 252, 0.28);
  --app-accent-border-computed: rgba(72, 87, 252, 0.45);

  --app-card-gloss: rgba(255, 255, 255, 0.07);
}


/* ================================================================
   §1c  COMPONENT TOKENS  (NEW — v6.0)
   ——————————————————————————————————————————————————————————————
   FIX 01: مستوى وسيط بين global tokens وقيم CSS.
   القاعدة: global token ← component token ← قيمة CSS.
   لتغيير منطق مكوّن: عدّل token هنا فقط دون لمس الـ selectors.

   SCOPE RULE:
   - tokens هنا = shared components (nav, dropdown, table, pill…)
   - auth-only tokens = في auth.css على #app-wrapper
   - guest-only tokens = في guest.css على #guest-wrapper (إن احتاج)
   ================================================================ */

:root,
[data-bs-theme="light"] {

  /* —— Nav link —— */
  --nav-link-color:        var(--app-ink-secondary);
  --nav-link-color-hover:  var(--app-ink-primary);
  --nav-link-color-active: var(--app-ink-accent);
  --nav-link-bg-hover:     var(--app-hover-light);
  --nav-link-bg-active:    var(--bs-primary-bg-subtle);
  --nav-link-weight-active: 600;

  /* —— Dropdown item —— */
  --dropdown-item-color:        var(--app-ink-primary);
  --dropdown-item-bg-hover:     var(--app-hover-light);
  --dropdown-item-color-active: var(--app-ink-accent);
  --dropdown-item-bg-active:    var(--bs-primary-bg-subtle);

  /* —— Status pill —— */
  --pill-border-balance: rgba(22, 110, 51, 0.15);
  --pill-border-orders:  rgba(33, 48, 168, 0.15);

  /* —— Service tags (FIX 04 — كانت rgba مكتوبة يدوياً في كل selector) —— */
  --tag-speed-bg:      rgba(72,  87,  252, 0.10);
  --tag-speed-border:  rgba(72,  87,  252, 0.20);
  --tag-speed-ink:     #4857fc;

  --tag-refill-bg:     rgba(48,  209, 88,  0.10);
  --tag-refill-border: rgba(48,  209, 88,  0.20);
  --tag-refill-ink:    #1A7F3C;

  --tag-quality-bg:    rgba(255, 159, 10,  0.10);
  --tag-quality-border:rgba(255, 159, 10,  0.20);
  --tag-quality-ink:   #B86800;

  --tag-popular-bg:    rgba(255, 55,  95,  0.10);
  --tag-popular-border:rgba(255, 55,  95,  0.20);
  --tag-popular-ink:   #C0002E;

  --tag-stable-bg:     rgba(100, 100, 120, 0.09);
  --tag-stable-border: var(--app-border);
  --tag-stable-ink:    var(--app-ink-secondary);

  /* —— Service warning —— */
  --svc-warning-bg:     rgba(255, 159, 10, 0.08);
  --svc-warning-border: rgba(255, 159, 10, 0.20);

  /* —— Table hover —— */
  --table-row-hover-bg: rgba(72, 87, 252, 0.04);

  /* —— Focus ring (unified — FIX color: لا خلط بين --bs-primary وaccount) —— */
  --comp-focus-outline: var(--app-ink-accent);
}

/* —— Dark overrides for component tokens (FIX 06 — opacity rule) —— */
[data-bs-theme="dark"] {

  /* —— Nav link —— */
  --nav-link-bg-hover: var(--app-hover-dark);

  /* —— Dropdown item —— */
  --dropdown-item-bg-hover: var(--app-hover-dark);

  /* —— Pill borders: قيم ثابتة static fallback لـ Safari —— */
  --pill-border-balance: rgba(45, 192, 119, 0.22);
  --pill-border-orders:  rgba(116, 100, 252, 0.22);

  /* —— Service tags: FIX 06 — dark opacity ≈ ضعف light —— */
  --tag-speed-bg:      rgba(72,  87,  252, 0.18);
  --tag-speed-border:  rgba(72,  87,  252, 0.32);
  --tag-speed-ink:     #a8b0fd;

  --tag-refill-bg:     rgba(48,  209, 88,  0.18);
  --tag-refill-border: rgba(48,  209, 88,  0.32);
  --tag-refill-ink:    #2dc077;

  --tag-quality-bg:    rgba(255, 159, 10,  0.18);
  --tag-quality-border:rgba(255, 159, 10,  0.30);
  --tag-quality-ink:   #fbd61a;

  --tag-popular-bg:    rgba(255, 55,  95,  0.18);
  --tag-popular-border:rgba(255, 55,  95,  0.30);
  --tag-popular-ink:   #7464fc;

  --tag-stable-bg:     rgba(100, 100, 120, 0.16);
  --tag-stable-border: var(--app-border);
  --tag-stable-ink:    var(--app-ink-secondary);

  /* —— Service warning: FIX 06 —— */
  --svc-warning-bg:     rgba(255, 159, 10, 0.14);
  --svc-warning-border: rgba(255, 159, 10, 0.30);

  /* —— Table hover: FIX 06 — 0.04 → 0.08 —— */
  --table-row-hover-bg: rgba(72, 87, 252, 0.08);

  /* —— Focus ring —— */
  --comp-focus-outline: var(--app-ink-accent);
}


/* ================================================================
   §2  GLOBAL RESETS
   ================================================================ */

*,
*::before,
*::after { box-sizing: border-box; }

html,
body {
  font-family:             var(--bs-body-font-family);
  background-color:        var(--bs-body-bg);
  color:                   var(--bs-body-color);
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html[dir="ltr"] body { letter-spacing: var(--app-ls-normal); }
html[dir="rtl"] body { letter-spacing: 0; }

/*
 * FIX: *:focus:not(:focus-visible) يُخفي outline فقط عند النقر.
 * keyboard users يرون focus rings من §6.
 */
*:focus:not(:focus-visible) { outline: none; }

img { max-width: 100%; height: auto; }
code, pre, kbd, samp { font-family: var(--app-font-mono); }


/* ================================================================
   §3  BOOTSTRAP COMPONENT POLISH
   ================================================================ */

/* —— Card —————————————————————————————————————————————————————
   FIX: hover على .card العام أُزيل — يستخدم .card-hoverable للـ hover.
   —————————————————————————————————————————————————————————————— */
.card {
  --bs-card-border-color:  var(--app-border);
  --bs-card-bg:            var(--app-surface-1);
  --bs-card-border-radius: var(--app-radius-card);
  --bs-card-cap-bg:        transparent;
  box-shadow: var(--app-shadow-sm), inset 0 0.5px 0 var(--app-card-gloss);
}

/*
 * NOTE — cascade order مقصود:
 * :hover قبل :active = عند الضغط يفوز :active (آخر rule بنفس specificity).
 * لا تعكس هذين الـ rules.
 */
.card-hoverable {
  transition:
    box-shadow   var(--app-dur-base) var(--app-ease-out),
    border-color var(--app-dur-base) var(--app-ease-smooth),
    transform    var(--app-dur-base) var(--app-ease-out);
  cursor: pointer;
}
.card-hoverable:hover {
  box-shadow:   var(--app-shadow-md), inset 0 0.5px 0 var(--app-card-gloss);
  border-color: var(--app-border-strong);
  transform:    translateY(-2px);
}
.card-hoverable:active {
  transform: scale(0.99);
}

/* —— Forms —————————————————————————————————————————————————————— */
.form-control,
.form-select {
  border-color:  var(--app-border);
  background:    var(--app-surface-0);
  color:         var(--app-ink-primary);
  border-radius: 10px;
  transition:
    border-color var(--app-dur-fast) var(--app-ease-smooth),
    box-shadow   var(--app-dur-fast) var(--app-ease-smooth);
}
.form-control:focus,
.form-select:focus {
  border-color: var(--app-ink-accent);
  box-shadow:   0 0 0 3px var(--app-focus-ring-computed);
  background:   var(--app-surface-0);
  color:        var(--app-ink-primary);
}
.form-control:hover:not(:focus):not([readonly]):not(:disabled),
.form-select:hover:not(:focus):not(:disabled) {
  border-color: var(--app-accent-border-computed);
}
.form-control[readonly],
.form-control:disabled {
  background: var(--app-surface-2);
  color:      var(--app-ink-tertiary);
}
.form-control::placeholder,
.form-select::placeholder { color: var(--app-ink-tertiary); }

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
  background:   var(--app-surface-1);
  color:        var(--app-ink-primary);
  border-color: var(--app-border);
}
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
  background: var(--app-surface-1);
}
[data-bs-theme="dark"] .form-control[readonly],
[data-bs-theme="dark"] .form-control:disabled {
  background: var(--app-surface-2);
}

.form-label {
  font-size:     var(--app-fs-sm);
  font-weight:   600;
  color:         var(--app-ink-secondary);
  margin-bottom: 6px;
}

/* —— Nav pills —————————————————————————————————————————————————— */
.nav-pills .nav-link {
  color:         var(--nav-link-color);
  border-radius: 8px;
  font-size:     var(--app-fs-md);
  font-weight:   500;
  padding:       6px 12px;
  line-height:   1;
  white-space:   nowrap;
  transition:    background var(--app-dur-fast), color var(--app-dur-fast);
}
.nav-pills .nav-link:hover {
  background: var(--app-surface-2);
  color:      var(--nav-link-color-hover);
}
.nav-pills .nav-link.active,
.nav-pills .nav-link[aria-current="page"] {
  background: var(--app-ink-accent);
  color:      #fff;
}

/* —— Table —————————————————————————————————————————————————————— */


/* —— Dropdown —————————————————————————————————————————————————
   FIX 03: specificity 0-1-0 هنا (.dropdown-item فقط).
   auth.css تستخدم .account-dropdown .dropdown-item (0-2-0) وتفوز دائماً.
   لا تنافس عشوائي — الفائز محدد بنية وليس بترتيب.
   ——————————————————————————————————————————————————————————————— */
.dropdown-menu {
  --bs-dropdown-border-color:      var(--app-border);
  --bs-dropdown-bg:                var(--app-surface-2);
  --bs-dropdown-color:             var(--app-ink-primary);
  --bs-dropdown-link-color:        var(--app-ink-primary);
  --bs-dropdown-link-hover-bg:     var(--app-surface-1);
  --bs-dropdown-border-radius:     12px;
  --bs-dropdown-padding-y:         6px;
  box-shadow: var(--app-shadow-md);
}
.dropdown-item {
  font-size:     var(--app-fs-md);
  border-radius: 8px;
  color:         var(--dropdown-item-color);
}
.dropdown-item:hover:not(.active),
.dropdown-item:focus-visible:not(.active) {
  background-color: var(--dropdown-item-bg-hover);
  color:            var(--app-ink-primary);
}
.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--dropdown-item-bg-active);
  color: var(--dropdown-item-color-active);
}

/* —— Modal —————————————————————————————————————————————————————— */
.modal-content {
  --bs-modal-bg:            var(--app-surface-2);
  --bs-modal-border-color:  var(--app-border);
  --bs-modal-border-radius: 16px;
}
.modal-header,
.modal-footer { border-color: var(--app-border); }
.modal-title {
  font-size:      var(--app-fs-xl) !important;
  font-weight:    700;
  letter-spacing: var(--app-ls-tight);
  line-height:    1.3;
}

/* —— Pagination ——————————————————————————————————————————————— */
.page-link {
  border-color:  var(--app-border);
  color:         var(--app-ink-primary);
  background:    var(--app-surface-2);
  border-radius: 8px !important;
  font-size:     var(--app-fs-md);
  margin-inline: 2px;
}
.page-link:hover {
  background:   var(--app-surface-1);
  color:        var(--app-ink-primary);
  border-color: var(--app-border);
}
.page-item.active .page-link {
  background:   var(--app-ink-accent);
  border-color: var(--app-ink-accent);
  color:        #fff;
}
[data-bs-theme="dark"] .page-link {
  background:   var(--app-surface-2);
  border-color: var(--app-border);
  color:        var(--app-ink-primary);
}
[data-bs-theme="dark"] .page-link:hover { background: var(--app-surface-1); }
[data-bs-theme="dark"] .page-item.disabled .page-link {
  background:   var(--app-surface-2);
  border-color: var(--app-border);
  color:        var(--app-ink-tertiary);
}

/* —— Buttons ——————————————————————————————————————————————————— */
.btn {
  border-radius: 10px;
  font-size:     var(--app-fs-md);
  font-weight:   500;
  transition:
    background   var(--app-dur-fast) var(--app-ease-smooth),
    box-shadow   var(--app-dur-fast) var(--app-ease-smooth),
    border-color var(--app-dur-fast) var(--app-ease-smooth),
    transform    var(--app-dur-fast) var(--app-ease-smooth);
}
.btn:active  { transform: scale(0.97); }
.btn-sm      { border-radius: 8px; }
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--app-ink-accent);
  --bs-btn-border-color: var(--app-ink-accent);

  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--app-ink-accent-hover);
  --bs-btn-hover-border-color: var(--app-ink-accent-hover);

  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);

  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--app-ink-accent-hover);
  --bs-btn-active-border-color: var(--app-ink-accent-hover);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);

  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--app-ink-accent);
  --bs-btn-disabled-border-color: var(--app-ink-accent);

  box-shadow: 0 1px 3px rgba(var(--bs-primary-rgb), 0.30);
}

.btn-primary:hover {
  box-shadow: 0 3px 10px rgba(var(--bs-primary-rgb), 0.35),
              0 1px 3px rgba(var(--bs-primary-rgb), 0.20);
}
.btn-outline-secondary {
  --bs-btn-color: var(--app-ink-primary);
  --bs-btn-bg: var(--app-surface-1);
  --bs-btn-border-color: var(--app-border);

  --bs-btn-hover-color: var(--app-ink-primary);
  --bs-btn-hover-bg: var(--app-surface-2);
  --bs-btn-hover-border-color: rgba(160, 160, 176, 0.50);

  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);

  --bs-btn-active-color: var(--app-ink-primary);
  --bs-btn-active-bg: var(--app-surface-2);
  --bs-btn-active-border-color: var(--app-border-strong);

  --bs-btn-disabled-color: var(--app-ink-tertiary);
  --bs-btn-disabled-bg: var(--app-surface-1);
  --bs-btn-disabled-border-color: var(--app-border);
}
.btn-outline-secondary:hover {
  background:   var(--app-surface-2);
  color:        var(--app-ink-primary);
  /* FIX: static fallback + color-mix() */
  border-color: rgba(160, 160, 176, 0.50);
  border-color: color-mix(in srgb, var(--app-ink-tertiary) 50%, transparent);
}

/* —— Alerts ——————————————————————————————————————————————————— */
.alert {
  border-radius:             12px;
  font-size:                 var(--app-fs-md);
  border-inline-start-width: 3px;
  border-inline-start-style: solid;
}
.alert-success {
  border-inline-start-color: var(--bs-success);
  background:   rgba(45, 192, 119, 0.08);
  border-color: rgba(45, 192, 119, 0.20);
  color:        var(--app-ink-primary);
}
.alert-danger {
  border-inline-start-color: #cc2800;
  background:   rgba(255, 60, 0, 0.08);
  border-color: rgba(255, 60, 0, 0.20);
  color:        var(--app-ink-primary);
}
.alert-warning {
  border-inline-start-color: var(--bs-warning);
  background:   rgba(251, 214, 26, 0.08);
  border-color: rgba(251, 214, 26, 0.20);
  color:        var(--app-ink-primary);
}
.alert-info {
  border-inline-start-color: var(--app-ink-accent);
  background:   rgba(72, 87, 252, 0.08);
  border-color: rgba(72, 87, 252, 0.20);
  color:        var(--app-ink-primary);
}
/* FIX 06: dark opacity ≈ ضعف light */
[data-bs-theme="dark"] .alert-success {
  background:   rgba(45, 192, 119, 0.14);
  border-color: rgba(45, 192, 119, 0.28);
}
[data-bs-theme="dark"] .alert-danger {
  background:   rgba(255, 60, 0, 0.14);
  border-color: rgba(255, 60, 0, 0.28);
}
[data-bs-theme="dark"] .alert-warning {
  background:   rgba(251, 214, 26, 0.14);
  border-color: rgba(251, 214, 26, 0.28);
}
[data-bs-theme="dark"] .alert-info {
  background:   rgba(72, 87, 252, 0.14);
  border-color: rgba(72, 87, 252, 0.28);
}

/* —— Badge ——————————————————————————————————————————————————— */
.badge {
  font-size:     var(--app-fs-xs);
  font-weight:   600;
  border-radius: 6px;
}

/* —— Form check —————————————————————————————————————————————— */
.form-check-input {
  --bs-form-check-bg: var(--app-surface-0);
  border-color: var(--app-border);
  width:        1em;
  height:       1em;
  margin-top:   0.18em;
  transition:
    background-color var(--app-dur-fast) var(--app-ease-smooth),
    border-color     var(--app-dur-fast) var(--app-ease-smooth),
    box-shadow       var(--app-dur-fast) var(--app-ease-smooth);
}
.form-check-input:checked {
  background-color: var(--app-ink-accent);
  border-color:     var(--app-ink-accent);
}
.form-check-input:hover:not(:disabled) { border-color: var(--app-ink-accent); }
.form-check-input:focus {
  box-shadow:   0 0 0 3px var(--app-focus-ring-computed);
  border-color: var(--app-ink-accent);
}
.form-check-label {
  font-size: var(--app-fs-md);
  color:     var(--app-ink-primary);
}
[data-bs-theme="dark"] .form-check-input {
  --bs-form-check-bg: var(--app-surface-2);
  border-color: rgba(255, 255, 255, 0.20);
}

/* —— Tooltip ————————————————————————————————————————————————— */
.tooltip {
  --bs-tooltip-bg:            var(--app-surface-0);
  --bs-tooltip-color:         var(--app-ink-primary);
  --bs-tooltip-border-radius: 7px;
  --bs-tooltip-font-size:     var(--app-fs-xs);
  --bs-tooltip-padding-x:     8px;
  --bs-tooltip-padding-y:     4px;
  font-weight: 500;
}
[data-bs-theme="dark"] .tooltip {
  --bs-tooltip-bg:    var(--app-surface-3);
  --bs-tooltip-color: var(--app-ink-primary);
}

/* —— Code & pre ——————————————————————————————————————————————— */
code {
  font-family:    var(--app-font-mono);
  font-size:      var(--app-fs-sm);
  color:          var(--app-ink-accent);
  background:     rgba(72, 87, 252, 0.08);
  padding:        2px 6px;
  border-radius:  5px;
  letter-spacing: 0;
}
[data-bs-theme="dark"] code {
  color:      #a8b0fd;
  background: rgba(72, 87, 252, 0.14);
}

pre {
  font-family:   var(--app-font-mono);
  font-size:     var(--app-fs-sm);
  line-height:   1.7;
  color:         var(--app-ink-secondary);
  background:    var(--app-surface-0);
  border:        1px solid var(--app-border);
  border-radius: 10px;
  padding:       14px 16px;
  overflow-x:    auto;
  margin-bottom: 16px;
}
[data-bs-theme="dark"] pre { background: var(--app-surface-1); }


/* ================================================================
   §4  SEGMENTED CONTROL
   ================================================================ */

.d3m-segmented {
  display:       inline-flex;
  background:    rgba(0, 0, 0, 0.06);
  border-radius: 10px;
  padding:       2px;
  gap:           2px;
}
[data-bs-theme="dark"] .d3m-segmented {
  background: rgba(255, 255, 255, 0.08);
}

.d3m-seg-item {
  padding:         5px 14px;
  border-radius:   8px;
  border:          none;
  background:      transparent;
  font-family:     var(--bs-body-font-family);
  font-size:       var(--app-fs-sm);
  font-weight:     600;
  color:           var(--app-ink-secondary);
  letter-spacing:  var(--app-ls-normal);
  cursor:          pointer;
  white-space:     nowrap;
  text-decoration: none;
  transition:
    background-color var(--app-dur-fast) var(--app-ease-smooth),
    color            var(--app-dur-fast) var(--app-ease-smooth),
    box-shadow       var(--app-dur-fast) var(--app-ease-smooth);
}
.d3m-seg-item:hover:not(.active):not([aria-selected="true"]) {
  color: var(--app-ink-primary);
}
.d3m-seg-item.active,
.d3m-seg-item[aria-selected="true"] {
  background:  var(--bs-tertiary-bg);
  color:       var(--app-ink-primary);
  box-shadow:  var(--app-shadow-sm);
}


/* ================================================================
   §5  SHARED HELPERS
   ================================================================ */

.content-rich img {
  max-width:     100%;
  height:        auto;
  border-radius: 8px;
}
.content-rich table { width: 100%; }
.content-rich a     { word-break: break-word; }

.copy-row {
  display:     flex;
  gap:         8px;
  align-items: center;
}

@media (min-width: 768px) {
  .w-md-auto { width: auto !important; }
}

/* —— Table tab nav —— */
/* 1. حاوية التابات (تطوير لكودك الأصلي) */
.table-tab-nav {
  flex: 1 1 auto;
  min-width: 0;
  display: inline-flex !important; /* لضمان شكل الـ Segmented */
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  
  /* الإضافات الجمالية */
  background-color: var(--app-surface-2);
  padding: 6px !important;
  border-radius: 14px;
  border: 1px solid var(--app-border);
  gap: 4px;
}

.table-tab-nav::-webkit-scrollbar { display: none; }

/* 2. أزرار التابات (الروابط) */
.table-tab-nav .nav-link {
  font-size: var(--app-fs-xs);
  font-weight: 600;
  color: var(--app-ink-secondary);
  padding: 8px 16px !important;
  border-radius: 10px !important;
  border: none !important;
  transition: all var(--app-dur-fast) var(--app-ease-smooth);
  white-space: nowrap;
}

.table-tab-nav .nav-link.active {
  background-color: var(--app-surface-1) !important;
  color: var(--bs-primary) !important;
  box-shadow: var(--app-shadow-sm) !important;
}

.filter-bar-search {
  flex-shrink: 0;
  min-width: 160px;
  max-width: 280px;
}

/* التنسيق الجمالي لصندوق البحث */
.filter-bar-search .input-group {
  background-color: var(--app-surface-2);
  border-radius: var(--app-radius-card); /* 16px */
  border: 1px solid var(--app-border);
  transition: border-color 0.2s;
}

.filter-bar-search .input-group-text {
  background: transparent !important;
  border: none !important;
  color: var(--app-ink-secondary);
}

.filter-bar-search .form-control {
  background: transparent !important;
  border: none !important;
  font-size: var(--app-fs-sm);
  color: var(--app-ink-primary);
}

.filter-bar-search:focus-within .input-group {
  border-color: var(--bs-primary) !important;
  background-color: var(--app-surface-1);
}

/* تحسينات الجوال */
@media (max-width: 767.98px) {
  .filter-bar-search { 
    max-width: 100%; 
    width: 100%;
  }
}

/* Brand logo height */
.sidebar-brand a img         { height: 28px; width: auto; }
#guest-nav .navbar-brand img { height: 26px; width: auto; }
.footer-brand-logo           { height: 20px; width: auto; }

/* Category icon */
.category-icon-img {
  width:       1.1rem;
  height:      1.1rem;
  object-fit:  contain;
  flex-shrink: 0;
}

/* Currency item base — shared */
.currency-item {
  display:         flex;
  align-items:     center;
  gap:             10px;
  padding:         7px 10px;
  border-radius:   8px;
  cursor:          pointer;
  transition:      background-color var(--app-dur-fast);
  font-size:       var(--app-fs-md);
  text-decoration: none;
  color:           var(--app-ink-primary);
}
.currency-item:hover { background: var(--app-hover-light); }
[data-bs-theme="dark"] .currency-item:hover { background: var(--app-hover-dark); }

/* Separator dot */
.app-sep-dot,
.footer-dot,
.gf-dot {
  width:         3px;
  height:        3px;
  border-radius: 50%;
  background:    var(--app-ink-tertiary);
  opacity:       0.35;
}

/* FA icon z-index helper */
.position-relative > .fa.position-absolute,
.position-relative > .fal.position-absolute { z-index: 2; }

/* —— Platform card grid (services page) ——
   80px card-style. Distinct from .platform-btn (32px chip, neworder.css).
   —— */
.platform-grid {
  display:   flex;
  flex-wrap: wrap;
  gap:       8px;
}

.platform-card {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             6px;
  width:           80px;
  padding:         10px 8px;
  border:          1px solid var(--app-border);
  border-radius:   var(--app-radius-panel);
  background:      var(--app-surface-1);
  color:           var(--app-ink-secondary);
  cursor:          pointer;
  transition:
    background   var(--app-dur-fast) var(--app-ease-smooth),
    border-color var(--app-dur-fast) var(--app-ease-smooth),
    color        var(--app-dur-fast) var(--app-ease-smooth),
    box-shadow   var(--app-dur-fast) var(--app-ease-smooth);
}
.platform-card__icon {
  width:           28px;
  height:          28px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           var(--app-ink-accent);
}
.platform-card__icon svg { width: 100%; height: 100%; }
.platform-card__title {
  font-size:   var(--app-fs-xs);
  font-weight: 600;
  white-space: nowrap;
  line-height: 1;
  color:       inherit;
}
.platform-card:hover:not(.active) {
  background:   var(--app-surface-2);
  border-color: var(--app-border-strong);
  color:        var(--app-ink-primary);
}
.platform-card.active {
  background:   var(--bs-primary-bg-subtle);
  border-color: var(--bs-primary-border-subtle);
  color:        var(--app-ink-accent);
  box-shadow:   var(--app-shadow-xs);
}
.platform-card.active .platform-card__icon { color: var(--app-ink-accent); }

@media (max-width: 575.98px) {
  .platform-card { width: 68px; padding: 8px 4px; }
}

/* —— Service table column sizing —— */
.service-table th:first-child,
.service-table td:first-child { white-space: nowrap; width: 80px; }
.service-table th:nth-child(2),
.service-table td:nth-child(2) { min-width: 180px; }
.service-table th:nth-child(n+3),
.service-table td:nth-child(n+3) { white-space: nowrap; }

/* —— JS-driven visibility —— */
.js-hidden { display: none !important; }


/* ================================================================
   §6  FOCUS RINGS (keyboard nav)
   ——————————————————————————————————————————————————————————————
   FIX color: توحيد حول --comp-focus-outline بدل خلط --bs-primary
   و--app-ink-accent.
   ================================================================ */

.btn:focus-visible {
  outline:        2px solid var(--comp-focus-outline);
  outline-offset: 3px;
  box-shadow:     none !important;
}
.nav-pills .nav-link:focus-visible {
  outline:        2px solid var(--comp-focus-outline);
  outline-offset: 2px;
}
.page-link:focus,
.form-check-input:focus {
  box-shadow:   0 0 0 3px var(--app-focus-ring-computed);
  border-color: var(--app-ink-accent);
}
.d3m-seg-item:focus-visible,
a.d3m-seg-item:focus-visible {
  outline:        2px solid var(--comp-focus-outline);
  outline-offset: 2px;
  box-shadow:     none !important;
}


/* ================================================================
   §7  REDUCED MOTION
   ================================================================ */

@media (prefers-reduced-motion: reduce) {
  .card-hoverable,
  .card-hoverable:hover,
  .btn,
  .btn:hover,
  .btn:active,
  .form-control,
  .form-select,
  .d3m-seg-item,
  .table > tbody > tr > td,
  .platform-card { transition: none !important; }
  .btn:active            { transform: none !important; }
  .card-hoverable:hover  { transform: none !important; }
  .card-hoverable:active { transform: none !important; }
}

/* ================================================================
   §7  REDUCED MOTION
   ================================================================ */
   /* تطبيق طبقة الزجاج على حاوية الجدول */
/* --- حاوية الجدول --- */
/* ================================================================
   UNIFIED APP TABLES — نظام الجداول الموحد
   ================================================================ */
/* ================================================================
   UNIFIED APP TABLES — نظام الجداول الموحد والمحمي
   ================================================================ */

/* 1. الحاوية الخارجية */
.card-table-wrapper {
  background-color: var(--app-surface-1) !important;
  border: 1px solid var(--app-border) !important;
  border-radius: var(--app-radius-card) !important; /* 16px */
  box-shadow: var(--app-shadow-sm) !important;
  overflow: hidden;
  margin-bottom: 1.5rem;
}

/* 2. جسم الجدول الأساسي */
.table-app {
  margin-bottom: 0 !important;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background-color: var(--app-surface-1);
}

/* 3. رأس الجدول (Thead) */
.table-app thead th {
  background-color: var(--app-surface-2) !important;
  color: var(--app-ink-secondary) !important;
  font-size: var(--app-fs-xs) !important; /* 12px */
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: var(--app-ls-wide);
  padding: 1rem 1.25rem !important;
  border-bottom: 2px solid var(--app-border-strong) !important;
  white-space: nowrap;
}

/* 4. الخلايا (Td) وضبط الحجم لمنع التمدد */
.table-app tbody td {
  font-size: var(--app-fs-sm) !important; /* 14px */
  color: var(--app-ink-primary) !important;
  vertical-align: middle !important;
  border-bottom: 1px solid var(--app-border) !important;
  max-width: 250px; /* القيمة السحرية لمنع تمدد الجدول */
  overflow-wrap: break-word;
}

/* 5. تنسيق النصوص الطويلة (روابط/خدمات) */
.text-truncate-2, .table-app td .text-break {
  display: -webkit-box;
  -webkit-line-clamp: 2; /* سطرين فقط */
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-all;
  line-height: 1.5;
  font-family: var(--app-font-mono); /* للروابط والأرقام */
}

/* إظهار النص كاملاً عند مرور الماوس (اختياري) */
.text-truncate-2:hover {
  overflow: visible;
  display: block;
  -webkit-line-clamp: unset;
  background: var(--app-surface-1);
  position: relative;
  z-index: 10;
}

/* 6. تأثير التمرير والألوان الوظيفية */
.table-app tbody tr:hover {
  background-color: var(--app-hover-light) !important;
  transition: background-color var(--app-dur-fast) var(--app-ease-smooth);
}

.font-numeric {
  font-family: var(--app-font-mono) !important;
  font-weight: 500;
}

/* صف الفئة (الخدمات) */
tr.category-row, tr[data-platform-category].table {
  background-color: var(--app-surface-3) !important;
}

tr.category-row td, tr[data-platform-category].table td {
  font-weight: 700 !important;
  color: var(--bs-primary) !important;
  border-bottom: 2px solid var(--app-border-strong) !important;
}

/* 7. الأوسمة (Badges) */
.badge.rounded-pill {
  padding: 0.45em 0.85em !important;
  font-size: var(--app-fs-xs) !important;
  font-weight: 600 !important;
}