/* ============================================================
   OnyxPlay Design System — onyx-shared.css  (SHARED RUNTIME LAYER)
   ────────────────────────────────────────────────────────────
   The non-@theme layer of the design system: base element styles,
   .dark / prefers-color-scheme token overrides, .op-* component
   styles and the Obsidian skin. Pure CSS — references only the
   --color-* / --radius-* / --shadow-* custom properties emitted by
   the @theme {} block in each module's compiled app.css (onyx.css).

   Served ONCE by SSO at /onyx-shared.css and <link>ed cross-origin
   by every module (config('onyx.shared_css_url')), so this layer is
   cached across module transitions and can never drift per-module.
   DO NOT edit per-module — edit here in SSO; this is the only copy.
   ============================================================ */

/* ── Dark mode token overrides ── */
.dark {
  --color-surface:         var(--color-slate-950);
  --color-surface-raised:  var(--color-slate-900);
  --color-surface-sunken:  var(--color-slate-800);
  --color-border:          var(--color-slate-700);
  --color-border-strong:   var(--color-slate-600);
  --color-text-primary:    var(--color-slate-50);
  --color-text-secondary:  var(--color-slate-400);
  --color-text-disabled:   var(--color-slate-600);

  --color-success-bg: rgb(22 163 74 / .12);
  --color-warning-bg: rgb(217 119 6 / .12);
  --color-danger-bg:  rgb(220 38 38 / .12);
  --color-info-bg:    rgb(37 99 235 / .12);

  --color-success-border: rgb(22 163 74 / .30);
  --color-warning-border: rgb(217 119 6 / .30);
  --color-danger-border:  rgb(220 38 38 / .30);
  --color-info-border:    rgb(37 99 235 / .30);

  --shadow-card:     0 1px 2px 0 rgb(0 0 0 / .30), 0 2px 8px -2px rgb(0 0 0 / .40);
  --shadow-raise:    0 2px 6px 0 rgb(0 0 0 / .40), 0 12px 26px -8px rgb(0 0 0 / .55);
  --shadow-accent:   0 4px 14px -4px color-mix(in srgb, var(--color-module-accent) 40%, transparent);
  --shadow-dropdown: 0 4px 16px -2px rgb(0 0 0 / .40), 0 2px 6px -2px rgb(0 0 0 / .32);
  --shadow-modal:    0 20px 48px -8px rgb(0 0 0 / .60), 0 8px 20px -4px rgb(0 0 0 / .40);
}

/* ── System preference: apply dark token overrides automatically ── */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    color-scheme: dark;
    --color-surface:         var(--color-slate-950);
    --color-surface-raised:  var(--color-slate-900);
    --color-surface-sunken:  var(--color-slate-800);
    --color-border:          var(--color-slate-700);
    --color-border-strong:   var(--color-slate-600);
    --color-text-primary:    var(--color-slate-50);
    --color-text-secondary:  var(--color-slate-400);
    --color-text-disabled:   var(--color-slate-600);

    --color-success-bg: rgb(22 163 74 / .12);
    --color-warning-bg: rgb(217 119 6 / .12);
    --color-danger-bg:  rgb(220 38 38 / .12);
    --color-info-bg:    rgb(37 99 235 / .12);

    --color-success-border: rgb(22 163 74 / .30);
    --color-warning-border: rgb(217 119 6 / .30);
    --color-danger-border:  rgb(220 38 38 / .30);
    --color-info-border:    rgb(37 99 235 / .30);

    --shadow-card:     0 1px 2px 0 rgb(0 0 0 / .30), 0 2px 8px -2px rgb(0 0 0 / .40);
    --shadow-raise:    0 2px 6px 0 rgb(0 0 0 / .40), 0 12px 26px -8px rgb(0 0 0 / .55);
    --shadow-accent:   0 4px 14px -4px color-mix(in srgb, var(--color-module-accent) 40%, transparent);
    --shadow-dropdown: 0 4px 16px -2px rgb(0 0 0 / .40), 0 2px 6px -2px rgb(0 0 0 / .32);
    --shadow-modal:    0 20px 48px -8px rgb(0 0 0 / .60), 0 8px 20px -4px rgb(0 0 0 / .40);
  }
}

/* ── Base element styles ── */
*,
::before,
::after {
  border-color: var(--color-border);
}

html {
  font-family: var(--font-sans);
  color: var(--color-text-primary);
  background-color: var(--color-surface);
  /* Faint module-accent mesh — adds atmosphere/depth so empty pages
     don't read as flat. Tracks the per-module accent; fixed on scroll. */
  background-image:
    radial-gradient(900px 520px at 100% -8%,
      color-mix(in srgb, var(--color-module-accent) 5%, transparent), transparent 60%),
    radial-gradient(720px 420px at -6% 108%,
      color-mix(in srgb, var(--color-brand-amber) 3.5%, transparent), transparent 55%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

/* ── Focus ring: brand-aware, accessible ── */
:focus-visible {
  outline: 2px solid var(--color-module-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *,
  ::before,
  ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Scrollbar: thin, themed ── */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}

/* ── Touch target minimum (mobile) ── */
button,
[role="button"],
a,
input[type="checkbox"],
input[type="radio"],
select {
  min-height: 44px;
  min-width: 44px;
}

/* Exception: inline/icon-only touch targets use padding instead */
.btn-icon {
  min-height: 36px;
  min-width: 36px;
  padding: 6px;
}

/* ── Utility: module accent gradient (used in sidebar accent bar) ── */
.op-accent-bar {
  background: linear-gradient(
    135deg,
    var(--color-module-accent) 0%,
    var(--color-brand-amber) 100%
  );
}

/* ── Utility: glassmorphism surface ── */
.op-glass {
  background: rgb(255 255 255 / .08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgb(255 255 255 / .12);
}

.dark .op-glass {
  background: rgb(0 0 0 / .24);
  border-color: rgb(255 255 255 / .08);
}

/* ============================================================
   Skin: "Obsidian" — futuristic, elegant (opt-in).
   ──────────────────────────────────────────────────────────
   Turn on with  data-skin="futuristic"  on <html> (set via
   <x-op.shell :skin="…" :mode="…">). A dark, glass, edge-lit
   control-room surface with luminous module-accent glow.
   Default obsidian-dark; add  data-mode="light"  for the
   daylight glass variant.

   Non-destructive + additive: every rule is scoped under
   [data-skin="futuristic"] so the default light/dark system is
   untouched. These rules are UNLAYERED, so they override the
   Tailwind utility classes (which live in @layer utilities) on
   the .op-* component hooks regardless of source order. Module
   identity (--color-module-accent) still drives every glow.
   ============================================================ */

[data-skin="futuristic"] {
  color-scheme: dark;

  /* Deep obsidian surfaces */
  --color-surface:        #06080D;
  --color-surface-raised: #10141D;
  --color-surface-sunken: rgb(255 255 255 / .04);
  --color-border:         rgb(255 255 255 / .09);
  --color-border-strong:  rgb(255 255 255 / .18);
  --color-text-primary:   #EAF0FA;
  --color-text-secondary: #8893A6;
  --color-text-disabled:  #495068;

  /* State tints — translucent for glass */
  --color-success-bg: rgb(22 163 74 / .16);
  --color-warning-bg: rgb(217 119 6 / .16);
  --color-danger-bg:  rgb(220 38 38 / .16);
  --color-info-bg:    rgb(37 99 235 / .16);
  --color-success-border: rgb(34 197 94 / .34);
  --color-warning-border: rgb(245 158 11 / .34);
  --color-danger-border:  rgb(248 113 113 / .34);
  --color-info-border:    rgb(96 165 250 / .34);

  /* Elevation — dark, with luminous accent */
  --shadow-card:     inset 0 1px 0 rgb(255 255 255 / .05), 0 10px 34px -18px rgb(0 0 0 / .85);
  --shadow-raise:    inset 0 1px 0 rgb(255 255 255 / .07), 0 22px 60px -20px rgb(0 0 0 / .92);
  --shadow-accent:   0 0 0 1px color-mix(in srgb, var(--color-module-accent) 45%, transparent),
                     0 10px 34px -10px color-mix(in srgb, var(--color-module-accent) 65%, transparent);
  --shadow-dropdown: inset 0 1px 0 rgb(255 255 255 / .06), 0 20px 50px -16px rgb(0 0 0 / .9);
  --shadow-modal:    inset 0 1px 0 rgb(255 255 255 / .08), 0 40px 90px -24px rgb(0 0 0 / .95);

  /* Atmosphere: aurora blooms + a fine engineering grid */
  background-color: #06080D;
  background-image:
    radial-gradient(1100px 620px at 88% -12%, color-mix(in srgb, var(--color-module-accent) 16%, transparent), transparent 60%),
    radial-gradient(900px 540px at -8% 112%, color-mix(in srgb, var(--color-brand-amber) 9%, transparent), transparent 55%),
    linear-gradient(rgb(255 255 255 / .022) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / .022) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 46px 46px, 46px 46px;
  background-attachment: fixed;
}

/* ── Cards + stats: glass panels, edge-lit ── */
[data-skin="futuristic"] .op-card,
[data-skin="futuristic"] .op-stat {
  background: linear-gradient(180deg, rgb(255 255 255 / .055), rgb(255 255 255 / .018));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-color: rgb(255 255 255 / .09);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
}
[data-skin="futuristic"] .op-card:hover,
[data-skin="futuristic"] .op-stat:hover { box-shadow: var(--shadow-raise); }
[data-skin="futuristic"] .op-card__header { border-color: rgb(255 255 255 / .07); }
[data-skin="futuristic"] .op-card__footer { background: rgb(255 255 255 / .025); border-color: rgb(255 255 255 / .07); }

/* ── Stat: glowing accent hairline ── */
[data-skin="futuristic"] .op-stat__rule {
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-module-accent) 35%, var(--color-module-accent) 65%, transparent);
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--color-module-accent) 80%, transparent));
}

/* ── Buttons ── */
[data-skin="futuristic"] .op-btn--primary {
  /* Self-coloured two-tone derived from the module accent (lightened stop ->
     accent), so every module's CTA matches its own accent. Was hardcoded to
     brand-amber, which polluted non-SMS modules (violet/green/etc.) with orange;
     SMS only looked right because its accent IS the fire/amber family. */
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-module-accent) 75%, white), var(--color-module-accent));
  border-color: transparent;
  box-shadow: var(--shadow-accent);
}
[data-skin="futuristic"] .op-btn--secondary {
  background: rgb(255 255 255 / .05);
  border-color: rgb(255 255 255 / .14);
  backdrop-filter: blur(8px);
  color: var(--color-text-primary);
}
[data-skin="futuristic"] .op-btn--secondary:hover { border-color: rgb(255 255 255 / .28); background: rgb(255 255 255 / .08); }
[data-skin="futuristic"] .op-btn--ghost:hover { background: rgb(255 255 255 / .06); }

/* ── Inputs / selects ── */
[data-skin="futuristic"] .op-input,
[data-skin="futuristic"] .op-select {
  background: rgb(255 255 255 / .045);
  border-color: rgb(255 255 255 / .11);
}
[data-skin="futuristic"] .op-input:focus,
[data-skin="futuristic"] .op-select:focus {
  background: rgb(255 255 255 / .06);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-module-accent) 30%, transparent),
              0 0 22px -6px color-mix(in srgb, var(--color-module-accent) 60%, transparent);
}

/* ── Tables ── */
[data-skin="futuristic"] .op-table thead th { background: rgb(255 255 255 / .03); border-color: rgb(255 255 255 / .07); }
[data-skin="futuristic"] .op-table tbody td { border-color: rgb(255 255 255 / .055); }
[data-skin="futuristic"] .op-table tbody tr:hover { background: rgb(255 255 255 / .035); }

/* ── Tabs: the active label (accent text) + a crisp, luminous accent underline
   carry the active state. The inset bottom line guarantees a solid 2px accent
   bar (the plain border reads too dim on obsidian); the outer box-shadow is a
   tight DOWNWARD glow under the bar — not a `filter` (that bloomed over the
   label + count pill into a blob). ── */
[data-skin="futuristic"] .op-tab--active {
  box-shadow:
    inset 0 -2px 0 0 var(--color-module-accent),
    0 4px 12px -5px color-mix(in srgb, var(--color-module-accent) 60%, transparent);
}

/* ── Badges: subtle glass ── */
[data-skin="futuristic"] .op-badge { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

/* ── Toggle / skeleton tuning ── */
[data-skin="futuristic"] .op-toggle__track { background: rgb(255 255 255 / .14); }
[data-skin="futuristic"] .op-skel { background: rgb(255 255 255 / .06); }

/* ── Shell chrome (sidebar + topbar) — glass ── */
[data-skin="futuristic"] .op-side {
  background: rgb(255 255 255 / .025);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-right: 1px solid rgb(255 255 255 / .07);
}
[data-skin="futuristic"] .op-top {
  background: rgb(8 10 15 / .55);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgb(255 255 255 / .06);
}

/* ── Sidebar nav: luminous active pill + glowing left light-bar ── */
[data-skin="futuristic"] .op-nav-item:hover { background: rgb(255 255 255 / .05); }
[data-skin="futuristic"] .op-nav-item--active {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--color-module-accent) 22%, transparent),
    color-mix(in srgb, var(--color-module-accent) 6%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-module-accent) 30%, transparent),
              0 0 18px -6px color-mix(in srgb, var(--color-module-accent) 70%, transparent);
}
[data-skin="futuristic"] .op-nav-item__rail {
  width: 3px;
  box-shadow: 0 0 10px color-mix(in srgb, var(--color-module-accent) 90%, transparent);
}

/* ── Overlays: dropdown/combobox menus + modal — glass panels ── */
[data-skin="futuristic"] .op-menu,
[data-skin="futuristic"] .op-modal {
  /* Opaque dark base so floating panels stay readable even where
     backdrop-filter is unsupported/clipped; white sheen layered on top. */
  background:
    linear-gradient(180deg, rgb(255 255 255 / .06), rgb(255 255 255 / .02)),
    linear-gradient(180deg, rgb(22 28 40 / .96), rgb(16 20 29 / .96));
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-color: rgb(255 255 255 / .1);
}
[data-skin="futuristic"] .op-menu { box-shadow: var(--shadow-dropdown); }
[data-skin="futuristic"] .op-modal { box-shadow: var(--shadow-modal); }
[data-skin="futuristic"] .op-modal__header { border-color: rgb(255 255 255 / .08); }
[data-skin="futuristic"] .op-modal__footer { background: rgb(255 255 255 / .03); border-color: rgb(255 255 255 / .08); }
[data-skin="futuristic"] .op-menu-item:hover { background: rgb(255 255 255 / .07); }

/* ── Tooltip: glass bubble ── */
[data-skin="futuristic"] .op-tip {
  background: rgb(16 20 29 / .92);
  border: 1px solid rgb(255 255 255 / .12);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}

/* ── Pagination: active page glows like a primary CTA ── */
[data-skin="futuristic"] .op-page--active {
  /* Self-coloured two-tone derived from the module accent (lightened stop ->
     accent), so every module's CTA matches its own accent. Was hardcoded to
     brand-amber, which polluted non-SMS modules (violet/green/etc.) with orange;
     SMS only looked right because its accent IS the fire/amber family. */
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-module-accent) 75%, white), var(--color-module-accent));
  box-shadow: var(--shadow-accent);
}

/* ============================================================
   Obsidian — light mode  (data-skin="futuristic" data-mode="light")
   Same edge-lit language on a luminous daylight surface:
   frosted-white glass, a pale accent aurora + grid, same glow.
   ============================================================ */
[data-skin="futuristic"][data-mode="light"] {
  color-scheme: light;

  --color-surface:        #EEF1F8;
  --color-surface-raised: #FFFFFF;
  --color-surface-sunken: rgb(15 23 42 / .045);
  --color-border:         rgb(15 23 42 / .10);
  --color-border-strong:  rgb(15 23 42 / .20);
  --color-text-primary:   #101826;
  --color-text-secondary: #5A6678;
  --color-text-disabled:  #AAB2C0;

  --color-success-bg: #ECFDF3;
  --color-warning-bg: #FFF8EB;
  --color-danger-bg:  #FEF1F1;
  --color-info-bg:    #EEF4FF;
  --color-success-border: rgb(22 163 74 / .28);
  --color-warning-border: rgb(217 119 6 / .28);
  --color-danger-border:  rgb(220 38 38 / .28);
  --color-info-border:    rgb(37 99 235 / .28);

  --shadow-card:     0 1px 2px rgb(16 24 40 / .05), 0 10px 28px -16px rgb(16 24 40 / .18);
  --shadow-raise:    0 2px 4px rgb(16 24 40 / .06), 0 22px 48px -20px rgb(16 24 40 / .26);
  --shadow-accent:   0 0 0 1px color-mix(in srgb, var(--color-module-accent) 30%, transparent),
                     0 10px 30px -10px color-mix(in srgb, var(--color-module-accent) 55%, transparent);
  --shadow-dropdown: 0 12px 34px -10px rgb(16 24 40 / .22);
  --shadow-modal:    0 40px 80px -24px rgb(16 24 40 / .34);

  background-color: #EEF1F8;
  background-image:
    radial-gradient(1100px 620px at 88% -12%, color-mix(in srgb, var(--color-module-accent) 12%, transparent), transparent 60%),
    radial-gradient(900px 540px at -8% 112%, color-mix(in srgb, var(--color-brand-amber) 8%, transparent), transparent 55%),
    linear-gradient(rgb(15 23 42 / .03) 1px, transparent 1px),
    linear-gradient(90deg, rgb(15 23 42 / .03) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 46px 46px, 46px 46px;
  background-attachment: fixed;
}

[data-skin="futuristic"][data-mode="light"] .op-card,
[data-skin="futuristic"][data-mode="light"] .op-stat {
  background: linear-gradient(180deg, rgb(255 255 255 / .86), rgb(255 255 255 / .66));
  border-color: rgb(15 23 42 / .08);
}
[data-skin="futuristic"][data-mode="light"] .op-card__header { border-color: rgb(15 23 42 / .08); }
[data-skin="futuristic"][data-mode="light"] .op-card__footer { background: rgb(15 23 42 / .025); border-color: rgb(15 23 42 / .08); }

[data-skin="futuristic"][data-mode="light"] .op-btn--secondary {
  background: rgb(255 255 255 / .8);
  border-color: rgb(15 23 42 / .14);
  color: var(--color-text-primary);
}
[data-skin="futuristic"][data-mode="light"] .op-btn--secondary:hover { border-color: rgb(15 23 42 / .28); background: #fff; }
[data-skin="futuristic"][data-mode="light"] .op-btn--ghost { color: var(--color-text-secondary); }
[data-skin="futuristic"][data-mode="light"] .op-btn--ghost:hover { background: rgb(15 23 42 / .05); color: var(--color-text-primary); }

[data-skin="futuristic"][data-mode="light"] .op-input,
[data-skin="futuristic"][data-mode="light"] .op-select {
  background: rgb(255 255 255 / .85);
  border-color: rgb(15 23 42 / .12);
}

[data-skin="futuristic"][data-mode="light"] .op-table thead th { background: rgb(15 23 42 / .035); border-color: rgb(15 23 42 / .08); }
[data-skin="futuristic"][data-mode="light"] .op-table tbody td { border-color: rgb(15 23 42 / .07); }
[data-skin="futuristic"][data-mode="light"] .op-table tbody tr:hover { background: rgb(15 23 42 / .03); }

[data-skin="futuristic"][data-mode="light"] .op-badge--neutral { color: var(--color-text-secondary); }
[data-skin="futuristic"][data-mode="light"] .op-toggle__track { background: rgb(15 23 42 / .18); }
[data-skin="futuristic"][data-mode="light"] .op-skel { background: rgb(15 23 42 / .07); }

[data-skin="futuristic"][data-mode="light"] .op-side {
  background: rgb(255 255 255 / .55);
  border-right-color: rgb(15 23 42 / .08);
}
[data-skin="futuristic"][data-mode="light"] .op-top {
  background: rgb(255 255 255 / .72);
  border-bottom-color: rgb(15 23 42 / .08);
}
[data-skin="futuristic"][data-mode="light"] .op-nav-item:hover { background: rgb(15 23 42 / .05); }

[data-skin="futuristic"][data-mode="light"] .op-menu,
[data-skin="futuristic"][data-mode="light"] .op-modal {
  background: linear-gradient(180deg, rgb(255 255 255 / .92), rgb(255 255 255 / .78));
  border-color: rgb(15 23 42 / .08);
}
[data-skin="futuristic"][data-mode="light"] .op-modal__header { border-color: rgb(15 23 42 / .08); }
[data-skin="futuristic"][data-mode="light"] .op-modal__footer { background: rgb(15 23 42 / .025); border-color: rgb(15 23 42 / .08); }
[data-skin="futuristic"][data-mode="light"] .op-menu-item:hover { background: rgb(15 23 42 / .05); }
/* Daylight tooltip: light bubble, dark text (the base bubble is dark-on-dark) */
[data-skin="futuristic"][data-mode="light"] .op-tip {
  background: rgb(255 255 255 / .96);
  border-color: rgb(15 23 42 / .1);
  color: var(--color-text-primary);
}

/* ── Toggle: checked track glows in the module accent ──
   The skin's .op-toggle__track rules are unlayered, so they otherwise beat the
   component's peer-checked:bg utility and the "on" state would stay grey. Keep
   this LAST so it wins in both the dark and the daylight variant. */
[data-skin="futuristic"] .peer:checked ~ .op-toggle__track {
  background: var(--color-module-accent);
  border-color: var(--color-module-accent);
  box-shadow: 0 0 12px -2px color-mix(in srgb, var(--color-module-accent) 70%, transparent);
}