/* ═══════════════════════════════════════════════════════════════════════════
   OMNIS — Unified Theme v1.0 (omnis-unified-theme.css)
   
   Neural × Pulse Design System — Applied Globally
   
   PURPOSE: Single source of truth that unifies Dock, Connect, Yard, and
   Analytics pages to match Dispatch's design language. Loaded AFTER
   style.css and omnis-optimize.css. Replaces omnis-polish.css.
   
   LOAD ORDER:
     1. style.css         — master variables + base components
     2. omnis-optimize.css — responsive + color overrides
     3. omnis-unified-theme.css  ← THIS FILE (final authority)
   ═══════════════════════════════════════════════════════════════════════════ */


/* ─── §1  VARIABLE BRIDGE ──────────────────────────────────────────────────
   Connect.html declares its own :root (--s1, --s2, --s3, --red, --green…)
   This section maps those to the canonical Neural × Pulse tokens so both
   old and new class names resolve to the same values.
   ────────────────────────────────────────────────────────────────────────── */
:root {
  /* Connect surface aliases → master void/surface tokens */
  --s1:           var(--void-raised, #03050a);
  --s2:           rgba(8, 13, 22, .95);
  --s3:           rgba(12, 17, 28, .93);

  /* Connect border aliases → master border tokens */
  --b:            var(--border);
  --bh:           var(--border-2);

  /* Connect ink aliases → master ink tokens */
  --ink-4:        var(--muted, #141b2d);

  /* Connect color aliases → master signal tokens */
  --cyan:         var(--intel);
  --purple:       var(--neural);
  --amber:        var(--caution);

  /* Connect layout → master layout */
  --sidebar-w:    260px;
  --presence-w:   200px;
  --thread-w:     380px;
}


/* ─── §2  GLOBAL SHELL NORMALIZATION ───────────────────────────────────────
   Every page gets the same shell: void background, particle canvas behind,
   app-shell flex column, topbar + nav consistent height and look.
   ────────────────────────────────────────────────────────────────────────── */

/* Body — ensure void + Neural × Pulse font on ALL pages including Connect */
body {
  background: var(--void, #020408);
  color: var(--ink, #f0f4ff);
  font-family: var(--font, 'Syne', 'Inter', system-ui, sans-serif);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
  height: 100vh;
  margin: 0;
}

/* Selection highlight — crimson everywhere */
::selection { background: rgba(220, 38, 38, .18); }

/* App shell / Connect shell — same flex pattern */
.app-shell,
.shell {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  position: relative;
}

/* Particle canvas — always behind */
#particleCanvas {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 1;
}


/* ─── §3  TOPBAR — ONE TOPBAR TO RULE THEM ALL ─────────────────────────────
   Normalizes Connect's divergent topbar (56px, --s1 bg, no scan line)
   to match Dispatch's 64px Neural × Pulse topbar.
   ────────────────────────────────────────────────────────────────────────── */
.topbar {
  height: var(--topbar-h, 64px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px 0 0;
  background: rgba(1, 3, 7, .98);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  z-index: 40;
  backdrop-filter: blur(40px) saturate(1.4);
  -webkit-backdrop-filter: blur(40px) saturate(1.4);
  position: relative;
  box-shadow: 0 1px 0 rgba(220, 38, 38, .06), 0 4px 32px rgba(0, 0, 0, .5);
}

/* Neural scan line — crimson sweep on ALL pages */
.topbar::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%, transparent 15%,
    rgba(220, 38, 38, .6) 50%,
    transparent 85%, transparent 100%);
  opacity: 0;
  animation: neuralScan 5s ease-in-out infinite;
}

/* Connect topbar-logo — align to Neural × Pulse */
.topbar-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  height: 100%;
}
.topbar-logo span {
  font-family: var(--brand, 'Orbitron', sans-serif);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink);
  letter-spacing: .08em;
}

/* Topbar right cluster */
.topbar-right {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
}

/* Clock — unified mono style */
.clock,
.topbar-clock {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 400;
  color: var(--ink-3);
  letter-spacing: .12em;
  font-variant-numeric: tabular-nums;
}

/* Live dot — unified across dock/connect */
.topbar-dot,
#liveDot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--clear);
  box-shadow: 0 0 8px rgba(34, 197, 94, .5);
  flex-shrink: 0;
  transition: all .3s;
}

/* Version badge */
.topbar-right > span[style*="letter-spacing"] {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(220, 38, 38, .8);
  background: rgba(220, 38, 38, .06);
  border: 1px solid rgba(220, 38, 38, .12);
  padding: 3px 8px;
  border-radius: 4px;
}


/* ─── §4  NAV BAR — UNIFIED ────────────────────────────────────────────────
   Connect had no explicit nav styling. This ensures the nav bar injected
   by omnis-nav.js looks identical on every page.
   ────────────────────────────────────────────────────────────────────────── */
.nav {
  height: var(--nav-h, 42px);
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 24px;
  background: rgba(2, 4, 8, .95);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  z-index: 39;
  overflow-x: auto;
}
.nav::-webkit-scrollbar { display: none; }

.nav-item {
  height: 30px;
  padding: 0 16px;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 8px;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--ink-3);
  cursor: pointer;
  transition: all var(--t, 200ms);
  white-space: nowrap;
  position: relative;
}
.nav-item:hover:not([disabled]) {
  color: var(--ink-2);
  background: rgba(120, 140, 180, .05);
}
.nav-item.active {
  color: var(--ink);
  font-weight: 500;
  background: rgba(220, 38, 38, .08);
  border-color: rgba(220, 38, 38, .16);
}
.nav-item.active::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 8px; right: 8px;
  height: 2px;
  background: var(--critical, #dc2626);
  border-radius: 2px 2px 0 0;
}


/* ─── §5  GLASS PANELS — THE SIGNATURE LOOK ────────────────────────────────
   Every card/panel on every page gets the same glass treatment:
   dark translucent bg, subtle border, backdrop blur, hover lift.
   ────────────────────────────────────────────────────────────────────────── */
.glass,
.panel,
.dock-card,
.yard-card,
.yard-spot,
.chart-card,
.analytics-card,
.stat-card,
.card,
.scorecard {
  background: var(--glass, rgba(6, 10, 18, .94));
  border: 1px solid var(--border, rgba(120, 140, 180, .06));
  border-radius: var(--r-lg, 14px);
  box-shadow: var(--shadow-float, 0 4px 24px rgba(0,0,0,.6), 0 0 0 1px var(--border));
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  transition: border-color var(--t, 200ms), box-shadow var(--t, 200ms), transform var(--t, 200ms);
}
.glass:hover,
.panel:hover,
.dock-card:hover,
.yard-card:hover,
.yard-spot:hover,
.chart-card:hover,
.analytics-card:hover,
.scorecard:hover {
  border-color: var(--border-2, rgba(120, 140, 180, .10));
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .6), 0 0 0 1px var(--border-2);
}


/* ─── §6  KPI STRIP — DOCK / YARD / ANALYTICS ──────────────────────────────
   Unified strip layout: grid on desktop, flex-scroll on mobile,
   glass items with Neural × Pulse typography.
   ────────────────────────────────────────────────────────────────────────── */
.kpi-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
}
.kpi-strip-item {
  padding: 12px 18px;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: rgba(0, 0, 0, .15);
  transition: background var(--t, 200ms);
}
.kpi-strip-item:last-child { border-right: none; }
.kpi-strip-item:hover { background: rgba(0, 0, 0, .25); }

.kpi-strip-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.kpi-strip-val {
  font-family: var(--mono);
  font-size: 24px;
  font-weight: 300;
  color: var(--ink);
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.kpi-strip-val.caution  { color: var(--caution); }
.kpi-strip-val.critical { color: var(--critical-b); }
.kpi-strip-val.clear    { color: var(--clear); }

@media (max-width: 480px) {
  .kpi-strip { grid-template-columns: repeat(2, 1fr); }
}


/* ─── §7  DOCK PAGE — COMPONENT STYLES ─────────────────────────────────────
   These replace dock.html's inline <style> block.
   ────────────────────────────────────────────────────────────────────────── */

/* Page entrance */
@keyframes page-enter {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* Dock toolbar */
.dock-toolbar {
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
  background: rgba(2, 3, 10, .6);
  backdrop-filter: blur(12px);
}

/* Dock filter buttons */
.dock-filter-btn,
.filter-btn {
  height: 28px;
  padding: 0 12px;
  border: 1px solid var(--border-2);
  border-radius: 20px;
  background: transparent;
  color: var(--ink-3);
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
}
.dock-filter-btn.active,
.filter-btn.active {
  background: rgba(220, 38, 38, .06);
  border-color: rgba(220, 38, 38, .15);
  color: rgba(220, 38, 38, .9);
}
.dock-filter-btn:hover:not(.active),
.filter-btn:hover:not(.active) {
  border-color: var(--border-3);
  color: var(--ink-2);
}

.dock-count {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
}
.dock-count span { color: var(--ink-2); font-weight: 600; }

/* Dock scroll area */
.dock-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
}
.dock-scroll::-webkit-scrollbar { width: 3px; }
.dock-scroll::-webkit-scrollbar-thumb {
  background: rgba(220, 38, 38, .1);
  border-radius: 4px;
}

/* Dock grid */
.dock-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}

/* Dock card — extends §5 glass */
.dock-card {
  overflow: hidden;
  position: relative;
  cursor: default;
  border-radius: 14px;
}

/* Status accent bar at top of dock card */
.dock-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  transition: background .2s;
}
.dock-card.free::before      { background: rgba(120, 140, 200, .1); }
.dock-card.occupied::before  { background: linear-gradient(90deg, var(--caution), transparent); }
.dock-card.loading::before   { background: linear-gradient(90deg, var(--clear), transparent); animation: loadingBar 2s ease-in-out infinite; }
.dock-card.unloading::before { background: linear-gradient(90deg, var(--intel), transparent); animation: loadingBar 2s ease-in-out infinite; }
.dock-card.ready::before     { background: linear-gradient(90deg, var(--clear), transparent); }
.dock-card.delayed::before   { background: linear-gradient(90deg, var(--critical), transparent); }
@keyframes loadingBar { 0%,100% { opacity: 1; } 50% { opacity: .4; } }

/* Left edge indicator */
.dock-card::after {
  content: '';
  position: absolute;
  top: 2px; left: 0; bottom: 0;
  width: 3px;
}
.dock-card.occupied::after  { background: var(--caution); }
.dock-card.loading::after   { background: var(--clear); }
.dock-card.unloading::after { background: var(--intel); }
.dock-card.ready::after     { background: var(--clear); opacity: .5; }
.dock-card.delayed::after   { background: var(--critical); }

/* Dock card header */
.dock-card-head {
  padding: 12px 14px 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
  background: rgba(0, 0, 0, .2);
}
.dock-code {
  font-family: var(--mono);
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: .04em;
}
.dock-zone {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 1px;
}

/* Dock badges */
.dock-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 9px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  border-radius: 5px;
  border: 1px solid;
  white-space: nowrap;
}
.dock-badge::before { content: ''; width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
.dock-badge.free       { color: var(--ink-3);     border-color: var(--border-2);       background: transparent; }
.dock-badge.free::before    { background: var(--ink-3); }
.dock-badge.occupied   { color: var(--caution);   border-color: var(--caution-border); background: var(--caution-bg); }
.dock-badge.occupied::before { background: var(--caution); }
.dock-badge.loading    { color: var(--clear);     border-color: var(--clear-border);   background: var(--clear-bg); }
.dock-badge.loading::before  { background: var(--clear); animation: dotPulse 1.2s ease infinite; }
.dock-badge.unloading  { color: var(--intel);     border-color: var(--intel-border);   background: var(--intel-bg); }
.dock-badge.unloading::before { background: var(--intel); animation: dotPulse 1.2s ease infinite; }
.dock-badge.ready      { color: var(--clear);     border-color: var(--clear-border);   background: var(--clear-bg); font-weight: 800; }
.dock-badge.ready::before     { background: var(--clear); }
.dock-badge.delayed    { color: var(--critical-b); border-color: var(--critical-border); background: var(--critical-dim); }
.dock-badge.delayed::before   { background: var(--critical-b); animation: dotPulse .8s ease infinite; }
@keyframes dotPulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .2; transform: scale(.7); } }

/* Dock card body */
.dock-card-body { padding: 12px 16px 10px; }
.dock-empty {
  font-size: 12px;
  color: var(--ink-3);
  font-style: italic;
  padding: 4px 0 2px;
}
.dock-trailer-num {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: .04em;
}
.dock-carrier-name {
  font-size: 12px;
  color: var(--ink-3);
  margin-top: 2px;
}
.dock-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.dock-meta-chip {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-3);
  background: rgba(0, 0, 0, .3);
  border: 1px solid var(--border);
  padding: 2px 7px;
  border-radius: 4px;
}
.dock-plate-chip {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
}
.dock-plate-chip.up   { color: var(--clear); background: var(--clear-bg); border: 1px solid var(--clear-border); }
.dock-plate-chip.down { color: var(--ink-3); background: rgba(0,0,0,.3); border: 1px solid var(--border); }

/* Dock card actions */
.dock-actions {
  padding: 10px 14px 12px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  border-top: 1px solid var(--border);
}
.dock-btn {
  height: 32px;
  padding: 0 13px;
  border-radius: 7px;
  border: 1px solid;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
  font-family: var(--font);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.dock-btn:active { transform: scale(.95); }
.dock-btn.start        { background: var(--clear-bg);    border-color: var(--clear-border);    color: var(--clear); }
.dock-btn.start:hover  { background: rgba(34, 197, 94, .14); }
.dock-btn.finish       { background: var(--intel-bg);    border-color: var(--intel-border);    color: var(--intel); }
.dock-btn.finish:hover { background: rgba(59, 130, 246, .14); }
.dock-btn.clear        { background: var(--critical-dim); border-color: var(--critical-border); color: var(--critical-b); }
.dock-btn.clear:hover  { background: rgba(239, 68, 68, .14); }
.dock-btn.plate        { background: rgba(0,0,0,.3);     border-color: var(--border-2);        color: var(--ink-3); }
.dock-btn.plate:hover  { border-color: var(--border-3); color: var(--ink-2); }
.dock-btn.plate.raised { background: var(--clear-bg); border-color: var(--clear-border); color: var(--clear); }

/* Dock empty state */
.dock-empty-state {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  gap: 10px;
  text-align: center;
}
.dock-empty-state-icon  { font-size: 32px; opacity: .2; }
.dock-empty-state-title { font-size: 14px; font-weight: 500; color: var(--ink-3); }

/* Smart dock recommendation */
.dock-recommend-btn {
  height: 28px; padding: 0 10px;
  font-size: 10px; font-weight: 700;
  border-radius: 6px;
  background: rgba(220, 38, 38, .06);
  border: 1px solid rgba(220, 38, 38, .12);
  color: rgba(220, 38, 38, .9);
  cursor: pointer;
  font-family: var(--font);
  transition: all .15s;
  white-space: nowrap;
}
.dock-recommend-btn:hover { background: var(--critical); color: #fff; }
.dock-rec-panel {
  background: rgba(5, 9, 16, .99);
  border: 1px solid rgba(220, 38, 38, .12);
  border-radius: 10px;
  padding: 14px;
  margin-top: 8px;
  display: none;
}
.dock-rec-panel.open { display: block; }
.dock-rec-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 7px; margin-bottom: 4px;
  cursor: pointer; border: 1px solid var(--border); transition: all .15s;
}
.dock-rec-item:hover { border-color: rgba(220, 38, 38, .12); background: rgba(220, 38, 38, .06); }
.dock-rec-rank { font-family: var(--mono); font-size: 18px; font-weight: 400; color: rgba(220, 38, 38, .9); width: 28px; flex-shrink: 0; }
.dock-rec-code { font-size: 14px; font-weight: 600; color: var(--ink); min-width: 60px; }
.dock-rec-reason { font-size: 11px; color: var(--ink-3); flex: 1; }
.dock-rec-score { font-family: var(--mono); font-size: 11px; color: var(--clear); }


/* ─── §8  CONNECT PAGE — BRIDGE TO NEURAL × PULSE ─────────────────────────
   These selectors override Connect's inline styles with the unified
   design tokens. Connect's layout is preserved; only visuals change.
   ────────────────────────────────────────────────────────────────────────── */

/* Connect sidebar — glass treatment */
.sidebar {
  background: rgba(3, 5, 10, .92);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  border-right: 1px solid var(--border);
}

/* Connect search → neural focus */
.sb-search:focus { border-color: rgba(220, 38, 38, .25); }
.composer-input:focus { border-color: rgba(220, 38, 38, .25); }
.f-input:focus,
.f-select:focus,
.f-textarea:focus { border-color: rgba(220, 38, 38, .25); }

/* Connect new channel button */
.sb-new-ch {
  border-color: rgba(220, 38, 38, .18);
  background: rgba(220, 38, 38, .06);
  color: var(--critical);
}
.sb-new-ch:hover { background: rgba(220, 38, 38, .12); }

/* Connect section labels — use signal colors through CSS vars */
.sb-label.cat-general { color: var(--critical); }
.sb-label.cat-general::before { background: var(--critical); }

/* Channel active state — crimson */
.ch.active {
  background: rgba(220, 38, 38, .06);
  border-color: rgba(220, 38, 38, .12);
}
.ch-badge { background: var(--critical); }

/* Connect main chat area — glass bg */
.main {
  background: rgba(3, 5, 10, .92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Composer send button — crimson */
.comp-btn.send {
  background: var(--critical);
  border-color: var(--critical);
  color: #fff;
}
.comp-btn.send:hover {
  box-shadow: 0 0 16px rgba(220, 38, 38, .35);
  transform: scale(1.05);
}

/* Connect buttons — unified to Neural × Pulse */
.shell .btn-primary,
.modal .btn-primary {
  background: var(--critical);
  color: #fff;
  border: none;
  box-shadow: 0 2px 8px rgba(220, 38, 38, .35);
}
.shell .btn-primary:hover,
.modal .btn-primary:hover {
  background: var(--critical-b);
  box-shadow: 0 4px 20px rgba(220, 38, 38, .4);
}

/* Connect modals — glass + neural glow */
.modal-panel {
  background: rgba(3, 6, 12, .99);
  border: 1px solid var(--border-2);
  border-radius: var(--r-xl, 20px);
  box-shadow: 0 32px 80px rgba(0, 0, 0, .8), 0 0 40px rgba(220, 38, 38, .06);
}

/* Presence panel — glass bg */
.presence {
  background: rgba(3, 5, 10, .92);
  border-left: 1px solid var(--border);
}
.presence-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.presence-dot.online {
  background: var(--clear);
  box-shadow: 0 0 6px rgba(34, 197, 94, .5);
}

/* Connect toasts — match Dispatch */
.shell .toast-stack,
.toast-stack {
  position: fixed;
  z-index: 9000;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.shell .toast,
.toast {
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  background: rgba(5, 9, 16, .99);
  color: var(--ink-2);
  border: 1px solid var(--border-2);
  border-left: 2px solid rgba(220, 38, 38, .6);
  max-width: 300px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
  backdrop-filter: blur(30px);
}
.toast.success { border-left-color: var(--clear); color: var(--clear); }
.toast.error,
.toast.err    { border-left-color: var(--critical-b); color: var(--critical-b); }

/* Offline bar — crimson */
.offline-bar {
  background: rgba(220, 38, 38, .1);
  color: var(--critical-b);
  border-bottom: 1px solid rgba(220, 38, 38, .15);
}


/* ─── §9  YARD PAGE ────────────────────────────────────────────────────────
   Glass treatment + Neural × Pulse applied to yard spots/cards.
   ────────────────────────────────────────────────────────────────────────── */
.yard-card,
.yard-spot {
  /* extends §5 glass — just ensure the radius */
  border-radius: 10px;
}
.yard-card:hover,
.yard-spot:hover {
  border-color: var(--border-2);
}


/* ─── §10  ANALYTICS PAGE ──────────────────────────────────────────────────
   Chart cards and stat cards get the full glass treatment.
   ────────────────────────────────────────────────────────────────────────── */
.chart-card,
.analytics-card {
  border-radius: 12px;
  padding: 16px;
}


/* ─── §11  SCROLLBAR CONSISTENCY ───────────────────────────────────────────
   Thin crimson-tinted scrollbars everywhere — replaces the gray defaults
   and the wider omnis-polish.css scrollbars.
   ────────────────────────────────────────────────────────────────────────── */
::-webkit-scrollbar       { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(220, 38, 38, .1);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(220, 38, 38, .2);
}
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(220, 38, 38, .1) transparent;
}


/* ─── §12  TOAST — UNIFIED ANIMATION ───────────────────────────────────────
   Single set of toast keyframes for all pages.
   ────────────────────────────────────────────────────────────────────────── */
@keyframes tIn  { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@keyframes tOut { from { opacity: 1; } to { opacity: 0; transform: translateX(14px); } }


/* ─── §13  RESPONSIVE OVERRIDES ────────────────────────────────────────────
   Dock/Connect specific responsive tweaks that were in inline styles.
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .dock-grid { grid-template-columns: 1fr !important; }
  .dock-toolbar { flex-wrap: wrap; gap: 6px; }
  .dock-toolbar button { min-height: 40px; font-size: 12px; }
  .dock-actions { flex-wrap: wrap; gap: 5px; }
  .dock-actions button { flex: 1; min-width: 60px; min-height: 40px; font-size: 11px; }

  /* Connect responsive */
  .topbar { padding: 0 12px; }
  .topbar-right { gap: 8px; }
}

@media (max-width: 480px) {
  .dock-grid { grid-template-columns: 1fr !important; }
}