
// Readable ink on a solid UI fill (value chips, tinted buttons, value boxes).
// Intentionally NOT Bootstrap color-contrast(): that uses a 4.5:1 WCAG AA
// gate and returns black for brand blues like #007AFF (white is ~4.02:1).
// glass_theme() also lowers $min-contrast-ratio to 3 so Bootstrap's own
// color-contrast() prefers white on those brands; this luminance helper is
// the CSS/runtime path for solid .bg-* fills and short chrome labels.
@function glass-on($fill, $light: #ffffff, $dark: #1d1d1f) {
  @if type-of($fill) != color {
    @return $light;
  }
  // Approx sRGB relative luminance (0–255 channel weights).
  $y: (0.2126 * red($fill) + 0.7152 * green($fill) + 0.0722 * blue($fill)) / 255;
  @if $y >= 0.55 {
    @return $dark;
  }
  @return $light;
}

// Solid value chip (slider bubbles / range tooltips only — not general .bg-*)
// $fill may be a Sass color or a CSS value string (e.g. $glass-accent).
@mixin glass-value-chip($fill: $primary) {
  background-color: #{$fill} !important;
  background: #{$fill} !important;
  color: glass-on($fill) !important;
  text-shadow: none;
  border: none !important;
  border-radius: 0.55rem;
  font-weight: 600;
}

// Runtime accent: prefer JS --glass-accent, then Bootstrap --bs-primary, then
// compile-time $primary. Do not pass through Sass color functions that need a
// concrete color. Used by update_glass_theme(primary=) / setPrimary().
$glass-accent: var(--glass-accent, var(--bs-primary, #{$primary}));

// Shiny checkboxInput() uses .shiny-input-checkbox (not .form-check-input).
// Include bslib shiny selectors so accent + white marks hit real apps.
$glass-check-input: ".form-check-input, .shiny-input-checkbox, .shiny-input-container .checkbox input, .shiny-input-container .checkbox-inline input, .shiny-input-container .radio input, .shiny-input-container .radio-inline input";

// Shared compile-time knobs (blur / radius / primary ink). Preset-specific
// surfaces live in dual packs below so light↔dark can switch at runtime via
// document.documentElement.dataset.glassPreset without recompiling Sass.

// Register specular position so ambient drift can animate (iOS vitality)
@property --glass-specular-x {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 32%;
}
@property --glass-specular-y {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 12%;
}

:root {
  --glass-blur: #{$glass-blur};
  --glass-blur-base: #{$glass-blur};
  --glass-saturate: #{$glass-saturate};
  --glass-radius: #{$glass-radius};
  // 0 = Ultra Clear, 1 = Tinted (iOS 27 Appearance > Liquid Glass)
  --glass-intensity: 0.45;
  // Concentric radius scale (inner = outer - pad) for nested glass geometry
  --glass-radius-sm: max(0.5rem, calc(var(--glass-radius) - 0.55rem));
  --glass-radius-xs: max(0.35rem, calc(var(--glass-radius) - 0.9rem));
  --glass-radius-control: max(0.85rem, calc(var(--glass-radius) - 0.35rem));
  --glass-float-margin: 0.75rem;
  --glass-tint-r: 0;
  --glass-tint-g: 122;
  --glass-tint-b: 255;
  --glass-tint-strength: 0;
  --glass-specular-x: 32%;
  --glass-specular-y: 12%;
  // Default accent; head script / setPrimary() override at runtime.
  --glass-accent: #{$primary};
  // Contrast-safe ink for solid theme fills (widgets that inherit body color).
  // --glass-on-primary is updated live by setPrimary(); others are compile-time.
  --glass-on-primary: #{glass-on($primary)};
  --glass-on-secondary: #{glass-on($secondary)};
  --glass-on-success: #{glass-on($success)};
  --glass-on-danger: #{glass-on($danger)};
  --glass-on-warning: #{glass-on($warning)};
  --glass-on-info: #{glass-on($info)};
  --glass-on-light: #{glass-on($light)};
  --glass-on-dark: #{glass-on($dark)};
}

// ---------------------------------------------------------------------------
// Solid theme-color fills carry luminance-appropriate ink
//
// Bootstrap splits utilities:
//   .bg-*       → background only (body ink inherits → black on #007AFF)
//   .text-bg-*  → background + color-contrast() (fixed by min-contrast-ratio)
//
// bslib::value_box(theme = "primary") emits `.bg-primary` only — never
// text-bg-primary — so value boxes keep body color on solid blue. Same failure
// mode as any card/alert/box that uses .bg-primary as a full surface fill.
//
// Fix at the utility layer: every solid theme fill sets color + card/value-box
// CSS vars to glass-on() ink (or the runtime --glass-on-* var for primary).
// ---------------------------------------------------------------------------
@each $name, $color in $theme-colors {
  $ink: glass-on($color);
  $ink-var: var(--glass-on-#{$name}, #{$ink});

  .bg-#{$name},
  .text-bg-#{$name} {
    color: $ink-var !important;
    // bslib cards / value boxes read these for nested titles and values
    --bs-card-color: #{$ink-var};
    --bs-card-title-color: #{$ink-var};
    --bs-card-subtitle-color: #{$ink-var};
    --bslib-color-fg: #{$ink-var};
    --bslib-value-box-color: #{$ink-var};
  }

  // Nested shiny text outputs inherit the fill ink
  .bg-#{$name} .value-box-title,
  .bg-#{$name} .value-box-value,
  .bg-#{$name} .shiny-text-output,
  .text-bg-#{$name} .value-box-title,
  .text-bg-#{$name} .value-box-value,
  .text-bg-#{$name} .shiny-text-output {
    color: inherit !important;
  }
}

// Light pack (default when data-glass-preset is missing or "light")
// Tuned toward macOS Tahoe / iOS 26 Liquid Glass: softer wallpapers,
// multi-layer material tokens (fill / rim / lip / specular / shadow),
// separate chrome vs content fills (avoid glass-on-glass).
:root,
:root[data-glass-preset="light"] {
  --glass-body-bg: #f2f2f7;
  --glass-body-color: #1d1d1f;
  // iOS 27: clearer film + strong diffusion (blur carries readability)
  --glass-bg: rgba(255, 255, 255, 0.22);
  --glass-bg-hover: rgba(255, 255, 255, 0.36);
  --glass-bg-content: rgba(255, 255, 255, 0.34);
  --glass-bg-content-hover: rgba(255, 255, 255, 0.48);
  // Defined borders (iOS 27 relies less on drop-shadow alone)
  --glass-border: rgba(255, 255, 255, 0.72);
  --glass-border-outer: rgba(0, 0, 0, 0.08);
  --glass-rim: rgba(255, 255, 255, 0.92);
  --glass-lip: rgba(0, 0, 0, 0.12);
  --glass-shadow: rgba(0, 0, 0, 0.10);
  --glass-elevated-shadow: rgba(0, 0, 0, 0.16);
  --glass-highlight: rgba(255, 255, 255, 0.96);
  --glass-specular: rgba(255, 255, 255, 0.78);
  --glass-edge-sheen: rgba(255, 255, 255, 0.58);
  // Subtle chromatic edge (lensing cue)
  --glass-refract-a: rgba(120, 200, 255, 0.22);
  --glass-refract-b: rgba(255, 140, 200, 0.14);
  --glass-menu-bg: rgba(255, 255, 255, 0.88);
  --glass-menu-color: #1d1d1f;
  --glass-page-bg: linear-gradient(165deg, #eef2fa 0%, #f5f5f7 40%, #efeaf6 72%, #e8f0fa 100%);
  --glass-orb-1: rgba(0, 122, 255, 0.16);
  --glass-orb-2: rgba(175, 82, 222, 0.10);
  --glass-orb-3: rgba(90, 200, 250, 0.12);
  --glass-inner-glow: rgba(255, 255, 255, 0.28);
  --bs-body-bg: var(--glass-body-bg);
  --bs-body-color: var(--glass-body-color);
  --bs-secondary-color: rgba(29, 29, 31, 0.72);
  --bs-tertiary-color: rgba(29, 29, 31, 0.48);
  --bs-emphasis-color: #1d1d1f;
  --bs-border-color: rgba(0, 0, 0, 0.08);
  color-scheme: light;
}

:root[data-glass-preset="dark"] {
  --glass-body-bg: #000000;
  --glass-body-color: #f5f5f7;
  // iOS 27: lighter dark glass (more luminous film, not muddy grey)
  --glass-bg: rgba(255, 255, 255, 0.14);
  --glass-bg-hover: rgba(255, 255, 255, 0.22);
  --glass-bg-content: rgba(255, 255, 255, 0.12);
  --glass-bg-content-hover: rgba(255, 255, 255, 0.18);
  --glass-border: rgba(255, 255, 255, 0.32);
  --glass-border-outer: rgba(0, 0, 0, 0.55);
  --glass-rim: rgba(255, 255, 255, 0.48);
  --glass-lip: rgba(0, 0, 0, 0.55);
  --glass-shadow: rgba(0, 0, 0, 0.52);
  --glass-elevated-shadow: rgba(0, 0, 0, 0.68);
  --glass-highlight: rgba(255, 255, 255, 0.36);
  --glass-specular: rgba(255, 255, 255, 0.40);
  --glass-edge-sheen: rgba(255, 255, 255, 0.28);
  --glass-refract-a: rgba(100, 200, 255, 0.18);
  --glass-refract-b: rgba(220, 140, 255, 0.12);
  --glass-menu-bg: rgba(58, 58, 60, 0.86);
  --glass-menu-color: #f5f5f7;
  --glass-page-bg: linear-gradient(165deg, #0a0a14 0%, #000000 42%, #120a18 78%, #050a12 100%);
  --glass-orb-1: rgba(10, 132, 255, 0.30);
  --glass-orb-2: rgba(191, 90, 242, 0.18);
  --glass-orb-3: rgba(100, 210, 255, 0.16);
  --glass-inner-glow: rgba(255, 255, 255, 0.12);
  --bs-body-bg: var(--glass-body-bg);
  --bs-body-color: var(--glass-body-color);
  --bs-secondary-color: rgba(245, 245, 247, 0.72);
  --bs-tertiary-color: rgba(245, 245, 247, 0.48);
  --bs-emphasis-color: #f5f5f7;
  --bs-border-color: rgba(255, 255, 255, 0.14);
  color-scheme: dark;
}

// Clear material: permanently more transparent (media-rich heroes).
// Needs bold labels; pair with dimming on media underneath when needed.
:root[data-glass-material="clear"],
:root[data-glass-material="clear"][data-glass-preset="light"] {
  --glass-bg: rgba(255, 255, 255, 0.12);
  --glass-bg-hover: rgba(255, 255, 255, 0.22);
  --glass-bg-content: rgba(255, 255, 255, 0.28);
  --glass-bg-content-hover: rgba(255, 255, 255, 0.40);
  --glass-border: rgba(255, 255, 255, 0.48);
}

:root[data-glass-material="clear"][data-glass-preset="dark"] {
  --glass-bg: rgba(255, 255, 255, 0.06);
  --glass-bg-hover: rgba(255, 255, 255, 0.11);
  --glass-bg-content: rgba(255, 255, 255, 0.08);
  --glass-bg-content-hover: rgba(255, 255, 255, 0.14);
  --glass-border: rgba(255, 255, 255, 0.20);
}

body {
  background: var(--glass-page-bg) !important;
  background-color: var(--glass-body-bg) !important;
  color: var(--glass-body-color) !important;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  // Soft ambient field — wallpaper-like, not neon blobs
  background:
    radial-gradient(ellipse 100% 80% at 8% 0%, var(--glass-orb-tint-1, var(--glass-orb-1)) 0%, transparent 55%),
    radial-gradient(ellipse 90% 70% at 100% 100%, var(--glass-orb-tint-2, var(--glass-orb-2)) 0%, transparent 50%),
    radial-gradient(ellipse 70% 55% at 70% 20%, var(--glass-orb-tint-3, var(--glass-orb-3)) 0%, transparent 48%);
  pointer-events: none;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 55% 40% at 20% 90%, var(--glass-orb-tint-1, var(--glass-orb-1)) 0%, transparent 60%),
    radial-gradient(ellipse 45% 35% at 85% 30%, var(--glass-orb-tint-3, var(--glass-orb-3)) 0%, transparent 55%);
  opacity: 0.65;
  pointer-events: none;
}

// Liquid Glass material layers (Regular):
//   1. Illumination — translucent fill + backdrop blur/saturate
//   2. Highlight  — ambient top sheen + pointer specular (::before)
//   3. Shadow/rim — contact shadow + dual-edge lip for glass thickness (::after)
// Chrome (sidebars, nav, floating wells) uses this mixin.
// Content cards use glass-content-surface to avoid glass-on-glass stacking.
// iOS 27 Liquid Glass material (Regular):
//   • Stronger diffusion blur so clear fills stay legible over complex content
//   • Defined borders (not shadow-only separation)
//   • Darkened edge ring + bright rim for thickness
//   • Chromatic micro-edge (refraction cue)
//   • Ambient + pointer specular on ::before; thickness/rim on ::after
// $overflow: hidden clips children to the rounded rect (correct for chrome);
// use overflow-x: auto on surfaces that hold wide content (tables) so headers
// are not silently clipped — see .gt_table overrides.
@mixin glass-surface($radius: var(--glass-radius), $overflow: hidden) {
  position: relative;
  isolation: isolate;
  background:
    linear-gradient(
      165deg,
      color-mix(in srgb, var(--glass-highlight) 32%, transparent) 0%,
      transparent 38%
    ),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--glass-bg) 88%, transparent) 0%,
      var(--glass-bg) 100%
    );
  // Diffusion-first blur (iOS 27 readability fix): keep saturate high for vitality
  backdrop-filter:
    blur(var(--glass-blur))
    saturate(var(--glass-saturate))
    brightness(1.02);
  -webkit-backdrop-filter:
    blur(var(--glass-blur))
    saturate(var(--glass-saturate))
    brightness(1.02);
  // Defined hairline border (iOS 27: borders over pure drop-shadow)
  border: 0.5px solid var(--glass-border);
  border-radius: $radius;
  box-shadow:
    // outer separation on plain backgrounds
    0 0 0 0.5px var(--glass-border-outer, rgba(0, 0, 0, 0.08)),
    0 1px 2px var(--glass-shadow),
    0 12px 36px var(--glass-shadow),
    // bright outer rim
    0 0 0 0.5px color-mix(in srgb, var(--glass-rim) 70%, transparent),
    // darkened edge ring
    0 0 0 1.25px color-mix(in srgb, var(--glass-lip) 42%, transparent),
    // top catch-light + bottom lip
    inset 0 0.6px 0 var(--glass-highlight),
    inset 0 -1.2px 0 var(--glass-lip),
    // chromatic refraction fringe (subtle)
    inset 0.6px 0 0 var(--glass-refract-a, transparent),
    inset -0.6px 0 0 var(--glass-refract-b, transparent);
  overflow: $overflow;
  transition:
    background 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.25s ease,
    backdrop-filter 0.35s ease,
    -webkit-backdrop-filter 0.35s ease;

  // Highlight + specular layer
  &::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      // pointer-driven specular pool
      radial-gradient(
        ellipse 130% 95% at var(--glass-specular-x, 32%) var(--glass-specular-y, 12%),
        var(--glass-specular) 0%,
        transparent 52%
      ),
      // ambient traveling sheen (driven by --glass-specular-x slow drift + pointer)
      linear-gradient(
        118deg,
        var(--glass-edge-sheen) 0%,
        transparent 26%,
        transparent 68%,
        color-mix(in srgb, var(--glass-edge-sheen) 45%, transparent) 100%
      ),
      // soft top illumination
      linear-gradient(
        180deg,
        color-mix(in srgb, var(--glass-highlight) 40%, transparent) 0%,
        transparent 46%
      );
    border-radius: inherit;
    pointer-events: none;
    z-index: -1;
    opacity: 0.94;
    transition: opacity 0.2s ease;
  }

  &:hover::before {
    opacity: 1;
  }

  // Thickness / rim layer
  &::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow:
      inset 0 0 0 0.5px color-mix(in srgb, var(--glass-rim) 88%, transparent),
      inset 0 0 0 1.75px color-mix(in srgb, var(--glass-lip) 48%, transparent),
      inset 0 10px 32px var(--glass-inner-glow),
      inset 0 -14px 36px color-mix(in srgb, var(--glass-lip) 70%, transparent),
      // bottom caustic
      inset 0 -1px 12px color-mix(in srgb, var(--glass-refract-a, transparent) 35%, transparent);
    pointer-events: none;
    z-index: -1;
  }
}

// Content surfaces: adaptive Regular fill, less "double glass" under chrome
@mixin glass-content-surface($radius: var(--glass-radius)) {
  position: relative;
  isolation: isolate;
  background:
    linear-gradient(
      165deg,
      color-mix(in srgb, var(--glass-highlight) 18%, transparent) 0%,
      transparent 34%
    ),
    var(--glass-bg-content, var(--glass-bg));
  // Slightly less blur than chrome — content hierarchy (no glass-on-glass mud)
  backdrop-filter:
    blur(calc(var(--glass-blur) * 0.78))
    saturate(calc(var(--glass-saturate) * 0.92))
    brightness(1.01);
  -webkit-backdrop-filter:
    blur(calc(var(--glass-blur) * 0.78))
    saturate(calc(var(--glass-saturate) * 0.92))
    brightness(1.01);
  border: 0.5px solid var(--glass-border);
  border-radius: $radius;
  box-shadow:
    0 0 0 0.5px var(--glass-border-outer, rgba(0, 0, 0, 0.06)),
    0 8px 28px var(--glass-shadow),
    0 0 0 0.5px color-mix(in srgb, var(--glass-rim) 50%, transparent),
    inset 0 0.5px 0 var(--glass-highlight),
    inset 0 -0.75px 0 var(--glass-lip),
    inset 0.5px 0 0 color-mix(in srgb, var(--glass-refract-a, transparent) 50%, transparent);
  overflow: hidden;
  transition:
    background 0.28s ease,
    box-shadow 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);

  &::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
      ellipse 120% 90% at var(--glass-specular-x, 32%) var(--glass-specular-y, 12%),
      color-mix(in srgb, var(--glass-specular) 70%, transparent) 0%,
      transparent 58%
    );
    border-radius: inherit;
    pointer-events: none;
    z-index: -1;
    opacity: 0.75;
  }

  &::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 0.5px color-mix(in srgb, var(--glass-rim) 50%, transparent);
    pointer-events: none;
    z-index: -1;
  }
}

// inputs: no pseudo-elements (overflow must stay visible for menus)
@mixin glass-input {
  background: color-mix(in srgb, var(--glass-bg) 88%, transparent);
  backdrop-filter: blur(calc(var(--glass-blur) * 0.55)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) * 0.55)) saturate(var(--glass-saturate));
  border: 0.5px solid var(--glass-border);
  border-radius: var(--glass-radius-control);
  box-shadow:
    inset 0 0.5px 0 var(--glass-highlight),
    inset 0 -0.5px 0 var(--glass-lip);
  transition: background 0.25s ease, box-shadow 0.25s ease, border-color 0.2s ease;
}

@mixin glass-floating($radius: var(--glass-radius)) {
  @include glass-surface($radius);
  margin: var(--glass-float-margin);
  // Thicker material when elevated (WWDC: larger glass → deeper shadow / richer rim)
  backdrop-filter:
    blur(calc(var(--glass-blur) * 1.08))
    saturate(calc(var(--glass-saturate) * 1.05))
    brightness(1.03);
  -webkit-backdrop-filter:
    blur(calc(var(--glass-blur) * 1.08))
    saturate(calc(var(--glass-saturate) * 1.05))
    brightness(1.03);
  box-shadow:
    0 0 0 0.5px var(--glass-border-outer, rgba(0, 0, 0, 0.1)),
    0 2px 6px var(--glass-shadow),
    0 22px 56px var(--glass-elevated-shadow),
    0 0 0 0.5px color-mix(in srgb, var(--glass-rim) 72%, transparent),
    0 0 0 1.35px color-mix(in srgb, var(--glass-lip) 45%, transparent),
    inset 0 0.7px 0 var(--glass-highlight),
    inset 0 -1.25px 0 var(--glass-lip),
    inset 0.7px 0 0 var(--glass-refract-a, transparent),
    inset -0.7px 0 0 var(--glass-refract-b, transparent);
}

.container-fluid > .row {
  align-items: flex-start;
}

.bslib-gap-spacing,
.layout-column-wrap,
.layout-column-plot {
  gap: 0.5rem;
}

.col-sm-8[role="main"],
.col-sm-8 > .tab-content,
.tab-content > .tab-pane.active {
  background: transparent;
}

.glass-content-hero {
  position: relative;
  min-height: 18rem;
  margin: 0 0 1rem;
  border-radius: calc(var(--glass-radius) * 1.1);
  overflow: hidden;

  .shiny-plot-output,
  .shiny-html-output {
    background: transparent;
    box-shadow: none;
    padding: 0;
    margin: 0;
  }
}

form.well,
.col-sm-4.well {
  @include glass-floating();
  border: 1px solid var(--glass-border) !important;
  background-color: var(--glass-bg) !important;
  padding: 1.15rem 1.25rem;
  position: relative;
  z-index: 2;
}

.card {
  @include glass-content-surface();
  margin: var(--glass-float-margin);
  overflow: visible; // allow select menus to layer above siblings
  color: inherit;

  .card-header {
    background: transparent;
    border-bottom: 1px solid var(--glass-border);
    font-weight: 600;
    letter-spacing: -0.02em;
  }

  .card-footer {
    background: transparent;
    border-top: 1px solid var(--glass-border);
  }
}

body.bslib-page-navbar > .navbar,
.navbar.navbar-static-top,
.navbar.navbar-default {
  @include glass-floating(var(--glass-radius));
  border-radius: var(--glass-radius) !important;
  border: 1px solid var(--glass-border) !important;
  margin: var(--glass-float-margin) var(--glass-float-margin) 0;
  padding: 0.55rem 1rem;
  position: sticky;
  top: var(--glass-float-margin);
  z-index: 1030;
  overflow: visible !important;
  // Match body / sidebar ink. Bootstrap often ships brand as #fff (dark
  // navbar default), which disappears on light glass.
  color: var(--glass-body-color) !important;
  --#{$prefix}navbar-color: var(--glass-body-color);
  --#{$prefix}navbar-hover-color: var(--glass-body-color);
  --#{$prefix}navbar-active-color: var(--glass-body-color);
  --#{$prefix}navbar-brand-color: var(--glass-body-color);
  --#{$prefix}navbar-brand-hover-color: var(--glass-body-color);

  .navbar-brand,
  .bslib-page-title {
    font-weight: 600;
    letter-spacing: -0.03em;
    color: var(--glass-body-color) !important;
  }

  .nav > li > a,
  .nav-link {
    border-radius: 0.75rem;
    opacity: 0.92;
    color: var(--glass-body-color) !important;
    transition: opacity 0.2s ease, background 0.2s ease;

    &:hover {
      opacity: 1;
      background: var(--glass-bg-hover);
    }
  }

  .nav > li.active > a,
  .nav-link.active {
    opacity: 1;
    background: var(--glass-bg-hover);
  }
}

// tabsetPanel pills
.tabbable > .nav-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.2rem;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  padding: 0.3rem;
  margin: 0 0 1rem var(--glass-float-margin);
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  box-shadow:
    0 12px 36px var(--glass-elevated-shadow),
    inset 0 1px 0 var(--glass-highlight);
  position: relative;
  z-index: 2;

  > li {
    margin-bottom: 0;
    float: none;

    > a {
      border: none !important;
      border-radius: 999px !important;
      // Full body color + high opacity so dark glass still clears 3:1
      color: var(--glass-body-color) !important;
      opacity: 0.92;
      padding: 0.45rem 1rem;
      transition: opacity 0.2s ease, background 0.2s ease;

      &:hover {
        opacity: 1;
        background: var(--glass-bg-hover);
      }
    }

    &.active > a {
      opacity: 1;
      background: var(--glass-bg-hover) !important;
      backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
      -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
      box-shadow: inset 0 1px 0 var(--glass-highlight);
    }
  }
}

.col-sm-4.well .nav-pills > li > a {
  border-radius: 0.75rem;
  opacity: 0.8;
  transition: opacity 0.2s ease, background 0.2s ease;

  &:hover {
    opacity: 1;
    background: var(--glass-bg-hover);
  }
}

.col-sm-4.well .nav-pills > li.active > a {
  opacity: 1;
  background: var(--glass-bg-hover) !important;
  box-shadow: inset 0 1px 0 var(--glass-highlight);
}


// bslib navset_card_* tabs (sampled by contrast audit as "Distribution")
.card .nav-tabs .nav-link,
.card-header .nav-link,
.bslib-navs-card-title .nav-link {
  color: var(--glass-body-color) !important;
  opacity: 0.94 !important;

  &.active {
    opacity: 1 !important;
    font-weight: 600;
  }
}

// DT-style nav-tabs outside .tabbable
.nav-tabs:not(.tabbable > .nav-tabs) {
  border-bottom: 1px solid var(--glass-border);

  .nav-link,
  > li > a {
    border: none;
    border-radius: 0.75rem 0.75rem 0 0;
    color: var(--glass-body-color) !important;
    opacity: 0.92;
    transition: opacity 0.2s ease, background 0.2s ease;

    &:hover {
      opacity: 1;
      background: var(--glass-bg-hover);
    }
  }

  .nav-link.active,
  > li.active > a {
    opacity: 1;
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    border-bottom: 2px solid $primary;
  }
}

// body.glass-nav-compact / glass-nav-expanded (see shiny-glass.js)
body.glass-nav-compact {
  .navbar.navbar-static-top,
  .navbar.navbar-default,
  body.bslib-page-navbar > .navbar {
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
    margin-bottom: 0.2rem;
    transform: scale(0.97);
    opacity: 0.94;

    .navbar-brand {
      font-size: 0.95rem;
    }
  }

  .tabbable > .nav-tabs {
    padding: 0.12rem;
    transform: scale(0.96);
    // Do not lower opacity on the bar (multiplies child ink contrast)

    > li > a {
      padding: 0.3rem 0.75rem;
      font-size: 0.92rem;
    }
  }

  form.well,
  .col-sm-4.well {
    transform: scale(0.99);
  }
}

body.glass-nav-expanded {
  .tabbable > .nav-tabs,
  .navbar.navbar-static-top,
  .navbar.navbar-default {
    transform: scale(1);
    opacity: 1;
  }
}


// Dark-mode nav tabs: translucent light fills wash out light ink (audit FAIL).
// Use denser dark chips so active "Distribution"-style labels stay >= 3:1.
:root[data-glass-preset="dark"] {
  .nav-tabs .nav-link,
  .tabbable > .nav-tabs > li > a,
  .card .nav-tabs .nav-link,
  .card-header .nav-link,
  .bslib-navs-card-title .nav-link {
    color: #f5f5f7 !important;
    opacity: 1 !important;
    // muted but still high-contrast on black/glass page
    background: rgba(255, 255, 255, 0.06) !important;

    &:hover {
      background: rgba(255, 255, 255, 0.12) !important;
    }

    &.active {
      color: #ffffff !important;
      font-weight: 600;
      // denser dark surface under the label (not milky white film)
      background: rgba(58, 58, 60, 0.94) !important;
      box-shadow:
        inset 0 0.5px 0 rgba(255, 255, 255, 0.28),
        0 0 0 0.5px rgba(255, 255, 255, 0.18) !important;
    }
  }

  .tabbable > .nav-tabs > li.active > a {
    color: #ffffff !important;
    background: rgba(58, 58, 60, 0.94) !important;
    opacity: 1 !important;
  }
}

@mixin glass-button-type {
  font-family: inherit;
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.2;
  letter-spacing: -0.022em;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@mixin glass-button-tinted($color) {
  @include glass-button-type();
  $ink: glass-on($color);
  color: $ink !important;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, #ffffff 28%, transparent) 0%,
      transparent 45%
    ),
    color-mix(in srgb, #{$color} 78%, transparent) !important;
  border: 0.5px solid color-mix(in srgb, #{$color} 38%, rgba(255, 255, 255, 0.5)) !important;
  backdrop-filter: blur(16px) saturate(190%);
  -webkit-backdrop-filter: blur(16px) saturate(190%);
  box-shadow:
    0 3px 14px color-mix(in srgb, #{$color} 28%, transparent),
    0 0 0 0.5px color-mix(in srgb, #ffffff 35%, transparent),
    inset 0 0.5px 0 rgba(255, 255, 255, 0.48),
    inset 0 -0.5px 0 rgba(0, 0, 0, 0.08);

  &:hover,
  &:focus {
    color: $ink !important;
    background:
      linear-gradient(
        180deg,
        color-mix(in srgb, #ffffff 34%, transparent) 0%,
        transparent 48%
      ),
      color-mix(in srgb, #{$color} 88%, transparent) !important;
    border-color: color-mix(in srgb, #{$color} 46%, rgba(255, 255, 255, 0.55)) !important;
    box-shadow:
      0 5px 20px color-mix(in srgb, #{$color} 34%, transparent),
      0 0 0 0.5px color-mix(in srgb, #ffffff 42%, transparent),
      inset 0 0.5px 0 rgba(255, 255, 255, 0.55),
      inset 0 -0.5px 0 rgba(0, 0, 0, 0.08);
  }

  &:focus-visible {
    outline: none;
    box-shadow:
      0 0 0 0.22rem color-mix(in srgb, #{$color} 24%, transparent),
      0 3px 14px color-mix(in srgb, #{$color} 28%, transparent),
      inset 0 0.5px 0 rgba(255, 255, 255, 0.48);
  }
}

@mixin glass-button-ghost($label-color: var(--glass-body-color)) {
  @include glass-button-type();
  @include glass-input();
  color: #{$label-color} !important;
  background: var(--glass-bg) !important;

  &:hover,
  &:focus {
    color: #{$label-color} !important;
    background: var(--glass-bg-hover) !important;
    box-shadow:
      inset 0 1px 0 var(--glass-highlight),
      0 4px 14px var(--glass-shadow);
  }

  &:focus-visible {
    outline: none;
    border-color: color-mix(in srgb, var(--glass-accent, #{$primary}) 45%, transparent) !important;
    box-shadow:
      0 0 0 0.2rem color-mix(in srgb, var(--glass-accent, #{$primary}) 14%, transparent),
      inset 0 1px 0 var(--glass-highlight);
  }
}

.btn,
.action-button {
  @include glass-button-type();
  // Concentric control radius — nearer pill than 0.1.x
  border-radius: var(--glass-radius-control);
  transition:
    background 0.22s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.22s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.2s ease,
    transform 0.18s cubic-bezier(0.22, 1, 0.36, 1),
    color 0.2s ease;

  &:active:not(:disabled) {
    transform: scale(0.96);
  }

  &:disabled,
  &.disabled {
    opacity: 0.42;
    transform: none;
  }
}

// default actionButton: body ink, not locked Sass $primary.
// $primary here was the root cause of Light/Dark/Auto (and every other
// default actionButton) staying Apple-blue in dark mode.
.btn-default:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-info):not(.btn-secondary):not(.btn-file):not(.shiny-download-link),
.action-button.btn-default:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-info):not(.btn-secondary) {
  @include glass-button-ghost(var(--glass-body-color));
}

.btn-secondary,
.btn-light {
  // Runtime-switchable body ink (not Sass $body-color)
  @include glass-button-ghost(var(--glass-body-color));
}

.btn-primary,
.action-button.btn-primary {
  @include glass-button-tinted($primary);
}

.btn-success,
.action-button.btn-success {
  @include glass-button-tinted($success);
}

.btn-danger,
.action-button.btn-danger {
  @include glass-button-tinted($danger);
}

.btn-warning,
.action-button.btn-warning {
  @include glass-button-tinted($warning);
  color: #1d1d1f !important;

  &:hover,
  &:focus {
    color: #1d1d1f !important;
  }
}

.btn-info,
.action-button.btn-info {
  @include glass-button-tinted($info);
}

.btn-outline-primary {
  @include glass-button-ghost(var(--glass-accent, #{$primary}));
}

.btn-outline-secondary,
.btn-outline-light {
  @include glass-button-ghost(var(--glass-body-color));
}

.btn-outline-success {
  @include glass-button-ghost($success);
}

.btn-outline-danger {
  @include glass-button-ghost($danger);
}

.btn-outline-warning {
  @include glass-button-ghost($warning);
}

.btn-outline-info {
  @include glass-button-ghost($info);
}

.btn-link {
  @include glass-button-type();
  color: var(--glass-accent, #{$primary}) !important;
  text-decoration: none;
  font-weight: 600;

  &:hover,
  &:focus {
    color: color-mix(in srgb, var(--glass-accent, #{$primary}) 82%, #ffffff 18%) !important;
    text-decoration: none;
  }
}

// downloadButton is often <a class="btn-default">
a.shiny-download-link {
  text-decoration: none !important;

  &.btn {
    @include glass-button-tinted($primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35em;

    i[class*="fa-"] {
      font-size: 0.9em;
      opacity: 0.95;
    }

    &:active:not(.disabled):not([aria-disabled="true"]) {
      transform: scale(0.97);
    }

    &.disabled,
    &[aria-disabled="true"] {
      opacity: 0.42;
      pointer-events: none;
      transform: none;
    }

    &.btn-primary {
      @include glass-button-tinted($primary);
    }

    &.btn-secondary,
    &.btn-light {
      @include glass-button-ghost(var(--glass-body-color));
    }

    &.btn-success {
      @include glass-button-tinted($success);
    }

    &.btn-danger {
      @include glass-button-tinted($danger);
    }
  }

  &:not(.btn) {
    @include glass-button-type();
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    color: var(--glass-accent, #{$primary}) !important;
    padding: 0.15rem 0.1rem;
    border-radius: 0.5rem;
    transition: color 0.2s ease, opacity 0.2s ease;

    &:hover,
    &:focus {
      color: color-mix(in srgb, var(--glass-accent, #{$primary}) 82%, #ffffff 18%) !important;
      text-decoration: none !important;
    }

    &.disabled,
    &[aria-disabled="true"] {
      opacity: 0.42;
      pointer-events: none;
    }
  }
}

[data-glass-preset="dark"] {
  .btn-warning {
    color: #1d1d1f !important;
  }
}

.form-control {
  @include glass-input();
  border-radius: 0.75rem;
  color: inherit;

  &:hover {
    background: var(--glass-bg-hover);
    box-shadow:
      inset 0 1px 0 var(--glass-highlight),
      0 2px 10px var(--glass-shadow);
  }

  &:focus {
    background: var(--glass-bg-hover);
    border-color: rgba($primary, 0.5);
    box-shadow:
      0 0 0 0.2rem rgba($primary, 0.15),
      inset 0 1px 0 var(--glass-highlight),
      0 4px 14px var(--glass-shadow);
  }
}

// ---------------------------------------------------------------------------
// Active-on-accent ink (checks, radios, switches, indeterminate, btn-check)
//
// Bootstrap sets $component-active-color via color-contrast($primary). For
// system blue (#007AFF) that contrast pick is often *black*, so SVG check
// strokes / switch knobs compile dark-on-blue. glass_theme() also forces
// $component-active-color to white; these rules are the CSS safety net.
// Accent fill uses --glass-accent so update_glass_theme(primary=) recolors
// at runtime. Selectors cover BS form-check-input AND Shiny checkboxInput.
// ---------------------------------------------------------------------------

#{$glass-check-input} {
  width: 1.1em;
  height: 1.1em;
  margin-top: 0.2em;
  background-color: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 var(--glass-highlight);
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;

  &:hover {
    background-color: var(--glass-bg-hover);
    border-color: color-mix(in srgb, #{$glass-accent} 45%, var(--glass-border));
  }

  &:focus {
    border-color: color-mix(in srgb, #{$glass-accent} 55%, transparent);
    box-shadow:
      0 0 0 0.2rem color-mix(in srgb, #{$glass-accent} 18%, transparent),
      inset 0 1px 0 var(--glass-highlight);
  }

  &:checked,
  &:indeterminate {
    // background shorthand beats Bootstrap longhands that bake $primary hex
    background-color: #{$glass-accent} !important;
    border-color: #{$glass-accent} !important;
    box-shadow:
      0 2px 10px color-mix(in srgb, #{$glass-accent} 35%, transparent),
      inset 0 1px 0 rgba(255, 255, 255, 0.35);
  }

  &:checked[type="checkbox"] {
    // white checkmark
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e") !important;
  }

  &:indeterminate[type="checkbox"] {
    // white dash
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e") !important;
  }

  &:checked[type="radio"] {
    // white center dot
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e") !important;
  }

  &:disabled {
    opacity: 0.55;
    cursor: not-allowed;
  }
}

// Toggle switches: white knob on accent track when on (layout left to Bootstrap)
.form-switch .form-check-input {
  &:checked {
    background-color: #{$glass-accent} !important;
    border-color: #{$glass-accent} !important;
    // white knob — overrides BS color-contrast black fill on primary
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
  }
}

// Legacy BS3 shiny markup still used in some apps
.checkbox input[type="checkbox"],
.radio input[type="radio"] {
  accent-color: #{$glass-accent};
}

// btn-check + primary (and similar) must keep light label ink
.btn-check:checked + .btn-primary,
.btn-check:active + .btn-primary,
.btn-check:checked + .btn-outline-primary,
.btn-check:active + .btn-outline-primary {
  color: #fff !important;
}

// Active list/nav/pagination text on primary fill should stay light
.page-item.active .page-link,
.list-group-item.active,
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link,
.dropdown-item.active,
.dropdown-item:active {
  color: #fff !important;
  background-color: #{$glass-accent} !important;
  border-color: #{$glass-accent} !important;
}

.form-select {
  @include glass-input();
  border-radius: 0.75rem;
  color: inherit;

  // opaque so list items aren't see-through
  &:focus,
  &:active,
  &[size]:not([size="1"]),
  &[multiple] {
    background-color: var(--glass-menu-bg) !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    z-index: 1060;
    position: relative;
  }

  option,
  optgroup {
    background-color: var(--glass-menu-bg);
    color: var(--glass-menu-color);
  }
}

// .glass-select-open z-index (native + selectize)
.card,
form.well,
.col-sm-4.well {
  .shiny-input-container:has(.form-select),
  .shiny-input-container:has(.selectize-control) {
    position: relative;
    z-index: 1;
  }

  .shiny-input-container.glass-select-open,
  .shiny-input-container:has(.form-select:focus),
  .shiny-input-container:has(.form-select:active),
  .shiny-input-container:has(.selectize-input.input-active) {
    z-index: 1000;
  }
}

.selectize-control.single .selectize-input,
.selectize-control.multi .selectize-input {
  @include glass-input();
  border-radius: 0.75rem !important;
  // Selectize ships dark item ink (rgba(0,0,0,.83)); force body/glass ink.
  color: var(--glass-body-color, inherit) !important;
  background-color: var(--glass-bg) !important;
  min-height: calc(1.5em + 0.75rem + 2px);
  box-shadow: inset 0 1px 0 var(--glass-highlight);

  input {
    color: var(--glass-body-color, inherit) !important;
  }

  // Multi-select tags: selectize defaults to near-black text on pale chips.
  > div,
  .item {
    color: var(--glass-body-color, inherit) !important;
    background: var(--glass-bg-hover) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 0.45rem !important;
  }

  .item .remove,
  .item a.remove {
    color: var(--glass-body-color, inherit) !important;
    border-left-color: var(--glass-border) !important;
    opacity: 0.7;

    &:hover {
      opacity: 1;
      background: transparent !important;
    }
  }

  &:hover {
    background: var(--glass-bg-hover) !important;
    background-color: var(--glass-bg-hover) !important;
    box-shadow:
      inset 0 1px 0 var(--glass-highlight),
      0 2px 10px var(--glass-shadow);
  }

  &.input-active {
    background: var(--glass-bg-hover) !important;
    background-color: var(--glass-bg-hover) !important;
    border-color: rgba($primary, 0.45) !important;
    box-shadow:
      0 0 0 0.2rem rgba($primary, 0.12),
      inset 0 1px 0 var(--glass-highlight);
  }
}

// Dark: more opaque field fill so light ink stays readable on glass (not
// thin white wash over black page → washed-out / low-contrast look).
[data-glass-preset="dark"] {
  .selectize-control.single .selectize-input,
  .selectize-control.multi .selectize-input,
  .form-select,
  .form-control {
    background-color: var(--glass-menu-bg) !important;
    color: var(--glass-menu-color, var(--glass-body-color)) !important;
  }

  .selectize-control.multi .selectize-input > div,
  .selectize-control.multi .selectize-input .item {
    background: color-mix(in srgb, var(--glass-menu-bg) 70%, #{$glass-accent} 30%) !important;
    color: var(--glass-menu-color, var(--glass-body-color)) !important;
  }
}

.selectize-dropdown {
  // Opaque enough that options never composite into unreadable mush
  background: var(--glass-menu-bg) !important;
  background-color: var(--glass-menu-bg) !important;
  color: var(--glass-menu-color, inherit) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-border) !important;
  border-radius: 1rem !important;
  box-shadow:
    0 16px 48px var(--glass-elevated-shadow),
    inset 0 1px 0 var(--glass-highlight);
  padding: 0.4rem;
  z-index: 1060 !important;
  overflow: hidden;

  .option,
  .create {
    border-radius: 0.55rem;
    color: var(--glass-menu-color, inherit) !important;
    padding: 0.45rem 0.65rem;
  }

  .active {
    background: color-mix(in srgb, var(--glass-menu-bg) 65%, #{$glass-accent} 35%) !important;
    color: var(--glass-menu-color, inherit) !important;
  }

  .optgroup-header {
    color: var(--glass-menu-color, inherit);
    opacity: 0.65;
    font-weight: 600;
    font-size: 0.8rem;
    padding: 0.35rem 0.65rem 0.15rem;
  }
}

.input-group-text {
  @include glass-input();
  border-radius: 0.75rem;
  color: inherit;
}

// ---------------------------------------------------------------------------
// Range value chips only — scoped so we don't restyle badges, progress,
// alerts, or other Bootstrap solid/pastel surfaces.
// Problem: chips paint primary fill but inherit body ink (dark text on blue).
// ---------------------------------------------------------------------------

// shiny::sliderInput (ion.rangeSlider) — include .irs--shiny skin which
// ships hardcoded primary fills after our generic .irs rules.
.irs {
  .irs-bar,
  .irs-bar-edge {
    background: #{$glass-accent} !important;
    border-color: #{$glass-accent} !important;
  }

  .irs-single,
  .irs-from,
  .irs-to {
    @include glass-value-chip($glass-accent);
  }

  .irs-handle {
    border: 2px solid #{$glass-accent} !important;
    background: var(--glass-menu-bg, #ffffff);
    box-shadow: 0 2px 8px var(--glass-shadow);
    cursor: pointer;

    > i:first-child {
      background: color-mix(in srgb, #{$glass-accent} 55%, transparent);
    }
  }

  .irs-line {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
  }

  .irs-grid-text,
  .irs-min,
  .irs-max {
    color: inherit;
    opacity: 0.65;
  }
}

// Skin-specific overrides (ion.rangeSlider "shiny" skin)
.irs--shiny {
  .irs-bar,
  .irs-bar-edge {
    background: #{$glass-accent} !important;
    border-color: #{$glass-accent} !important;
  }

  .irs-from,
  .irs-to,
  .irs-single {
    @include glass-value-chip($glass-accent);
  }

  .irs-handle {
    border-color: #{$glass-accent} !important;
  }
}

// shinyWidgets / noUiSlider value tooltips (same failure mode as .irs-single)
.noUi-tooltip,
.noUi-horizontal .noUi-tooltip,
.noUi-vertical .noUi-tooltip {
  @include glass-value-chip($glass-accent);
}

// bootstrap-slider tooltips when present
.slider .tooltip.top .tooltip-inner,
.slider .tooltip-inner {
  @include glass-value-chip($glass-accent);
}

// Native range thumbs only (no text labels to fix)
.form-range {
  &::-webkit-slider-thumb {
    background-color: #{$glass-accent};
    border: 2px solid var(--glass-menu-bg, #ffffff);
  }

  &::-moz-range-thumb {
    background-color: #{$glass-accent};
    border: 2px solid var(--glass-menu-bg, #ffffff);
  }
}

.modal-content {
  @include glass-surface(1.25rem);
  // Keep dialogs readable over dense app chrome (teal delayed-data, etc.)
  background: color-mix(in srgb, var(--glass-menu-bg) 82%, transparent) !important;
  color: var(--glass-menu-color, var(--glass-body-color, inherit));
  border: 1px solid var(--glass-border) !important;
  box-shadow:
    0 0 0 0.5px var(--glass-border-outer, rgba(0, 0, 0, 0.12)),
    0 16px 48px var(--glass-shadow) !important;
}

// Bootstrap dims .modal-backdrop with opacity:0.5 which kills backdrop-filter.
// Keep a translucent fill + real blur so the page frosts behind dialogs.
.modal-backdrop {
  background-color: rgba(15, 15, 20, 0.42) !important;
  backdrop-filter: blur(calc(var(--glass-blur) * 0.9)) saturate(var(--glass-saturate)) !important;
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) * 0.9)) saturate(var(--glass-saturate)) !important;
  opacity: 1 !important;
}

.modal-backdrop.fade {
  opacity: 0 !important;
  transition:
    opacity 0.2s ease,
    backdrop-filter 0.25s ease,
    -webkit-backdrop-filter 0.25s ease !important;
}

.modal-backdrop.show {
  opacity: 1 !important;
}

// Temporary scrim while the native file picker is open (see shiny-glass.js).
// Frosts the app behind the OS dialog the same way modal-backdrop does.
.glass-file-scrim {
  position: fixed;
  inset: 0;
  z-index: 1055; // just under Bootstrap modal (1055+) / above page chrome
  pointer-events: none;
  opacity: 0;
  background-color: rgba(15, 15, 20, 0.28);
  backdrop-filter: blur(calc(var(--glass-blur) * 0.9)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) * 0.9)) saturate(var(--glass-saturate));
  transition:
    opacity 0.18s ease,
    backdrop-filter 0.22s ease,
    -webkit-backdrop-filter 0.22s ease;
}

.glass-file-scrim.is-active {
  opacity: 1;
}

// ---------------------------------------------------------------------------
// Typography ownership
// Bootstrap / third-party widgets often hardcode near-black ink (#212529, etc.)
// which becomes invisible on dark glass. Own text color for body-adjacent
// surfaces via the dual CSS packs (--glass-body-color / --bs-body-color).
// ---------------------------------------------------------------------------
body {
  color: var(--glass-body-color);
}

// Verbatim / live values / code samples
pre,
pre.shiny-text-output,
.shiny-text-output:not(.value-box-value),
.shiny-verbatim,
.verbatim,
code,
kbd,
samp {
  background: var(--glass-bg) !important;
  background-color: var(--glass-bg) !important;
  color: var(--glass-body-color) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 0.85rem;
  padding: 0.75rem 1rem;
  margin-bottom: 0;
  font-size: 0.85rem;
  line-height: 1.4;
  max-width: 100%;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
  box-shadow: inset 0 1px 0 var(--glass-highlight);
}

code,
kbd,
samp {
  padding: 0.15rem 0.4rem;
  white-space: normal;
  box-shadow: none;
}

// Help / muted text must stay legible on both packs
.text-muted,
.form-text,
small,
.small {
  color: var(--bs-secondary-color, var(--glass-body-color)) !important;
  opacity: 1;
}

.dropdown-menu {
  background-color: var(--glass-menu-bg);
  color: var(--glass-menu-color);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-border);
  border-radius: 1rem;
  box-shadow: 0 8px 32px var(--glass-shadow);
  padding: 0.5rem;
  z-index: 1060;

  .dropdown-item {
    border-radius: 0.5rem;
    color: var(--glass-menu-color);

    &:hover,
    &:focus {
      background: var(--glass-bg-hover);
    }
  }
}

// ---------------------------------------------------------------------------
// Overlay chrome that only exists after a click (datepicker, notifications,
// accordion, tooltip/popover, toast, file Browse, close ×).
// Same failure class as DT .page-link: Bootstrap / plugin paints the visible
// node with light-theme hex, and the 0.2 dark pack no longer hides it behind
// Bootswatch darkly.
// ---------------------------------------------------------------------------

// bootstrap-datepicker (dateInput / dateRangeInput). Also has .dropdown-menu.
.datepicker,
.datepicker-dropdown,
.datepicker.datepicker-dropdown {
  background: var(--glass-menu-bg) !important;
  background-color: var(--glass-menu-bg) !important;
  color: var(--glass-menu-color) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 1rem !important;
  box-shadow:
    0 16px 48px var(--glass-elevated-shadow, var(--glass-shadow)),
    inset 0 1px 0 var(--glass-highlight);
  z-index: 1070 !important;
  padding: 0.45rem 0.55rem;

  table {
    background: transparent !important;
    color: inherit;
  }

  th,
  td,
  .day,
  .dow,
  .datepicker-switch,
  .prev,
  .next,
  .cw {
    color: var(--glass-menu-color) !important;
    background: transparent !important;
    border-radius: 0.45rem;
  }

  .dow {
    opacity: 0.62;
    font-weight: 600;
  }

  .day:hover,
  .datepicker-switch:hover,
  .prev:hover,
  .next:hover {
    background: var(--glass-bg-hover) !important;
    color: var(--glass-menu-color) !important;
  }

  .day.old,
  .day.new,
  .day.disabled,
  .day.disabled:hover {
    color: var(--glass-menu-color) !important;
    opacity: 0.42;
    background: transparent !important;
  }

  .day.today,
  .today {
    background: color-mix(in srgb, var(--glass-menu-bg) 72%, #{$glass-accent} 28%) !important;
    color: var(--glass-menu-color) !important;
  }

  .day.active,
  .day.active:hover,
  .active.day,
  table tr td.active,
  table tr td.active.active,
  table tr td.active:hover {
    background: #{$glass-accent} !important;
    color: #fff !important;
    text-shadow: none !important;
    opacity: 1;
  }

  .day.range,
  table tr td.range {
    background: color-mix(in srgb, var(--glass-menu-bg) 70%, #{$glass-accent} 30%) !important;
    color: var(--glass-menu-color) !important;
    opacity: 1;
  }
}

// Shiny toast notifications — default plugin is cream/black on light hex.
.shiny-notification {
  background: var(--glass-menu-bg) !important;
  background-color: var(--glass-menu-bg) !important;
  color: var(--glass-menu-color) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 0.9rem !important;
  box-shadow:
    0 16px 40px var(--glass-elevated-shadow, var(--glass-shadow)),
    inset 0 1px 0 var(--glass-highlight);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
}

.shiny-notification-content,
.shiny-notification-content-text,
.shiny-notification-close {
  color: inherit !important;
}

.shiny-notification-close {
  opacity: 0.7;

  &:hover {
    opacity: 1;
  }
}

.shiny-notification-message {
  border-left: 3px solid #{$glass-accent};
}

.shiny-notification-warning {
  border-left: 3px solid var(--bs-warning, #ff9500);
}

.shiny-notification-error {
  border-left: 3px solid var(--bs-danger, #ff3b30);
}

// Bootstrap close × is a black SVG; invert on dark glass.
.btn-close {
  --bs-btn-close-opacity: 0.65;
  --bs-btn-close-hover-opacity: 0.95;
}

[data-glass-preset="dark"] .btn-close {
  filter: invert(1) grayscale(1);
}

// Generic Bootstrap / bslib accordion (teal-specific rules stay below).
.accordion-item {
  background: transparent;
  border: 1px solid var(--glass-border);
  border-radius: calc(var(--glass-radius) * 0.75);
  overflow: hidden;
  color: inherit;
}

.accordion-button {
  background: var(--glass-bg) !important;
  color: var(--glass-body-color) !important;
  box-shadow: inset 0 1px 0 var(--glass-highlight);

  &:not(.collapsed) {
    background: var(--glass-bg-hover) !important;
    color: var(--glass-body-color) !important;
    box-shadow: inset 0 1px 0 var(--glass-highlight);
  }

  &:focus {
    box-shadow:
      inset 0 1px 0 var(--glass-highlight),
      0 0 0 0.15rem color-mix(in srgb, #{$glass-accent} 22%, transparent);
  }

  &::after {
    opacity: 0.7;
  }
}

[data-glass-preset="dark"] .accordion-button::after {
  filter: invert(1);
}

.accordion-body {
  background: color-mix(in srgb, var(--glass-bg) 88%, transparent);
  color: inherit;
}

// Bootstrap 5 / bslib tooltip + popover (not ion/noUi slider chips).
.tooltip .tooltip-inner {
  background: var(--glass-menu-bg) !important;
  color: var(--glass-menu-color) !important;
  border: 1px solid var(--glass-border);
  border-radius: 0.55rem;
  box-shadow: 0 8px 24px var(--glass-shadow);
}

.tooltip {
  --bs-tooltip-bg: var(--glass-menu-bg);
  --bs-tooltip-color: var(--glass-menu-color);
}

.popover {
  --bs-popover-bg: var(--glass-menu-bg);
  --bs-popover-header-bg: var(--glass-bg);
  --bs-popover-body-color: var(--glass-menu-color);
  --bs-popover-header-color: var(--glass-menu-color);
  --bs-popover-border-color: var(--glass-border);
  background: var(--glass-menu-bg) !important;
  color: var(--glass-menu-color) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 0.9rem;
  box-shadow: 0 16px 40px var(--glass-elevated-shadow, var(--glass-shadow));
}

.popover-header,
.popover-body {
  background: transparent !important;
  color: inherit !important;
  border-color: var(--glass-border) !important;
}

// bslib / Bootstrap toast
.toast {
  --bs-toast-bg: var(--glass-menu-bg);
  --bs-toast-color: var(--glass-menu-color);
  --bs-toast-border-color: var(--glass-border);
  background: var(--glass-menu-bg) !important;
  color: var(--glass-menu-color) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 0.9rem;
}

.toast-header {
  background: transparent !important;
  color: inherit !important;
  border-color: var(--glass-border) !important;
}

.toast-body {
  color: inherit;
}

// File input Browse chip (Shiny wraps <input type=file> in .btn-file / input-group).
// Beat .btn-default { glass-button-ghost($primary) } so the label is not
// brand-blue on a translucent fill (2.7:1 in dark).
.shiny-input-container:has(input[type="file"]) .btn,
.shiny-input-container .btn-file,
.btn-file,
.btn-file.btn {
  @include glass-input();
  color: var(--glass-body-color) !important;
  background: var(--glass-bg) !important;
}

.shiny-input-container:has(input[type="file"]) .form-control[readonly],
.shiny-input-container input[type="text"][readonly].form-control {
  color: inherit;
}

.alert {
  @include glass-surface(1rem);
  border-width: 1px;
}

.badge {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-weight: 500;
}

.progress {
  background: var(--glass-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 1rem;
  border: 1px solid var(--glass-border);
  overflow: hidden;
}

.table {
  --bs-table-bg: transparent;
  --bs-table-striped-bg: var(--glass-bg-hover);
  --bs-table-hover-bg: var(--glass-bg-hover);
}

.value-box {
  @include glass-surface();
}

// Value boxes: tinted glass, not solid .bg-* slabs. Keep a wash of the
// theme color so primary/success/info still read, but the page orbs show
// through. Ink follows the glass body pack (not white-on-solid).
@mixin glass-value-box-tint($fill) {
  background:
    linear-gradient(
      165deg,
      color-mix(in srgb, #{$fill} 30%, transparent) 0%,
      color-mix(in srgb, #{$fill} 12%, var(--glass-bg)) 100%
    ) !important;
  background-color: transparent !important;
  color: var(--glass-body-color) !important;
  --bs-card-color: var(--glass-body-color);
  --bs-card-title-color: var(--glass-body-color);
  --bs-card-subtitle-color: var(--glass-body-color);
  --bslib-color-fg: var(--glass-body-color);
  --bslib-value-box-color: var(--glass-body-color);
  border-color: color-mix(in srgb, #{$fill} 38%, var(--glass-border)) !important;
}

.bslib-value-box.bg-primary,
.bslib-value-box.text-bg-primary,
.value-box.bg-primary {
  @include glass-value-box-tint($glass-accent);
}

@each $name, $color in $theme-colors {
  @if $name != primary {
    .bslib-value-box.bg-#{$name},
    .bslib-value-box.text-bg-#{$name},
    .value-box.bg-#{$name} {
      @include glass-value-box-tint($color);
    }
  }
}

.bslib-value-box .value-box-title,
.bslib-value-box .value-box-value,
.bslib-value-box .shiny-text-output,
.value-box .value-box-title,
.value-box .value-box-value,
.value-box .shiny-text-output {
  color: inherit !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  font-size: inherit;
  white-space: normal;
}

// bslib nests the value in an inner fill/showcase well — keep it open
.bslib-value-box .value-box-area,
.bslib-value-box .value-box-showcase,
.bslib-value-box .html-fill-container,
.bslib-value-box .html-fill-item {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

.bslib-page-sidebar > .navbar {
  @include glass-floating(var(--glass-radius));
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--glass-radius) !important;
  color: var(--glass-body-color) !important;
  margin: var(--glass-float-margin) var(--glass-float-margin) 0;
  padding: 0.55rem 1rem;
  position: sticky;
  top: var(--glass-float-margin);
  z-index: 1030;
  overflow: visible !important;
  border-bottom: 1px solid var(--glass-border) !important;

  // Force light-glass brand ink (Bootstrap/bslib default brand is often #fff)
  --#{$prefix}navbar-color: var(--glass-body-color);
  --#{$prefix}navbar-hover-color: var(--glass-body-color);
  --#{$prefix}navbar-active-color: var(--glass-body-color);
  --#{$prefix}navbar-brand-color: var(--glass-body-color);
  --#{$prefix}navbar-brand-hover-color: var(--glass-body-color);

  .navbar-brand,
  .bslib-page-title {
    color: var(--glass-body-color) !important;
    font-weight: 600;
    letter-spacing: -0.03em;
  }
}

// page_sidebar / layout_sidebar: glass sidebar floats beside main.
// bslib ships its own `.bslib-sidebar-layout > .sidebar { position: relative;
// width: 100% }` rules *after* theme CSS, so layout properties here need
// !important to stick. When open, main is padded so content is never buried
// under the floating chrome (matches the teal special-case pattern).
.bslib-sidebar-layout {
  --glass-sidebar-reserve: calc(
    var(--glass-float-margin) + var(--_sidebar-width, 250px) + var(--glass-float-margin)
  );

  border: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  overflow: visible !important;

  > .main,
  > .main.bslib-page-main {
    background: transparent !important;
    color: inherit;
  }

  > .sidebar {
    @include glass-floating(var(--glass-radius));
    background-color: var(--glass-bg) !important;
    border: 1px solid var(--glass-border) !important;
    color: inherit;
    overflow: auto !important;

    .sidebar-title {
      border-bottom: 1px solid var(--glass-border);
      color: inherit;
      font-weight: 600;
      letter-spacing: -0.02em;
    }
  }

  > .collapse-toggle {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(calc(var(--glass-blur) * 0.65)) saturate(var(--glass-saturate));
    -webkit-backdrop-filter: blur(calc(var(--glass-blur) * 0.65)) saturate(var(--glass-saturate));
    border: 1px solid var(--glass-border) !important;
    border-radius: 999px !important;
    box-shadow:
      0 8px 24px var(--glass-shadow),
      inset 0 1px 0 var(--glass-highlight);
    color: inherit;
    z-index: 30 !important;

    &:hover {
      background: var(--glass-bg-hover) !important;
    }
  }

  @include media-breakpoint-up(sm) {
    // Single-column grid so main can full-bleed; sidebar is taken out of flow.
    grid-template-columns: minmax(0, 1fr) !important;
    position: relative !important;

    > .main,
    > .main.bslib-page-main {
      grid-column: 1 / -1 !important;
      grid-row: 1 / 2 !important;
      border-radius: 0 !important;
      // Default open-state gutter; collapsed rules below override.
      padding-top: var(--glass-float-margin) !important;
      padding-bottom: var(--glass-float-margin) !important;
      padding-right: var(--glass-float-margin) !important;
      padding-left: var(--glass-sidebar-reserve) !important;
      transition: padding var(--_transition-easing-x, ease) var(--_transition-duration, 0.3s);
    }

    > .sidebar {
      // Beat bslib's later `position: relative; width: 100%` rules.
      position: absolute !important;
      top: var(--glass-float-margin) !important;
      bottom: var(--glass-float-margin) !important;
      left: var(--glass-float-margin) !important;
      right: auto !important;
      width: var(--_sidebar-width, 250px) !important;
      max-width: calc(100% - var(--glass-float-margin) * 2) !important;
      max-height: calc(100vh - var(--glass-float-margin) * 3 - 3.5rem) !important;
      height: auto !important;
      margin: 0 !important;
      z-index: 20 !important;
      border-radius: var(--glass-radius) !important;
      grid-column: unset !important;
      grid-row: unset !important;
      transition:
        transform 0.3s cubic-bezier(0.8, 0.78, 0.22, 1.07),
        opacity 0.25s ease;
    }

    &.sidebar-right > .sidebar {
      left: auto !important;
      right: var(--glass-float-margin) !important;
    }

    &.sidebar-right:not(.sidebar-collapsed) > .main,
    &.sidebar-right:not(.sidebar-collapsed) > .main.bslib-page-main {
      padding-left: var(--glass-float-margin) !important;
      padding-right: var(--glass-sidebar-reserve) !important;
    }

    &:not(.sidebar-collapsed) > .collapse-toggle {
      left: calc(
        var(--glass-float-margin) + var(--_sidebar-width, 250px) -
          var(--_icon-button-size, 2rem) - var(--_icon-size, 1rem) * 0.5
      ) !important;
      right: auto !important;
      top: calc(var(--glass-float-margin) + var(--_icon-size, 1rem) * 0.5) !important;
    }

    &.sidebar-right:not(.sidebar-collapsed) > .collapse-toggle {
      left: auto !important;
      right: calc(
        var(--glass-float-margin) + var(--_sidebar-width, 250px) -
          var(--_icon-button-size, 2rem) - var(--_icon-size, 1rem) * 0.5
      ) !important;
    }

    &.sidebar-collapsed > .sidebar {
      opacity: 0;
      pointer-events: none;
      transform: translateX(calc(-100% - var(--glass-float-margin) * 2));
    }

    &.sidebar-right.sidebar-collapsed > .sidebar {
      transform: translateX(calc(100% + var(--glass-float-margin) * 2));
    }

    &.sidebar-collapsed > .collapse-toggle {
      left: var(--glass-float-margin) !important;
      right: auto !important;
      top: var(--glass-float-margin) !important;
      color: inherit;
    }

    &.sidebar-right.sidebar-collapsed > .collapse-toggle {
      left: auto !important;
      right: var(--glass-float-margin) !important;
    }

    &.sidebar-collapsed > .main,
    &.sidebar-collapsed > .main.bslib-page-main {
      padding-left: calc(var(--glass-float-margin) + var(--_padding-icon, 3rem)) !important;
      padding-right: var(--glass-float-margin) !important;
    }

    &.sidebar-right.sidebar-collapsed > .main,
    &.sidebar-right.sidebar-collapsed > .main.bslib-page-main {
      padding-left: var(--glass-float-margin) !important;
      padding-right: calc(var(--glass-float-margin) + var(--_padding-icon, 3rem)) !important;
    }
  }
}

// Nested layout_sidebar (inside another sidebar layout / page main): keep
// glass surface styling but use bslib's in-flow 2-column grid. Absolute float
// + main reserve on nested layouts double-pads and leaves a large empty gutter.
.bslib-sidebar-layout .bslib-sidebar-layout {
  @include media-breakpoint-up(sm) {
    // Restore two tracks: sidebar column + flexible main (bslib-like).
    grid-template-columns:
      Min(calc(100% - var(--_padding-icon, 3rem)), var(--_sidebar-width, 250px))
      minmax(0, 1fr) !important;
    position: relative !important;

    > .sidebar {
      position: relative !important;
      top: auto !important;
      bottom: auto !important;
      left: auto !important;
      right: auto !important;
      inset: auto !important;
      width: 100% !important;
      max-width: none !important;
      max-height: none !important;
      height: auto !important;
      margin: 0.35rem 0 0.35rem 0.35rem !important;
      z-index: 1 !important;
      grid-column: 1 / 2 !important;
      grid-row: 1 / 2 !important;
      transform: none !important;
      opacity: 1;
      pointer-events: auto;
    }

    > .main,
    > .main.bslib-page-main {
      grid-column: 2 / 3 !important;
      grid-row: 1 / 2 !important;
      padding: 0.35rem 0.5rem !important;
    }

    &.sidebar-right {
      grid-template-columns:
        minmax(0, 1fr)
        Min(calc(100% - var(--_padding-icon, 3rem)), var(--_sidebar-width, 250px)) !important;

      > .sidebar {
        grid-column: 2 / 3 !important;
        margin: 0.35rem 0.35rem 0.35rem 0 !important;
      }

      > .main,
      > .main.bslib-page-main {
        grid-column: 1 / 2 !important;
      }
    }

    // Collapse toggles sit on the grid edge rather than over absolute chrome.
    > .collapse-toggle,
    &:not(.sidebar-collapsed) > .collapse-toggle,
    &.sidebar-right:not(.sidebar-collapsed) > .collapse-toggle,
    &.sidebar-collapsed > .collapse-toggle,
    &.sidebar-right.sidebar-collapsed > .collapse-toggle {
      left: auto !important;
      right: auto !important;
      top: 0.5rem !important;
      position: absolute !important;
    }

    &:not(.sidebar-right) > .collapse-toggle {
      // Near the sidebar / main seam
      left: calc(
        Min(calc(100% - var(--_padding-icon, 3rem)), var(--_sidebar-width, 250px)) -
          var(--_icon-button-size, 2rem) * 0.5
      ) !important;
    }

    &.sidebar-right > .collapse-toggle {
      right: calc(
        Min(calc(100% - var(--_padding-icon, 3rem)), var(--_sidebar-width, 250px)) -
          var(--_icon-button-size, 2rem) * 0.5
      ) !important;
    }

    &.sidebar-collapsed {
      grid-template-columns: 0 minmax(0, 1fr) !important;

      > .sidebar {
        opacity: 0;
        pointer-events: none;
        transform: none !important;
        width: 0 !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border-width: 0 !important;
        overflow: hidden !important;
      }

      > .main,
      > .main.bslib-page-main {
        padding-left: calc(0.35rem + var(--_padding-icon, 3rem)) !important;
        padding-right: 0.5rem !important;
      }

      > .collapse-toggle {
        left: 0.35rem !important;
        right: auto !important;
      }
    }

    &.sidebar-right.sidebar-collapsed {
      grid-template-columns: minmax(0, 1fr) 0 !important;

      > .main,
      > .main.bslib-page-main {
        padding-left: 0.5rem !important;
        padding-right: calc(0.35rem + var(--_padding-icon, 3rem)) !important;
      }

      > .collapse-toggle {
        left: auto !important;
        right: 0.35rem !important;
      }
    }
  }
}

.shiny-plot-output,
.shiny-image-output {
  @include glass-surface(calc(var(--glass-radius) * 0.85));
  padding: 0.65rem;
  margin-bottom: 0.75rem;
  overflow: hidden;
  max-width: 100%;
  box-sizing: border-box;
}

// Nested plots / tables inside cards: no second pane. The card is the glass;
// let page orbs show through a transparent host (pair with renderPlot(bg=NA)).
.card .shiny-plot-output,
.card .shiny-image-output,
.bslib-card .shiny-plot-output,
.bslib-card .shiny-image-output,
.card .dataTables_wrapper,
.bslib-card .dataTables_wrapper,
.card .shiny-html-output:has(.dataTables_wrapper),
.bslib-card .shiny-html-output:has(.dataTables_wrapper),
.card .shiny-html-output:has(.gt_table),
.bslib-card .shiny-html-output:has(.gt_table) {
  background: transparent !important;
  background-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0.15rem 0 0;
  margin-bottom: 0;

  &::before,
  &::after {
    content: none !important;
    display: none !important;
  }

  img {
    border-radius: 0;
  }
}

// Frame html outputs that carry real content. Empty teal validation
// placeholders (and similar) must not become thin glass bars.
.shiny-html-output:not(:has(.Reactable)):is(
  .shiny-table-output,
  :has(table),
  :has(.dataTables_wrapper),
  :has(.html-widget),
  :has(.plotly),
  :has(img),
  :has(pre),
  :has(canvas),
  :has(.form-group),
  :has(.shiny-input-container),
  :has(.shiny-plot-output),
  :has(.shiny-image-output)
) {
  @include glass-surface(calc(var(--glass-radius) * 0.85));
  padding: 0.65rem;
  margin-bottom: 0.75rem;
  overflow: hidden;
  max-width: 100%;
  box-sizing: border-box;
}

// Explicitly neutralize empty / message-only html outputs
.shiny-html-output:empty,
.shiny-html-output:not(:has(*)),
.teal_validated > .shiny-html-output,
.teal-output-warning.shiny-html-output:empty {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
}

.shiny-plot-output img,
.shiny-image-output img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: calc(var(--glass-radius) * 0.45);
}

// reactable has its own surface; don't double-frame the wrapper
.shiny-html-output.reactable,
.shiny-html-output:has(.Reactable) {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-bottom: 0.75rem;
}

.dataTables_wrapper {
  @include glass-surface(calc(var(--glass-radius) * 0.85));
  padding: 0.85rem 1rem;
  margin-bottom: 0.75rem;
  overflow: visible;

  .dataTables_length,
  .dataTables_filter,
  .dataTables_info,
  .dataTables_paginate {
    color: inherit;
    margin-bottom: 0.5rem;
  }

  .dataTables_length select,
  .dataTables_filter input {
    @include glass-input();
    border-radius: 0.65rem;
    color: inherit;
    margin: 0 0.35rem;
    padding: 0.3rem 0.55rem;
  }

  table.dataTable {
    border-collapse: separate;
    border-spacing: 0;
    width: 100% !important;

    thead th,
    thead td {
      background: var(--glass-bg-hover);
      border-bottom: 1px solid var(--glass-border) !important;
      color: inherit;
      font-weight: 600;
      letter-spacing: -0.01em;
      padding: 0.65rem 0.85rem;
    }

    tbody tr {
      background: transparent;
      transition: background 0.15s ease;

      > td {
        border-bottom: 1px solid color-mix(in srgb, var(--glass-border) 55%, transparent);
        color: inherit;
        padding: 0.55rem 0.85rem;
        vertical-align: middle;
      }

      &:nth-child(even) > td {
        background: color-mix(in srgb, var(--glass-bg) 70%, transparent);
      }

      &:hover > td {
        background: var(--glass-bg-hover);
      }
    }
  }

  // DT Bootstrap 5 markup is <li.paginate_button.page-item><a.page-link>.
  // Style the visible .page-link surface (not the li), otherwise Bootstrap's
  // default page-link bg (light grey / pure black) shows through as solid
  // chips that look wrong on glass — especially in dark mode.
  .dataTables_paginate {
    .pagination {
      flex-wrap: wrap;
      gap: 0.2rem;
      margin: 0;
    }

    .paginate_button,
    .page-item {
      background: transparent !important;
      border: none !important;
      box-shadow: none !important;
      margin: 0 !important;
      padding: 0 !important;
      opacity: 1 !important;
    }

    .page-link,
    .paginate_button > a {
      @include glass-input();
      border-radius: 0.55rem !important;
      color: inherit !important;
      background-color: var(--glass-bg) !important;
      border: 1px solid var(--glass-border) !important;
      margin: 0 !important;
      padding: 0.3rem 0.65rem !important;
      line-height: 1.25;
      min-width: 2rem;
      text-align: center;

      &:hover,
      &:focus {
        background: var(--glass-bg-hover) !important;
        background-color: var(--glass-bg-hover) !important;
        border-color: var(--glass-border) !important;
        color: inherit !important;
        box-shadow:
          inset 0 1px 0 var(--glass-highlight),
          0 2px 8px var(--glass-shadow);
        z-index: 1;
      }

      &:focus-visible {
        outline: none;
        border-color: rgba($primary, 0.45) !important;
        box-shadow:
          0 0 0 0.15rem rgba($primary, 0.18),
          inset 0 1px 0 var(--glass-highlight);
      }
    }

    .paginate_button.current .page-link,
    .paginate_button.current > a,
    .page-item.active .page-link,
    .paginate_button.active .page-link {
      background: #{$glass-accent} !important;
      background-color: #{$glass-accent} !important;
      border-color: #{$glass-accent} !important;
      color: #fff !important;
      box-shadow:
        0 4px 14px rgba($primary, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);

      &:hover,
      &:focus {
        background: #{$glass-accent} !important;
        background-color: #{$glass-accent} !important;
        border-color: #{$glass-accent} !important;
        color: #fff !important;
      }
    }

    .paginate_button.disabled .page-link,
    .paginate_button.disabled > a,
    .page-item.disabled .page-link {
      background: var(--glass-bg) !important;
      background-color: var(--glass-bg) !important;
      border-color: var(--glass-border) !important;
      color: inherit !important;
      opacity: 0.45;
      pointer-events: none;
      box-shadow: inset 0 1px 0 var(--glass-highlight);
    }
  }
}

// Bootstrap pagination outside DT (same glass chips)
.pagination {
  flex-wrap: wrap;
  gap: 0.2rem;

  .page-link {
    @include glass-input();
    border-radius: 0.55rem !important;
    color: inherit !important;
    background-color: var(--glass-bg) !important;
    border: 1px solid var(--glass-border) !important;
    margin: 0 !important;

    &:hover,
    &:focus {
      background: var(--glass-bg-hover) !important;
      background-color: var(--glass-bg-hover) !important;
      border-color: var(--glass-border) !important;
      color: inherit !important;
      z-index: 1;
    }
  }

  .page-item.active .page-link {
    background: #{$glass-accent} !important;
    background-color: #{$glass-accent} !important;
    border-color: #{$glass-accent} !important;
    color: #fff !important;
  }

  .page-item.disabled .page-link {
    background: var(--glass-bg) !important;
    background-color: var(--glass-bg) !important;
    border-color: var(--glass-border) !important;
    color: inherit !important;
    opacity: 0.45;
  }
}

.stati {
  @include glass-surface(calc(var(--glass-radius) * 0.9));
  background: var(--glass-bg) !important;
  background-color: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  color: inherit !important;
  box-shadow:
    0 8px 32px var(--glass-shadow),
    inset 0 1px 0 var(--glass-highlight) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  margin: 0.65rem 0;

  &:hover {
    background: var(--glass-bg-hover) !important;
    box-shadow:
      0 12px 40px var(--glass-elevated-shadow),
      inset 0 1px 0 var(--glass-highlight) !important;
  }

  .stati-content .stati-value,
  .stati-content .stati-subtitle {
    color: inherit !important;
  }

  i,
  svg {
    color: inherit !important;
    opacity: 0.85;
  }
}

// body prefix beats AdminLTE/www CSS load order
body .box {
  @include glass-floating(calc(var(--glass-radius) * 0.9));
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  color: inherit;
  overflow: visible;

  > .box-header,
  &.box-primary > .box-header,
  &.box-solid.box-primary > .box-header,
  &.box-solid.box-success > .box-header,
  &.box-solid.box-info > .box-header,
  &.box-solid.box-warning > .box-header,
  &.box-solid.box-danger > .box-header {
    background: color-mix(in srgb, var(--glass-bg-hover) 75%, transparent) !important;
    background-color: color-mix(in srgb, var(--glass-bg-hover) 75%, transparent) !important;
    border-bottom: 1px solid var(--glass-border) !important;
    border-top-color: var(--glass-border) !important;
    color: inherit !important;
  }

  &.box-primary,
  &.box-info,
  &.box-success,
  &.box-warning,
  &.box-danger,
  &.box-solid.box-primary,
  &.box-solid.box-info,
  &.box-solid.box-success,
  &.box-solid.box-warning,
  &.box-solid.box-danger {
    border-top-color: var(--glass-border) !important;
    border-color: var(--glass-border) !important;
  }

  > .box-body {
    background: transparent !important;
    background-color: transparent !important;
    color: inherit;
  }
}

// valueBox / infoBox — glass surface + soft status tint (not solid AdminLTE fills)
body .small-box,
body .info-box,
body .small-box.bg-aqua,
body .small-box.bg-blue,
body .small-box.bg-green,
body .small-box.bg-yellow,
body .small-box.bg-red,
body .small-box.bg-navy,
body .small-box.bg-teal,
body .small-box.bg-purple,
body .small-box.bg-maroon,
body .small-box.bg-orange,
body .info-box.bg-aqua,
body .info-box.bg-blue,
body .info-box.bg-green,
body .info-box.bg-yellow,
body .info-box.bg-red,
body .info-box.bg-navy,
body .info-box.bg-teal,
body .info-box.bg-purple,
body .info-box.bg-maroon,
body .info-box.bg-orange,
body .bg-navy,
body .bg-teal,
body .bg-green,
body .bg-aqua {
  @include glass-surface(calc(var(--glass-radius) * 0.9));
  background: var(--glass-bg) !important;
  background-color: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  color: inherit !important;
  overflow: hidden;
  box-shadow:
    0 12px 36px var(--glass-elevated-shadow),
    inset 0 1px 0 var(--glass-highlight) !important;

  .inner,
  .small-box-footer,
  .info-box-content,
  .info-box-number,
  .info-box-text,
  .info-box-icon {
    background: transparent !important;
    color: inherit !important;
  }

  // Status accent: subtle wash + icon tint instead of solid AdminLTE swatches
  &.bg-aqua,
  &.bg-blue {
    background: color-mix(in srgb, var(--bs-info, #5ac8fa) 18%, var(--glass-bg)) !important;
    background-color: color-mix(in srgb, var(--bs-info, #5ac8fa) 18%, var(--glass-bg)) !important;
  }
  &.bg-green {
    background: color-mix(in srgb, var(--bs-success, #34c759) 18%, var(--glass-bg)) !important;
    background-color: color-mix(in srgb, var(--bs-success, #34c759) 18%, var(--glass-bg)) !important;
  }
  &.bg-yellow,
  &.bg-orange {
    background: color-mix(in srgb, var(--bs-warning, #ff9500) 18%, var(--glass-bg)) !important;
    background-color: color-mix(in srgb, var(--bs-warning, #ff9500) 18%, var(--glass-bg)) !important;
  }
  &.bg-red,
  &.bg-maroon {
    background: color-mix(in srgb, var(--bs-danger, #ff3b30) 18%, var(--glass-bg)) !important;
    background-color: color-mix(in srgb, var(--bs-danger, #ff3b30) 18%, var(--glass-bg)) !important;
  }
  &.bg-purple,
  &.bg-navy {
    background: color-mix(in srgb, var(--bs-primary, #007aff) 16%, var(--glass-bg)) !important;
    background-color: color-mix(in srgb, var(--bs-primary, #007aff) 16%, var(--glass-bg)) !important;
  }

  .icon,
  .icon-large,
  .info-box-icon > i,
  .info-box-icon > span {
    color: inherit !important;
    opacity: 0.4;
  }

  // Icon gutter: keep a soft glass plate so status icons read on both presets
  .icon,
  .info-box-icon {
    background: color-mix(in srgb, var(--glass-bg-hover) 55%, transparent) !important;
  }
}

// bs4Dash smallBox / valueBox extras — even chrome across status classes
body .small-box .icon > i,
body .info-box .info-box-icon > i {
  transition: opacity 0.2s ease;
}

body .small-box:hover .icon > i,
body .info-box:hover .info-box-icon > i {
  opacity: 0.55;
}

// ---------------------------------------------------------------------------
// AdminLTE2 (shinydashboard) + AdminLTE3 (bs4Dash) chrome
// Overlay-friendly: glass surfaces without rewriting AdminLTE layout.
// High-specificity body/skin selectors beat AdminLTE skin-*.css.
// ---------------------------------------------------------------------------

// Page shell: let glass orbs / gradient show through
body.skin-blue,
body.skin-blue-light,
body.skin-black,
body.skin-black-light,
body.skin-green,
body.skin-green-light,
body.skin-purple,
body.skin-red,
body.skin-yellow,
body.hold-transition,
body.layout-fixed,
body.sidebar-mini,
body.sidebar-collapse {
  background: transparent !important;
  background-color: transparent !important;
}

body .wrapper,
body .content-wrapper,
body .right-side,
body .main-footer {
  background: transparent !important;
  background-color: transparent !important;
}

// Header logo + navbar
body .main-header .logo,
body .main-header .navbar,
body.skin-blue .main-header .logo,
body.skin-blue .main-header .navbar,
body.skin-blue-light .main-header .logo,
body.skin-blue-light .main-header .navbar,
body.skin-black .main-header .logo,
body.skin-black .main-header .navbar,
body.skin-black-light .main-header .logo,
body.skin-black-light .main-header .navbar,
body.skin-green .main-header .logo,
body.skin-green .main-header .navbar,
body.skin-purple .main-header .logo,
body.skin-purple .main-header .navbar,
body.skin-red .main-header .logo,
body.skin-red .main-header .navbar,
body.skin-yellow .main-header .logo,
body.skin-yellow .main-header .navbar {
  @include glass-surface(0);
  background: var(--glass-bg) !important;
  background-color: var(--glass-bg) !important;
  border-color: var(--glass-border) !important;
  color: inherit !important;
  box-shadow: inset 0 1px 0 var(--glass-highlight) !important;
}

body .main-header {
  max-height: none;
  border-bottom: 1px solid var(--glass-border) !important;
  box-shadow: 0 8px 28px var(--glass-shadow) !important;
}

body .main-header .logo,
body .main-header .logo:hover {
  color: inherit !important;
  font-weight: 600;
  letter-spacing: -0.02em;
  border-right: 1px solid var(--glass-border) !important;
}

body .main-header .navbar .nav > li > a,
body .main-header .navbar .sidebar-toggle {
  color: inherit !important;
  background: transparent !important;

  &:hover,
  &:focus {
    background: var(--glass-bg-hover) !important;
    color: inherit !important;
  }
}

// Left sidebar (fixed AdminLTE column — translucent glass, not solid skin)
body .main-sidebar,
body .left-side,
body.skin-blue .main-sidebar,
body.skin-blue-light .main-sidebar,
body.skin-black .main-sidebar,
body.skin-black-light .main-sidebar,
body.skin-green .main-sidebar,
body.skin-purple .main-sidebar,
body.skin-red .main-sidebar,
body.skin-yellow .main-sidebar,
body .main-sidebar .sidebar {
  background: color-mix(in srgb, var(--glass-bg) 92%, transparent) !important;
  background-color: color-mix(in srgb, var(--glass-bg) 92%, transparent) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) !important;
  border-right: 1px solid var(--glass-border) !important;
  box-shadow:
    8px 0 32px var(--glass-shadow),
    inset 0 1px 0 var(--glass-highlight) !important;
  color: inherit !important;
}

body .main-sidebar .user-panel,
body .main-sidebar .user-panel > .info,
body .main-sidebar .user-panel > .info > p,
body .main-sidebar .user-panel > .info > a {
  color: inherit !important;
}

// Menu links
body .sidebar-menu > li > a,
body .sidebar-menu > li > .treeview-menu > li > a,
body.skin-blue .sidebar-menu > li > a,
body.skin-black .sidebar-menu > li > a,
body.skin-blue .sidebar a,
body.skin-black .sidebar a {
  color: inherit !important;
  border-left-color: transparent !important;
  opacity: 0.82;
  transition: background 0.2s ease, opacity 0.2s ease;
}

body .sidebar-menu > li:hover > a,
body .sidebar-menu > li.active > a,
body .sidebar-menu > li.menu-open > a,
body.skin-blue .sidebar-menu > li:hover > a,
body.skin-blue .sidebar-menu > li.active > a,
body.skin-black .sidebar-menu > li:hover > a,
body.skin-black .sidebar-menu > li.active > a {
  background: var(--glass-bg-hover) !important;
  background-color: var(--glass-bg-hover) !important;
  color: inherit !important;
  border-left-color: var(--bs-primary, #007aff) !important;
  opacity: 1;
}

body .sidebar-menu > li > .treeview-menu {
  background: color-mix(in srgb, var(--glass-bg) 70%, transparent) !important;
  margin: 0 !important;
}

// Form controls inside AdminLTE sidebar
body .main-sidebar .form-control,
body .main-sidebar .selectize-input,
body .main-sidebar .irs--shiny .irs-line {
  background: var(--glass-bg) !important;
  border-color: var(--glass-border) !important;
  color: inherit !important;
}

// Footer
body .main-footer {
  border-top: 1px solid var(--glass-border) !important;
  color: inherit !important;
}

// bs4Dash / AdminLTE3 extras
body .navbar-white,
body .navbar-light,
body .navbar-dark,
body .brand-link,
body .main-header .navbar-nav .nav-link {
  background: transparent !important;
  color: inherit !important;
}

body .brand-link {
  border-bottom: 1px solid var(--glass-border) !important;
}

body .control-sidebar,
body .control-sidebar-dark,
body .control-sidebar-light {
  background: color-mix(in srgb, var(--glass-bg) 94%, transparent) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) !important;
  border-left: 1px solid var(--glass-border) !important;
  color: inherit !important;
}

body .reactable,
body .Reactable {
  @include glass-surface(calc(var(--glass-radius) * 0.85));
  background: var(--glass-bg) !important;
  background-color: var(--glass-bg) !important;
  color: inherit !important;
  padding: 0.35rem 0.5rem;
  margin-bottom: 0.75rem;
  overflow: visible;

  .rt-table {
    background: transparent !important;
    color: inherit;
    border-color: var(--glass-border) !important;
  }

  .rt-thead .rt-th {
    background: var(--glass-bg-hover) !important;
    border-bottom: 1px solid var(--glass-border) !important;
    border-left-color: color-mix(in srgb, var(--glass-border) 45%, transparent) !important;
    color: inherit !important;
    font-weight: 600;
  }

  .rt-tbody .rt-tr-group .rt-td {
    background: transparent !important;
    border-bottom: 1px solid color-mix(in srgb, var(--glass-border) 55%, transparent);
    border-top-color: color-mix(in srgb, var(--glass-border) 35%, transparent) !important;
    color: inherit !important;
  }

  .rt-tbody .rt-tr-group:nth-child(even) .rt-td,
  .rt-tr-striped {
    background: color-mix(in srgb, var(--glass-bg) 70%, transparent) !important;
  }

  .rt-tbody .rt-tr-group:hover .rt-td,
  .rt-tr-highlight:hover {
    background: var(--glass-bg-hover) !important;
  }

  .rt-td-inner,
  .rt-th-inner,
  .rt-text-content {
    color: inherit !important;
  }

  .rt-filter,
  .rt-search,
  .rt-page-jump,
  .rt-page-size-select {
    @include glass-input();
    background-color: var(--glass-bg) !important;
    border-color: var(--glass-border) !important;
    color: inherit !important;
  }

  .rt-pagination {
    color: inherit;
    border-top-color: var(--glass-border) !important;

    .rt-page-button {
      @include glass-input();
      border-radius: 0.55rem !important;
      color: inherit !important;
      margin: 0 0.1rem;

      &.rt-page-button-current {
        background: color-mix(in srgb, var(--glass-bg-hover) 60%, $primary 40%) !important;
        border-color: rgba($primary, 0.35) !important;
      }
    }
  }
}

.billboarder-output,
.apexchart-output,
.leaflet.html-widget,
.leaflet.html-widget-output {
  @include glass-surface(calc(var(--glass-radius) * 0.85));
  padding: 0.45rem;
  margin-bottom: 0.75rem;
  overflow: hidden;
}

.leaflet-container {
  background: color-mix(in srgb, var(--glass-bg) 40%, #1a1a2e 60%);
  font-family: inherit;
}

// ---------------------------------------------------------------------------
// plotly — avoid white paper / opaque modebar floating on glass
// Layout paper_bgcolor can still be set in R; CSS covers toolbar chrome.
// ---------------------------------------------------------------------------

.js-plotly-plot,
.plotly.html-widget,
.plotly.html-widget-output {
  @include glass-surface(calc(var(--glass-radius) * 0.85));
  background: color-mix(in srgb, var(--glass-bg) 55%, transparent) !important;
  // Extra bottom padding so axis titles / tick labels aren't clipped by the
  // glass-surface overflow:hidden from the mixin.
  padding: 0.45rem 0.45rem 0.85rem;
  margin-bottom: 0.75rem;
  overflow: visible !important;
  max-width: 100%;
  box-sizing: border-box;
}

// Inner plotly container can still size to the card; don't re-clip titles
.js-plotly-plot .plotly,
.js-plotly-plot .plot-container,
.js-plotly-plot .svg-container {
  overflow: visible !important;
}

// Don't double-frame when plotly sits inside a generic shiny-html-output
.shiny-html-output:has(> .js-plotly-plot),
.shiny-html-output:has(> .plotly) {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.js-plotly-plot .plotly,
.js-plotly-plot .plot-container {
  background: transparent !important;
}

// Modebar (zoom / pan / download) — translucent glass, body ink icons
.js-plotly-plot .modebar-container,
.js-plotly-plot .modebar {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(calc(var(--glass-blur) * 0.7)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) * 0.7)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-border);
  border-radius: 0.65rem;
  box-shadow: inset 0 1px 0 var(--glass-highlight);
  padding: 0.15rem 0.25rem !important;
}

.js-plotly-plot .modebar-btn {
  border-radius: 0.4rem !important;

  &:hover {
    background: var(--glass-bg-hover) !important;
  }

  path {
    fill: var(--glass-body-color) !important;
    opacity: 0.85;
  }

  &:hover path,
  &.active path {
    fill: #{$glass-accent} !important;
    opacity: 1;
  }
}

.js-plotly-plot .modebar-group {
  background: transparent !important;
  border: none !important;
}

// Hover tooltip / colorbar labels pick up page font when possible
.js-plotly-plot .hovertext,
.js-plotly-plot .hoverlayer {
  font-family: inherit;
}

// ---------------------------------------------------------------------------
// gt — Posit grammar-of-tables (light shells by default)
// ---------------------------------------------------------------------------

.gt_table {
  @include glass-surface(calc(var(--glass-radius) * 0.75));
  background: var(--glass-bg) !important;
  background-color: var(--glass-bg) !important;
  color: var(--glass-body-color, inherit) !important;
  border-color: var(--glass-border) !important;
  // glass-surface sets overflow:hidden for rounded corners; allow horizontal
  // scroll so last column headers (e.g. "Petal Length") are not clipped.
  overflow-x: auto !important;
  overflow-y: hidden !important;
  margin-bottom: 0.75rem;
  max-width: 100%;
  width: 100%;
  table-layout: auto;
  border-collapse: separate;
  border-spacing: 0;

  th,
  td {
    color: inherit !important;
    border-color: color-mix(in srgb, var(--glass-border) 70%, transparent) !important;
    // Prefer wrap over ellipsis/clip in narrow glass cards
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    word-break: normal;
    hyphens: manual;
    vertical-align: bottom;
    line-height: 1.25;
  }
}

.gt_heading,
.gt_title,
.gt_subtitle,
.gt_caption {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--glass-body-color, inherit) !important;
  border-color: var(--glass-border) !important;
}

.gt_col_headings,
.gt_col_heading,
.gt_column_spanner,
.gt_column_spanner_outer,
.gt_stub_head {
  background: var(--glass-bg-hover) !important;
  background-color: var(--glass-bg-hover) !important;
  color: var(--glass-body-color, inherit) !important;
  border-color: var(--glass-border) !important;
  font-weight: 600;
  // Keep multi-word headers readable when the card is narrow
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  min-width: 4.5rem;
  padding-left: 0.55rem !important;
  padding-right: 0.55rem !important;
}

.gt_row,
.gt_stub,
.gt_table_body {
  background: transparent !important;
  color: inherit !important;
}

.gt_row.gt_striped,
.gt_striped {
  background: color-mix(in srgb, var(--glass-bg) 70%, transparent) !important;
}

.gt_summary_row,
.gt_grand_summary_row,
.gt_group_heading,
.gt_row_group_first {
  background: color-mix(in srgb, var(--glass-bg-hover) 80%, transparent) !important;
  color: inherit !important;
  border-color: var(--glass-border) !important;
  font-weight: 600;
}

.gt_sourcenote,
.gt_footnote,
.gt_footnotes,
.gt_footnote_marks {
  background: transparent !important;
  color: inherit !important;
  opacity: 0.85;
  border-color: var(--glass-border) !important;
}

.gt_from_md,
.gt_table a {
  color: #{$glass-accent};
}

// Don't double-frame gt inside shiny-html-output; allow the host to scroll
// when the table is wider than the glass card.
.shiny-html-output:has(.gt_table),
.gt_shiny,
.card:has(.gt_table) > .card-body,
.bslib-card:has(.gt_table) > .card-body {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  max-width: 100%;
}

.shiny-html-output:has(.gt_table) {
  // restore a little inset so glass rim of .gt_table still breathes
  padding: 0.15rem !important;
}

// ---------------------------------------------------------------------------
// Loading overlays — waiter / shinybusy / shinycssloaders / generic busy
// ---------------------------------------------------------------------------

.waiter-overlay,
#waiter-overlay,
.waiter-overlay-content,
div[id^="waiter-"] {
  backdrop-filter: blur(calc(var(--glass-blur) * 0.55)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) * 0.55)) saturate(var(--glass-saturate));
}

.waiter-overlay,
#waiter-overlay {
  background: color-mix(in srgb, var(--glass-page-bg, #000) 55%, transparent) !important;
}

.waiter-overlay-content {
  color: var(--glass-body-color, inherit) !important;
}

// shinybusy full-page / gif busy
.shinybusy,
.shinybusy-busy,
.shinybusy-ready {
  z-index: 9998 !important;
}

.shinybusy-overlay {
  background: color-mix(in srgb, var(--glass-page-bg, #000) 45%, transparent) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

// shinycssloaders wrapper — keep spinner readable, don't paint solid white
.load-container,
.shinycssloaders-wrapper {
  background: transparent !important;
}

// Base shiny busy indicator (1.7+)
.shiny-busy-indicator,
#shiny-notification-panel {
  z-index: 2000;
}

// shinyalert / sweetalert2 skins (common bolt-ons)
.swal2-popup,
.shinyalert-popup {
  @include glass-surface(1rem);
  background: var(--glass-menu-bg) !important;
  background-color: var(--glass-menu-bg) !important;
  color: var(--glass-menu-color, var(--glass-body-color)) !important;
  border: 1px solid var(--glass-border) !important;
}

.swal2-title,
.swal2-html-container,
.swal2-content {
  color: inherit !important;
}

.swal2-confirm.swal2-styled {
  background: #{$glass-accent} !important;
  color: #fff !important;
  border: none !important;
  border-radius: 0.75rem !important;
}

// ---------------------------------------------------------------------------
// shinydashboardPlus / denser AdminLTE extras
// (base AdminLTE header/sidebar/boxes already above)
// ---------------------------------------------------------------------------

// User panel + treeview in Plus
body .user-panel,
body .user-panel .info a {
  color: inherit !important;
}

body .user-panel .image img {
  border: 1px solid var(--glass-border);
  box-shadow: 0 4px 12px var(--glass-shadow);
}

// Right controlbar (Plus) already partly covered; strengthen content
body .control-sidebar .nav-tabs,
body .control-sidebar .nav-link {
  background: transparent !important;
  color: inherit !important;
  border-color: var(--glass-border) !important;
}

body .control-sidebar .nav-link.active {
  background: color-mix(in srgb, var(--glass-bg-hover) 55%, #{$glass-accent} 45%) !important;
  color: #fff !important;
  border-color: transparent !important;
}

// Navbar dropdowns (messages, notifications, user menu)
body .main-header .dropdown-menu,
body .navbar-nav > .user-menu > .dropdown-menu {
  @include glass-surface(0.85rem);
  background: var(--glass-menu-bg) !important;
  background-color: var(--glass-menu-bg) !important;
  color: var(--glass-menu-color) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: 0 16px 48px var(--glass-elevated-shadow) !important;
}

body .main-header .dropdown-item,
body .navbar-nav .dropdown-menu > li > a {
  color: var(--glass-menu-color) !important;

  &:hover {
    background: var(--glass-bg-hover) !important;
  }
}

// box tools / card tools
body .card-tools .btn,
body .box-tools .btn,
body .btn-tool {
  @include glass-input();
  color: inherit !important;
  border-radius: 0.5rem !important;
}

// direct chat (Plus)
body .direct-chat-messages {
  background: color-mix(in srgb, var(--glass-bg) 50%, transparent) !important;
}

body .direct-chat-text {
  background: var(--glass-bg-hover) !important;
  color: inherit !important;
  border-color: var(--glass-border) !important;
}

// star rating / description blocks
body .description-block,
body .product-info {
  color: inherit !important;
}

// ---------------------------------------------------------------------------
// rhandsontable — light glass frame; core grid CSS is third-party
// ---------------------------------------------------------------------------

.handsontable,
.shiny-html-output:has(.handsontable) {
  @include glass-surface(calc(var(--glass-radius) * 0.7));
  overflow: auto;
  max-width: 100%;
  margin-bottom: 0.75rem;
}

.handsontable {
  background: var(--glass-bg) !important;
  color: var(--glass-body-color) !important;

  th,
  td {
    background-color: transparent !important;
    color: inherit !important;
    border-color: color-mix(in srgb, var(--glass-border) 65%, transparent) !important;
  }

  th {
    background: var(--glass-bg-hover) !important;
    font-weight: 600;
  }

  .htDimmed {
    color: inherit !important;
    opacity: 0.65;
  }
}

// echarts / highcharter / apex host wrappers (toolbar sits outside plot SVG)
.echarts4r,
.highchart,
.apexcharts-canvas {
  max-width: 100%;
}

.html-widget.echarts4r,
.html-widget.highchart,
.apexchart-wrapper {
  @include glass-surface(calc(var(--glass-radius) * 0.85));
  padding: 0.45rem;
  margin-bottom: 0.75rem;
  overflow: hidden;
}

// .main-icon is position:absolute; need containing block on .title
.title {
  position: relative;
  overflow: hidden;
  margin-bottom: 1.25rem;
  padding-right: clamp(4.5rem, 12vw, 8.5rem);
}

.main-icon {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  left: auto !important;
  font-size: clamp(6rem, 11vw, 9.5rem) !important;
  line-height: 1 !important;
  z-index: 0 !important;
  opacity: 0.32;
  pointer-events: none;
}

.title .titre,
.title .soustitre {
  position: relative;
  z-index: 1;
}

// neutralize unused debug CSS from bundled www/styles.css
#magnifying-glass {
  position: static !important;
  font-size: inherit !important;
  width: auto !important;
  height: auto !important;
  border: none !important;
  top: auto !important;
  left: auto !important;
}

#magnifying-glass::before {
  display: none !important;
}

// flex min-width:auto + long URLs otherwise expand past the column
.row > [class*="col-"] {
  min-width: 0;
}

.row:has(.stati) {
  align-items: stretch;
}

.row:has(.stati) > [class*="col-"] {
  display: flex;
  flex-direction: column;
  min-width: 0;

  > * {
    min-width: 0;
    max-width: 100%;
  }
}

.stati {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  flex: 1 1 auto;
}

.stati .stati-content,
.stati .stati-value {
  overflow: hidden;
  max-width: 100%;
  text-overflow: ellipsis;
}

.shiny-html-output[id$="user_avatar"] {
  display: flex !important;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 7em;
  overflow: hidden;
  box-sizing: border-box;

  > img {
    flex: 0 0 auto;
    width: clamp(48px, 28%, 72px) !important;
    height: auto !important;
    max-width: 72px;
    border-radius: 0.55rem;
    object-fit: cover;
  }

  // dreamRs server uses display:table-cell on the text wrapper
  > div {
    display: block !important;
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    padding-left: 0 !important;
    vertical-align: unset !important;
  }

  a,
  span {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: break-all;
  }
}

body .shiny-output-error,
body .shiny-output-error-no-pat,
body .shiny-output-error-validation {
  @include glass-surface(calc(var(--glass-radius) * 0.85));
  background: var(--glass-bg) !important;
  color: inherit !important;
  line-height: 1.5 !important;
  padding: 2rem 1.25rem !important;
  text-align: center;
}

.plot-spin {
  background: transparent !important;
}

.titre,
.soustitre {
  color: inherit !important;
}

body .controls-pane {
  @include glass-surface(calc(var(--glass-radius) * 0.85));
  background: var(--glass-bg) !important;
  background-color: var(--glass-bg) !important;
  border-color: var(--glass-border) !important;
  color: inherit;
}

[data-glass-preset="dark"] {
  body::before,
  body::after {
    opacity: 0.95;
  }

  .shiny-notification,
  .selectize-dropdown {
    box-shadow:
      0 20px 56px var(--glass-elevated-shadow),
      inset 0 1px 0 var(--glass-highlight);
  }

  .dataTables_wrapper {
    table.dataTable tbody tr:nth-child(even) > td {
      background: color-mix(in srgb, var(--glass-bg) 85%, transparent);
    }

    .dataTables_length select,
    .dataTables_filter input {
      background-color: var(--glass-menu-bg);
    }
  }

  .bslib-sidebar-layout > .sidebar,
  .bslib-page-sidebar > .navbar {
    box-shadow:
      0 20px 56px var(--glass-elevated-shadow),
      0 6px 16px var(--glass-shadow),
      inset 0 1px 0 var(--glass-highlight);
  }

  .stati,
  .box,
  .small-box,
  .info-box,
  .reactable,
  .Reactable,
  .shiny-output-error,
  .shiny-output-error-no-pat {
    box-shadow:
      0 16px 48px var(--glass-elevated-shadow),
      inset 0 1px 0 var(--glass-highlight);
  }

  body .reactable,
  body .Reactable {
    .rt-tbody .rt-tr-group:nth-child(even) .rt-td,
    .rt-tr-striped {
      background: color-mix(in srgb, var(--glass-bg) 85%, transparent) !important;
    }
  }

  .js-plotly-plot .modebar-container,
  .js-plotly-plot .modebar {
    background: var(--glass-menu-bg) !important;
  }

  .gt_table {
    background: var(--glass-menu-bg) !important;
    background-color: var(--glass-menu-bg) !important;
  }

  .gt_row.gt_striped,
  .gt_striped {
    background: color-mix(in srgb, var(--glass-bg) 85%, transparent) !important;
  }

  .handsontable th {
    background: color-mix(in srgb, var(--glass-menu-bg) 90%, transparent) !important;
  }

  .waiter-overlay,
  #waiter-overlay {
    background: color-mix(in srgb, #000 65%, transparent) !important;
  }
}

// ---------------------------------------------------------------------------
// teal / teal.slice / teal.widgets
// Applied when options(teal.bs_theme = glass_theme()). Teal uses bslib
// sidebars, filter-cards, and many empty shiny-html-output placeholders.
// ---------------------------------------------------------------------------

.teal-body,
.teal-modules-wrapper {
  background: transparent;
}

.teal-navbar.nav {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  padding: 0.35rem 0.55rem;
  margin: 0 0 0.85rem;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  box-shadow:
    0 12px 36px var(--glass-elevated-shadow),
    inset 0 1px 0 var(--glass-highlight);

  a,
  .action-button,
  .nav-link {
    border-radius: 999px;
    padding: 0.35rem 0.75rem;
    color: inherit;
    opacity: 0.8;
    transition: opacity 0.2s ease, background 0.2s ease;

    &:hover {
      opacity: 1;
      background: var(--glass-bg-hover);
    }
  }
}

// Teal filter sidebars expand very wide by default; pin them to a
// floating column so main module tables are not buried underneath.
.teal-body .bslib-sidebar-layout {
  --teal-glass-sidebar-width: min(var(--_sidebar-width, 22rem), 26rem);

  > .sidebar.teal-sidebar,
  > .sidebar {
    position: absolute !important;
    top: var(--glass-float-margin) !important;
    bottom: auto !important;
    left: var(--glass-float-margin) !important;
    right: auto !important;
    width: var(--teal-glass-sidebar-width) !important;
    max-width: calc(100% - var(--glass-float-margin) * 2) !important;
    max-height: calc(100vh - var(--glass-float-margin) * 3 - 3.5rem) !important;
    z-index: 25 !important;
    overflow: auto !important;
    // More opaque than generic glass so dense tables don't show through
    background: color-mix(in srgb, var(--glass-menu-bg) 72%, transparent) !important;
    background-color: color-mix(in srgb, var(--glass-menu-bg) 72%, transparent) !important;
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) !important;
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--glass-radius) !important;
    box-shadow:
      0 16px 48px var(--glass-elevated-shadow),
      0 4px 12px var(--glass-shadow),
      inset 0 1px 0 var(--glass-highlight) !important;
  }

  &.sidebar-right > .sidebar.teal-sidebar,
  &.sidebar-right > .sidebar {
    left: auto !important;
    right: var(--glass-float-margin) !important;
  }

  &:not(.sidebar-collapsed) > .main,
  &:not(.sidebar-collapsed) > .main.bslib-page-main {
    padding-left: calc(
      var(--glass-float-margin) + var(--teal-glass-sidebar-width) + 0.85rem
    ) !important;
    padding-right: var(--glass-float-margin) !important;
  }

  &.sidebar-right:not(.sidebar-collapsed) > .main,
  &.sidebar-right:not(.sidebar-collapsed) > .main.bslib-page-main {
    padding-left: var(--glass-float-margin) !important;
    padding-right: calc(
      var(--glass-float-margin) + var(--teal-glass-sidebar-width) + 0.85rem
    ) !important;
  }

  &.sidebar-collapsed > .sidebar.teal-sidebar,
  &.sidebar-collapsed > .sidebar {
    opacity: 0;
    pointer-events: none;
    transform: translateX(calc(-100% - var(--glass-float-margin) * 2));
  }

  &.sidebar-right.sidebar-collapsed > .sidebar {
    transform: translateX(calc(100% + var(--glass-float-margin) * 2));
  }
}

.teal-filter-panel {
  background: transparent !important;
}

.teal-active-data-summary-panel,
.teal-active-data-summary,
.filter-card {
  @include glass-surface(calc(var(--glass-radius) * 0.75));
  background: color-mix(in srgb, var(--glass-bg) 70%, var(--glass-menu-bg) 30%) !important;
  border: 1px solid var(--glass-border) !important;
  color: inherit;
  overflow: visible;
  margin-bottom: 0.55rem;
}

.filter-card-header,
.filter-card-title,
.teal-active-data-summary-panel .accordion-button,
.teal-filter-panel .accordion-button,
.teal-body .accordion-button {
  background: color-mix(in srgb, var(--glass-bg-hover) 70%, $primary 30%) !important;
  color: inherit !important;
  border: none !important;
  box-shadow: inset 0 1px 0 var(--glass-highlight);
  font-weight: 600;
  letter-spacing: -0.02em;

  &:not(.collapsed) {
    background: color-mix(in srgb, var(--glass-bg-hover) 55%, $primary 45%) !important;
    color: inherit !important;
  }

  &:focus {
    box-shadow:
      inset 0 1px 0 var(--glass-highlight),
      0 0 0 0.15rem rgba($primary, 0.2);
  }

  &::after {
    filter: none;
    opacity: 0.75;
  }
}

.teal-body .accordion-item,
.teal-filter-panel .accordion-item {
  background: transparent;
  border: 1px solid var(--glass-border);
  border-radius: calc(var(--glass-radius) * 0.75);
  overflow: hidden;
  margin-bottom: 0.45rem;

  .accordion-body {
    background: color-mix(in srgb, var(--glass-bg) 80%, transparent);
    color: inherit;
  }
}

.filter-card-body,
.filter-card-summary {
  color: inherit;
  background: transparent;
}

.filter-card-summary-value,
.data-filter-badge-count {
  background: var(--glass-bg-hover);
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  color: inherit;
}

// Module tree dropdown
.teal-modules-tree {
  background: transparent;
  color: inherit;

  a {
    border-radius: 0.55rem;
    color: inherit;

    &:hover {
      background: var(--glass-bg-hover);
    }
  }
}

// Nested layout inside teal main (standard-layout-wrapper) should not
// re-float a second full-width sidebar over the module body.
.teal-body .main .bslib-sidebar-layout,
.teal-body .teal-widgets .bslib-sidebar-layout {
  > .sidebar:not(.teal-sidebar) {
    position: relative !important;
    width: auto !important;
    max-width: none !important;
    max-height: none !important;
    inset: auto !important;
    transform: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  > .main {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

// teal delayed-data modal form chrome
.modal-content {
  .form-control,
  .form-select,
  .selectize-input {
    background: color-mix(in srgb, var(--glass-menu-bg) 90%, transparent) !important;
  }
}



// ---------------------------------------------------------------------------


// Ambient specular drift (iOS-like vitality without device motion APIs)
@keyframes glass-ambient-specular {
  0%   { --glass-specular-x: 22%; --glass-specular-y: 10%; }
  35%  { --glass-specular-x: 68%; --glass-specular-y: 18%; }
  65%  { --glass-specular-x: 48%; --glass-specular-y: 8%; }
  100% { --glass-specular-x: 22%; --glass-specular-y: 10%; }
}

// Only when pointer is not over the surface — JS toggles .glass-specular-active
:root:not(.glass-pointer-active) {
  .card,
  form.well,
  .col-sm-4.well,
  .bslib-sidebar-layout > .sidebar,
  .navbar,
  .tabbable > .nav-tabs,
  .modal-content,
  .dropdown-menu {
    animation: glass-ambient-specular 14s ease-in-out infinite;
  }
}

// Legibility veil when content scrolls under floating sidebars/nav (subtle)
.bslib-sidebar-layout > .main::before {
  content: "";
  position: sticky;
  top: 0;
  display: block;
  height: 0.75rem;
  margin-bottom: -0.75rem;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--glass-body-bg) 55%, transparent),
    transparent
  );
  pointer-events: none;
  z-index: 3;
}

// iOS 27-style Liquid Glass intensity slider (glass_intensity_slider())
// Ultra Clear ←————→ Tinted
// ---------------------------------------------------------------------------
.glass-intensity-slider {
  --glass-intensity-track-h: 1.65rem;
  margin-bottom: 1rem;

  > .control-label {
    display: block;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin-bottom: 0.45rem;
  }

  .glass-intensity-row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
  }

  .glass-intensity-end {
    flex: 0 0 auto;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    opacity: 0.62;
    white-space: nowrap;
    user-select: none;
  }

  .glass-intensity-end.is-active {
    opacity: 1;
    color: var(--glass-accent, #{$primary});
  }

  .glass-intensity-track {
    position: relative;
    flex: 1 1 auto;
    height: var(--glass-intensity-track-h);
    border-radius: 999px;
    // Live glass material sample under the thumb
    background:
      linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.08) 0%,
        color-mix(in srgb, var(--glass-accent, #{$primary}) 18%, rgba(255, 255, 255, 0.35)) 100%
      );
    backdrop-filter: blur(calc(var(--glass-blur) * 0.7)) saturate(var(--glass-saturate));
    -webkit-backdrop-filter: blur(calc(var(--glass-blur) * 0.7)) saturate(var(--glass-saturate));
    border: 0.5px solid var(--glass-border);
    box-shadow:
      inset 0 0.5px 0 var(--glass-highlight),
      inset 0 -0.5px 0 var(--glass-lip),
      0 4px 16px var(--glass-shadow);
    overflow: hidden;
  }

  // Fill from left to thumb (tinted amount)
  .glass-intensity-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: calc(var(--glass-intensity, 0.45) * 100%);
    border-radius: inherit;
    background: linear-gradient(
      90deg,
      color-mix(in srgb, var(--glass-accent, #{$primary}) 12%, transparent),
      color-mix(in srgb, var(--glass-accent, #{$primary}) 38%, rgba(255, 255, 255, 0.25))
    );
    pointer-events: none;
    transition: width 0.05s linear;
  }

  input.glass-intensity-range {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0; // custom thumb via sibling; keep input for a11y hit target
    cursor: pointer;
    z-index: 2;
  }

  // Visible thumb (glass pill)
  .glass-intensity-thumb {
    position: absolute;
    top: 50%;
    left: calc(var(--glass-intensity, 0.45) * 100%);
    width: 1.85rem;
    height: 1.85rem;
    margin-left: -0.925rem;
    margin-top: -0.925rem;
    border-radius: 999px;
    background:
      linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.72) 0%,
        rgba(255, 255, 255, 0.38) 100%
      );
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    border: 0.5px solid rgba(255, 255, 255, 0.85);
    box-shadow:
      0 2px 10px rgba(0, 0, 0, 0.18),
      0 0 0 0.5px color-mix(in srgb, var(--glass-lip) 50%, transparent),
      inset 0 0.5px 0 rgba(255, 255, 255, 0.9);
    pointer-events: none;
    z-index: 1;
    transition: left 0.05s linear, transform 0.15s cubic-bezier(0.22, 1, 0.36, 1);
  }

  &.is-dragging .glass-intensity-thumb {
    transform: scale(1.08);
  }

  .glass-intensity-preview {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.4rem;
    margin-top: 0.55rem;
  }

  .glass-intensity-chip {
    height: 2.1rem;
    border-radius: 0.65rem;
    border: 0.5px solid var(--glass-border);
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    box-shadow:
      inset 0 0.5px 0 var(--glass-highlight),
      inset 0 -0.5px 0 var(--glass-lip);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 600;
    opacity: 0.75;
    letter-spacing: -0.01em;
  }

  .glass-intensity-hint {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.72rem;
    opacity: 0.55;
  }
}

:root[data-glass-preset="dark"] .glass-intensity-slider {
  .glass-intensity-thumb {
    background:
      linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.42) 0%,
        rgba(255, 255, 255, 0.18) 100%
      );
    border-color: rgba(255, 255, 255, 0.45);
  }

  .glass-intensity-track {
    background:
      linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.06) 0%,
        color-mix(in srgb, var(--glass-accent, #{$primary}) 28%, rgba(255, 255, 255, 0.14)) 100%
      );
  }
}

@media (prefers-reduced-transparency: reduce) {
  :root {
    --glass-intensity: 1 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .card,
  .well,
  .form-control,
  .form-select,
  .form-check-input,
  .btn,
  .action-button,
  .navbar,
  .tabbable > .nav-tabs,
  .bslib-sidebar-layout > .sidebar,
  .shiny-plot-output,
  .dataTables_wrapper,
  .value-box,
  .small-box,
  .info-box {
    transition: none !important;
    animation: none !important;
  }

  body.glass-nav-compact .navbar,
  body.glass-nav-compact .navbar.navbar-static-top,
  body.glass-nav-compact .navbar.navbar-default,
  body.glass-nav-expanded .navbar,
  body.glass-nav-compact .tabbable > .nav-tabs,
  body.glass-nav-expanded .tabbable > .nav-tabs {
    transform: none !important;
    opacity: 1 !important;
  }
}

// ---------------------------------------------------------------------------
// Mobile / narrow viewports
// Soften floating chrome, prevent horizontal scroll, keep tables usable.
// ---------------------------------------------------------------------------
@media (max-width: 575.98px) {
  :root {
    --glass-float-margin: 0.5rem;
  }

  html,
  body {
    // hidden (not clip) so wide DT/table children cannot grow page scrollWidth
    overflow-x: hidden;
    max-width: 100vw;
  }

  // Tighter page chrome
  .container,
  .container-fluid {
    padding-left: 0.65rem !important;
    padding-right: 0.65rem !important;
  }

  body.bslib-page-navbar > .navbar,
  .navbar.navbar-static-top,
  .navbar.navbar-default,
  .bslib-page-sidebar > .navbar {
    margin-left: var(--glass-float-margin) !important;
    margin-right: var(--glass-float-margin) !important;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  .card,
  form.well,
  .col-sm-4.well {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  // Stacked bslib sidebar (below sm we do not absolute-float): full-width glass
  .bslib-sidebar-layout {
    > .sidebar {
      // width + horizontal margin would overflow 100vw; inset via margin only
      box-sizing: border-box !important;
      width: auto !important;
      max-width: none !important;
      margin: var(--glass-float-margin) !important;
      // CSS min() — quote so Sass does not unit-check vh vs rem
      max-height: #{'min(70vh, 28rem)'} !important;
    }

    > .main,
    > .main.bslib-page-main {
      padding-left: var(--glass-float-margin) !important;
      padding-right: var(--glass-float-margin) !important;
      min-width: 0 !important;
    }

    > .collapse-toggle {
      // Keep toggle tappable above content
      z-index: 40 !important;
    }
  }

  // Value boxes / grids: never force cramped multi-columns
  .bslib-value-box {
    min-width: 0 !important;
  }

  .bslib-grid,
  .bslib-grid.grid {
    min-width: 0 !important;
  }

  // Tables: swipe inside the card; never expand the page
  .dataTables_wrapper,
  .dataTables_scroll,
  .dataTables_scrollHead,
  .dataTables_scrollBody,
  .reactable,
  .Reactable,
  .table-responsive,
  .card,
  .bslib-card {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .dataTables_wrapper,
  .dataTables_scroll,
  .dataTables_scrollBody,
  .reactable,
  .Reactable,
  .table-responsive {
    display: block;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  // DT clones a wide inner table for sticky headers; keep it in the scrollport
  .dataTables_scrollHeadInner,
  .dataTables_scrollHeadInner table,
  .dataTables_scrollBody table {
    max-width: none !important; // allow internal scroll width
  }

  .dataTables_wrapper {
    overflow: auto !important; // beat desktop `overflow: visible` glass frame
  }

  // Plots / images fill the card, not the viewport
  .shiny-plot-output,
  .shiny-image-output {
    max-width: 100% !important;
  }

  .shiny-plot-output img,
  .shiny-image-output img {
    max-width: 100% !important;
    height: auto !important;
  }

  // Inputs and buttons: full-width friendly
  .shiny-input-container {
    width: 100% !important;
    max-width: 100% !important;
  }

  .form-control,
  .form-select,
  .selectize-control,
  .selectize-input {
    max-width: 100% !important;
  }

  .btn,
  .action-button {
    max-width: 100%;
  }

  // Inline radio/checkbox groups wrap instead of overflowing
  .shiny-options-group,
  .checkbox-inline,
  .radio-inline,
  .form-check-inline {
    flex-wrap: wrap !important;
  }

  // Date range: stack start/end fields
  .shiny-date-range-input .input-daterange {
    flex-direction: column !important;
    gap: 0.5rem;
  }

  .shiny-date-range-input .input-daterange input {
    width: 100% !important;
    border-radius: 0.75rem !important;
  }

  // File input button row
  .input-group {
    flex-wrap: wrap;
    max-width: 100%;
  }

  // Modal full-bleed on phones
  .modal-dialog {
    margin: 0.5rem !important;
    max-width: calc(100% - 1rem) !important;
  }

  // Verbatim / pre blocks scroll
  pre,
  .shiny-text-output,
  .shiny-verbatim {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: pre-wrap;
    word-break: break-word;
  }
}

// Mid-size phones / small tablets in portrait: still soften sidebar reserve
@media (min-width: 576px) and (max-width: 767.98px) {
  .bslib-sidebar-layout {
    --glass-sidebar-reserve: calc(
      var(--glass-float-margin) + #{'min(var(--_sidebar-width, 250px), 42vw)'} +
        var(--glass-float-margin)
    );

    > .sidebar {
      width: #{'min(var(--_sidebar-width, 250px), 42vw)'} !important;
    }
  }
}

// Theme toggle (glass_theme_toggle()) — iOS Appearance segmented control.
// Selected thumb is theme-aware glass (changes in light vs dark), not a
// locked accent fill that looks identical in both modes.
.glass-theme-toggle {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.12rem;
  padding: 0.18rem;
  border-radius: 999px;
  background: var(--glass-bg);
  border: 0.5px solid var(--glass-border);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  box-shadow:
    inset 0 1px 0 var(--glass-highlight),
    0 8px 24px var(--glass-shadow);
}

.glass-theme-toggle .btn,
.glass-theme-toggle .action-button {
  min-width: 4.35rem;
  margin: 0 !important;
  border: none !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--glass-body-color) !important;
  opacity: 0.78;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.glass-theme-toggle .btn:hover,
.glass-theme-toggle .action-button:hover {
  opacity: 1;
  background: var(--glass-bg-hover) !important;
  color: var(--glass-body-color) !important;
}

.glass-theme-toggle .btn.btn-primary,
.glass-theme-toggle .btn[aria-pressed="true"],
.glass-theme-toggle .action-button.btn-primary {
  opacity: 1;
  font-weight: 600;
  color: var(--glass-body-color) !important;
  background: color-mix(in srgb, var(--glass-bg) 35%, var(--glass-body-color) 12%) !important;
  box-shadow:
    inset 0 0.5px 0 var(--glass-highlight),
    0 1px 6px var(--glass-shadow),
    0 0 0 0.5px var(--glass-border) !important;
}

// Runtime accent: primary buttons follow --glass-accent.
// Must use the `background` shorthand with !important to beat
// glass-button-tinted($primary)'s earlier `background: color-mix(...) !important`.
.btn-primary,
.action-button.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #{$glass-accent};
  --bs-btn-border-color: #{$glass-accent};
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: color-mix(in srgb, #{$glass-accent} 88%, #000 12%);
  --bs-btn-hover-border-color: color-mix(in srgb, #{$glass-accent} 88%, #000 12%);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: color-mix(in srgb, #{$glass-accent} 80%, #000 20%);
  --bs-btn-active-border-color: color-mix(in srgb, #{$glass-accent} 80%, #000 20%);
  color: #fff !important;
  background: #{$glass-accent} !important;
  border-color: #{$glass-accent} !important;

  &:hover,
  &:focus {
    color: #fff !important;
    background: color-mix(in srgb, #{$glass-accent} 88%, #000 12%) !important;
    border-color: color-mix(in srgb, #{$glass-accent} 88%, #000 12%) !important;
  }

  &:active,
  &.active {
    color: #fff !important;
    background: color-mix(in srgb, #{$glass-accent} 80%, #000 20%) !important;
    border-color: color-mix(in srgb, #{$glass-accent} 80%, #000 20%) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root:not(.glass-pointer-active) {
    .card,
    form.well,
    .col-sm-4.well,
    .bslib-sidebar-layout > .sidebar,
    .navbar,
    .tabbable > .nav-tabs,
    .modal-content,
    .dropdown-menu {
      animation: none !important;
    }
  }
}
