/* ================================================================
   HIG DESIGN SYSTEM — v5.1  |  base.css
   ================================================================
   SCOPE
   Shared foundation — loaded on EVERY page (auth + guest).
   Contains §1 tokens, §2 resets, §10 page components.

   What lives here            What lives ELSEWHERE
   ──────────────────────     ────────────────────────────────
   Design tokens              Page-specific styles (order, tickets…)
   Glass layer                Component libraries (Select2, charts…)
   Sidebar + brand            Page widgets (metric cards, service card…)
   Header + pills             Platform plugins
   Account dropdown
   Dark-mode toggle
   Guest nav + footer
   Spotlight modal
   Authenticated footer
   Focus / a11y utilities
   Reduced-motion reset
   Responsive shell breakpoints

   ================================================================
   INDEX
   1.  Design Tokens  (Light ↔ Dark)
   2.  Global Resets
   3.  Glass Layer  (nav, header, footer, modals)
   4.  Layout Shell  (Sidebar · Header · Main · Footer)
   5.  Sidebar Components  (brand · balance · nav-links)
   6.  Header Components  (pills · account btn · dropdown · toggle)
   7.  Guest Layout  (navbar · footer)
   8.  Spotlight Modal
   9.  Accessibility & Motion
   10. Responsive Shell
   ================================================================ */


/* ================================================================
   1. DESIGN TOKENS
   ================================================================ */

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

  /* ── Typography ── */
  --hig-font:   'Inter', 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --hig-arabic: 'IBM Plex Sans Arabic', 'Inter', system-ui, sans-serif;
  --hig-mono:   'IBM Plex Mono', ui-monospace, monospace;

  --bs-body-font-family: var(--hig-font);
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.65;

  /* ── Border radius ── */
  --bs-border-radius:      8px;
  --bs-border-radius-sm:   4px;
  --bs-border-radius-lg:   12px;
  --bs-border-radius-pill: 50px;
  --radius-card:           16px;
  --radius-card-lg:        20px;
  --radius-panel:          12px;

  /* ── Brand palette ── */
  --bs-primary:            #0A84FF;
  --bs-primary-rgb:        10, 132, 255;
  --bs-secondary:          #FF375F;
  --bs-secondary-rgb:      255, 55, 95;
  --bs-purple:             #BF5AF2;
  --bs-purple-rgb:         191, 90, 242;
  --bs-success:            #30D158;
  --bs-success-rgb:        48, 209, 88;
  --bs-warning:            #FF9F0A;
  --bs-warning-rgb:        255, 159, 10;
  --bs-danger:             #FF3B30;
  --bs-danger-rgb:         255, 59, 48;

  /* ── Semantic tints (inherited by child pages) ── */
  --bs-primary-bg-subtle:       rgba(10, 132, 255, 0.08);
  --bs-primary-border-subtle:   rgba(10, 132, 255, 0.20);
  --bs-primary-text-emphasis:   #003A8C;
  --bs-secondary-bg-subtle:     rgba(255, 55, 95, 0.08);
  --bs-secondary-border-subtle: rgba(255, 55, 95, 0.20);
  --bs-secondary-text-emphasis: #7A0020;
  --bs-focus-ring-color:        rgba(10, 132, 255, 0.28);

  /* ── Ink scale ── */
  --ink-primary:      #0F0F11;
  --ink-secondary:    #5A5A6E;
  --ink-tertiary:     #A0A0B0;
  --ink-accent:       var(--bs-primary);
  --ink-accent-hover: #0077ED;

  /* ── Surfaces (flat — glass is opt-in via §3) ── */
  --surface-0: #F4F4F8;
  --surface-1: #FFFFFF;
  --surface-2: #F0F0F5;
  --surface-3: #E8E8EF;

  /* Bootstrap surface overrides */
  --bs-body-bg:      var(--surface-0);
  --bs-secondary-bg: var(--surface-2);
  --bs-tertiary-bg:  var(--surface-1);
  --bs-border-color: rgba(0, 0, 0, 0.07);

  /* ── Glass (shell elements ONLY — sidebar, header, footer, modals) ── */
  --glass-bg:          rgba(255, 255, 255, 0.78);
  --glass-bg-fallback: rgba(255, 255, 255, 0.97);
  --glass-border:      rgba(0, 0, 0, 0.07);
  --glass-blur:        saturate(180%) blur(24px);

  /* ── Header pills ── */
  --pill-balance-bg:  rgba(48, 209, 88,  0.10);
  --pill-balance-ink: #1A7F3C;
  --pill-orders-bg:   rgba(10, 132, 255, 0.10);
  --pill-orders-ink:  #004FC4;

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

  /* ── Layout geometry ── */
  --sidebar-w: 272px;
  --header-h:  56px;

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

  /* ── Focus ring ── */
  --focus-ring: 0 0 0 3px rgba(10, 132, 255, 0.30);

  /* ── Hover surfaces ── */
  --hover-light: rgba(0, 0, 0, 0.04);
  --hover-dark:  rgba(255, 255, 255, 0.06);

  /* ── Toggle thumb direction (flipped for RTL in html[dir="rtl"]) ── */
  --toggle-x: 14px;
}

/* RTL: swap font stack + toggle direction.
   All layout uses CSS logical properties — no other changes needed. */
html[dir="rtl"] {
  --bs-body-font-family: var(--hig-arabic);
  --toggle-x: -14px;
}

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

  --bs-primary:     #0A84FF;
  --bs-primary-rgb: 10, 132, 255;
  --bs-success:     #30D158;
  --bs-warning:     #FF9F0A;
  --bs-warning-rgb: 255, 159, 10;

  --bs-primary-bg-subtle:       rgba(10, 132, 255, 0.15);
  --bs-primary-border-subtle:   rgba(10, 132, 255, 0.28);
  --bs-primary-text-emphasis:   #5AC0FF;
  --bs-secondary-bg-subtle:     rgba(255, 55, 95, 0.15);
  --bs-secondary-border-subtle: rgba(255, 55, 95, 0.28);
  --bs-secondary-text-emphasis: #FF8FA3;

  --ink-primary:      #F2F2F7;
  --ink-secondary:    #8E8E9A;
  --ink-tertiary:     #48484A;
  --ink-accent:       #0A84FF;
  --ink-accent-hover: #409CFF;

  --surface-0: #111113;
  --surface-1: #1C1C1E;
  --surface-2: #2C2C2E;
  --surface-3: #3A3A3C;

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

  --glass-bg:          rgba(28, 28, 30, 0.82);
  --glass-bg-fallback: rgba(18, 18, 20, 0.98);
  --glass-border:      rgba(255, 255, 255, 0.07);

  --pill-balance-bg:  rgba(48, 209, 88,  0.14);
  --pill-balance-ink: #30D158;
  --pill-orders-bg:   rgba(10, 132, 255, 0.14);
  --pill-orders-ink:  #0A84FF;

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


/* ================================================================
   2. GLOBAL RESETS
   ================================================================ */

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

html, body {
  font-family:             var(--bs-body-font-family);
  background-color:        var(--surface-0);
  color:                   var(--ink-primary);
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing:          -0.011em;
}

/* Suppress browser default outlines — custom styles in §9 */
*:focus { outline: none; }


/* ════════════════════════════════════════════════════════════════
   10. PAGE COMPONENTS  (hig-pages — layout-agnostic)
   ════════════════════════════════════════════════════════════════ */

/* ── Page header (outside card — tables, wide pages, account) ── */
.hig-page-header {
  display:        flex;
  flex-direction: column;
  gap:            6px;
  margin-block-end: 4px;
}
.hig-page-title {
  font-size:      22px;
  font-weight:    700;
  color:          var(--ink-primary);
  letter-spacing: -0.03em;
  line-height:    1.2;
  margin:         0;
}
.hig-page-desc {
  font-size:   14px;
  color:       var(--ink-secondary);
  line-height: 1.5;
  margin:      0;
}

/* ── Card header (inside card — form-only pages: signin, signup, 2fa…) ── */
.hig-card-header {
  display:          flex;
  flex-direction:   column;
  gap:              4px;
  padding-block-end: 16px;
  margin-block-end:  16px;
  border-block-end:  1px solid var(--glass-border);
}
.hig-card-title {
  font-size:      20px;
  font-weight:    700;
  color:          var(--ink-primary);
  letter-spacing: -0.03em;
  line-height:    1.2;
  margin:         0;
}
.hig-card-desc {
  font-size:   13px;
  color:       var(--ink-secondary);
  line-height: 1.5;
  margin:      0;
}



.hig-textarea-mono { font-family: var(--hig-mono); font-size: 13px; resize: vertical; }



/* ── Category icon img ── */
.hig-cat-img,
.hig-cat-icon-img {
  width:        calc(1em + 6px);
  height:       calc(1em + 6px);
  object-fit:   contain;
  vertical-align: middle;
}



.hig-content-rich img { max-width: 100%; height: auto; border-radius: 8px; }
.hig-content-rich h1,
.hig-content-rich h2,
.hig-content-rich h3 { color: var(--ink-primary); }
.hig-content-rich a   { color: var(--ink-accent); }



.hig-th-icon  { width: 40px; }
.hig-th-name,
.hig-td-name  { min-width: 180px; }
.hig-th-link,
.hig-td-link  { max-width: 260px; word-break: break-all; }
.hig-td-desc  { max-width: 240px; font-size: 12px; color: var(--ink-secondary); }
.hig-td-label { width: 40%; font-weight: 600; color: var(--ink-secondary); white-space: nowrap; }

/* Table category rows */
.hig-table-category-row td {
  background:  var(--surface-2);
  font-size:   11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color:       var(--ink-tertiary);
  padding-block: 6px;
}

/* ── Favorite button ── */
.hig-favorite-btn       { cursor: pointer; color: var(--ink-tertiary); transition: color var(--dur-fast); }
.hig-favorite-btn:hover { color: var(--ink-accent); }
.hig-favorite-btn.favorite-active { color: #f59e0b; }







/* ── Blog ── */
.hig-blog-list    { display: flex; flex-direction: column; gap: 20px; }
.hig-blog-card {
  background:    var(--surface-2);
  border:        1px solid var(--glass-border);
  border-radius: 16px;
  overflow:      hidden;
}
.hig-blog-card-img img { width: 100%; height: 220px; object-fit: cover; display: block; }
.hig-blog-card-body    { padding: 20px 24px 24px; }
.hig-blog-card-title   { font-size: 17px; font-weight: 700; color: var(--ink-primary); margin-block-end: 10px; }
.hig-blog-card-content { font-size: 14px; color: var(--ink-secondary); line-height: 1.65; }
.hig-blog-post         { background: var(--surface-2); border: 1px solid var(--glass-border); border-radius: 16px; overflow: hidden; }
.hig-blog-post-img img { width: 100%; max-height: 360px; object-fit: cover; display: block; }
.hig-blog-post-title   { font-size: 24px; font-weight: 700; color: var(--ink-primary); margin-block: 20px 14px; padding-inline: 28px; }
.hig-blog-post .hig-content-rich { padding-inline: 28px; }
.hig-blog-post-footer  { padding: 20px 28px 28px; }

/* ── Section title (inside hig-form-card) ── */
.hig-section-title {
  font-size:        15px;
  font-weight:      700;
  color:            var(--ink-primary);
  letter-spacing:   -0.02em;
  margin-block-end: 16px;
  padding-block-end: 12px;
  border-block-end: 1px solid var(--glass-border);
}

/* ── Field hint (small help text below input) ── */
.hig-field-hint {
  display:        block;
  font-size:      11px;
  color:          var(--ink-tertiary);
  margin-block-start: 5px;
}

/* ── OTP / code input ── */
.hig-input-otp {
  font-family:    var(--hig-mono);
  font-size:      18px;
  letter-spacing: 0.15em;
  text-align:     center;
  max-width:      200px;
}

/* ── Copy row (input + copy button side by side) ── */
.hig-copy-row {
  display:     flex;
  gap:         8px;
  align-items: center;
}
.hig-copy-row .hig-input { flex: 1; }
.hig-copy-value {
  font-family:    var(--hig-mono);
  font-size:      13px;
  color:          var(--ink-secondary);
  word-break:     break-all;
  flex:           1;
}
.hig-copy-btn {
  flex-shrink: 0;
  padding:     6px 10px;
  border-radius: 8px;
}

/* ── Service description row (mobile only) ── */
.hig-td-desc-mobile td { font-size: 12px; color: var(--ink-secondary); padding-block: 6px; }

/* ── Back link in page header ── */
.hig-back-link {
  display:         inline-flex;
  align-items:     center;
  gap:             6px;
  font-size:       13px;
  font-weight:     500;
  color:           var(--ink-accent);
  text-decoration: none;
}
.hig-back-link:hover { text-decoration: underline; }

/* ── Ticket thread ── */
.hig-ticket-thread {
  display:        flex;
  flex-direction: column;
  gap:            16px;
}
.hig-ticket-msg {
  display:        flex;
  flex-direction: column;
  gap:            4px;
  max-width:      78%;
}
.hig-ticket-msg--user  { align-self: flex-end;   align-items: flex-end; }
.hig-ticket-msg--agent { align-self: flex-start;  align-items: flex-start; }

.hig-ticket-bubble {
  background:    var(--surface-2);
  border:        1px solid var(--glass-border);
  border-radius: 14px;
  padding:       12px 16px;
}
.hig-ticket-msg--user  .hig-ticket-bubble {
  background:    color-mix(in srgb, var(--ink-accent) 12%, var(--surface-2));
  border-color:  color-mix(in srgb, var(--ink-accent) 25%, transparent);
  border-end-end-radius: 4px;
}
.hig-ticket-msg--agent .hig-ticket-bubble { border-end-start-radius: 4px; }

.hig-ticket-text  { font-size: 14px; color: var(--ink-primary); line-height: 1.6; white-space: pre-wrap; }
.hig-ticket-files { margin-block-start: 10px; display: flex; flex-direction: column; gap: 4px; }
.hig-ticket-file-link {
  display:         inline-flex;
  align-items:     center;
  gap:             5px;
  font-size:       12px;
  color:           var(--ink-accent);
  text-decoration: none;
}
.hig-ticket-file-link:hover { text-decoration: underline; }

.hig-ticket-meta   { display: flex; align-items: center; gap: 6px; padding-inline: 4px; }
.hig-ticket-author { font-size: 11px; color: var(--ink-secondary); }
.hig-ticket-time   { font-size: 11px; }

/* ── Empty state (shown when a list/table has no results) ── */
.hig-empty-state {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  justify-content: center;
  gap:            10px;
  padding:        48px 24px;
  text-align:     center;
}
.hig-empty-icon {
  width:         48px;
  height:        48px;
  border-radius: 14px;
  background:    var(--surface-2);
  border:        1px solid var(--glass-border);
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-size:     20px;
  color:         var(--ink-tertiary);
  margin-block-end: 4px;
}
.hig-empty-title {
  font-size:   14px;
  font-weight: 600;
  color:       var(--ink-primary);
  margin:      0;
}
.hig-empty-desc {
  font-size: 13px;
  color:     var(--ink-tertiary);
  margin:    0;
  max-width: 320px;
  line-height: 1.5;
}

/* ── Responsive overrides for page components ── */
@media (max-width: 767.98px) {
  .hig-auth-card,
  .hig-form-card,
  .hig-api-card              { padding: 20px; }
  .hig-tab-toolbar           { gap: 8px; }
  .hig-tabs                  { gap: 2px; }
  .hig-tab                   { font-size: 12px; padding: 5px 9px; }
  .hig-toolbar-search        { width: 100%; }
  .hig-blog-post-title,
  .hig-blog-post .hig-content-rich,
  .hig-blog-post-footer      { padding-inline: 18px; }
  .hig-table th,
  .hig-table td              { padding: 8px 10px; }
}

/* ════════════════════════════════════════════════════════════════
   11. STATUS BADGES
   ════════════════════════════════════════════════════════════════ */

.hig-status {
  display:        inline-flex;
  align-items:    center;
  gap:            5px;
  height:         22px;
  padding-inline: 9px;
  border-radius:  100px;
  font-size:      11px;
  font-weight:    600;
  letter-spacing: -0.01em;
  white-space:    nowrap;
  user-select:    none;
  vertical-align: middle;
}
.hig-status-dot {
  width:        5px;
  height:       5px;
  border-radius: 50%;
  flex-shrink:  0;
}

/* ── Variants ── */
.hig-status--pending    { background: rgba(255,149,0,0.12);              color: #c47500; }
.hig-status--inprogress { background: rgba(var(--bs-primary-rgb),0.10); color: var(--bs-primary); }
.hig-status--processing { background: rgba(var(--bs-primary-rgb),0.10); color: var(--bs-primary); }
.hig-status--active     { background: rgba(52,199,89,0.12);              color: #1a7f3c; }
.hig-status--completed  { background: rgba(52,199,89,0.12);              color: #1a7f3c; }
.hig-status--partial    { background: rgba(137,80,252,0.10);             color: #7337EE; }
.hig-status--canceled   { background: rgba(0,0,0,0.06);                  color: var(--ink-secondary); }
.hig-status--cancelled  { background: rgba(0,0,0,0.06);                  color: var(--ink-secondary); }
.hig-status--paused     { background: rgba(255,149,0,0.10);              color: #c47500; }
.hig-status--expired    { background: rgba(0,0,0,0.06);                  color: var(--ink-secondary); }
.hig-status--rejected   { background: rgba(255,59,48,0.10);              color: #cc2a22; }
.hig-status--error      { background: rgba(255,59,48,0.10);              color: #cc2a22; }
.hig-status--refunded   { background: rgba(255,59,48,0.10);              color: #cc2a22; }
.hig-status--paid       { background: rgba(52,199,89,0.12);              color: #1a7f3c; }
.hig-status--open       { background: rgba(var(--bs-primary-rgb),0.10); color: var(--bs-primary); }
.hig-status--closed     { background: rgba(0,0,0,0.06);                  color: var(--ink-secondary); }
.hig-status--answered   { background: rgba(52,199,89,0.12);              color: #1a7f3c; }
.hig-status--default    { background: rgba(0,0,0,0.06);                  color: var(--ink-secondary); }

/* ── Dots ── */
.hig-status--pending .hig-status-dot    { background: #ff9500; }
.hig-status--inprogress .hig-status-dot { background: var(--bs-primary); animation: hig-pulse 1.8s ease-in-out infinite; }
.hig-status--processing .hig-status-dot { background: var(--bs-primary); animation: hig-pulse 1.8s ease-in-out infinite; }
.hig-status--active .hig-status-dot     { background: #30d158; box-shadow: 0 0 0 2px rgba(48,209,88,0.25); }
.hig-status--completed .hig-status-dot  { background: #30d158; }
.hig-status--partial .hig-status-dot    { background: #9d6bfa; }
.hig-status--canceled .hig-status-dot   { background: var(--ink-tertiary); }
.hig-status--cancelled .hig-status-dot  { background: var(--ink-tertiary); }
.hig-status--paused .hig-status-dot     { background: #ff9500; }
.hig-status--expired .hig-status-dot    { background: var(--ink-tertiary); }
.hig-status--rejected .hig-status-dot   { background: #ff3b30; }
.hig-status--error .hig-status-dot      { background: #ff3b30; }
.hig-status--refunded .hig-status-dot   { background: #ff3b30; }
.hig-status--paid .hig-status-dot       { background: #30d158; box-shadow: 0 0 0 2px rgba(48,209,88,0.25); }
.hig-status--open .hig-status-dot       { background: var(--bs-primary); }
.hig-status--closed .hig-status-dot     { background: var(--ink-tertiary); }
.hig-status--answered .hig-status-dot   { background: #30d158; }
.hig-status--default .hig-status-dot    { background: var(--ink-tertiary); }

/* ── Pulse animation for in-progress states ── */
@keyframes hig-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.35; }
}

/* ── Dark theme overrides ── */
[data-bs-theme="dark"] .hig-status--pending    { color: #FF9F0A; background: rgba(255,159,10,0.18); }
[data-bs-theme="dark"] .hig-status--inprogress { color: var(--bs-primary); background: rgba(var(--bs-primary-rgb),0.18); }
[data-bs-theme="dark"] .hig-status--processing { color: var(--bs-primary); background: rgba(var(--bs-primary-rgb),0.18); }
[data-bs-theme="dark"] .hig-status--active     { color: #34C759; background: rgba(52,199,89,0.18); }
[data-bs-theme="dark"] .hig-status--completed  { color: #34C759; background: rgba(52,199,89,0.18); }
[data-bs-theme="dark"] .hig-status--partial    { color: #9d6bfa; background: rgba(137,80,252,0.18); }
[data-bs-theme="dark"] .hig-status--canceled   { color: var(--ink-secondary); background: rgba(255,255,255,0.08); }
[data-bs-theme="dark"] .hig-status--cancelled  { color: var(--ink-secondary); background: rgba(255,255,255,0.08); }
[data-bs-theme="dark"] .hig-status--paused     { color: #FF9F0A; background: rgba(255,159,10,0.18); }
[data-bs-theme="dark"] .hig-status--expired    { color: var(--ink-secondary); background: rgba(255,255,255,0.08); }
[data-bs-theme="dark"] .hig-status--rejected   { color: #FF453A; background: rgba(255,69,58,0.18); }
[data-bs-theme="dark"] .hig-status--error      { color: #FF453A; background: rgba(255,69,58,0.18); }
[data-bs-theme="dark"] .hig-status--refunded   { color: #FF453A; background: rgba(255,69,58,0.18); }
[data-bs-theme="dark"] .hig-status--paid       { color: #34C759; background: rgba(52,199,89,0.18); }
[data-bs-theme="dark"] .hig-status--open       { color: var(--bs-primary); background: rgba(var(--bs-primary-rgb),0.18); }
[data-bs-theme="dark"] .hig-status--closed     { color: var(--ink-secondary); background: rgba(255,255,255,0.08); }
[data-bs-theme="dark"] .hig-status--answered   { color: #34C759; background: rgba(52,199,89,0.18); }
[data-bs-theme="dark"] .hig-status--default    { color: var(--ink-secondary); background: rgba(255,255,255,0.08); }

/* ── Prefers reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .hig-status-dot { animation: none !important; }
}

/* ── Cancel / reason tooltip icon ── */
.hig-status-reason {
  display:         inline-flex;
  align-items:     center;
  margin-inline-start: 5px;
  color:           var(--ink-tertiary);
  cursor:          help;
  transition:      color var(--dur-fast);
  vertical-align:  middle;
}
.hig-status-reason:hover { color: var(--ink-secondary); }

/* ================================================================
   11. BOOTSTRAP 5 OVERRIDES  (Hybrid Premium layer)
   Apply design-token values to BS5 components so no hig-* class
   is needed on every element — the tokens do the work globally.
   ================================================================ */

/* ── Cards ── */
.card {
  --bs-card-border-color:  var(--glass-border);
  --bs-card-bg:            var(--surface-2);
  --bs-card-border-radius: 16px;
  --bs-card-cap-bg:        transparent;
  box-shadow:              var(--shadow-sm);
}
.card + .card,
.card + .mt-3 { margin-block-start: 0; }

/* ── Form controls ── */
.form-control,
.form-select {
  border-color:  var(--glass-border);
  background:    var(--surface-1);
  color:         var(--ink-primary);
  border-radius: 10px;
}
.form-control:focus,
.form-select:focus {
  border-color: var(--ink-accent);
  box-shadow:   0 0 0 3px color-mix(in srgb, var(--ink-accent) 15%, transparent);
  background:   var(--surface-1);
  color:        var(--ink-primary);
}
.form-control[readonly],
.form-control:disabled {
  background: var(--surface-2);
  color:      var(--ink-tertiary);
}
.form-control::placeholder,
.form-select::placeholder { color: var(--ink-tertiary); }

/* ── Labels ── */
.form-label {
  font-size:      11px;
  font-weight:    700;
  letter-spacing: 0.05em;
  color:          var(--ink-secondary);
  margin-block-end: 6px;
}

/* ── Nav pills (tabs) ── */
.nav-pills .nav-link {
  color:         var(--ink-secondary);
  border-radius: 8px;
  font-size:     13px;
  font-weight:   500;
  padding:       5px 12px;
  transition:    background var(--dur-fast), color var(--dur-fast);
}
.nav-pills .nav-link:hover     { background: var(--surface-2); color: var(--ink-primary); }
.nav-pills .nav-link.active    { background: var(--ink-accent); color: #fff; }

/* ── Table ── */
.table { color: var(--ink-primary); font-size: 13px; }
.table > thead > tr > th {
  font-size:      11px;
  font-weight:    700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color:          var(--ink-tertiary);
  background:     var(--surface-2);
  border-color:   var(--glass-border);
  padding:        10px 14px;
  white-space:    nowrap;
}
.table > tbody > tr > td {
  border-color:   var(--glass-border);
  padding:        10px 14px;
  vertical-align: middle;
}
.table > tbody > tr:hover { background: var(--surface-2); }
.table-responsive.border { border-color: var(--glass-border) !important; }

/* ── Dropdowns ── */
.dropdown-menu {
  --bs-dropdown-border-color:  var(--glass-border);
  --bs-dropdown-bg:            var(--surface-2);
  --bs-dropdown-color:         var(--ink-primary);
  --bs-dropdown-link-color:    var(--ink-primary);
  --bs-dropdown-link-hover-bg: var(--surface-1);
  --bs-dropdown-border-radius: 12px;
  --bs-dropdown-padding-y:     6px;
  box-shadow: var(--shadow-float);
}
.dropdown-item { font-size: 13px; border-radius: 8px; }

/* ── Modals ── */
.modal-content {
  --bs-modal-bg:           var(--surface-2);
  --bs-modal-border-color: var(--glass-border);
  --bs-modal-border-radius: 16px;
}
.modal-header { border-color: var(--glass-border); }
.modal-footer { border-color: var(--glass-border); }

/* ── Pagination ── */
.page-link {
  border-color:   var(--glass-border);
  color:          var(--ink-primary);
  background:     var(--surface-2);
  border-radius:  8px !important;
  font-size:      13px;
  margin-inline:  2px;
}
.page-link:hover        { background: var(--surface-1); color: var(--ink-primary); border-color: var(--glass-border); }
.page-item.active .page-link {
  background:   var(--ink-accent);
  border-color: var(--ink-accent);
  color:        #fff;
}

/* ── Buttons ── */
.btn { border-radius: 10px; font-size: 13px; font-weight: 500; }
.btn-sm { border-radius: 8px; }
.btn-outline-secondary {
  border-color: var(--glass-border);
  color:        var(--ink-primary);
  background:   var(--surface-2);
}
.btn-outline-secondary:hover { background: var(--surface-1); color: var(--ink-primary); border-color: var(--glass-border); }

/* ── Alerts ── */
.alert { border-radius: 12px; font-size: 13px; }

/* ── Badges ── */
.badge { font-size: 11px; font-weight: 600; border-radius: 6px; }

/* ── Dark mode: BS5 color-scheme vars ── */
[data-bs-theme="dark"] {
  --bs-body-bg:      var(--surface-0);
  --bs-body-color:   var(--ink-primary);
  --bs-border-color: var(--glass-border);
  --bs-secondary-bg: var(--surface-2);
  --bs-tertiary-bg:  var(--surface-1);
}
[data-bs-theme="dark"] .card { box-shadow: var(--shadow-md); }
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
  background: var(--surface-1);
  color:      var(--ink-primary);
}

/* ── OTP input ── */
.hig-input-otp {
  font-family:    var(--hig-mono);
  font-size:      18px;
  letter-spacing: 0.15em;
  text-align:     center;
  max-width:      200px;
}

/* ── Search input icon spacing ── */
.hig-input-search { padding-inline-start: 2rem; }

/* ── Monospace textarea ── */
.hig-textarea-mono { font-family: var(--hig-mono); font-size: 13px; resize: vertical; }

/* ── Toolbar search width ── */
.hig-toolbar-search { min-width: 200px; }

/* ── Copy row ── */
.hig-copy-row {
  display:     flex;
  gap:         8px;
  align-items: center;
}
.hig-copy-value {
  font-family: var(--hig-mono);
  font-size:   13px;
  color:       var(--ink-secondary);
  word-break:  break-all;
  flex:        1;
}
.hig-copy-btn { flex-shrink: 0; padding: 6px 10px; border-radius: 8px; }

/* ── Favorite button ── */
.hig-favorite-btn       { color: var(--ink-tertiary); transition: color var(--dur-fast); }
.hig-favorite-btn:hover { color: var(--ink-accent); }
.hig-favorite-btn.favorite-active { color: #f59e0b; }

/* ── Column width helpers ── */
.hig-th-icon  { width: 40px; }
.hig-th-name,
.hig-td-name  { min-width: 180px; }
.hig-th-link,
.hig-td-link  { max-width: 260px; word-break: break-all; }
.hig-td-desc  { max-width: 240px; font-size: 12px; color: var(--ink-secondary); }
.hig-td-label { width: 40%; font-weight: 600; color: var(--ink-secondary); white-space: nowrap; }
.hig-td-desc-mobile td { font-size: 12px; color: var(--ink-secondary); padding-block: 6px; }

/* ── Table category row ── */
.hig-table-category-row > td {
  background:  var(--surface-2);
  font-size:   11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color:       var(--ink-tertiary);
  padding-block: 6px;
}

/* ── Category icon img ── */
.hig-cat-icon-img {
  width:        calc(1em + 6px);
  height:       calc(1em + 6px);
  object-fit:   contain;
  vertical-align: middle;
}