/**
 * CHANGE LOG
 * -----------------------------------------------------------------------------
 * SEQ                 | AUTHOR        | DESCRIPTION
 * -----------------------------------------------------------------------------
 * 1 | maintainer@emeraldcoastsystemsgroup.com   | Added shared glass treatment for static
 *                     |               | cockpit, app, and tool surfaces.
 * 2 | maintainer@emeraldcoastsystemsgroup.com | Let Workspace surfaces use opaque paper cards and palette-aware reduced-transparency controls.
 * 3 | maintainer@emeraldcoastsystemsgroup.com | A toast is no longer glass: it floats over the page and must stay opaque (Roger, 2026-11-06, F8; the Scan to Print error toast read through the page behind it).
 * 4 | maintainer@emeraldcoastsystemsgroup.com | The design standard's D1 (docs/ux/design-standard.md §2.1; reference products, Roger 2026-11-06): cards and panels are opaque and glass is for bars only. Every class this sheet styles keeps its name and layout, but paints an opaque --ds-surface with a 1px --ds-edge and no shadow; a modal is a float (--ds-elev-float with a hairline border); an overlay is the --ds-scrim with no blur; a status pill is a solid --ds-surface-2. No gradient, inset highlight, glow, hover lift or backdrop blur is left. The file stays because more than thirty platform and store pages link it.
 *
 * OSHAL Surface Glass (opaque since entry 4; the name is kept for the pages that link it)
 * -----------------------------------------------------------------------------
 * Additive surface styling for legacy/self-contained HTML surfaces. Keep this
 * intentionally conservative: broad selectors such as .panel, .card, .hero,
 * .item, button, and input are used differently across dozens of app surfaces.
 * This sheet may finish explicit framework/card classes, but it must not
 * hijack an app's internal layout.
 */

:root {
  /* The old names stay for pages that read them; each resolves to an opaque standard token. */
  --oshal-glass-bg: var(--ds-surface, var(--bg-primary));
  --oshal-glass-bg-strong: var(--ds-surface-3, var(--bg-primary));
  --oshal-glass-bg-subtle: var(--ds-surface-2, var(--bg-primary));
  --oshal-glass-border: var(--ds-edge, var(--border-color));
  --oshal-glass-border-strong: var(--ds-line-control, var(--border-color-hover));
  --oshal-glass-shadow: var(--ds-elev-float, none);
  --oshal-glass-shadow-soft: none;
  --oshal-glass-blur: 0px;
  --oshal-control-bg: var(--ds-surface, var(--bg-primary));
}

html {
  color-scheme: dark light;
}

/* Cards and panels: the panel layer (opaque, 1px edge, no shadow). */
:where(
  .glass-panel, .glass-card,
  .section-card, .surface-card, .app-card, .tool-card,
  .summary-card, .summary-tile, .stat-card, .metric-card, .kpi,
  .connector-card, .connector-kpi, .conn, .report-card,
  .mesh-panel, .ticket-detail-panel,
  .empty-card, .queue-card, .ops-card
) {
  background: var(--oshal-glass-bg) !important;
  border-color: var(--oshal-glass-border) !important;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* A modal is a float: opaque, a hairline border and the one float shadow. */
:where(.modal-content, .modal-container) {
  background: var(--oshal-glass-bg) !important;
  border-color: var(--ds-hairline, var(--border-color)) !important;
  box-shadow: var(--oshal-glass-shadow);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Hover changes the fill only: no lift, no shadow. */
:where(
  .connector-card:hover, .summary-card:hover,
  .app-card:hover, .tool-card:hover
) {
  background: var(--oshal-glass-bg-strong) !important;
  border-color: var(--oshal-glass-border-strong) !important;
}

:where(.connector-select) {
  background: var(--oshal-control-bg) !important;
  border-color: var(--ds-line-control, var(--border-color)) !important;
  color: var(--text-primary, var(--text, #eef2ff));
  box-shadow: none;
}

:where(
  .badge, .tag, .statuspill,
  .map-chip, .connector-icon-action, .connector-primary-action
) {
  border-color: var(--oshal-glass-border) !important;
}

:where(.statuspill) {
  background-color: var(--oshal-glass-bg-subtle);
}

/* The page behind a modal is dimmed, never blurred. */
:where(.modal-overlay, .mesh-overlay, .ticket-detail-overlay) {
  background: var(--ds-scrim, rgb(0 0 0 / 0.4));
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}