/* ============================================================
   Creative Canary — Liquid Glass Theme
   Activated by html.glass class. Works on top of dark mode.
   Inspired by Apple's Liquid Glass design language.
   ============================================================ */

/* ── Background — deep gradient base ── */
html.glass {
  --glass-bg: rgba(255, 255, 255, 0.03);
  --glass-bg-heavy: rgba(255, 255, 255, 0.06);
  --glass-bg-card: rgba(255, 255, 255, 0.04);
  --glass-bg-elevated: rgba(255, 255, 255, 0.07);
  --glass-bg-input: rgba(255, 255, 255, 0.05);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-border-strong: rgba(255, 255, 255, 0.14);
  --glass-border-highlight: rgba(255, 255, 255, 0.18);
  --glass-blur: 20px;
  --glass-blur-heavy: 40px;
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --glass-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --glass-panel: rgba(22, 22, 35, 0.92);

  /* Override design system tokens */
  --cc-bg-body: #0a0a0f;
  --cc-bg-card: var(--glass-bg-card);
  --cc-bg-elevated: var(--glass-bg-elevated);
  --cc-bg-input: var(--glass-bg-input);
  --cc-border-default: var(--glass-border);
  --cc-border-subtle: rgba(255, 255, 255, 0.04);
  --cc-border-strong: var(--glass-border-strong);
  --cc-shadow-dropdown: var(--glass-shadow-lg);
  --cc-shadow-modal: var(--glass-shadow-lg);
}

/* ── Body — gradient mesh background (dark mode only) ── */
html.glass body {
  background: #0a0a0f;
  background-image:
    radial-gradient(ellipse at 20% 0%, rgba(99, 102, 241, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 0%, rgba(168, 85, 247, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 100%, rgba(6, 182, 212, 0.05) 0%, transparent 50%);
  background-attachment: fixed;
}

/* ── Header / Navbar — frosted glass ── */
html.glass header {
  background: var(--glass-bg-heavy) !important;
  backdrop-filter: blur(var(--glass-blur-heavy)) saturate(1.5);
  -webkit-backdrop-filter: blur(var(--glass-blur-heavy)) saturate(1.5);
  border-bottom: 1px solid var(--glass-border) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03);
}

html.glass header nav {
  border-color: var(--glass-border) !important;
}

/* ── Floating mobile bottom nav — frosted, not see-through ──
   The generic .bg-zinc-900 glass rule (0.65 alpha) made the floating bar
   too transparent over scrolling content. Give it a heavier tint + blur. */
html.glass #mobile-bottom-nav {
  /* Keep it fixed — the generic stat-card rule (.rounded-2xl.border) below
     sets position:relative and would otherwise drop the bar into the flow. */
  position: fixed !important;
  background: rgba(14, 14, 22, 0.85) !important;
  border-color: var(--glass-border) !important;
  backdrop-filter: blur(var(--glass-blur-heavy)) saturate(1.5);
  -webkit-backdrop-filter: blur(var(--glass-blur-heavy)) saturate(1.5);
}

/* ── Cards — glass panels ──
   No backdrop-filter here — cards sit on the body gradient so the
   translucent bg already shows the mesh through. Adding blur causes
   hover jitter as the browser recomposites on every state change. */
html.glass .bg-zinc-900 {
  background: rgba(14, 14, 22, 0.65) !important;
  border-color: var(--glass-border) !important;
  box-shadow: var(--glass-shadow);
}

/* Nested elements that shouldn't double-blur */
html.glass .bg-zinc-900 .bg-zinc-900 {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: var(--glass-bg) !important;
  box-shadow: none;
}

/* ── Elevated surfaces (bg-zinc-800) — subtle glass ── */
html.glass .bg-zinc-800,
html.glass .bg-zinc-800\/50,
html.glass .bg-zinc-800\/40,
html.glass .bg-zinc-800\/80 {
  background: var(--glass-bg-elevated) !important;
  border-color: var(--glass-border) !important;
}

/* ── Tables — glass rows ── */
html.glass table {
  border-collapse: separate;
  border-spacing: 0;
}

html.glass tbody tr {
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

html.glass tbody tr td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

html.glass tbody tr:hover {
  background: rgba(255, 255, 255, 0.04) !important;
}

html.glass thead tr {
  border-color: var(--glass-border) !important;
}

html.glass thead tr th {
  background: rgba(0, 0, 0, 0.1) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

html.glass .divide-zinc-800\/50 > :not(:last-child),
html.glass .divide-zinc-800 > :not(:last-child) {
  border-color: var(--glass-border) !important;
}

/* ── Overview widget tables — glass treatment for bg-zinc-950 areas ──
   Exclude body itself (which also has bg-zinc-950) */
html.glass main .bg-zinc-950,
html.glass .bg-zinc-950:not(body) {
  background: transparent !important;
}

html.glass main {
  position: relative;
}

/* ── Inputs — frosted fields ── */
html.glass input[type="text"],
html.glass input[type="email"],
html.glass input[type="password"],
html.glass input[type="number"],
html.glass input[type="search"],
html.glass input[type="url"],
html.glass input[type="tel"],
html.glass textarea,
html.glass select,
html.glass select.bg-zinc-800,
html.glass select[class*="bg-zinc"],
html.glass .select2-container--default .select2-selection--single,
html.glass .select2-container--default .select2-selection--multiple {
  background: var(--glass-bg-input) !important;
  border-color: var(--glass-border-strong) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  color: var(--cc-text-primary);
}

/* Select dropdown arrow — ensure visibility on glass */
html.glass select option {
  background: #1a1a2e;
  color: #e4e4e7;
}

/* ── Select2 dropdowns — match nav/changelog panel style ── */
html.glass .select2-dropdown {
  background: var(--glass-panel) !important;
  backdrop-filter: blur(var(--glass-blur-heavy)) saturate(1.8) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur-heavy)) saturate(1.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 0 20px rgba(255, 255, 255, 0.02) !important;
}

html.glass .select2-search--dropdown .select2-search__field {
  background: var(--glass-bg-input) !important;
  border-color: var(--glass-border-strong) !important;
}

html.glass .select2-results__option {
  color: var(--cc-text-secondary) !important;
}

html.glass .select2-results__option--highlighted[aria-selected] {
  background: var(--cc-color-accent) !important;
  color: var(--cc-text-on-accent) !important;
}

html.glass input:focus,
html.glass textarea:focus,
html.glass select:focus {
  border-color: rgba(250, 204, 21, 0.4) !important;
  box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  background: rgba(255, 255, 255, 0.07) !important;
}

/* ── Buttons — glass buttons ── */
html.glass .bg-yellow-400,
html.glass .bg-yellow-300 {
  box-shadow: 0 2px 12px rgba(250, 204, 21, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

html.glass .bg-emerald-500,
html.glass .bg-emerald-400 {
  box-shadow: 0 2px 12px rgba(16, 185, 129, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Secondary/ghost buttons */
html.glass button.bg-zinc-800,
html.glass a.bg-zinc-800 {
  background: var(--glass-bg-elevated) !important;
  border-color: var(--glass-border-strong) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

html.glass button.bg-zinc-800:hover,
html.glass a.bg-zinc-800:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: var(--glass-border-highlight) !important;
}

/* ── Modals — deep frosted glass ── */
html.glass .fixed.inset-0.z-50 > div:not(.bg-black\/60):not(.backdrop-blur-sm) {
  background: rgba(15, 15, 25, 0.85) !important;
  backdrop-filter: blur(var(--glass-blur-heavy)) saturate(1.4);
  -webkit-backdrop-filter: blur(var(--glass-blur-heavy)) saturate(1.4);
  border: 1px solid var(--glass-border-strong) !important;
  box-shadow: var(--glass-shadow-lg);
}

html.glass .bg-black\/60,
html.glass .bg-black\/50 {
  background: rgba(0, 0, 0, 0.4) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ── Badges / Pills — glass chips ── */
html.glass .rounded-full[class*="bg-"][class*="/20"],
html.glass .rounded-full[class*="bg-"][class*="/15"],
html.glass .rounded-full[class*="bg-"][class*="/10"] {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ── Dropdowns, tooltips, popovers — opaque frosted panels ──
   These MUST be nearly opaque so text is readable over any content.
   Higher specificity than the generic .bg-zinc-900 rule above. */
html.glass #profileDropdown,
html.glass .nav-dropdown,
html.glass #global-search-results,
html.glass #searchResults,
html.glass .version-tooltip,
html.glass [data-dropdown-panel],
html.glass .absolute.bg-zinc-900[class*="rounded"],
html.glass .absolute.bg-zinc-900[class*="shadow"],
html.glass #pi-email-menu,
html.glass .fixed[class*="bg-zinc-800"][class*="rounded"][class*="shadow"] {
  background: var(--glass-panel) !important;
  backdrop-filter: blur(var(--glass-blur-heavy)) saturate(1.8) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur-heavy)) saturate(1.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 20px rgba(255, 255, 255, 0.02) !important;
}

/* Catch any absolute/fixed positioned panels that act as dropdowns */
html.glass .absolute[class*="bg-zinc-900"][class*="border"][class*="z-"],
html.glass .absolute[class*="bg-zinc-900"][class*="rounded"][class*="shadow"] {
  background: var(--glass-panel) !important;
  backdrop-filter: blur(var(--glass-blur-heavy)) saturate(1.8) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur-heavy)) saturate(1.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 20px rgba(255, 255, 255, 0.02) !important;
}

/* ── Stat cards — special glass treatment ── */
html.glass .rounded-2xl.border {
  position: relative;
  overflow: hidden;
}

html.glass .rounded-2xl.border::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.12) 30%, rgba(255,255,255,0.12) 70%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}

/* ── Scrollbar — glass style ── */
html.glass:hover ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
}

html.glass ::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.18);
}

/* ── Toast notifications ── */
html.glass .ds-toast {
  background: var(--glass-panel) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(1.5);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.5);
  box-shadow: var(--glass-shadow);
}

/* ── Nav links — glass hover ── */
html.glass .nav-link:hover {
  background: rgba(255, 255, 255, 0.04);
}

html.glass .nav-link.border-yellow-400 {
  text-shadow: 0 0 12px rgba(250, 204, 21, 0.3);
}

/* ── Sidebar / mobile nav ── */
html.glass #mobile-nav {
  background: rgba(10, 10, 15, 0.95) !important;
  backdrop-filter: blur(var(--glass-blur-heavy));
  -webkit-backdrop-filter: blur(var(--glass-blur-heavy));
}

/* ── Borders — soften all zinc borders ── */
html.glass [class*="border-zinc-800"],
html.glass [class*="border-zinc-700"] {
  border-color: var(--glass-border) !important;
}

/* ── Subtle text glow on accent colors ── */
html.glass .text-yellow-400 {
  text-shadow: 0 0 20px rgba(250, 204, 21, 0.15);
}

html.glass .text-emerald-400 {
  text-shadow: 0 0 20px rgba(52, 211, 153, 0.12);
}

html.glass .text-blue-400 {
  text-shadow: 0 0 20px rgba(96, 165, 250, 0.12);
}

/* ── Transition for toggling glass ── */
html.glass-transition,
html.glass-transition *,
html.glass-transition *::before,
html.glass-transition *::after {
  transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease, backdrop-filter 0.4s ease !important;
}

/* ── Keep intentional ACCENT card borders visible under glass ──
   The blanket `html.glass .bg-zinc-900 { border-color: var(--glass-border) }` above
   otherwise flattens every coloured border to the glass border. These re-assert the
   accent colours (status/attention borders); placed last so source order wins. */
html.glass .border-amber-500\/30   { border-color: rgba(245, 158, 11, 0.30) !important; }
html.glass .border-emerald-500\/30 { border-color: rgba(16, 185, 129, 0.30) !important; }
html.glass .border-orange-500\/40  { border-color: rgba(249, 115, 22, 0.40) !important; }
html.glass .border-purple-500\/40  { border-color: rgba(168, 85, 247, 0.40) !important; }
html.glass .border-yellow-500\/40  { border-color: rgba(234, 179, 8, 0.40) !important; }
html.glass .border-yellow-400\/30  { border-color: rgba(250, 204, 21, 0.30) !important; }
html.glass .border-red-500\/30     { border-color: rgba(239, 68, 68, 0.30) !important; }