/* ======================================================================
   ALIGN-TO-V2-NEXT — Bridge → V2 next.js visual parity (v2-fix1)
   Part of the "Bridge → V2 Visual" mission, Option A gap-fill (2026-04-25).

   v2-fix1 update (post-live-test):
     Initial release used `body.v2-enabled` selector but lost cascade to
     more-specific Bridge legacy rules. This revision prefixes every
     selector with `html body.v2-enabled` (specificity 0,2,2 vs Bridge's
     typical 0,2,1) and adds explicit `background-color: transparent
     !important` to clear gold rgba overlays AND `* { color }` descendant
     overrides to win against child color rules.

     Verified live in browser DevTools BEFORE redeploy: sidebar active
     pill renders V2 red, body bg renders wine, FABs subtle, cards get
     subtle red glow.

   Scope:
     Every rule scoped under `html body.v2-enabled` — when V2Flag is OFF
     (default for non-admin users), Bridge looks identical to before.

   Touches:
     - Zero engine files
     - Zero JS
     - Zero protected files (26/26 byte-IDENTICAL)
   ====================================================================== */

/* ----------------------------------------------------------------------
   1. Desktop palette correction — keep wine even at ≥1024px
   ---------------------------------------------------------------------- */
@media (min-width: 1024px) {
  html body.v2-enabled {
    --v2-bg-0: #0c0507;
    --v2-bg-1: #120708;
    --v2-bg-2: #180a0d;
    --v2-bg-3: #241014;
    --v2-fg-1: rgba(255, 255, 255, 0.95);
    --v2-fg-2: rgba(255, 255, 255, 0.78);
    --v2-fg-3: rgba(255, 255, 255, 0.56);
    --v2-fg-dim: rgba(255, 255, 255, 0.38);
  }
}

/* ----------------------------------------------------------------------
   2. Legacy → V2 token redirect — applied at body so all descendants inherit
   ---------------------------------------------------------------------- */
html body.v2-enabled {
  --brand-primary:   #e11d28;
  --brand-secondary: #ff6e46;
  --brand-dark:      #b8171f;
  --brand-light:     #ff6e46;

  --dark-bg-primary:        #120708;
  --dark-bg-secondary:      #180a0d;
  --dark-bg:                #120708;
  --dark-surface-primary:   #241014;
  --dark-surface-secondary: #281418;
  --dark-surface:           #1a0c0e;
  --dark-border:            rgba(255, 255, 255, 0.05);

  --text-primary:   rgba(255, 255, 255, 0.95);
  --text-secondary: rgba(255, 255, 255, 0.78);
  --text-muted:     rgba(255, 255, 255, 0.56);
  --text-tertiary:  rgba(255, 255, 255, 0.56);
  --text-light:     rgba(255, 255, 255, 0.38);

  --status-success:        #4A9E73;
  --status-success-light:  #A7E0BF;
  --status-error:          #e11d28;
  --status-error-light:    #F4A6AC;
  --status-warning:        #e8a53b;
  --status-warning-light:  #F2D08A;
  --status-info:           #4a90e2;
  --status-info-light:     #B6CFEC;
}

/* ----------------------------------------------------------------------
   3. Body + sidebar background — explicit wine (was navy)
   v2-fix2: must beat luxe-v2.css adaptive-time rules
   (body.v2-enabled[data-time="morning"|"dawn"|"afternoon"|...]) which
   have specificity 0,2,1. Our selector below = 0,2,2 (wins).
   ---------------------------------------------------------------------- */
html body.v2-enabled,
html body.v2-enabled[data-time],
html body.v2-enabled[data-time="dawn"],
html body.v2-enabled[data-time="morning"],
html body.v2-enabled[data-time="afternoon"],
html body.v2-enabled[data-time="evening"],
html body.v2-enabled[data-time="night"] {
  background-color: #120708 !important;
}

html body.v2-enabled .sidebar,
html body.v2-enabled #sidebar,
html body.v2-enabled aside.sidebar,
html body.v2-enabled[data-time] .sidebar,
html body.v2-enabled[data-time] aside.sidebar {
  background: #180a0d !important;
  background-color: #180a0d !important;
  border-inline-end-color: rgba(255, 255, 255, 0.05) !important;
  border-left-color: rgba(255, 255, 255, 0.05) !important;
  border-right-color: rgba(255, 255, 255, 0.05) !important;
}

/* Also catch the multi-element rule body, .sidebar, .header, .card, .sp-pane */
html body.v2-enabled[data-time] .header,
html body.v2-enabled[data-time] .card,
html body.v2-enabled[data-time] .sp-pane {
  background-color: #180a0d !important;
}

/* Also override luxe-v2.css ::before ambient overlay if it tints navy */
html body.v2-enabled::before,
html body.v2-enabled[data-time]::before {
  background:
    radial-gradient(ellipse at 30% 20%, rgba(225,29,40,0.10), transparent 60%),
    radial-gradient(ellipse at 80% 10%, rgba(212,175,55,0.05), transparent 55%) !important;
  opacity: 0.9 !important;
}

/* ----------------------------------------------------------------------
   4. Sidebar active item — V2 red gradient pill (was gold transparent)
   The * descendant override beats child color rules.
   The transparent background-color clears gold rgba(245,158,11,0.1).
   ---------------------------------------------------------------------- */
html body.v2-enabled .sidebar-nav-item.active,
html body.v2-enabled .sidebar-nav .active,
html body.v2-enabled .sidebar a.active,
html body.v2-enabled .sidebar a[aria-current="page"],
html body.v2-enabled .sidebar-link.active,
html body.v2-enabled .nav-item.active,
html body.v2-enabled .menu-item.active {
  background: linear-gradient(135deg, #ff6e46 0%, #e11d28 100%) !important;
  background-color: transparent !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border-color: transparent !important;
  border-right-color: transparent !important;
  border-left-color: transparent !important;
  box-shadow:
    0 6px 14px -4px rgba(255, 110, 70, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
  border-radius: 12px !important;
}

html body.v2-enabled .sidebar-nav-item.active *,
html body.v2-enabled .sidebar a.active *,
html body.v2-enabled .nav-item.active *,
html body.v2-enabled .menu-item.active * {
  color: #ffffff !important;
}

/* Inactive sidebar items — softer than gold */
html body.v2-enabled .sidebar a:not(.active),
html body.v2-enabled .sidebar-nav-item:not(.active),
html body.v2-enabled .nav-item:not(.active),
html body.v2-enabled .menu-item:not(.active) {
  color: rgba(255, 255, 255, 0.78) !important;
}

html body.v2-enabled .sidebar a:not(.active) *,
html body.v2-enabled .nav-item:not(.active) * {
  color: inherit;
}

html body.v2-enabled .sidebar a:not(.active):hover,
html body.v2-enabled .sidebar-nav-item:not(.active):hover,
html body.v2-enabled .nav-item:not(.active):hover {
  background: rgba(255, 255, 255, 0.05) !important;
}

/* ----------------------------------------------------------------------
   5. Page headers — white display font (was gold)
   ---------------------------------------------------------------------- */
html body.v2-enabled h1,
html body.v2-enabled h2,
html body.v2-enabled h3,
html body.v2-enabled .page-title,
html body.v2-enabled .section-title,
html body.v2-enabled [class*="page-header"] h1,
html body.v2-enabled [class*="page-header"] h2 {
  color: rgba(255, 255, 255, 0.95) !important;
  font-family: 'Readex Pro', 'IBM Plex Sans Arabic', 'Tajawal', system-ui, sans-serif !important;
}

html body.v2-enabled .page-subtitle,
html body.v2-enabled .page-caption {
  color: rgba(255, 255, 255, 0.56) !important;
  font-size: 11px;
}

/* ----------------------------------------------------------------------
   6. KPI / stat numbers — JetBrains Mono with tabular-nums
   ---------------------------------------------------------------------- */
html body.v2-enabled .kpi-value,
html body.v2-enabled .kpi-card .value,
html body.v2-enabled .stat-mini .value,
html body.v2-enabled .stat-card .value,
html body.v2-enabled .metric-value,
html body.v2-enabled .number-tabular,
html body.v2-enabled [class*="kpi-number"],
html body.v2-enabled [class*="stat-number"] {
  font-family: 'JetBrains Mono', ui-monospace, 'Courier New', monospace !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* ----------------------------------------------------------------------
   7. Cards — subtle V2 red glow gradient overlay
   ---------------------------------------------------------------------- */
html body.v2-enabled .luxury-card,
html body.v2-enabled .kpi-card,
html body.v2-enabled .stat-card,
html body.v2-enabled .dashboard-widget,
html body.v2-enabled .panel-card,
html body.v2-enabled .widget-panel-inset {
  background:
    linear-gradient(155deg, rgba(255, 110, 70, 0.06) 0%, rgba(255, 110, 70, 0) 40%),
    linear-gradient(180deg, #241014 0%, #180a0d 70%, #120708 100%) !important;
  background-color: transparent !important;
  border-color: rgba(255, 255, 255, 0.04) !important;
  box-shadow:
    0 14px 30px -8px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04) !important;
}

/* ----------------------------------------------------------------------
   8. Notification badge — red dot (was gold)
   ---------------------------------------------------------------------- */
html body.v2-enabled .notification-badge,
html body.v2-enabled .notif-badge,
html body.v2-enabled [class*="notification"] [class*="badge"] {
  background: #e11d28 !important;
  background-color: #e11d28 !important;
  color: #ffffff !important;
  box-shadow: 0 0 6px rgba(255, 110, 70, 0.6);
}

/* ----------------------------------------------------------------------
   9. Admin FABs — subtler V2 minimalist (super_admin only floating btns)
   ---------------------------------------------------------------------- */
html body.v2-enabled #adminFabSettings,
html body.v2-enabled #adminFabCustomFields,
html body.v2-enabled #adminFabFlags,
html body.v2-enabled #adminFabUsage,
html body.v2-enabled #adminFabCache {
  width: 36px !important;
  height: 36px !important;
  font-size: 16px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  background-color: rgba(255, 255, 255, 0.05) !important;
  color: rgba(255, 255, 255, 0.56) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
  border: 0 !important;
  opacity: 0.55;
  transition: opacity 200ms cubic-bezier(0.22, 0.61, 0.36, 1),
              background 200ms cubic-bezier(0.22, 0.61, 0.36, 1);
  backdrop-filter: blur(8px);
}

html body.v2-enabled #adminFabSettings:hover,
html body.v2-enabled #adminFabCustomFields:hover,
html body.v2-enabled #adminFabFlags:hover,
html body.v2-enabled #adminFabUsage:hover,
html body.v2-enabled #adminFabCache:hover {
  opacity: 1;
  background: rgba(255, 110, 70, 0.12) !important;
  color: rgba(255, 255, 255, 0.95) !important;
}

/* ----------------------------------------------------------------------
   10. Buttons — primary uses V2 red gradient (was gold)
   ---------------------------------------------------------------------- */
html body.v2-enabled .btn-primary,
html body.v2-enabled button.primary,
html body.v2-enabled [class*="btn"][class*="primary"]:not([class*="ghost"]) {
  background: linear-gradient(135deg, #ff6e46 0%, #e11d28 100%) !important;
  background-color: transparent !important;
  color: #ffffff !important;
  border: 0 !important;
  box-shadow:
    0 12px 28px -8px rgba(255, 110, 70, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  transition: transform 160ms cubic-bezier(0.22, 0.61, 0.36, 1),
              box-shadow 160ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

html body.v2-enabled .btn-primary:hover:not(:disabled),
html body.v2-enabled button.primary:hover:not(:disabled) {
  transform: translateY(-1px);
}

html body.v2-enabled .btn-primary:active:not(:disabled),
html body.v2-enabled button.primary:active:not(:disabled) {
  transform: translateY(0);
}

/* ----------------------------------------------------------------------
   11. Modal title — red instead of gold
   ---------------------------------------------------------------------- */
html body.v2-enabled .modal-title {
  color: #ff6e46 !important;
}

/* ----------------------------------------------------------------------
   12. Tabs — active tab uses red gradient indicator
   ---------------------------------------------------------------------- */
html body.v2-enabled .tab-btn.active,
html body.v2-enabled .tab.active,
html body.v2-enabled [role="tab"][aria-selected="true"] {
  color: #ffffff !important;
  border-bottom-color: #e11d28 !important;
  background:
    linear-gradient(135deg, rgba(255, 110, 70, 0.18) 0%, rgba(225, 29, 40, 0.12) 100%) !important;
}

/* ----------------------------------------------------------------------
   13. Reduced motion safety
   ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html body.v2-enabled #adminFabSettings,
  html body.v2-enabled #adminFabCustomFields,
  html body.v2-enabled #adminFabFlags,
  html body.v2-enabled #adminFabUsage,
  html body.v2-enabled #adminFabCache,
  html body.v2-enabled .btn-primary {
    transition: none !important;
  }
}

/* ======================================================================
   END align-to-v2-next.css (v2-fix1)
   Lines: ~280
   Verified live: V2 red gradient sidebar + wine bg + subtle FABs working
   Scope: html body.v2-enabled (zero impact when V2Flag is OFF)
   Touches no engines, no protected files, no JS.
   ====================================================================== */