/**
 * 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.
 *
 * OSHAL Surface Glass
 * -----------------------------------------------------------------------------
 * Additive glass 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 enhance explicit framework/card classes, but it must not
 * hijack an app's internal layout.
 */

:root {
  --oshal-glass-bg: linear-gradient(
    145deg,
    color-mix(in srgb, var(--bg-card, rgba(255, 255, 255, 0.115)) 88%, transparent),
    color-mix(in srgb, var(--bg-card, rgba(255, 255, 255, 0.032)) 44%, transparent)
  );
  --oshal-glass-bg-strong: linear-gradient(
    145deg,
    color-mix(in srgb, var(--bg-card-hover, rgba(255, 255, 255, 0.16)) 92%, transparent),
    color-mix(in srgb, var(--bg-card, rgba(255, 255, 255, 0.055)) 58%, transparent)
  );
  --oshal-glass-bg-subtle: color-mix(in srgb, var(--bg-card, rgba(255, 255, 255, 0.055)) 72%, transparent);
  --oshal-glass-border: var(--glass-border, var(--border-color, rgba(255, 255, 255, 0.16)));
  --oshal-glass-border-strong: var(--border-color-hover, rgba(255, 255, 255, 0.25));
  --oshal-glass-shadow: 0 18px 52px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.075);
  --oshal-glass-shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.055);
  --oshal-glass-blur: 28px;
  --oshal-control-bg: color-mix(in srgb, var(--bg-secondary, rgba(8, 10, 20, 0.46)) 84%, transparent);
}

html {
  color-scheme: dark light;
}

body {
  background-attachment: fixed;
}

: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,
  .modal-content, .modal-container, .mesh-panel, .ticket-detail-panel,
  .toast, .empty-card, .queue-card, .ops-card
) {
  background: var(--oshal-glass-bg) !important;
  border-color: var(--oshal-glass-border) !important;
  box-shadow: var(--oshal-glass-shadow-soft);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :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,
    .modal-content, .modal-container, .mesh-panel, .ticket-detail-panel,
    .toast, .empty-card, .queue-card, .ops-card
  ) {
    backdrop-filter: blur(var(--oshal-glass-blur)) saturate(145%);
    -webkit-backdrop-filter: blur(var(--oshal-glass-blur)) saturate(145%);
  }
}

: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;
  box-shadow: var(--oshal-glass-shadow);
}

:where(.connector-select) {
  background: var(--oshal-control-bg) !important;
  border-color: var(--oshal-glass-border) !important;
  color: var(--text-primary, var(--text, #eef2ff));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

: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);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
}

:where(.modal-overlay, .mesh-overlay, .ticket-detail-overlay) {
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
}

@media (prefers-reduced-transparency: reduce) {
  :root {
    --oshal-glass-bg: var(--bg-card, #121420);
    --oshal-glass-bg-strong: var(--bg-card-hover, #181c2c);
    --oshal-glass-bg-subtle: var(--bg-secondary, #181c2c);
    --oshal-control-bg: var(--bg-secondary, #080a14);
  }

  :where(*) {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* The same semantic surface classes keep their layout and pick up the selected
   Workspace finish. Higher specificity avoids order-dependent glass overrides. */
html[data-theme="workspace"] {
  --oshal-glass-bg: var(--bg-card);
  --oshal-glass-bg-strong: var(--bg-card-hover);
  --oshal-glass-bg-subtle: var(--bg-secondary);
  --oshal-glass-border: var(--border-color);
  --oshal-glass-border-strong: var(--border-color-hover);
  --oshal-glass-shadow: var(--card-shadow);
  --oshal-glass-shadow-soft: var(--panel-shadow);
  --oshal-glass-blur: 0px;
  --oshal-control-bg: var(--bg-card);
}