/* ═══════════════════════════════════════════════════════════════════
   ZAZ RACK WORKBOARD — Premium Dark Theme + Glassmorphism
   SCOPED: All styles contained within #workboard-view to avoid
   conflicts with the intake/dashboard styles.
   ═══════════════════════════════════════════════════════════════════ */

/* Variables scoped to #workboard-view only */
#workboard-view {
  /* Dark premium palette */
  --wb-bg-primary: #0a0e1a;
  --wb-bg-secondary: #111827;
  --wb-bg-tertiary: #1a2035;
  --wb-bg-card: rgba(17, 24, 39, 0.85);
  --wb-bg-hover: rgba(30, 41, 59, 0.8);
  --wb-glass: rgba(255, 255, 255, 0.03);
  --wb-glass-border: rgba(255, 255, 255, 0.08);
  --wb-glass-highlight: rgba(255, 255, 255, 0.12); 

  /* Text */
  --wb-text-primary: #f1f5f9;
  --wb-text-secondary: #94a3b8;
  --wb-text-muted: #64748b;
  --wb-text-accent: #38bdf8;

  /* AZ/Site neon accents */
  --wb-site-60: #00d4ff;
  --wb-site-61: #fbbf24;
  --wb-site-62: #f472b6;
  --wb-site-70: #34d399;
  --wb-site-71: #818cf8;
  --wb-site-72: #fb923c;
  /* 2026-08-25 — MAD (non-HUB regional) painted neutral light grey so it
     reads as "external / secondary" next to the three ZAZ hub-AZs (blue /
     amber / red). Was #a78bfa (violet). */
  --wb-site-mad: #9e9e9e;

  --wb-site-default: #64748b;

  /* Status colors */
  --wb-status-new: #38bdf8;
  --wb-status-confirmed: #22c55e;
  --wb-status-installed: #8b5cf6;
  --wb-status-rejected: #ef4444;
  --wb-status-rescheduled: #f59e0b;
  --wb-status-cancelled: #6b7280;
  --wb-status-missing: #f97316;
  --wb-status-unplanned: #06b6d4;

  /* Sizes */
  --wb-radius-sm: 6px;
  --wb-radius-md: 10px;
  --wb-radius-lg: 16px;
  --wb-radius-xl: 20px;
  --wb-shadow-glow: 0 0 20px rgba(56, 189, 248, 0.15);
  --wb-shadow-card: 0 4px 24px rgba(0, 0, 0, 0.4);
  --wb-transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

/* ── Base Reset ─────────────────────────────────────────────────── */
#workboard-view .wb-container {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  background: var(--wb-bg-primary);
  color: var(--wb-text-primary);
  min-height: calc(100vh - 48px);
  padding: 0;
  margin: 0;
  border-radius: 0;
}

#workboard-view .wb-container * { box-sizing: border-box; }

/* ── Live Pulse Bar (top) ───────────────────────────────────────── */
#workboard-view .wb-pulse-bar {
  background: linear-gradient(135deg, var(--wb-bg-secondary), var(--wb-bg-tertiary));
  border-bottom: 1px solid var(--wb-glass-border);
  padding: 10px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 100;
  /* backdrop-filter removed for performance */
}

#workboard-view .wb-pulse-stats {
  display: flex;
  gap: 20px;
  flex: 1;
}

#workboard-view .wb-pulse-stat {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--wb-text-secondary);
}

#workboard-view .wb-pulse-stat .num {
  font-size: 18px;
  font-weight: 700;
  color: var(--wb-text-primary);
  font-variant-numeric: tabular-nums;
}

#workboard-view .wb-pulse-stat .num.green { color: var(--wb-status-confirmed); }
#workboard-view .wb-pulse-stat .num.blue { color: var(--wb-status-new); }
#workboard-view .wb-pulse-stat .num.purple { color: var(--wb-status-installed); }
#workboard-view .wb-pulse-stat .num.red { color: var(--wb-status-rejected); }

#workboard-view .wb-pulse-progress {
  flex: 1;
  max-width: 300px;
  height: 6px;
  background: var(--wb-bg-primary);
  border-radius: 3px;
  overflow: hidden;
}

#workboard-view .wb-pulse-progress-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--wb-status-confirmed), #4ade80);
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

#workboard-view .wb-pulse-date {
  font-size: 13px;
  color: var(--wb-text-muted);
  font-weight: 500;
}

#workboard-view .wb-last-fetch {
  font-size: 12px;
  color: var(--text-secondary, #8b949e);
  padding: 6px 12px;
  background: rgba(56, 139, 253, 0.08);
  border: 1px solid rgba(56, 139, 253, 0.2);
  border-radius: 8px;
  margin-top: 8px;
  text-align: center;
}
#workboard-view .wb-last-fetch strong {
  color: var(--accent, #58a6ff);
}
#workboard-view .wb-last-fetch em {
  color: var(--text-primary, #e6edf3);
  font-style: normal;
  font-weight: 600;
}

/* ── Navigation Tabs ────────────────────────────────────────────── */
#workboard-view .wb-nav {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 4px;
  padding: 0 24px;
  min-height: 44px;
  border-bottom: 1px solid var(--wb-glass-border);
  background: var(--wb-bg-primary);
  position: sticky;
  top: 58px;
  z-index: 100;
}

#workboard-view .wb-nav-tab {
  padding: 10px 16px;
  font-size: 15px;
  font-weight: 600;
  color: var(--wb-text-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: var(--wb-transition);
  border-radius: var(--wb-radius-sm) var(--wb-radius-sm) 0 0;
  /* stretch to fill the nav height so the bottom border aligns with the nav border */
  align-self: stretch;
  display: flex;
  align-items: center;
}

#workboard-view .wb-nav-tab:hover {
  color: var(--wb-text-secondary);
  background: var(--wb-glass);
}

#workboard-view .wb-nav-tab.active {
  color: var(--wb-text-accent);
  border-bottom-color: var(--wb-text-accent);
  background: rgba(56, 189, 248, 0.05);
}

/* ── Nav right-side info cluster ────────────────────────────────── */
#workboard-view .wb-nav-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

#workboard-view .wb-nav-date {
  font-size: 15px;
  font-weight: 600;
  color: var(--wb-text-muted);
  white-space: nowrap;
}

#workboard-view .wb-nav-fetch {
  font-size: 15px;
  font-weight: 600;
  color: var(--wb-text-secondary);
  white-space: nowrap;
  padding: 4px 10px;
  background: rgba(56, 139, 253, 0.08);
  border: 1px solid rgba(56, 139, 253, 0.2);
  border-radius: 6px;
}

#workboard-view .wb-nav-fetch strong {
  color: #58a6ff;
  font-weight: 400;
}

/* ── Calendar Grid ──────────────────────────────────────────────── */
#workboard-view .wb-calendar {
  padding: 20px 24px;
}

#workboard-view .wb-calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

#workboard-view .wb-calendar-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.5px;
}

#workboard-view .wb-calendar-nav {
  display: flex;
  gap: 8px;
}

#workboard-view .wb-calendar-nav button {
  background: var(--wb-bg-tertiary);
  border: 1px solid var(--wb-glass-border);
  color: var(--wb-text-secondary);
  padding: 8px 14px;
  border-radius: var(--wb-radius-sm);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: var(--wb-transition);
}

#workboard-view .wb-calendar-nav button:hover {
  background: var(--wb-bg-hover);
  border-color: var(--wb-glass-highlight);
  color: var(--wb-text-primary);
}

#workboard-view .wb-calendar-nav button.active {
  background: rgba(56, 189, 248, 0.1);
  border-color: var(--wb-text-accent);
  color: var(--wb-text-accent);
}

#workboard-view .wb-week-header {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 0.2fr 0.2fr;
  gap: 8px;
  margin-bottom: 8px;
}

#workboard-view .wb-week-header span {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--wb-text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 8px;
}

#workboard-view .wb-month-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 0.2fr 0.2fr;
  gap: 8px;
}

/* ── Day Cell ───────────────────────────────────────────────────── */
#workboard-view .wb-day {
  background: var(--wb-bg-card);
  border: 1px solid var(--wb-glass-border);
  border-radius: var(--wb-radius-md);
  min-height: 140px;
  padding: 10px;
  transition: var(--wb-transition);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

#workboard-view .wb-day::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: transparent;
  transition: var(--wb-transition);
}

#workboard-view .wb-day:hover {
  border-color: var(--wb-glass-highlight);
  background: var(--wb-bg-hover);
}

#workboard-view .wb-day.today {
  border-color: var(--wb-text-accent);
  box-shadow: var(--wb-shadow-glow);
}

#workboard-view .wb-day.today::before {
  background: var(--wb-text-accent);
}

/* Other-month days (leading/trailing from prev/next month) — make the
   whole cell completely invisible (background, border, number — everything).
   Using `visibility:hidden` keeps the cell in the CSS grid so the rest of
   the calendar stays aligned, but nothing is painted. The cell can't be
   clicked or hovered either. */
#workboard-view .wb-day.other-month {
  visibility: hidden;
  pointer-events: none;
}

#workboard-view .wb-day.weekend {
  min-height: 80px;
  padding: 6px;
}

#workboard-view .wb-day.weekend .wb-site-card {
  font-size: 10px;
  padding: 4px 6px;
}

#workboard-view .wb-day.weekend .wb-day-number {
  font-size: 11px;
}

#workboard-view .wb-day-number {
  font-size: 13px;
  font-weight: 700;
  color: var(--wb-text-secondary);
  margin-bottom: 8px;
}

#workboard-view .wb-day.today .wb-day-number {
  color: var(--wb-text-accent);
  background: rgba(56, 189, 248, 0.15);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

#workboard-view .wb-day-total {
  position: absolute;
  top: 8px;
  right: 10px;
  font-size: 11px;
  color: var(--wb-text-muted);
  font-weight: 500;
}

/* ── Site Cards in Day Cell ─────────────────────────────────────── */
#workboard-view .wb-site-card {
  padding: 6px 10px;
  border-radius: var(--wb-radius-sm);
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: var(--wb-transition);
  border-left: 3px solid transparent;
  cursor: pointer;
}

#workboard-view .wb-site-card:hover {
  background: var(--wb-bg-hover);
}

#workboard-view .wb-site-card .count {
  font-size: 11px;
  font-weight: 700;
  opacity: 0.9;
}

#workboard-view .wb-site-card .check {
  font-size: 10px;
  margin-right: 4px;
}

/* Site-specific colors — matching intake AZ group colors */
/* AZ60: ZAZ60 + ZAZ70 → Blue */
#workboard-view .wb-site-card[data-site="ZAZ60"] { background: rgba(21, 101, 192, 0.15); color: #42a5f5; border-left-color: #1565c0; }
#workboard-view .wb-site-card[data-site="ZAZ70"] { background: rgba(21, 101, 192, 0.15); color: #42a5f5; border-left-color: #42a5f5; }
/* AZ61: ZAZ61 + ZAZ71 → Yellow/Amber */
#workboard-view .wb-site-card[data-site="ZAZ61"] { background: rgba(249, 168, 37, 0.15); color: #ffca28; border-left-color: #f9a825; }
#workboard-view .wb-site-card[data-site="ZAZ71"] { background: rgba(249, 168, 37, 0.15); color: #ffca28; border-left-color: #ffca28; }
/* AZ62: ZAZ62 + ZAZ72 → Pink (#cf5dba family) */
#workboard-view .wb-site-card[data-site="ZAZ62"] { background: rgba(207, 93, 186, 0.15); color: #cf5dba; border-left-color: #a8419a; }
#workboard-view .wb-site-card[data-site="ZAZ72"] { background: rgba(207, 93, 186, 0.15); color: #cf5dba; border-left-color: #cf5dba; }
/* Other sites */
/* 2026-08-25 — MAD pill: neutral light grey (was violet #a78bfa). Both
   background and text colour follow --wb-site-mad now. */
#workboard-view .wb-site-card[data-site*="MAD"] { background: rgba(158, 158, 158, 0.15); color: var(--wb-site-mad); border-left-color: var(--wb-site-mad); }


#workboard-view .wb-day-more {
  font-size: 11px;
  color: var(--wb-text-muted);
  margin-top: 4px;
  cursor: pointer;
}

/* ── Side Panel ─────────────────────────────────────────────────── */
#workboard-view .wb-panel-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  z-index: 500;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

#workboard-view .wb-panel-overlay.open {
  opacity: 1;
  pointer-events: all;
}

#workboard-view .wb-panel {
  position: fixed;
  top: 0;
  right: -700px;
  width: 700px;
  height: 100vh;
  background: var(--wb-bg-secondary);
  border-left: 1px solid var(--wb-glass-border);
  z-index: 501;
  overflow-y: auto;
  transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.5);
}

#workboard-view .wb-panel.open {
  right: 0;
}

#workboard-view .wb-panel-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--wb-glass-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  background: var(--wb-bg-secondary);
  z-index: 10;
}

#workboard-view .wb-panel-title {
  font-size: 18px;
  font-weight: 700;
}

#workboard-view .wb-panel-close {
  background: var(--wb-bg-tertiary);
  border: 1px solid var(--wb-glass-border);
  color: var(--wb-text-secondary);
  width: 32px;
  height: 32px;
  border-radius: var(--wb-radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: var(--wb-transition);
}

#workboard-view .wb-panel-close:hover {
  background: rgba(239, 68, 68, 0.2);
  color: var(--wb-status-rejected);
  border-color: var(--wb-status-rejected);
}

#workboard-view .wb-panel-body {
  padding: 20px 24px;
}

/* ── Panel Sections ─────────────────────────────────────────────── */
#workboard-view .wb-section {
  margin-bottom: 24px;
}

#workboard-view .wb-section-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--wb-text-muted);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── Action Buttons ─────────────────────────────────────────────── */
#workboard-view .wb-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

#workboard-view .wb-btn {
  padding: 8px 16px;
  border-radius: var(--wb-radius-sm);
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--wb-glass-border);
  cursor: pointer;
  transition: var(--wb-transition);
  display: flex;
  align-items: center;
  gap: 6px;
}

#workboard-view .wb-btn-confirm {
  background: rgba(34, 197, 94, 0.15);
  color: var(--wb-status-confirmed);
  border-color: rgba(34, 197, 94, 0.3);
}
#workboard-view .wb-btn-confirm:hover { background: rgba(34, 197, 94, 0.3); }

#workboard-view .wb-btn-reject {
  background: rgba(239, 68, 68, 0.15);
  color: var(--wb-status-rejected);
  border-color: rgba(239, 68, 68, 0.3);
}
#workboard-view .wb-btn-reject:hover { background: rgba(239, 68, 68, 0.3); }

#workboard-view .wb-btn-reschedule {
  background: rgba(245, 158, 11, 0.15);
  color: var(--wb-status-rescheduled);
  border-color: rgba(245, 158, 11, 0.3);
}
#workboard-view .wb-btn-reschedule:hover { background: rgba(245, 158, 11, 0.3); }

#workboard-view .wb-btn-note {
  background: rgba(56, 189, 248, 0.15);
  color: var(--wb-text-accent);
  border-color: rgba(56, 189, 248, 0.3);
}
#workboard-view .wb-btn-note:hover { background: rgba(56, 189, 248, 0.3); }

#workboard-view .wb-btn-not-delivered {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
  border-color: rgba(245, 158, 11, 0.3);
  padding: 4px 8px;
  font-size: 13px;
}
#workboard-view .wb-btn-not-delivered:hover { background: rgba(245, 158, 11, 0.3); }

#workboard-view .wb-btn-secondary {
  background: var(--wb-bg-tertiary);
  color: var(--wb-text-secondary);
}
#workboard-view .wb-btn-secondary:hover { background: var(--wb-bg-hover); color: var(--wb-text-primary); }

/* ── Rack List in Panel ─────────────────────────────────────────── */
#workboard-view .wb-rack-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--wb-radius-sm);
  border: 1px solid var(--wb-glass-border);
  margin-bottom: 6px;
  transition: var(--wb-transition);
  background: var(--wb-glass);
}

#workboard-view .wb-rack-item:hover {
  background: var(--wb-bg-hover);
  border-color: var(--wb-glass-highlight);
}

#workboard-view .wb-rack-item input[type="checkbox"] {
  accent-color: var(--wb-status-confirmed);
  width: 16px;
  height: 16px;
}

#workboard-view .wb-rack-id {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--wb-text-primary);
  min-width: 90px;
}

#workboard-view .wb-rack-model {
  font-size: 12.5px;
  color: var(--wb-text-secondary);
  min-width: 80px;
}

#workboard-view .wb-rack-position {
  font-size: 12.5px;
  color: #ffffff;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-weight: 400;
  flex: 1;
}

/* Normal (install-flow) rows only: cap the model name and ellipsize it so a
   long model never squeezes the position onto a second line.
   DECOM and MOVEMENT rows are excluded on purpose (user request). */
#workboard-view .wb-rack-item:not(.wb-rack-decom):not(.wb-rack-movement) .wb-rack-model {
  max-width: 240px;
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#workboard-view .wb-rack-item:not(.wb-rack-decom):not(.wb-rack-movement) .wb-rack-position {
  flex: 1 0 auto;
  white-space: nowrap;
}

#workboard-view .wb-rack-status {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

#workboard-view .wb-rack-status.confirmed { background: rgba(34, 197, 94, 0.2); color: var(--wb-status-confirmed); }
#workboard-view .wb-rack-status.rejected { background: rgba(239, 68, 68, 0.2); color: var(--wb-status-rejected); }
#workboard-view .wb-rack-status.installed { background: rgba(139, 92, 246, 0.2); color: var(--wb-status-installed); }
#workboard-view .wb-rack-status.new { background: rgba(56, 189, 248, 0.2); color: var(--wb-status-new); }
#workboard-view .wb-rack-status.rescheduled { background: rgba(245, 158, 11, 0.2); color: var(--wb-status-rescheduled); }
#workboard-view .wb-rack-status.cancelled { background: rgba(107, 114, 128, 0.2); color: var(--wb-status-cancelled); }
#workboard-view .wb-rack-status.missing { background: rgba(249, 115, 22, 0.2); color: var(--wb-status-missing); }
#workboard-view .wb-rack-status.not_delivered { background: rgba(245, 158, 11, 0.2); color: #f59e0b; }

/* ── Notes Thread ───────────────────────────────────────────────── */
#workboard-view .wb-note {
  padding: 12px;
  border-radius: var(--wb-radius-sm);
  background: var(--wb-glass);
  border: 1px solid var(--wb-glass-border);
  margin-bottom: 8px;
}

#workboard-view .wb-note-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

#workboard-view .wb-note-author {
  font-size: 12px;
  font-weight: 600;
  color: var(--wb-text-accent);
}

#workboard-view .wb-note-time {
  font-size: 11px;
  color: var(--wb-text-muted);
}

#workboard-view .wb-note-content {
  font-size: 13px;
  color: var(--wb-text-secondary);
  line-height: 1.6;
  white-space: pre-wrap;       /* renders \n as line breaks AND wraps long lines */
  overflow-wrap: break-word;   /* break very long words/URLs so they don't overflow */
  word-break: break-word;      /* fallback for older browsers */
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  max-width: 100%;
  overflow: visible;           /* never clip content */
}

#workboard-view .wb-note-input {
  width: 100%;
  background: var(--wb-bg-primary);
  border: 1px solid var(--wb-glass-border);
  border-radius: var(--wb-radius-sm);
  padding: 10px 14px;
  color: var(--wb-text-primary);
  font-size: 13px;
  resize: none;
  min-height: 60px;
  transition: var(--wb-transition);
}

#workboard-view .wb-note-input:focus {
  outline: none;
  border-color: var(--wb-text-accent);
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.1);
}

/* ── History Timeline ───────────────────────────────────────────── */
#workboard-view .wb-history-item {
  display: flex;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--wb-glass-border);
  font-size: 12px;
}

#workboard-view .wb-history-item:last-child { border-bottom: none; }

#workboard-view .wb-history-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--wb-text-muted);
  margin-top: 4px;
  flex-shrink: 0;
}

#workboard-view .wb-history-dot.confirm { background: var(--wb-status-confirmed); }
#workboard-view .wb-history-dot.reject { background: var(--wb-status-rejected); }
#workboard-view .wb-history-dot.reschedule { background: var(--wb-status-rescheduled); }
#workboard-view .wb-history-dot.install { background: var(--wb-status-installed); }
#workboard-view .wb-history-dot.sync { background: var(--wb-status-new); }

#workboard-view .wb-history-text {
  color: var(--wb-text-secondary);
  line-height: 1.4;
}

#workboard-view .wb-history-text strong {
  color: var(--wb-text-primary);
  font-weight: 600;
}

#workboard-view .wb-history-time {
  color: var(--wb-text-muted);
  font-size: 11px;
  margin-top: 2px;
}

/* ── Rack Detail Table (full view) ──────────────────────────────── */
#workboard-view .wb-table-wrapper {
  padding: 20px 24px;
  overflow-x: auto;
}

#workboard-view .wb-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12px;
}

#workboard-view .wb-table thead th {
  background: var(--wb-bg-tertiary);
  color: var(--wb-text-secondary);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 14px 12px;
  text-align: left;
  border-bottom: 2px solid var(--wb-glass-highlight);
  position: sticky;
  top: 0;
  z-index: 5;
}

#workboard-view .wb-table thead th:first-child { border-radius: var(--wb-radius-sm) 0 0 0; }
#workboard-view .wb-table thead th:last-child { border-radius: 0 var(--wb-radius-sm) 0 0; }

#workboard-view .wb-table tbody tr {
  transition: var(--wb-transition);
}

#workboard-view .wb-table tbody tr:hover {
  background: var(--wb-bg-hover);
}

#workboard-view .wb-table tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--wb-glass-border);
  color: var(--wb-text-secondary);
  font-size: 13px;
}

#workboard-view .wb-table tbody td.mono {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
}

/* ── Animations ─────────────────────────────────────────────────── */
@keyframes wbFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes wbSlideIn {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes wbPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes wbConfirmBurst {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); }
  50% { transform: scale(1.02); box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

#workboard-view .wb-rack-item.just-confirmed {
  animation: wbConfirmBurst 0.6s ease;
  border-color: var(--wb-status-confirmed) !important;
}

#workboard-view .wb-site-card.animate-in {
  animation: wbFadeIn 0.3s ease forwards;
}

#workboard-view .wb-day.animate-in {
  animation: wbFadeIn 0.4s ease forwards;
}

/* ── Command Palette ────────────────────────────────────────────── */
#workboard-view .wb-command-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  z-index: 1000;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: 20vh;
}

#workboard-view .wb-command-overlay.open { display: flex; }

#workboard-view .wb-command-box {
  width: 560px;
  background: var(--wb-bg-secondary);
  border: 1px solid var(--wb-glass-highlight);
  border-radius: var(--wb-radius-lg);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}

#workboard-view .wb-command-input {
  width: 100%;
  background: transparent;
  border: none;
  padding: 18px 24px;
  font-size: 16px;
  color: var(--wb-text-primary);
  border-bottom: 1px solid var(--wb-glass-border);
}

#workboard-view .wb-command-input:focus { outline: none; }
#workboard-view .wb-command-input::placeholder { color: var(--wb-text-muted); }

#workboard-view .wb-command-results {
  max-height: 300px;
  overflow-y: auto;
  padding: 8px;
}

#workboard-view .wb-command-item {
  padding: 10px 16px;
  border-radius: var(--wb-radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: var(--wb-transition);
}

#workboard-view .wb-command-item:hover, .wb-command-item.selected {
  background: var(--wb-bg-hover);
}

#workboard-view .wb-command-item-icon {
  font-size: 16px;
}

#workboard-view .wb-command-item-text {
  font-size: 13px;
  color: var(--wb-text-primary);
}

#workboard-view .wb-command-item-hint {
  font-size: 11px;
  color: var(--wb-text-muted);
  margin-left: auto;
}

/* ── Toast Notifications ────────────────────────────────────────── */
#workboard-view .wb-toasts {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#workboard-view .wb-toast {
  background: var(--wb-bg-secondary);
  border: 1px solid var(--wb-glass-border);
  border-radius: var(--wb-radius-md);
  padding: 14px 20px;
  font-size: 13px;
  color: var(--wb-text-primary);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  gap: 10px;
  animation: wbSlideIn 0.3s ease;
  max-width: 360px;
}

#workboard-view .wb-toast.success { border-left: 3px solid var(--wb-status-confirmed); }
#workboard-view .wb-toast.error { border-left: 3px solid var(--wb-status-rejected); }
#workboard-view .wb-toast.info { border-left: 3px solid var(--wb-text-accent); }
#workboard-view .wb-toast.warning { border-left: 3px solid var(--wb-status-rescheduled); }

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  #workboard-view .wb-month-grid { grid-template-columns: repeat(5, 1fr); }
  #workboard-view .wb-panel { width: 100%; right: -100%; }
}

@media (max-width: 768px) {
  #workboard-view .wb-month-grid { grid-template-columns: repeat(3, 1fr); }
  #workboard-view .wb-pulse-progress { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   PHASE 1 — New Elements (Loading, Modals, Status visuals)
   ═══════════════════════════════════════════════════════════════════ */

/* ── Loading State ─────────────────────────────────────────────── */
#workboard-view .wb-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 48px);
  gap: 16px;
}

#workboard-view .wb-loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--wb-glass-border);
  border-top-color: var(--wb-text-accent);
  border-radius: 50%;
  animation: wbSpin 0.8s linear infinite;
}

@keyframes wbSpin {
  to { transform: rotate(360deg); }
}

#workboard-view .wb-loading-text {
  font-size: 14px;
  color: var(--wb-text-secondary);
}

/* ── Past delivery day — no special border anymore.
   Purple frame removed (2026-06-25): users found it noisy now that pill
   colors already carry the site identity. Only the cyan outline on .today
   remains to mark the current day. The .past-delivery class is still
   added by JS so we can re-hook visuals here later if needed. */

/* ── Past day — per-site attention (2026-06-25) ────────────────────
   IMPORTANT: never set `opacity` on the .wb-day container — opacity
   is multiplicative with children, so a child can NEVER recover full
   opacity once the parent fades.  Instead we:
     1) Mute the day chrome (number + background tone) using color &
        background properties, which DO NOT cascade multiplicatively.
     2) Apply opacity ONLY to the individual site cards that are fully
        installed.  Site cards that still need action (NOT card-installed)
        keep their native vivid color and stand out clearly.
   Hover restores the day chrome to its normal state. */
#workboard-view .wb-day.past-done {
  background: rgba(17, 24, 39, 0.45);     /* dimmer than --wb-bg-card */
  border-color: rgba(255, 255, 255, 0.04);
}
#workboard-view .wb-day.past-done .wb-day-number,
#workboard-view .wb-day.past-done .wb-day-total {
  color: rgba(100, 116, 139, 0.5);         /* faded number */
}
#workboard-view .wb-day.past-done:hover {
  background: var(--wb-bg-hover);
  border-color: var(--wb-glass-highlight);
}
#workboard-view .wb-day.past-done:hover .wb-day-number,
#workboard-view .wb-day.past-done:hover .wb-day-total {
  color: var(--wb-text-secondary);
}

/* Site cards in a past day:
   - card-installed (everything done) → muted with opacity
   - anything else (pending / confirmed / rejected / not_delivered /
     rescheduled — at least one rack still needs action) → keep full
     opacity and full site color, so it really stands out against the
     muted day. */
#workboard-view .wb-day.past-done .wb-site-card.card-installed {
  opacity: 0.35;
}
#workboard-view .wb-day.past-done .wb-site-card.card-installed:hover {
  opacity: 1;
}

/* ── Site card status colors ───────────────────────────────────── */
#workboard-view .wb-site-card.card-confirmed {
  background: rgba(34, 197, 94, 0.2) !important;
  color: var(--wb-status-confirmed) !important;
  border-left-color: var(--wb-status-confirmed) !important;
}

/* ── Past delivery — keep per-site colors on installed days.
   The `card-installed` class is still applied by JS (used as a hook for
   the `✓` tick rendered in JS), but we intentionally do NOT override the
   site color here, so each pill keeps its native site color (ZAZ60 green,
   ZAZ70 blue, ZAZ71 yellow, ZAZ72 red, etc.) even when fully installed.
   Purple visuals for installed racks remain INSIDE the day panel
   (.wb-rack-status.installed, .wb-rack-item.installed). */

#workboard-view .wb-site-card.card-rejected {
  background: rgba(239, 68, 68, 0.15) !important;
  color: var(--wb-status-rejected) !important;
  border-left-color: var(--wb-status-rejected) !important;
}

/* ── Table row status ──────────────────────────────────────────── */
#workboard-view .wb-row-confirmed {
  background: rgba(34, 197, 94, 0.06);
}

#workboard-view .wb-row-rejected {
  background: rgba(239, 68, 68, 0.06);
}

#workboard-view .wb-row-rescheduled {
  background: rgba(245, 158, 11, 0.06);
}

#workboard-view .wb-table-actions {
  display: flex;
  gap: 4px;
}

#workboard-view .wb-table-stats {
  padding: 12px 0;
  font-size: 13px;
  color: var(--wb-text-secondary);
  font-weight: 600;
}

/* ── All Racks filters + multi-asset search (beta 2026-11-03) ─── */
/* Layout follows the Planned Deliveries "Filters" card: title, labelled
   columns, Multi-Asset + Clear stacked on the right of the row, count below. */
#workboard-view .wb-tf-card {
  background: var(--wb-bg-card);
  border: 1px solid var(--wb-glass-border);
  border-radius: var(--wb-radius-md);
  padding: 12px 16px 10px;
  margin: 12px 0;
}
#workboard-view .wb-tf-title {
  font-weight: 700;
  color: var(--wb-text-primary);
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--wb-glass-border);
}
#workboard-view .wb-tf-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  align-items: flex-end;
}
#workboard-view .wb-tf-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 190px;
}
#workboard-view .wb-tf-col-wide { width: 260px; }
#workboard-view .wb-tf-label {
  font-weight: 700;
  color: var(--wb-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
#workboard-view .wb-tf-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 120px;
}
#workboard-view .wb-tf-stats {
  margin-top: 10px;
  color: var(--wb-text-secondary);
}
#workboard-view .wb-tf-stats strong { color: var(--wb-text-primary); }
#workboard-view .wb-tf-card,
#workboard-view .wb-tf-card *,
#workboard-view .wb-tf-missing,
#workboard-view .wb-tf-missing *,
#workboard-view .wb-tf-empty,
.wb-tf-modal,
.wb-tf-modal * { font-size: 12px !important; }
#workboard-view .wb-tf-field {
  width: 100%;
  height: 30px;
  box-sizing: border-box;
  background: var(--wb-bg-tertiary);
  color: var(--wb-text-primary);
  border: 1px solid var(--wb-glass-border);
  border-radius: var(--wb-radius-sm);
  padding: 0 10px;
  font-family: inherit;
  transition: var(--wb-transition);
}
#workboard-view select.wb-tf-field { padding-right: 6px; cursor: pointer; color-scheme: dark; }
/* The open dropdown list must not inherit the semi-transparent "set" background,
   or Chrome paints it system-white with the light text invisible. */
#workboard-view select.wb-tf-field option {
  background: var(--wb-bg-secondary);
  color: var(--wb-text-primary);
}
#workboard-view .wb-tf-field:hover { border-color: var(--wb-glass-highlight); }
#workboard-view .wb-tf-field:focus {
  outline: none;
  border-color: var(--wb-text-accent);
}
/* A filter that is in use keeps an accent border, so applied filters are visible at a glance. */
#workboard-view .wb-tf-field.wb-tf-set {
  border-color: var(--wb-text-accent);
  background: rgba(56, 189, 248, 0.08);
}
#workboard-view .wb-tf-actions .wb-btn {
  height: 30px;
  box-sizing: border-box;
  padding: 0 12px;
  justify-content: center;
}
/* Orange = applied: Multi-Asset with a list active, Clear with any filter applied. */
#workboard-view .wb-tf-actions .wb-btn.wb-tf-hot {
  background: rgba(245, 158, 11, 0.18);
  color: var(--wb-status-rescheduled);
  border-color: var(--wb-status-rescheduled);
}
#workboard-view .wb-tf-actions .wb-btn.wb-tf-hot:hover { background: rgba(245, 158, 11, 0.32); }
#workboard-view .wb-tf-actions .wb-btn[disabled] { opacity: 0.4; cursor: default; }

/* Multi-Asset modal (body-level, reuses the Add Asset overlay) */
.wb-tf-modal { width: 520px; }
.wb-tf-modal .wb-add-asset-header { font-weight: 700; }
.wb-tf-modal-x {
  background: none;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  line-height: 1;
  padding: 0 4px;
}
.wb-tf-modal .wb-tf-modal-x { font-size: 18px !important; }
.wb-tf-modal-x:hover { color: #f1f5f9; }
.wb-tf-modal-ta {
  height: 140px;
  resize: vertical;
  line-height: 1.5;
  font-family: ui-monospace, Consolas, monospace !important;
}
.wb-tf-modal-count { color: #94a3b8; min-height: 14px; }
.wb-tf-modal-go {
  background: rgba(255, 255, 255, 0.05);
  color: #64748b;
  border-color: rgba(255, 255, 255, 0.1);
}
.wb-tf-modal-go[disabled] { cursor: default; opacity: 0.6; }
.wb-tf-modal-go.wb-tf-hot {
  background: #f59e0b;
  color: #111827;
  border-color: #f59e0b;
}
.wb-tf-modal-go.wb-tf-hot:hover { background: #fbbf24; border-color: #fbbf24; }
#workboard-view .wb-tf-missing {
  border: 1px solid var(--wb-status-rescheduled);
  background: rgba(245, 158, 11, 0.08);
  border-radius: var(--wb-radius-sm);
  padding: 10px 14px;
  margin-bottom: 10px;
  font-size: 12px;
  color: var(--wb-text-primary);
}
#workboard-view .wb-tf-missing-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
#workboard-view .wb-tf-missing-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 4px 16px;
  max-height: 160px;
  overflow-y: auto;
}
#workboard-view .wb-tf-missing-list li { display: flex; gap: 10px; }
#workboard-view .wb-tf-where { color: var(--wb-text-secondary); }
#workboard-view .wb-tf-where.nf { color: var(--wb-status-rejected); font-weight: 600; }
#workboard-view .wb-tf-empty {
  padding: 24px;
  text-align: center;
  color: var(--wb-text-muted);
  font-size: 13px;
}

/* ── Rack Item (panel) — confirmed/rejected/installed visuals ──── */
#workboard-view .wb-rack-item.confirmed {
  border-color: var(--wb-status-confirmed);
  background: rgba(34, 197, 94, 0.08);
}

#workboard-view .wb-rack-item.rejected {
  border-color: var(--wb-status-rejected);
  background: rgba(239, 68, 68, 0.06);
  opacity: 0.7;
}

#workboard-view .wb-rack-item.installed {
  border-color: var(--wb-status-installed);
  background: rgba(139, 92, 246, 0.08);
}

#workboard-view .wb-rack-item-main {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

#workboard-view .wb-rack-item-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

#workboard-view .wb-confirmed-badge {
  font-size: 11px;
  font-weight: 600;
  color: var(--wb-status-confirmed);
  background: rgba(34, 197, 94, 0.15);
  padding: 3px 8px;
  border-radius: 10px;
}

#workboard-view .wb-not-delivered-badge {
  font-size: 11px;
  font-weight: 600;
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.15);
  padding: 3px 8px;
  border-radius: 10px;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#workboard-view .wb-rejected-badge {
  font-size: 11px;
  font-weight: 600;
  color: var(--wb-status-rejected);
  background: rgba(239, 68, 68, 0.15);
  padding: 3px 8px;
  border-radius: 10px;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Panel stat pills ──────────────────────────────────────────── */
#workboard-view .wb-panel-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#workboard-view .wb-stat-pill {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 12px;
  background: var(--wb-glass);
  border: 1px solid var(--wb-glass-border);
  color: var(--wb-text-secondary);
}

#workboard-view .wb-stat-pill.green { color: var(--wb-status-confirmed); border-color: rgba(34, 197, 94, 0.3); background: rgba(34, 197, 94, 0.1); }
#workboard-view .wb-stat-pill.red { color: var(--wb-status-rejected); border-color: rgba(239, 68, 68, 0.3); background: rgba(239, 68, 68, 0.1); }
#workboard-view .wb-stat-pill.blue { color: var(--wb-status-new); border-color: rgba(56, 189, 248, 0.3); background: rgba(56, 189, 248, 0.1); }

/* ── Modal Overlay ─────────────────────────────────────────────── */
#workboard-view .wb-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  /* backdrop-filter removed — it creates a GPU compositing layer that
     causes child element hover repaints to be slow */
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

#workboard-view .wb-modal {
  background: var(--wb-bg-secondary);
  border: 1px solid var(--wb-glass-highlight);
  border-radius: var(--wb-radius-lg);
  width: 480px;
  max-width: 95vw;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
  /* overflow:hidden removed — creates stacking context that slows child repaints */
  animation: wbFadeIn 0.2s ease;
}

#workboard-view .wb-modal-header {
  padding: 16px 20px;
  font-size: 16px;
  font-weight: 700;
  color: var(--wb-text-primary);
  border-bottom: 1px solid var(--wb-glass-border);
  background: var(--wb-bg-tertiary);
}

#workboard-view .wb-modal-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#workboard-view .wb-modal-body p {
  font-size: 13px;
  color: var(--wb-text-secondary);
  margin: 0;
}

#workboard-view .wb-modal-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--wb-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

#workboard-view .wb-modal-textarea {
  width: 100%;
  min-height: 80px;
  background: var(--wb-bg-primary);
  border: 1px solid var(--wb-glass-border);
  border-radius: var(--wb-radius-sm);
  padding: 10px 14px;
  color: var(--wb-text-primary);
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
}

#workboard-view .wb-modal-textarea:focus {
  outline: none;
  border-color: var(--wb-text-accent);
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.1);
}

#workboard-view .wb-modal-input {
  width: 100%;
  background: var(--wb-bg-primary);
  border: 1px solid var(--wb-glass-border);
  border-radius: var(--wb-radius-sm);
  padding: 8px 12px;
  color: var(--wb-text-primary);
  font-size: 13px;
  font-family: inherit;
}

#workboard-view .wb-modal-input:focus {
  outline: none;
  border-color: var(--wb-text-accent);
}

/* ── Reject modal — custom dropdown (no native <select>) ────────── */
#workboard-view .wb-custom-select {
  position: relative;
  width: 100%;
  user-select: none;
}

#workboard-view .wb-custom-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: var(--wb-bg-primary);
  border: 1px solid var(--wb-glass-border);
  border-radius: var(--wb-radius-sm);
  padding: 9px 14px;
  color: var(--wb-text-primary);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#workboard-view .wb-custom-select-trigger:hover {
  border-color: rgba(255,255,255,0.2);
}

#workboard-view .wb-custom-select.open .wb-custom-select-trigger {
  border-color: var(--wb-text-accent);
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.1);
}

#workboard-view .wb-custom-select-placeholder {
  color: var(--wb-text-muted);
}

#workboard-view .wb-custom-select-arrow {
  font-size: 11px;
  color: var(--wb-text-muted);
  transition: transform 0.15s ease;
  flex-shrink: 0;
  margin-left: 8px;
}

#workboard-view .wb-custom-select-options {
  display: none;
  position: fixed; /* fixed so it escapes modal overflow:hidden clipping */
  background: #1e2535;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--wb-radius-md);
  box-shadow: 0 8px 32px rgba(0,0,0,0.6);
  z-index: 9999;
  max-height: 260px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.15) transparent;
  animation: wbDropdownIn 0.12s ease;
  will-change: transform; /* promote to GPU layer for smooth scroll */
  /* width + position set by JS */
}

#workboard-view .wb-custom-select-options::-webkit-scrollbar {
  width: 4px;
}
#workboard-view .wb-custom-select-options::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.15);
  border-radius: 2px;
}

#workboard-view .wb-custom-select-option {
  padding: 10px 16px;
  font-size: 13px;
  color: #cbd5e1;
  cursor: pointer;
  transition: none;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  white-space: nowrap;
}

#workboard-view .wb-custom-select-option:last-child {
  border-bottom: none;
}

#workboard-view .wb-custom-select-option:hover {
  background: rgba(56, 189, 248, 0.12);
  color: #e2e8f0;
}

#workboard-view .wb-custom-select-option.selected {
  background: rgba(56, 189, 248, 0.18);
  color: var(--wb-text-accent);
  font-weight: 600;
}

#workboard-view .wb-modal-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--wb-glass-border);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* ── Data Refresh Pulse Animation ──────────────────────────────── */
@keyframes wbDataPulse {
  0% { box-shadow: inset 0 0 0 0 rgba(56, 189, 248, 0); }
  30% { box-shadow: inset 0 0 60px 10px rgba(56, 189, 248, 0.15); }
  100% { box-shadow: inset 0 0 0 0 rgba(56, 189, 248, 0); }
}

#workboard-root.wb-data-pulse {
  animation: wbDataPulse 1.5s ease-out;
}

/* ═══════════════════════════════════════════════════════════════════
   ASANA-STYLE SPLIT LAYOUT — Calendar + Side Panel side by side
   ═══════════════════════════════════════════════════════════════════ */

/* Split container: flex row, calendar shrinks when panel opens */
#workboard-view .wb-split-layout {
  display: flex;
  gap: 0;
  align-items: flex-start;
}

/* Main area (calendar / table / history) */
#workboard-view .wb-main-area {
  flex: 1;
  min-width: 0;
  transition: flex 0.25s ease;
}

/* When panel is open, push calendar content left to make room for fixed panel */
#workboard-view .wb-split-layout.panel-open .wb-main-area {
  margin-right: 800px;
}

/* When panel is open — keep font sizes, just tighten spacing */
#workboard-view .wb-split-layout.panel-open .wb-month-grid,
#workboard-view .wb-split-layout.panel-open .wb-week-header {
  gap: 4px;
}

/* Site cards: tighter padding, no gap between name and count */
#workboard-view .wb-split-layout.panel-open .wb-site-card {
  padding: 4px 6px;
  gap: 2px;
}

/* Count badge: no min-width, tight */
#workboard-view .wb-split-layout.panel-open .wb-site-card .count {
  margin-left: auto;
  padding-left: 4px;
  white-space: nowrap;
}

/* Day cells: slightly less padding, same height */
#workboard-view .wb-split-layout.panel-open .wb-day {
  padding: 6px 5px;
}

/* Calendar outer padding tighter */
#workboard-view .wb-split-layout.panel-open .wb-calendar {
  padding: 14px 8px;
}

/* Side panel — fixed position on the right, always full height. */
#workboard-view .wb-side-panel {
  width: 800px;
  min-width: 800px;
  max-width: 800px;
  flex-shrink: 0;
  background: var(--wb-bg-secondary);
  border-left: 1px solid var(--wb-glass-border);
  display: flex;
  flex-direction: column;
  /* Fixed position so it's always visible regardless of page scroll */
  position: fixed;
  top: 48px;        /* below the app header */
  right: 0;
  bottom: 0;
  overflow: hidden;
  z-index: 200;
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.4);
  animation: wbPanelSlideIn 0.2s ease;
}

@keyframes wbPanelSlideIn {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Side panel header */
#workboard-view .wb-side-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--wb-bg-tertiary);
  border-bottom: 1px solid var(--wb-glass-border);
  flex-shrink: 0;
  min-height: 52px;
}

#workboard-view .wb-side-panel-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--wb-text-primary);
  line-height: 1.3;
}

#workboard-view .wb-side-panel-sub {
  font-size: 11px;
  color: var(--wb-text-muted);
  margin-top: 3px;
}

/* Side panel scrollable body */
#workboard-view .wb-side-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px 14px 20px;
  scrollbar-width: thin;
  scrollbar-color: var(--wb-glass-border) transparent;
}

#workboard-view .wb-side-panel-body::-webkit-scrollbar {
  width: 4px;
}
#workboard-view .wb-side-panel-body::-webkit-scrollbar-thumb {
  background: var(--wb-glass-border);
  border-radius: 2px;
}

/* Stat pill — purple variant for installed */
#workboard-view .wb-stat-pill.purple {
  background: rgba(139, 92, 246, 0.15);
  color: #a78bfa;
  border-color: rgba(139, 92, 246, 0.3);
}

/* ── Install All button ── */
#workboard-view .wb-btn-install-all {
  background: linear-gradient(135deg, #7b2d8b 0%, #9b59b6 100%);
  color: #fff;
  border: none;
  font-weight: 700;
  font-size: 12px;
  padding: 6px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 2px 8px rgba(123, 45, 139, 0.35);
}
#workboard-view .wb-btn-install-all:hover {
  background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%);
  box-shadow: 0 4px 14px rgba(123, 45, 139, 0.5);
  transform: translateY(-1px);
}
#workboard-view .wb-btn-install-all:active {
  transform: translateY(0);
}

/* ── Individual install button ── */
#workboard-view .wb-btn-install {
  background: rgba(123, 45, 139, 0.2);
  color: #c084fc;
  border: 1px solid rgba(123, 45, 139, 0.4);
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  font-weight: 600;
}
#workboard-view .wb-btn-install:hover {
  background: rgba(123, 45, 139, 0.4);
  color: #e9d5ff;
  border-color: rgba(192, 132, 252, 0.6);
}

/* ── Installed badge ── */
#workboard-view .wb-installed-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: #a78bfa;
  background: rgba(139, 92, 246, 0.12);
  border: 1px solid rgba(139, 92, 246, 0.25);
  border-radius: 6px;
  padding: 3px 8px;
}

/* ── Installed rack item ── */
#workboard-view .wb-rack-item.installed {
  border-left: 3px solid #7b2d8b;
  background: rgba(123, 45, 139, 0.06);
  opacity: 0.85;
}

/* ═══════════════════════════════════════════════════════════════════
   GLOBAL MODAL OVERLAY — works when appended to document.body
   (outside #workboard-view, e.g. Add Asset modal)
   ═══════════════════════════════════════════════════════════════════ */
.wb-modal-overlay {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0, 0, 0, 0.7) !important;
  backdrop-filter: blur(4px) !important;
  z-index: 9000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px !important;
}

/* ═══════════════════════════════════════════════════════════════════
   ADD ASSET MODAL — Self-contained dark theme, no CSS variable deps
   Appended to document.body so must NOT rely on #workboard-view vars
   ═══════════════════════════════════════════════════════════════════ */
.wb-add-asset-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: wbFadeIn 0.15s ease;
}

.wb-add-asset-modal {
  background: #111827;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.7);
  width: 460px;
  max-width: 95vw;
  overflow: hidden;
  animation: wbFadeIn 0.2s ease;
}

.wb-add-asset-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: #1a2035;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 15px;
  font-weight: 700;
  color: #f1f5f9;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

.wb-add-asset-context {
  font-size: 12px;
  font-weight: 500;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.1);
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: 6px;
  padding: 3px 8px;
}

.wb-add-asset-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: #111827;
}

.wb-add-asset-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wb-add-asset-label {
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

.wb-add-asset-required {
  color: #ef4444;
  font-size: 12px;
}

.wb-add-asset-input {
  width: 100%;
  background: #0a0e1a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 10px 14px;
  color: #f1f5f9;
  font-size: 13px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  box-sizing: border-box;
}

.wb-add-asset-input::placeholder {
  color: #475569;
}

.wb-add-asset-input:focus {
  border-color: #38bdf8;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.12);
}

.wb-add-asset-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 20px;
  background: #0f172a;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.wb-add-asset-btn {
  padding: 8px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.wb-add-asset-btn-cancel {
  background: rgba(255, 255, 255, 0.05);
  color: #94a3b8;
  border-color: rgba(255, 255, 255, 0.1);
}

.wb-add-asset-btn-cancel:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #f1f5f9;
}

.wb-add-asset-btn-submit {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
  border-color: rgba(34, 197, 94, 0.35);
}

.wb-add-asset-btn-submit:hover {
  background: rgba(34, 197, 94, 0.28);
  border-color: rgba(34, 197, 94, 0.6);
  transform: translateY(-1px);
}

.wb-add-asset-btn-submit:active {
  transform: translateY(0);
}

/* ── Day cell add button ─────────────────────────────────────────── */
#workboard-view .wb-day-add-btn {
  display: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(56, 189, 248, 0.1);
  border: 1px dashed rgba(56, 189, 248, 0.3);
  color: #38bdf8;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
  align-items: center;
  justify-content: center;
  margin: 8px auto 0;
}

#workboard-view .wb-day:hover .wb-day-add-btn {
  display: flex;
}

#workboard-view .wb-day-add-btn:hover {
  background: rgba(56, 189, 248, 0.25);
  border-color: #38bdf8;
  transform: scale(1.1);
}

/* ── Add Rack Modal ──────────────────────────────────────────────── */
.wb-add-rack-modal {
  background: #111827;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.7);
  width: 600px;
  max-width: 95vw;
  max-height: 90vh;
  overflow-y: auto;
  animation: wbFadeIn 0.2s ease;
}

.wb-add-rack-tabs {
  display: flex;
  gap: 0;
  padding: 0 20px;
  background: #0f172a;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.wb-add-rack-tab {
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

.wb-add-rack-tab:hover {
  color: #94a3b8;
}

.wb-add-rack-tab.active {
  color: #38bdf8;
  border-bottom-color: #38bdf8;
}

/* ═══════════════════════════════════════════════════════════════════
   ANALYTICS TAB — Manager's Dashboard
   ═══════════════════════════════════════════════════════════════════ */

#workboard-view .wba-page {
  padding: 0 0 40px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

/* ── Filters bar ─────────────────────────────────────────────────── */
#workboard-view .wba-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 16px 24px;
  background: var(--wb-bg-secondary);
  border-bottom: 1px solid var(--wb-glass-border);
  align-items: center;
}

#workboard-view .wba-filter-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

#workboard-view .wba-filter-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--wb-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  white-space: nowrap;
}

#workboard-view .wba-filter-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

#workboard-view .wba-pill {
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--wb-glass-border);
  background: var(--wb-glass);
  color: var(--wb-text-secondary);
  cursor: pointer;
  transition: var(--wb-transition);
}

#workboard-view .wba-pill:hover {
  background: var(--wb-bg-hover);
  color: var(--wb-text-primary);
}

#workboard-view .wba-pill.active {
  background: rgba(56, 189, 248, 0.15);
  border-color: var(--wb-text-accent);
  color: var(--wb-text-accent);
}

/* ── KPI Cards ───────────────────────────────────────────────────── */
#workboard-view .wba-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
  padding: 20px 24px;
}

#workboard-view .wba-kpi-card {
  background: var(--wb-bg-secondary);
  border: 1px solid var(--wb-glass-border);
  border-radius: var(--wb-radius-lg);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: var(--wb-transition);
  position: relative;
  overflow: hidden;
}

#workboard-view .wba-kpi-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--wb-glass-border);
}

#workboard-view .wba-kpi-card:hover {
  border-color: var(--wb-glass-highlight);
  background: var(--wb-bg-hover);
}

#workboard-view .wba-kpi-icon {
  font-size: 20px;
  margin-bottom: 4px;
}

#workboard-view .wba-kpi-value {
  font-size: 32px;
  font-weight: 800;
  color: var(--wb-text-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

#workboard-view .wba-kpi-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--wb-text-secondary);
  margin-top: 4px;
}

#workboard-view .wba-kpi-sub {
  font-size: 11px;
  color: var(--wb-text-muted);
}

/* KPI color variants */
#workboard-view .wba-kpi-green::before { background: var(--wb-status-confirmed); }
#workboard-view .wba-kpi-green .wba-kpi-value { color: var(--wb-status-confirmed); }
#workboard-view .wba-kpi-blue::before { background: var(--wb-status-new); }
#workboard-view .wba-kpi-blue .wba-kpi-value { color: var(--wb-status-new); }
#workboard-view .wba-kpi-red::before { background: var(--wb-status-rejected); }
#workboard-view .wba-kpi-red .wba-kpi-value { color: var(--wb-status-rejected); }
#workboard-view .wba-kpi-orange::before { background: var(--wb-status-missing); }
#workboard-view .wba-kpi-orange .wba-kpi-value { color: var(--wb-status-missing); }
#workboard-view .wba-kpi-purple::before { background: var(--wb-status-installed); }
#workboard-view .wba-kpi-purple .wba-kpi-value { color: var(--wb-status-installed); }
#workboard-view .wba-kpi-teal::before { background: #06b6d4; }
#workboard-view .wba-kpi-teal .wba-kpi-value { color: #06b6d4; font-size: 20px; font-weight: 700; }
#workboard-view .wba-kpi-yellow::before { background: var(--wb-status-rescheduled); }
#workboard-view .wba-kpi-yellow .wba-kpi-value { color: var(--wb-status-rescheduled); font-size: 18px; font-weight: 700; }

/* ── Charts ──────────────────────────────────────────────────────── */
#workboard-view .wba-charts-row {
  display: flex;
  gap: 16px;
  padding: 0 24px 16px;
  align-items: flex-start;
}

#workboard-view .wba-chart-card {
  background: var(--wb-bg-secondary);
  border: 1px solid var(--wb-glass-border);
  border-radius: var(--wb-radius-lg);
  padding: 16px 20px 20px;
  flex: 1;
  min-width: 0;
}

#workboard-view .wba-chart-card.wba-chart-wide {
  flex: 2;
}

#workboard-view .wba-chart-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--wb-text-primary);
  margin-bottom: 2px;
}

#workboard-view .wba-chart-sub {
  font-size: 11px;
  color: var(--wb-text-muted);
  margin-bottom: 14px;
}

#workboard-view .wba-chart-wrap {
  position: relative;
  min-height: 200px;
}

/* ── Section headers ─────────────────────────────────────────────── */
#workboard-view .wba-section-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 24px 12px;
}

#workboard-view .wba-section-icon {
  font-size: 20px;
}

#workboard-view .wba-section-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--wb-text-primary);
}

#workboard-view .wba-section-sub {
  font-size: 12px;
  color: var(--wb-text-muted);
  margin-top: 2px;
}

/* ── Rejection feed ──────────────────────────────────────────────── */
#workboard-view .wba-rejection-feed {
  margin: 0 24px 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#workboard-view .wba-rejection-item {
  background: var(--wb-bg-secondary);
  border: 1px solid var(--wb-glass-border);
  border-left: 3px solid var(--wb-status-rejected);
  border-radius: var(--wb-radius-md);
  padding: 12px 16px;
  transition: var(--wb-transition);
}

#workboard-view .wba-rejection-item:hover {
  background: var(--wb-bg-hover);
}

#workboard-view .wba-rejection-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

#workboard-view .wba-rejection-asset {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--wb-text-primary);
}

#workboard-view .wba-rejection-site {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(239, 68, 68, 0.15);
  color: var(--wb-status-rejected);
}

#workboard-view .wba-rejection-model {
  font-size: 11px;
  color: var(--wb-text-secondary);
}

#workboard-view .wba-rejection-tdd {
  font-size: 11px;
  color: var(--wb-text-muted);
}

#workboard-view .wba-rejection-by {
  font-size: 11px;
  color: var(--wb-text-accent);
  font-weight: 600;
}

#workboard-view .wba-rejection-time {
  font-size: 11px;
  color: var(--wb-text-muted);
  margin-left: auto;
}

#workboard-view .wba-rejection-reason {
  font-size: 13px;
  color: var(--wb-text-secondary);
  line-height: 1.4;
}

/* ── Operator Leaderboard ────────────────────────────────────────── */
#workboard-view .wba-leaderboard {
  margin: 0 24px 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#workboard-view .wba-leader-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--wb-bg-secondary);
  border: 1px solid var(--wb-glass-border);
  border-radius: var(--wb-radius-md);
  padding: 12px 16px;
  transition: var(--wb-transition);
}

#workboard-view .wba-leader-row:hover {
  background: var(--wb-bg-hover);
}

#workboard-view .wba-leader-rank {
  font-size: 18px;
  min-width: 32px;
  text-align: center;
}

#workboard-view .wba-leader-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--wb-text-primary);
  min-width: 100px;
}

#workboard-view .wba-leader-bar-wrap {
  flex: 1;
  height: 8px;
  background: var(--wb-bg-primary);
  border-radius: 4px;
  overflow: hidden;
}

#workboard-view .wba-leader-bar {
  height: 100%;
  background: linear-gradient(90deg, #8b5cf6, #38bdf8);
  border-radius: 4px;
  transition: width 0.6s ease;
}

#workboard-view .wba-leader-stats {
  font-size: 12px;
  color: var(--wb-text-secondary);
  min-width: 220px;
  text-align: right;
}

/* ── Empty state ─────────────────────────────────────────────────── */
#workboard-view .wba-empty {
  padding: 24px;
  text-align: center;
  font-size: 13px;
  color: var(--wb-text-muted);
  background: var(--wb-bg-secondary);
  border: 1px solid var(--wb-glass-border);
  border-radius: var(--wb-radius-md);
}

/* ── Delivery Accuracy Cards ─────────────────────────────────────── */
#workboard-view .wba-accuracy-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding: 0 24px 16px;
}

#workboard-view .wba-accuracy-card {
  background: var(--wb-bg-secondary);
  border: 1px solid var(--wb-glass-border);
  border-radius: var(--wb-radius-lg);
  padding: 20px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

#workboard-view .wba-accuracy-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
}

#workboard-view .wba-accuracy-green::before { background: var(--wb-status-confirmed); }
#workboard-view .wba-accuracy-red::before { background: var(--wb-status-rejected); }
#workboard-view .wba-accuracy-orange::before { background: var(--wb-status-rescheduled); }
#workboard-view .wba-accuracy-blue::before { background: var(--wb-status-new); }

#workboard-view .wba-accuracy-value {
  font-size: 36px;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 6px;
}

#workboard-view .wba-accuracy-green .wba-accuracy-value { color: var(--wb-status-confirmed); }
#workboard-view .wba-accuracy-red .wba-accuracy-value { color: var(--wb-status-rejected); }
#workboard-view .wba-accuracy-orange .wba-accuracy-value { color: var(--wb-status-rescheduled); }
#workboard-view .wba-accuracy-blue .wba-accuracy-value { color: var(--wb-status-new); }

#workboard-view .wba-accuracy-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--wb-text-primary);
  margin-bottom: 4px;
}

#workboard-view .wba-accuracy-sub {
  font-size: 11px;
  color: var(--wb-text-muted);
  line-height: 1.4;
}

/* ── Overdue list ────────────────────────────────────────────────── */
#workboard-view .wba-overdue-list {
  margin: 0 24px 16px;
  background: rgba(239, 68, 68, 0.06);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: var(--wb-radius-md);
  padding: 12px 16px;
}

#workboard-view .wba-overdue-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--wb-status-rejected);
  margin-bottom: 10px;
}

#workboard-view .wba-overdue-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(239, 68, 68, 0.1);
  font-size: 12px;
  flex-wrap: wrap;
}

#workboard-view .wba-overdue-item:last-child { border-bottom: none; }

#workboard-view .wba-overdue-asset {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  color: var(--wb-text-primary);
  min-width: 90px;
}

#workboard-view .wba-overdue-site {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 8px;
  background: rgba(239, 68, 68, 0.15);
  color: var(--wb-status-rejected);
}

#workboard-view .wba-overdue-tdd {
  color: var(--wb-text-muted);
}

#workboard-view .wba-overdue-days {
  font-weight: 700;
  color: var(--wb-status-rejected);
  margin-left: auto;
}

/* ── Site Performance Matrix ─────────────────────────────────────── */
#workboard-view .wba-matrix-wrap {
  margin: 0 24px 24px;
  overflow-x: auto;
  border-radius: var(--wb-radius-md);
  border: 1px solid var(--wb-glass-border);
}

#workboard-view .wba-matrix-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

#workboard-view .wba-matrix-table thead th {
  background: var(--wb-bg-tertiary);
  color: var(--wb-text-muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--wb-glass-border);
  white-space: nowrap;
}

#workboard-view .wba-matrix-table tbody tr {
  border-bottom: 1px solid var(--wb-glass-border);
  transition: var(--wb-transition);
}

#workboard-view .wba-matrix-table tbody tr:last-child { border-bottom: none; }

#workboard-view .wba-matrix-table tbody tr:hover {
  background: var(--wb-bg-hover);
}

#workboard-view .wba-matrix-table tbody td {
  padding: 10px 14px;
  color: var(--wb-text-secondary);
  vertical-align: middle;
}

#workboard-view .wba-matrix-site {
  font-weight: 700;
  color: var(--wb-text-primary) !important;
  font-size: 13px;
}

#workboard-view .wba-matrix-bar-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 100px;
}

#workboard-view .wba-matrix-bar {
  height: 6px;
  border-radius: 3px;
  min-width: 2px;
  max-width: 80px;
  transition: width 0.4s ease;
}

#workboard-view .wba-perf-great {
  font-size: 12px;
  font-weight: 600;
  color: var(--wb-status-confirmed);
}

#workboard-view .wba-perf-ok {
  font-size: 12px;
  font-weight: 600;
  color: var(--wb-status-rescheduled);
}

#workboard-view .wba-perf-low {
  font-size: 12px;
  font-weight: 600;
  color: var(--wb-status-rejected);
}

/* ── Operational Alert KPIs ──────────────────────────────────────── */
#workboard-view .wba-alert-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  padding: 0 24px 16px;
}

#workboard-view .wba-alert-kpi {
  background: var(--wb-bg-secondary);
  border: 1px solid var(--wb-glass-border);
  border-radius: var(--wb-radius-md);
  padding: 16px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

#workboard-view .wba-alert-kpi::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--wb-glass-border);
}

#workboard-view .wba-alert-kpi-warn::before { background: var(--wb-status-rejected); }
#workboard-view .wba-alert-kpi-ok::before { background: var(--wb-status-confirmed); }

#workboard-view .wba-alert-kpi-value {
  font-size: 28px;
  font-weight: 800;
  color: var(--wb-text-primary);
  line-height: 1;
  margin-bottom: 6px;
  font-variant-numeric: tabular-nums;
}

#workboard-view .wba-alert-kpi-warn .wba-alert-kpi-value { color: var(--wb-status-rejected); }
#workboard-view .wba-alert-kpi-ok .wba-alert-kpi-value { color: var(--wb-status-confirmed); }

#workboard-view .wba-alert-kpi-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--wb-text-secondary);
  margin-bottom: 3px;
}

#workboard-view .wba-alert-kpi-sub {
  font-size: 10px;
  color: var(--wb-text-muted);
  line-height: 1.3;
}

/* ── Stale confirmed list ────────────────────────────────────────── */
#workboard-view .wba-stale-list {
  margin: 0 24px 16px;
  background: rgba(245, 158, 11, 0.06);
  border: 1px solid rgba(245, 158, 11, 0.2);
  border-radius: var(--wb-radius-md);
  padding: 12px 16px;
}

#workboard-view .wba-stale-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--wb-status-rescheduled);
  margin-bottom: 10px;
}

#workboard-view .wba-stale-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(245, 158, 11, 0.1);
  font-size: 12px;
  flex-wrap: wrap;
}

#workboard-view .wba-stale-item:last-child { border-bottom: none; }

#workboard-view .wba-stale-asset {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  color: var(--wb-text-primary);
  min-width: 90px;
}

#workboard-view .wba-stale-site {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 8px;
  background: rgba(245, 158, 11, 0.15);
  color: var(--wb-status-rescheduled);
}

#workboard-view .wba-stale-model {
  font-size: 11px;
  color: var(--wb-text-secondary);
}

#workboard-view .wba-stale-by {
  font-size: 11px;
  color: var(--wb-text-muted);
}

#workboard-view .wba-stale-age {
  font-weight: 700;
  color: var(--wb-status-rescheduled);
  margin-left: auto;
}


/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 1200px) {
  #workboard-view .wba-charts-row { flex-direction: column; }
  #workboard-view .wba-chart-card.wba-chart-wide { flex: 1; }
  #workboard-view .wba-accuracy-grid { grid-template-columns: repeat(2, 1fr); }
  #workboard-view .wba-alert-kpis { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
  #workboard-view .wba-kpi-grid { grid-template-columns: repeat(2, 1fr); }
  #workboard-view .wba-accuracy-grid { grid-template-columns: repeat(2, 1fr); }
  #workboard-view .wba-alert-kpis { grid-template-columns: repeat(2, 1fr); }
}

/* ═══════════════════════════════════════════════════════════════════
   CALENDAR SITE FILTER BAR
   ═══════════════════════════════════════════════════════════════════ */

#workboard-view .wb-cal-site-filter {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: rgba(255,255,255,0.03);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-wrap: wrap;
}

#workboard-view .wb-cal-site-filter-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  white-space: nowrap;
  flex-shrink: 0;
}

#workboard-view .wb-cal-filter-clear {
  background: rgba(239,68,68,0.1);
  border: 1px solid rgba(239,68,68,0.3);
  border-radius: 6px;
  color: #ef4444;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  padding: 2px 8px;
  transition: all 0.15s ease;
  white-space: nowrap;
}

#workboard-view .wb-cal-filter-clear:hover {
  background: rgba(239,68,68,0.2);
  border-color: rgba(239,68,68,0.5);
}

#workboard-view .wb-cal-filter-count {
  font-size: 10px;
  color: #38bdf8;
  background: rgba(56,189,248,0.1);
  border: 1px solid rgba(56,189,248,0.2);
  border-radius: 10px;
  padding: 1px 8px;
  font-weight: 600;
}

#workboard-view .wb-cal-site-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1;
}

#workboard-view .wb-cal-site-pill {
  border: 1px solid;
  border-radius: 20px;
  padding: 4px 14px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  letter-spacing: 0.3px;
  white-space: nowrap;
  user-select: none;
}

#workboard-view .wb-cal-site-pill:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(0,0,0,0.3);
  opacity: 1 !important;
}

#workboard-view .wb-cal-site-pill:active {
  transform: translateY(0);
}

#workboard-view .wb-cal-site-pill.active {
  opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════════
   CALENDAR SITE FILTER — DROPDOWN STYLE (Cloudscape-inspired)
   ═══════════════════════════════════════════════════════════════════ */

/* Trigger button */
#workboard-view .wb-cal-dropdown-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px;
  color: #94a3b8;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 7px 14px;
  transition: all 0.15s ease;
  white-space: nowrap;
}

#workboard-view .wb-cal-dropdown-btn:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.25);
  color: #e2e8f0;
}

#workboard-view .wb-cal-dropdown-btn.active {
  background: rgba(56,189,248,0.12);
  border-color: rgba(56,189,248,0.4);
  color: #38bdf8;
}

#workboard-view .wb-cal-dropdown-arrow {
  font-size: 10px;
  opacity: 0.7;
  transition: transform 0.15s;
}

/* Dropdown panel */
#workboard-view .wb-cal-dropdown-wrap {
  position: relative;
  display: inline-block;
}

#workboard-view .wb-cal-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 500;
  background: #1e2535;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  min-width: 200px;
  overflow: hidden;
  animation: wbDropdownIn 0.12s ease;
}

@keyframes wbDropdownIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Header: Select all */
#workboard-view .wb-cal-dropdown-header {
  padding: 4px 0 0;
}

#workboard-view .wb-cal-dropdown-divider {
  height: 1px;
  background: rgba(255,255,255,0.08);
  margin: 4px 0;
}

/* List of site checkboxes */
#workboard-view .wb-cal-dropdown-list {
  padding: 4px 0;
  max-height: 280px;
  overflow-y: auto;
}

/* Each checkbox row */
#workboard-view .wb-cal-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  cursor: pointer;
  font-size: 13px;
  color: #cbd5e1;
  transition: background 0.1s;
  user-select: none;
}

#workboard-view .wb-cal-dropdown-item:hover {
  background: rgba(255,255,255,0.06);
  color: #e2e8f0;
}

#workboard-view .wb-cal-dropdown-item input[type=checkbox] {
  width: 15px;
  height: 15px;
  accent-color: #38bdf8;
  cursor: pointer;
  flex-shrink: 0;
}

/* Select all row — slightly different style */
#workboard-view .wb-cal-select-all {
  font-weight: 600;
  color: #e2e8f0;
  padding: 8px 16px 6px;
}

/* Coloured dot per site */
#workboard-view .wb-cal-dropdown-site-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Footer: Clear + Done */
#workboard-view .wb-cal-dropdown-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  border-top: 1px solid rgba(255,255,255,0.08);
  gap: 8px;
}

#workboard-view .wb-cal-dropdown-clear {
  background: none;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 20px;
  color: #94a3b8;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 5px 16px;
  transition: all 0.15s;
}

#workboard-view .wb-cal-dropdown-clear:hover {
  border-color: rgba(239,68,68,0.5);
  color: #ef4444;
  background: rgba(239,68,68,0.08);
}

#workboard-view .wb-cal-dropdown-done {
  background: linear-gradient(135deg, #ff9900 0%, #ec7211 100%);
  border: none;
  border-radius: 20px;
  color: #000;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  padding: 5px 20px;
  transition: all 0.15s;
}

#workboard-view .wb-cal-dropdown-done:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(255,153,0,0.4);
}

/* Reduce item padding to half */
#workboard-view .wb-cal-dropdown-item {
  padding: 4px 16px !important;
}
#workboard-view .wb-cal-select-all {
  padding: 6px 16px 4px !important;
}

/* ═══════════════════════════════════════════════════════════════════
   REJECTIONS TAB — ❌ Rejection Log
   ═══════════════════════════════════════════════════════════════════ */

/* Page wrapper */
#workboard-view .rej-page {
  padding: 0;
}

/* Header row */
#workboard-view .rej-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 12px;
  gap: 16px;
  flex-wrap: wrap;
}

#workboard-view .rej-title-block {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

#workboard-view .rej-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--wb-text-primary);
  margin: 0;
}

#workboard-view .rej-subtitle {
  font-size: 12px;
  color: var(--wb-text-muted);
}

#workboard-view .rej-header-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Filters */
#workboard-view .rej-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 0 24px 16px;
  align-items: flex-start;
}

#workboard-view .rej-filter-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#workboard-view .rej-filter-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--wb-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

#workboard-view .rej-filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Search group */
#workboard-view .rej-search-group {
  flex: 1;
  min-width: 220px;
}

#workboard-view .rej-search-row {
  display: flex;
  gap: 6px;
  align-items: flex-start;
}

#workboard-view .rej-search-input {
  flex: 1;
  background: var(--wb-bg-tertiary);
  border: 1px solid var(--wb-glass-border);
  border-radius: 6px;
  color: var(--wb-text-primary);
  font-size: 12px;
  font-family: inherit;
  padding: 6px 10px;
  resize: vertical;
  min-height: 44px;
  outline: none;
  transition: border-color 0.15s;
}

#workboard-view .rej-search-input:focus {
  border-color: rgba(239, 68, 68, 0.5);
}

#workboard-view .rej-search-input::placeholder {
  color: var(--wb-text-muted);
}

/* KPI row */
#workboard-view .rej-kpi-row {
  display: flex;
  gap: 12px;
  padding: 0 24px 20px;
  flex-wrap: wrap;
}

#workboard-view .rej-kpi-card {
  flex: 1;
  min-width: 120px;
  background: var(--wb-bg-secondary);
  border: 1px solid var(--wb-glass-border);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

#workboard-view .rej-kpi-card.rej-kpi-red {
  border-color: rgba(239, 68, 68, 0.3);
  background: rgba(239, 68, 68, 0.06);
}

#workboard-view .rej-kpi-card.rej-kpi-green {
  border-color: rgba(34, 197, 94, 0.3);
  background: rgba(34, 197, 94, 0.06);
}

#workboard-view .rej-kpi-value {
  font-size: 24px;
  font-weight: 800;
  color: var(--wb-text-primary);
  line-height: 1;
}

#workboard-view .rej-kpi-card.rej-kpi-red .rej-kpi-value {
  color: #ef4444;
}

#workboard-view .rej-kpi-card.rej-kpi-green .rej-kpi-value {
  color: #22c55e;
}

#workboard-view .rej-kpi-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--wb-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

#workboard-view .rej-kpi-sub {
  font-size: 10px;
  color: var(--wb-text-muted);
}

/* Loading state */
#workboard-view .rej-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px 24px;
  color: var(--wb-text-muted);
  font-size: 13px;
}

/* Table header */
#workboard-view .rej-table-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px 8px;
}

#workboard-view .rej-table-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--wb-text-primary);
}

/* Rejection table */
#workboard-view .rej-table th {
  cursor: default;
}

#workboard-view .rej-th-sortable {
  cursor: pointer !important;
  user-select: none;
}

#workboard-view .rej-th-sortable:hover {
  color: var(--wb-text-accent);
}

/* ═══════════════════════════════════════════════════════════════════
   DECOM FEATURE — red-soft styling for the rack decommission flow
   See docs/DECOM-FEATURE.md § 5 for the full UX spec.
   All classes are scoped to #workboard-view to prevent CSS leaking
   to other clusters (per 2026-07-06 rule).
   ═══════════════════════════════════════════════════════════════════ */

/* --- Nav + panel batch button: "➖ Add DECOM" (red soft) ------------ */
#workboard-view .wb-btn.wb-btn-add-decom {
  background: rgba(239, 68, 68, 0.14);
  color: #fca5a5;
  border: 1px solid rgba(239, 68, 68, 0.38);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
#workboard-view .wb-btn.wb-btn-add-decom:hover {
  background: rgba(239, 68, 68, 0.22);
  color: #fecaca;
  border-color: rgba(239, 68, 68, 0.6);
}

/* --- Chip badge in the calendar day cell: "+ DECOM" (red pill) ------ */
#workboard-view .wb-chip-decom-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.4;
  color: #fca5a5;
  background: rgba(239, 68, 68, 0.18);
  border: 1px solid rgba(239, 68, 68, 0.4);
  border-radius: 4px;
  letter-spacing: 0.3px;
  vertical-align: middle;
}
/* Highlight the whole site card slightly when it carries DECOMs */
#workboard-view .wb-site-card.has-decom {
  box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.22);
}

/* --- Day panel header badge: "+ DECOM ×N" ---------------------------- */
#workboard-view .wb-decom-header-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  color: #fca5a5;
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.38);
  border-radius: 6px;
  letter-spacing: 0.5px;
  vertical-align: middle;
}

/* --- Panel stats pill: "N DECOM" ------------------------------------ */
#workboard-view .wb-stat-pill.decom {
  background: rgba(239, 68, 68, 0.14);
  color: #fca5a5;
  border: 1px solid rgba(239, 68, 68, 0.35);
}

/* --- DECOM row (rack list): red-soft background + left border ------ */
/* Applied via renderPanelContent → `.wb-rack-item.wb-rack-decom` */
/* 2026-07-14 feedback: the row background + border-left stay red-soft
   in EVERY DECOM state (pending / confirmed / rescheduled / done).
   Only the status PILL inside the row switches colour to signal state
   change. This keeps DECOM rows visually distinct from install-flow
   rows at a glance, regardless of transition. */
#workboard-view .wb-rack-item.wb-rack-decom,
#workboard-view .wb-rack-item.wb-rack-decom.decom_pending,
#workboard-view .wb-rack-item.wb-rack-decom.decom_confirmed,
#workboard-view .wb-rack-item.wb-rack-decom.decom_rescheduled,
#workboard-view .wb-rack-item.wb-rack-decom.decommissioned {
  background: rgba(239, 68, 68, 0.055) !important;
  border-left: 3px solid #ef4444 !important;
  padding-left: 8px;
}

/* --- DECOM badge inside the row: "🔻 DECOM" ------------------------- */
#workboard-view .wb-decom-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  margin: 0 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: #fca5a5;
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.38);
  border-radius: 6px;
  white-space: nowrap;
}
#workboard-view .wb-decom-badge.confirmed {
  color: #86efac;
  background: rgba(34, 197, 94, 0.15);
  border-color: rgba(34, 197, 94, 0.38);
}

/* --- Legacy-hint when the asset has no CURRENT install record ------- */
#workboard-view .wb-decom-nocurrent-hint {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 6px;
  font-size: 9px;
  font-weight: 700;
  color: #fde68a;
  background: rgba(245, 158, 11, 0.14);
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: 4px;
  letter-spacing: 0.3px;
  cursor: help;
}

/* --- Per-status pills inside the DECOM row -------------------------- */
#workboard-view .wb-rack-status.decom-decom_pending {
  background: rgba(239, 68, 68, 0.15);
  color: #fca5a5;
  border: 1px solid rgba(239, 68, 68, 0.35);
}
#workboard-view .wb-rack-status.decom-decom_confirmed {
  background: rgba(34, 197, 94, 0.15);
  color: #86efac;
  border: 1px solid rgba(34, 197, 94, 0.4);
}
#workboard-view .wb-rack-status.decom-decom_rescheduled {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.4);
}
#workboard-view .wb-rack-status.decom-decommissioned {
  background: rgba(107, 114, 128, 0.2);
  color: #d1d5db;
  border: 1px solid rgba(107, 114, 128, 0.4);
}

/* --- "➖ Decommission" action button --------------------------------- */
#workboard-view .wb-btn.wb-btn-decommission {
  background: rgba(239, 68, 68, 0.16);
  color: #fca5a5;
  border: 1px solid rgba(239, 68, 68, 0.42);
  font-weight: 600;
  transition: background 0.15s, color 0.15s;
}
#workboard-view .wb-btn.wb-btn-decommission:hover {
  background: rgba(239, 68, 68, 0.28);
  color: #fecaca;
  border-color: rgba(239, 68, 68, 0.7);
}

/* --- Add DECOM modal: red-tinted header ----------------------------- */
#workboard-view .wb-decom-modal .wb-decom-modal-header,
.wb-decom-modal .wb-decom-modal-header {
  background: linear-gradient(90deg, rgba(239, 68, 68, 0.12), rgba(239, 68, 68, 0.04));
  border-bottom: 1px solid rgba(239, 68, 68, 0.3);
  color: #fecaca;
}

/* --- Submit button in Add DECOM modal ------------------------------- */
.wb-add-decom-btn-submit {
  background: linear-gradient(135deg, #ef4444, #b91c1c) !important;
  color: #fff !important;
  border: 1px solid rgba(239, 68, 68, 0.7) !important;
  font-weight: 700;
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
  transition: filter 0.15s, transform 0.05s;
}
.wb-add-decom-btn-submit:hover {
  filter: brightness(1.12);
}
.wb-add-decom-btn-submit:active {
  transform: translateY(1px);
}

/* ═══════════════════════════════════════════════════════════════════
   DATE INPUT — DARK PICKER (2026-07-14 · CLEANED 2026-08-18 T11:01)
   ═══════════════════════════════════════════════════════════════════
   Historical bug (2026-08-18 T10:59 user report — icon still dark):
     Three overlapping blocks in this file were fighting each other:
       (a) scoped #workboard-view/.wb-add-asset-input rule with
           `filter: invert(1) brightness(1.4)` (2026-07-14)
       (b) `!important` override with `filter: invert(1) brightness(2)`
           on the `-overlay` container selectors (2026-07-14 T11:41)
       (c) GLOBAL `#workboard-root`-scoped rule with the same filter
           at line ~4244 (2026-07-18)
       (d) GLOBAL body-level rule at line ~4327 (2026-08-18 T10:52)
     Chrome/Firefox/Edge, with `color-scheme: dark` set, already paint
     the calendar icon WHITE natively. Applying `filter: invert(1)` on
     TOP of that flipped the already-white icon back to BLACK, which
     is exactly what the user reported ("icono oscuro").

   Correct approach (kept intentionally minimal):
     1. Set `color-scheme: dark` on every native date/time picker
        globally. The browser then paints the icon in white AND
        renders the popup with dark theming — no custom filter needed.
     2. Ensure cursor:pointer + opacity feedback on the icon.
     3. DO NOT apply any filter. Any historical `filter:` rule that
        re-appears here after this comment will regress the user
        report of 2026-08-18. */
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"] {
  color-scheme: dark;
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="week"]::-webkit-calendar-picker-indicator {
  filter: none;                 /* explicit reset — no historical invert */
  cursor: pointer;
  opacity: 0.85;
  transition: opacity 0.15s ease;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════════
   MOVEMENT FEATURE — soft-blue theme (2026-07-16)
   ═══════════════════════════════════════════════════════════════════
   Palette per Q11 (frozen decision in docs/MOVEMENT-FEATURE.md):
     • Base:   rgba(59, 130, 246, 0.14)
     • Hover:  rgba(59, 130, 246, 0.22)
     • Border: rgba(59, 130, 246, 0.4)
     • Text:   #93c5fd  (text hover: #bfdbfe)
     • Submit gradient: linear-gradient(135deg, #3b82f6, #1d4ed8)

   Structural notes (mirrors DECOM):
     • Row background stays soft-blue in ALL movement states
       (pending / confirmed / rescheduled). The status pill inside
       carries the state (MOV-EXT PENDING, etc — set by JS).
     • The Modal is body-appended (outside #workboard-view), so
       .wb-movement-modal rules exist BOTH scoped and unscoped —
       same pattern DECOM uses. Same reason (see workboard.css
       § "reschedule DECOM modal" note about body-appended overlays).
   ═════════════════════════════════════════════════════════════════ */

/* --- Add Movement button in the top nav bar ------------------------ */
#workboard-view .wb-btn.wb-btn-add-movement {
  background: rgba(59, 130, 246, 0.14);
  color: #93c5fd;
  border: 1px solid rgba(59, 130, 246, 0.4);
  font-weight: 600;
  transition: background 0.15s, color 0.15s;
}
#workboard-view .wb-btn.wb-btn-add-movement:hover {
  background: rgba(59, 130, 246, 0.22);
  color: #bfdbfe;
  border-color: rgba(59, 130, 246, 0.6);
}

/* --- MOVEMENT row (rack list): soft-blue background + left border -- */
/* Applied via renderPanelContent → `.wb-rack-item.wb-rack-movement`.
   Same design intent as DECOM: row keeps its palette across ALL
   states, only the status pill inside changes colour to reflect state.
   The pill reuses .wb-rack-status.new/.confirmed/.rescheduled classes
   (already themed) — we don't override them here. */
#workboard-view .wb-rack-item.wb-rack-movement,
#workboard-view .wb-rack-item.wb-rack-movement.movement_pending,
#workboard-view .wb-rack-item.wb-rack-movement.movement_confirmed,
#workboard-view .wb-rack-item.wb-rack-movement.movement_rescheduled {
  background: rgba(59, 130, 246, 0.055) !important;
  border-left: 3px solid #3b82f6 !important;
  padding-left: 8px;
}

/* --- Source-site hint pill inside the MOVEMENT row ("ZAZ60 → ") ---- */
/* Rendered by workboard.js sourceHint template. Type 2/3 movements
   usually populate sourceSite; Type 1 doesn't (no source). */
#workboard-view .wb-rack-source {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  margin: 0 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: #93c5fd;
  background: rgba(59, 130, 246, 0.14);
  border: 1px solid rgba(59, 130, 246, 0.38);
  border-radius: 6px;
  white-space: nowrap;
}

/* --- Apply button ("Install" / "Migrate" / "Move" per type) -------- */
#workboard-view .wb-btn.wb-btn-apply-movement {
  background: rgba(59, 130, 246, 0.18);
  color: #93c5fd;
  border: 1px solid rgba(59, 130, 246, 0.45);
  font-weight: 600;
  transition: background 0.15s, color 0.15s;
}
#workboard-view .wb-btn.wb-btn-apply-movement:hover {
  background: rgba(59, 130, 246, 0.3);
  color: #dbeafe;
  border-color: rgba(59, 130, 246, 0.7);
}

/* --- Add Movement modal: blue-tinted header (body-appended) --------- */
/* The modal lives outside #workboard-view, so we need BOTH the scoped
   selector (for consistency with rules inside the workboard) AND the
   unscoped one (which is the one that actually applies at runtime). */
#workboard-view .wb-movement-modal .wb-movement-modal-header,
.wb-movement-modal .wb-movement-modal-header {
  background: linear-gradient(90deg, rgba(59, 130, 246, 0.14), rgba(59, 130, 246, 0.04));
  border-bottom: 1px solid rgba(59, 130, 246, 0.35);
  color: #bfdbfe;
}

/* --- Submit button in Add Movement / Reschedule modals -------------- */
/* Same shape as DECOM's submit but with the Q11 blue gradient. */
.wb-add-movement-btn-submit {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important;
  color: #fff !important;
  border: 1px solid rgba(59, 130, 246, 0.7) !important;
  font-weight: 700;
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
  transition: filter 0.15s, transform 0.05s;
}
.wb-add-movement-btn-submit:hover {
  filter: brightness(1.12);
}
.wb-add-movement-btn-submit:active {
  transform: translateY(1px);
}

/* ═══════════════════════════════════════════════════════════════════
   MOVEMENT ROW — inline "old → new" positions (2026-07-26 v3)
   ═══════════════════════════════════════════════════════════════════
   Final layout per user feedback:
     Line 1  →  rack-id · model · (source span: oldPos → \n newPos) · status pill · actions
   Both positions live inside a single `.wb-rack-source` span:
     • Line inside the span:  `oldPos →`
     • <br>
     • Line inside the span:  `newPos`
   The span is rendered with the SAME plain-white monospace look as
   `.wb-rack-position` (no soft-blue pill background / border), so it
   blends visually with the rest of the install-flow rack style —
   arrow + newline + new position stack on TWO lines within the pill.

   The row itself still flex-wraps so actions can drop to a second
   physical line on narrow days, but the source pill no longer
   generates its own second row — it grows vertically instead. */
#workboard-view .wb-rack-item.wb-rack-movement {
  /* Row allowed to grow taller. Keep actions on top-right by default;
     flex-wrap keeps the safety-net if the browser is tiny. */
  align-items: center;
  flex-wrap: wrap;
  row-gap: 4px;
}

/* Neutralise the soft-blue pill for MOVEMENT rows and re-style the
   source span as plain white monospace, matching the generic
   `.wb-rack-position`. Two lines are separated by a hard `<br>` in
   the JS template. `display:inline-block` + `white-space:normal`
   let the <br> actually break; `line-height:1.35` gives a bit of
   air between the two lines. */
#workboard-view .wb-rack-item.wb-rack-movement .wb-rack-source {
  /* `flex: 1` makes the positions block ABSORB all remaining space
     inside `.wb-rack-item-main`, which pushes the status pill
     (`MOV-INT PENDING/CONFIRMED/RESCHEDULED`) to the RIGHT edge of the
     main container — matching the install-flow rack layout where the
     status pill (NEW/CONFIRMED/…) hugs the right side, with the
     actions column starting immediately after it. */
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  margin: 0 6px;
  background: transparent;
  border: none;
  border-radius: 0;
  color: #ffffff;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  white-space: normal;
  line-height: 1.35;
  word-break: break-all;
  vertical-align: middle;
}

/* ═══════════════════════════════════════════════════════════════════════
   BAY AGENDA — Loading Bay reservations tab (2026-07-24)
   Integrated directly into workboard.css. See docs/BAY-AGENDA-FEATURE.md.
   All classes are prefixed with .bay- and scoped to #bay-agenda-view.
═══════════════════════════════════════════════════════════════════════ */
/*
 * bay-agenda.css — Loading Bay Agenda tab for ZAZ Workboard
 *
 * All classes are prefixed with .bay- and scoped to #bay-agenda-view.
 * Palette teal for MANUAL reservations. Auto-generated blocks reuse the
 * existing install/decom/movement palettes.
 *
 * Introduced 2026-07-24. See docs/BAY-AGENDA-FEATURE.md.
 */

/* ═══════════════════════════════════════════════════════════════════
   Scoped variables — declared on the view root so they don't leak
═══════════════════════════════════════════════════════════════════ */
#bay-agenda-view {
  --bay-bg-panel:      #161b22;
  --bay-bg-panel-2:    #1c222c;
  --bay-bg-hover:      #232a35;
  --bay-border-soft:   rgba(255,255,255,0.06);
  --bay-border:        rgba(255,255,255,0.1);
  --bay-border-strong: rgba(255,255,255,0.18);
  --bay-text:          #e6edf3;
  --bay-text-dim:      #8b949e;
  --bay-text-mute:     #6e7681;

  --bay:               rgb(20, 184, 166);
  --bay-strong:        rgb(45, 212, 191);
  --bay-soft:          rgba(20, 184, 166, 0.14);
  --bay-soft-hi:       rgba(20, 184, 166, 0.22);
  --bay-border-teal:   rgba(20, 184, 166, 0.4);

  /* ZAZ AZ palette — from az-palette.js OVERRIDES.ZAZ */
  --az60:              #1565c0;
  --az60-chip:         #42a5f5;
  --az61:              #f9a825;
  --az61-chip:         #ffca28;
  --az62:              #c62828;
  --az62-chip:         #ef5350;

  /* Site shades */
  --ZAZ060: #6ab8ff;  --ZAZ070: #1a6fd4;
  --ZAZ061: #ffe066;  --ZAZ071: #c07800;
  --ZAZ062: #ff8ec8;  --ZAZ072: #c0185a;

  /* Auto-gen palettes */
  --install:   rgba(34,197,94,0.15);   --install-b:  rgba(34,197,94,0.4);   --install-t:  #86efac;
  --decom:     rgba(239,68,68,0.14);   --decom-b:    rgba(239,68,68,0.4);   --decom-t:    #fca5a5;
  --movement:  rgba(59,130,246,0.14);  --movement-b: rgba(59,130,246,0.4);  --movement-t: #93c5fd;
}

/* Root container */
#bay-agenda-view {
  color: var(--bay-text);
  font-size: 14px;
  line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════════
   SCOPE BAR (AZ + site selector)
═══════════════════════════════════════════════════════════════════ */
#bay-agenda-view .bay-scope-bar {
  background: var(--bay-bg-panel);
  border-bottom: 1px solid var(--bay-border);
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
#bay-agenda-view .bay-az-group,
#bay-agenda-view .bay-site-group {
  display: flex;
  gap: 6px;
  align-items: center;
}
#bay-agenda-view .bay-az-pill {
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid var(--bay-border-strong);
  background: var(--bay-bg-panel-2);
  color: var(--bay-text-dim);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.15s;
}
#bay-agenda-view .bay-az-pill:hover { color: var(--bay-text); background: var(--bay-bg-hover); }
#bay-agenda-view .bay-az-pill .az-name { font-size: 13px; }
#bay-agenda-view .bay-az-pill .az-count {
  font-size: 10px;
  background: rgba(255,255,255,0.08);
  padding: 1px 6px;
  border-radius: 10px;
  color: var(--bay-text-dim);
}
#bay-agenda-view .bay-az-pill.active {
  color: var(--bay-text);
  border-width: 2px;
  padding: 7px 13px;
}
#bay-agenda-view .bay-az-pill[data-az="ZAZ60"].active { border-color: var(--az60); background: rgba(21,101,192,0.15); color: #90caf9; }
#bay-agenda-view .bay-az-pill[data-az="ZAZ61"].active { border-color: var(--az61); background: rgba(249,168,37,0.15); color: #ffe082; }
#bay-agenda-view .bay-az-pill[data-az="ZAZ62"].active { border-color: var(--az62); background: rgba(198,40,40,0.15); color: #ef9a9a; }

#bay-agenda-view .bay-az-pill .az-dot {
  width: 10px; height: 10px; border-radius: 50%;
}
#bay-agenda-view .bay-az-pill[data-az="ZAZ60"] .az-dot { background: var(--az60-chip); }
#bay-agenda-view .bay-az-pill[data-az="ZAZ61"] .az-dot { background: var(--az61-chip); }
#bay-agenda-view .bay-az-pill[data-az="ZAZ62"] .az-dot { background: var(--az62-chip); }

#bay-agenda-view .bay-scope-divider {
  width: 1px; height: 32px;
  background: var(--bay-border);
  margin: 0 4px;
}
#bay-agenda-view .bay-site-chip {
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid var(--bay-border-strong);
  background: var(--bay-bg-panel-2);
  color: var(--bay-text-dim);
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  display: flex;
  align-items: center;
  gap: 6px;
}
#bay-agenda-view .bay-site-chip:hover { color: var(--bay-text); background: var(--bay-bg-hover); }
#bay-agenda-view .bay-site-chip .site-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
#bay-agenda-view .bay-site-chip.active {
  color: var(--bay-text);
  border-width: 2px;
  padding: 5px 11px;
}
#bay-agenda-view .bay-site-chip[data-site="ZAZ060"] .site-dot { background: var(--ZAZ060); }
#bay-agenda-view .bay-site-chip[data-site="ZAZ070"] .site-dot { background: var(--ZAZ070); }
#bay-agenda-view .bay-site-chip[data-site="ZAZ061"] .site-dot { background: var(--ZAZ061); }
#bay-agenda-view .bay-site-chip[data-site="ZAZ071"] .site-dot { background: var(--ZAZ071); }
#bay-agenda-view .bay-site-chip[data-site="ZAZ062"] .site-dot { background: var(--ZAZ062); }
#bay-agenda-view .bay-site-chip[data-site="ZAZ072"] .site-dot { background: var(--ZAZ072); }
#bay-agenda-view .bay-site-chip[data-site="ZAZ060"].active,
#bay-agenda-view .bay-site-chip[data-site="ZAZ070"].active { border-color: var(--az60); background: rgba(21,101,192,0.12); }
#bay-agenda-view .bay-site-chip[data-site="ZAZ061"].active,
#bay-agenda-view .bay-site-chip[data-site="ZAZ071"].active { border-color: var(--az61); background: rgba(249,168,37,0.12); }
#bay-agenda-view .bay-site-chip[data-site="ZAZ062"].active,
#bay-agenda-view .bay-site-chip[data-site="ZAZ072"].active { border-color: var(--az62); background: rgba(198,40,40,0.12); }
#bay-agenda-view .bay-site-chip[data-site="all-in-az"] {
  font-style: italic;
  color: var(--bay-text-mute);
}
#bay-agenda-view .bay-site-chip[data-site="all-in-az"].active {
  color: var(--bay-text); font-style: normal;
  border-width: 2px; padding: 5px 11px;
}
#bay-agenda-view .bay-site-chip[data-site="all-in-az"][data-active-az="ZAZ60"].active { border-color: var(--az60); background: rgba(21,101,192,0.12); }
#bay-agenda-view .bay-site-chip[data-site="all-in-az"][data-active-az="ZAZ61"].active { border-color: var(--az61); background: rgba(249,168,37,0.12); }
#bay-agenda-view .bay-site-chip[data-site="all-in-az"][data-active-az="ZAZ62"].active { border-color: var(--az62); background: rgba(198,40,40,0.12); }

/* ═══════════════════════════════════════════════════════════════════
   VIEW TOGGLE (Day/Week/Month)
═══════════════════════════════════════════════════════════════════ */
#bay-agenda-view .bay-subbar {
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: #0e1116;
  border-bottom: 1px solid var(--bay-border-soft);
}
#bay-agenda-view .bay-view-toggle {
  display: flex;
  background: var(--bay-bg-panel-2);
  border-radius: 6px;
  padding: 3px;
}
#bay-agenda-view .bay-view-toggle button {
  padding: 5px 14px;
  border: 0;
  background: transparent;
  color: var(--bay-text-dim);
  cursor: pointer;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
}
#bay-agenda-view .bay-view-toggle button.active { background: var(--bay); color: white; }
#bay-agenda-view .bay-date-nav { display: flex; align-items: center; gap: 6px; }
#bay-agenda-view .bay-date-nav button {
  width: 28px; height: 28px;
  border-radius: 5px;
  border: 1px solid var(--bay-border-strong);
  background: var(--bay-bg-panel-2);
  color: var(--bay-text);
  cursor: pointer;
}
#bay-agenda-view .bay-date-label { font-weight: 600; min-width: 240px; text-align: center; }
#bay-agenda-view .bay-today-btn,
#bay-agenda-view .bay-reserve-btn {
  padding: 5px 12px;
  border-radius: 5px;
  border: 1px solid var(--bay-border-strong);
  background: var(--bay-bg-panel-2);
  color: var(--bay-text);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
}
#bay-agenda-view .bay-reserve-btn {
  background: var(--bay-soft);
  border-color: var(--bay-border-teal);
  color: var(--bay-strong);
}
#bay-agenda-view .bay-reserve-btn:hover { background: var(--bay-soft-hi); }

/* ═══════════════════════════════════════════════════════════════════
   DAY VIEW
═══════════════════════════════════════════════════════════════════ */
#bay-agenda-view .bay-day-container {
  display: grid;
  grid-template-columns: 60px 1fr;
  background: var(--bay-bg-panel);
  border: 1px solid var(--bay-border);
  border-radius: 8px;
  margin: 16px 20px;
  overflow: hidden;
}
#bay-agenda-view .bay-day-hours {
  border-right: 1px solid var(--bay-border-soft);
  background: var(--bay-bg-panel);
}
#bay-agenda-view .bay-day-hour {
  height: 60px;
  padding: 4px 8px;
  font-size: 11px;
  color: var(--bay-text-mute);
  border-bottom: 1px solid var(--bay-border-soft);
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}
#bay-agenda-view .bay-day-slots {
  position: relative;
  background: repeating-linear-gradient(to bottom, var(--bay-bg-panel) 0px, var(--bay-bg-panel) 59px, var(--bay-border-soft) 59px, var(--bay-border-soft) 60px);
  min-height: 660px;
}
#bay-agenda-view .bay-block {
  position: absolute;
  left: 8px;
  right: 8px;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow: hidden;
  background: var(--bay-soft);
  border-left: 4px solid var(--bay);
  color: var(--bay-strong);
  transition: transform 0.1s;
  z-index: 2;
}
#bay-agenda-view .bay-block:hover { background: var(--bay-soft-hi); transform: translateX(1px); }
#bay-agenda-view .bay-block-title {
  font-weight: 700; font-size: 13px; line-height: 1.2;
  display: flex; gap: 6px; align-items: center;
}
#bay-agenda-view .bay-block-meta { font-size: 11px; color: var(--bay-text-dim); }
#bay-agenda-view .bay-block-desc { font-size: 11px; color: var(--bay-text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#bay-agenda-view .bay-block.auto {
  border: 1px dashed;
  border-left-width: 4px;
}
#bay-agenda-view .bay-block.auto-install  { border-color: var(--install-b); color: var(--install-t); background: var(--install); }
#bay-agenda-view .bay-block.auto-decom    { border-color: var(--decom-b); color: var(--decom-t); background: var(--decom); }
#bay-agenda-view .bay-block.auto-movement { border-color: var(--movement-b); color: var(--movement-t); background: var(--movement); }
#bay-agenda-view .bay-block-auto-badge {
  display: inline-block;
  padding: 1px 6px;
  background: rgba(255,255,255,0.1);
  border-radius: 2px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
}
#bay-agenda-view .bay-block-site-tag {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: #0e1116;
}
#bay-agenda-view .bay-block-site-tag.ZAZ060 { background: rgba(66,165,245,0.22); color: #42a5f5; }
#bay-agenda-view .bay-block-site-tag.ZAZ070 { background: rgba(21,101,192,0.22); color: #64b5f6; }
#bay-agenda-view .bay-block-site-tag.ZAZ061 { background: rgba(255,202,40,0.22); color: #ffca28; }
#bay-agenda-view .bay-block-site-tag.ZAZ071 { background: rgba(249,168,37,0.22); color: #ffd54f; }
#bay-agenda-view .bay-block-site-tag.ZAZ062 { background: rgba(239,83,80,0.22); color: #ef5350; }
#bay-agenda-view .bay-block-site-tag.ZAZ072 { background: rgba(198,40,40,0.22); color: #e57373; }
#bay-agenda-view .bay-empty-slot-hint {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  color: var(--bay-text-mute);
  font-size: 11px;
  cursor: pointer;
  padding: 8px 20px;
  border-radius: 6px;
  z-index: 1;
}
#bay-agenda-view .bay-empty-slot-hint:hover { color: var(--bay); background: var(--bay-soft); }
#bay-agenda-view .bay-now-line {
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: rgb(239,68,68);
  z-index: 5;
  pointer-events: none;
}
#bay-agenda-view .bay-now-line::before {
  content: '';
  position: absolute;
  left: -6px; top: -5px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: rgb(239,68,68);
}

/* ═══════════════════════════════════════════════════════════════════
   WEEK + MONTH
═══════════════════════════════════════════════════════════════════ */
#bay-agenda-view .bay-week-container,
#bay-agenda-view .bay-month-container {
  margin: 16px 20px;
  background: var(--bay-bg-panel);
  border: 1px solid var(--bay-border);
  border-radius: 8px;
  overflow: hidden;
  display: none;
}
#bay-agenda-view .bay-week-header {
  display: grid;
  grid-template-columns: 60px repeat(7, 1fr);
  background: var(--bay-bg-panel-2);
  border-bottom: 1px solid var(--bay-border);
}
#bay-agenda-view .bay-week-header-cell,
#bay-agenda-view .bay-month-header-cell {
  padding: 10px 8px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--bay-text-dim);
  border-right: 1px solid var(--bay-border-soft);
  letter-spacing: 0.5px;
}
#bay-agenda-view .bay-week-header-cell:last-child,
#bay-agenda-view .bay-month-header-cell:last-child { border-right: 0; }
#bay-agenda-view .bay-week-header-cell.today { color: var(--bay-text); background: rgba(59,130,246,0.15); }
#bay-agenda-view .bay-week-header-cell.weekend,
#bay-agenda-view .bay-month-header-cell.weekend { color: var(--bay-text-mute); background: rgba(0,0,0,0.15); }
#bay-agenda-view .bay-week-day-num { display: block; font-size: 18px; color: var(--bay-text); font-weight: 600; margin-top: 2px; }
#bay-agenda-view .bay-week-day-num.today { color: rgb(59,130,246); }
#bay-agenda-view .bay-week-body {
  display: grid;
  grid-template-columns: 60px repeat(7, 1fr);
  position: relative;
}
#bay-agenda-view .bay-week-hour-col {
  background: var(--bay-bg-panel);
  border-right: 1px solid var(--bay-border-soft);
}
#bay-agenda-view .bay-week-day-col {
  border-right: 1px solid var(--bay-border-soft);
  position: relative;
  min-height: 500px;
  background: repeating-linear-gradient(to bottom, var(--bay-bg-panel) 0px, var(--bay-bg-panel) 49px, var(--bay-border-soft) 49px, var(--bay-border-soft) 50px);
  cursor: pointer;
}
#bay-agenda-view .bay-week-day-col.weekend {
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,0.15) 0px, rgba(0,0,0,0.15) 49px, var(--bay-border-soft) 49px, var(--bay-border-soft) 50px);
  cursor: not-allowed;
}
#bay-agenda-view .bay-week-day-col:last-child { border-right: 0; }
#bay-agenda-view .bay-week-hour {
  height: 50px;
  padding: 2px 8px;
  font-size: 10px;
  color: var(--bay-text-mute);
  border-bottom: 1px solid var(--bay-border-soft);
  text-align: right;
}
#bay-agenda-view .bay-week-block {
  position: absolute;
  left: 2px; right: 2px;
  padding: 3px 6px;
  border-radius: 4px;
  font-size: 12px;
  overflow: hidden;
  cursor: pointer;
  border-left: 3px solid;
  line-height: 1.2;
}
#bay-agenda-view .bay-week-block.bay {
  background: var(--bay-soft);
  border-left-color: var(--bay);
  color: var(--bay-strong);
}
#bay-agenda-view .bay-week-block.bay:hover { background: var(--bay-soft-hi); }
#bay-agenda-view .bay-week-block.auto { border-left-style: dashed; }
#bay-agenda-view .bay-week-block.auto-install  { border-left-color: rgb(34,197,94); color: var(--install-t); background: var(--install); }
#bay-agenda-view .bay-week-block.auto-decom    { border-left-color: rgb(239,68,68); color: var(--decom-t); background: var(--decom); }
#bay-agenda-view .bay-week-block.auto-movement { border-left-color: rgb(59,130,246); color: var(--movement-t); background: var(--movement); }
#bay-agenda-view .bay-week-block-title { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Month */
#bay-agenda-view .bay-month-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: var(--bay-bg-panel-2);
  border-bottom: 1px solid var(--bay-border);
}
#bay-agenda-view .bay-month-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: minmax(120px, auto);
}
#bay-agenda-view .bay-month-cell {
  border-right: 1px solid var(--bay-border-soft);
  border-bottom: 1px solid var(--bay-border-soft);
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-height: 120px;
  cursor: pointer;
  position: relative;
}
#bay-agenda-view .bay-month-cell:hover { background: rgba(255,255,255,0.02); }
#bay-agenda-view .bay-month-cell:nth-child(7n) { border-right: 0; }
#bay-agenda-view .bay-month-cell.other-month { opacity: 0.35; cursor: default; }
#bay-agenda-view .bay-month-cell.weekend { background: rgba(0,0,0,0.15); cursor: not-allowed; }
#bay-agenda-view .bay-month-cell.today {
  background: rgba(59,130,246,0.08);
  outline: 2px solid rgba(59,130,246,0.5);
  outline-offset: -2px;
}
#bay-agenda-view .bay-month-day-num { font-size: 12px; font-weight: 600; color: var(--bay-text); margin-bottom: 2px; }
#bay-agenda-view .bay-month-cell.today .bay-month-day-num { color: rgb(59,130,246); font-weight: 800; }
#bay-agenda-view .bay-month-cell.weekend .bay-month-day-num { color: var(--bay-text-mute); }
#bay-agenda-view .bay-month-event {
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 12px;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-left: 3px solid;
  cursor: pointer;
}
#bay-agenda-view .bay-month-event.bay {
  background: var(--bay-soft);
  color: var(--bay-strong);
  border-left-color: var(--bay);
}
#bay-agenda-view .bay-month-event.bay:hover { background: var(--bay-soft-hi); }
#bay-agenda-view .bay-month-event.auto-install {
  background: var(--install); color: var(--install-t);
  border-left-color: rgb(34,197,94); border-left-style: dashed;
}
#bay-agenda-view .bay-month-event.auto-decom {
  background: var(--decom); color: var(--decom-t);
  border-left-color: rgb(239,68,68); border-left-style: dashed;
}
#bay-agenda-view .bay-month-event.auto-movement {
  background: var(--movement); color: var(--movement-t);
  border-left-color: rgb(59,130,246); border-left-style: dashed;
}
#bay-agenda-view .bay-month-more { font-size: 10px; color: var(--bay-text-mute); padding: 1px 6px; cursor: pointer; }
#bay-agenda-view .bay-month-more:hover { color: var(--bay-strong); }

/* Empty-state banner */
#bay-agenda-view .bay-empty-state {
  margin: 16px 20px;
  padding: 40px 20px;
  border: 1px dashed var(--bay-border-strong);
  border-radius: 8px;
  text-align: center;
  color: var(--bay-text-mute);
  font-size: 13px;
  display: none;
}
#bay-agenda-view .bay-empty-state.show { display: block; }
#bay-agenda-view .bay-empty-state b { color: var(--bay-text-dim); }

/* Loading indicator */
#bay-agenda-view .bay-loading {
  margin: 40px 20px;
  padding: 20px;
  text-align: center;
  color: var(--bay-text-mute);
  font-size: 13px;
  display: none;
}
#bay-agenda-view .bay-loading.show { display: block; }

/* ═══════════════════════════════════════════════════════════════════
   MODAL (Reserve Bay)
═══════════════════════════════════════════════════════════════════ */
.bay-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}
.bay-modal-overlay.open { display: flex; }
.bay-modal {
  background: #161b22;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 10px;
  width: 90%;
  max-width: 520px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  color: #e6edf3;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.bay-modal-header {
  padding: 14px 20px;
  background: linear-gradient(135deg, rgba(20,184,166,0.14), rgba(20,184,166,0.04));
  border-bottom: 1px solid rgba(20,184,166,0.4);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.bay-modal-header h3 { margin: 0; font-size: 15px; color: rgb(45,212,191); }
.bay-modal-close {
  background: transparent;
  border: 0;
  color: #8b949e;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
}
.bay-modal-body { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.bay-field { display: flex; flex-direction: column; gap: 4px; }
.bay-field label {
  font-size: 11px;
  color: #8b949e;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.bay-field input, .bay-field select, .bay-field textarea {
  background: #1c222c;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 5px;
  padding: 8px 10px;
  color: #e6edf3;
  font-size: 13px;
  font-family: inherit;
  color-scheme: dark;
}
.bay-field input:focus, .bay-field select:focus, .bay-field textarea:focus {
  outline: 0;
  border-color: rgb(20,184,166);
  box-shadow: 0 0 0 2px rgba(20,184,166,0.14);
}
.bay-field textarea { resize: vertical; min-height: 60px; }
.bay-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bay-field-hint { font-size: 11px; color: #6e7681; margin-top: 2px; }

.bay-site-picker { display: flex; gap: 6px; flex-wrap: wrap; }
.bay-site-picker-chip {
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.18);
  background: #1c222c;
  color: #8b949e;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.bay-site-picker-chip .site-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.bay-site-picker-chip:hover { color: #e6edf3; background: #232a35; }
.bay-site-picker-chip.active { color: #e6edf3; border-width: 2px; padding: 5px 9px; }
.bay-site-picker-chip[data-site="ZAZ060"] .site-dot { background: #6ab8ff; }
.bay-site-picker-chip[data-site="ZAZ070"] .site-dot { background: #1a6fd4; }
.bay-site-picker-chip[data-site="ZAZ061"] .site-dot { background: #ffe066; }
.bay-site-picker-chip[data-site="ZAZ071"] .site-dot { background: #c07800; }
.bay-site-picker-chip[data-site="ZAZ062"] .site-dot { background: #ff8ec8; }
.bay-site-picker-chip[data-site="ZAZ072"] .site-dot { background: #c0185a; }
.bay-site-picker-chip[data-site="ZAZ060"].active,
.bay-site-picker-chip[data-site="ZAZ070"].active { border-color: #1565c0; }
.bay-site-picker-chip[data-site="ZAZ061"].active,
.bay-site-picker-chip[data-site="ZAZ071"].active { border-color: #f9a825; }
.bay-site-picker-chip[data-site="ZAZ062"].active,
.bay-site-picker-chip[data-site="ZAZ072"].active { border-color: #c62828; }

/* ── All-day checkbox row (2026-07-26) ────────────────────────────
   Added when we replaced the native <input type="time"> with plain
   text inputs. The checkbox lets tech/admin lock the reservation to
   the whole working day (HOUR_START:00 – HOUR_END:00) with a single
   click; when ticked, the time-row is dimmed via opacity in the JS
   `_wireBayTimeInputs` helper. */
.bay-allday-field { margin-top: 2px; }
.bay-allday-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 12.5px !important;
  color: #cbd5e1 !important;
  font-weight: 600 !important;
  letter-spacing: 0.2px !important;
  text-transform: none !important;
  user-select: none;
}
.bay-allday-label input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: rgb(20, 184, 166);
  cursor: pointer;
  flex-shrink: 0;
  margin: 0;
}
.bay-allday-label span {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 12px;
  color: #93c5fd;
}
#bay-time-row {
  transition: opacity 0.15s ease;
}
#bay-time-row input[type="text"]:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.bay-conflict-banner {
  padding: 8px 12px;
  border-radius: 5px;
  background: rgba(234,179,8,0.12);
  border: 1px solid rgba(234,179,8,0.4);
  color: #fde68a;
  font-size: 12px;
  display: none;
}
.bay-conflict-banner.show { display: block; }
.bay-modal-footer {
  padding: 12px 20px;
  border-top: 1px solid rgba(255,255,255,0.06);
  background: #1c222c;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.bay-btn-cancel {
  padding: 8px 16px;
  border-radius: 5px;
  border: 1px solid rgba(255,255,255,0.18);
  background: transparent;
  color: #e6edf3;
  cursor: pointer;
  font-size: 13px;
}
.bay-btn-save {
  padding: 8px 20px;
  border-radius: 5px;
  border: 0;
  background: linear-gradient(135deg, rgb(20,184,166), rgb(15,118,110));
  color: white;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
}
.bay-btn-save:hover { filter: brightness(1.1); }
.bay-btn-save:disabled { opacity: 0.5; cursor: not-allowed; }
.bay-modal-error {
  padding: 8px 12px;
  border-radius: 5px;
  background: rgba(239,68,68,0.14);
  border: 1px solid rgba(239,68,68,0.4);
  color: #fca5a5;
  font-size: 12px;
  display: none;
}
.bay-modal-error.show { display: block; }

/* ═══════════════════════════════════════════════════════════════════
   DRAWER
═══════════════════════════════════════════════════════════════════ */
.bay-drawer-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: none; z-index: 9990; }
.bay-drawer-overlay.open { display: block; }
.bay-drawer {
  position: fixed;
  top: 0;
  right: -480px;
  width: 460px;
  height: 100vh;
  background: #161b22;
  border-left: 1px solid rgba(255,255,255,0.18);
  box-shadow: -10px 0 40px rgba(0,0,0,0.5);
  z-index: 9995;
  display: flex;
  flex-direction: column;
  transition: right 0.2s ease-out;
  color: #e6edf3;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.bay-drawer.open { right: 0; }
.bay-drawer-header {
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.bay-drawer-header.bay      { background: linear-gradient(135deg, rgba(20,184,166,0.14), transparent); border-bottom-color: rgba(20,184,166,0.4); }
.bay-drawer-header.install  { background: linear-gradient(135deg, rgba(34,197,94,0.15), transparent);  border-bottom-color: rgba(34,197,94,0.4); }
.bay-drawer-header.decom    { background: linear-gradient(135deg, rgba(239,68,68,0.14), transparent);  border-bottom-color: rgba(239,68,68,0.4); }
.bay-drawer-header.movement { background: linear-gradient(135deg, rgba(59,130,246,0.14), transparent); border-bottom-color: rgba(59,130,246,0.4); }
.bay-drawer-title { font-size: 16px; font-weight: 700; color: #e6edf3; margin: 0 0 4px 0; }
.bay-drawer-subtitle { font-size: 12px; color: #8b949e; }
.bay-drawer-source-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}
.bay-drawer-source-pill.bay      { background: rgba(20,184,166,0.14); color: rgb(45,212,191); }
.bay-drawer-source-pill.install  { background: rgba(34,197,94,0.15); color: #86efac; }
.bay-drawer-source-pill.decom    { background: rgba(239,68,68,0.14); color: #fca5a5; }
.bay-drawer-source-pill.movement { background: rgba(59,130,246,0.14); color: #93c5fd; }
.bay-drawer-close {
  background: transparent;
  border: 0;
  color: #8b949e;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  padding: 0 4px;
}
.bay-drawer-body {
  padding: 20px;
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.bay-drawer-section-label { font-size: 10px; color: #6e7681; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 4px; }
.bay-drawer-value { font-size: 13px; color: #e6edf3; }
.bay-drawer-value-big { font-size: 15px; font-weight: 700; color: #e6edf3; }
.bay-drawer-row { display: flex; gap: 20px; }
.bay-drawer-row > div { flex: 1; }
.bay-drawer-desc {
  font-size: 13px;
  color: #e6edf3;
  padding: 10px 12px;
  background: #1c222c;
  border-radius: 5px;
  border: 1px solid rgba(255,255,255,0.06);
  white-space: pre-wrap;
}
.bay-drawer-linked {
  padding: 10px 12px;
  background: #1c222c;
  border-radius: 5px;
  border: 1px solid rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
}
.bay-drawer-linked a { color: rgb(45,212,191); text-decoration: none; font-weight: 600; font-size: 12px; }
.bay-drawer-linked a:hover { text-decoration: underline; }
.bay-drawer-footer {
  padding: 14px 20px;
  border-top: 1px solid rgba(255,255,255,0.1);
  background: #1c222c;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.bay-drawer-footer-left, .bay-drawer-footer-right { display: flex; gap: 8px; }
.bay-drawer-btn {
  padding: 7px 14px;
  border-radius: 5px;
  border: 1px solid rgba(255,255,255,0.18);
  background: transparent;
  color: #e6edf3;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
}
.bay-drawer-btn:hover { background: #232a35; }
.bay-drawer-btn.primary { background: rgba(20,184,166,0.14); border-color: rgba(20,184,166,0.4); color: rgb(45,212,191); }
.bay-drawer-btn.primary:hover { background: rgba(20,184,166,0.22); }
.bay-drawer-btn.danger { background: rgba(239,68,68,0.14); border-color: rgba(239,68,68,0.4); color: #fca5a5; }
.bay-drawer-btn.danger:hover { background: rgba(239,68,68,0.25); }
.bay-drawer-az-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: #8b949e;
  background: #1c222c;
  border: 1px solid rgba(255,255,255,0.06);
}
.bay-drawer-az-tag .dot { width: 8px; height: 8px; border-radius: 50%; }
.bay-drawer-az-tag.ZAZ60 .dot { background: #42a5f5; }
.bay-drawer-az-tag.ZAZ61 .dot { background: #ffca28; }
.bay-drawer-az-tag.ZAZ62 .dot { background: #ef5350; }

/* Toast — same font as the rest of the workboard */
.bay-toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 20px;
  border-radius: 6px;
  background: #1c222c;
  border: 1px solid rgba(255,255,255,0.18);
  color: #e6edf3;
  font-size: 13px;
  z-index: 10001;
  animation: bay-toast-in 0.2s ease-out;
}
.bay-toast.success { border-color: rgba(34,197,94,0.5); color: #86efac; }
.bay-toast.error   { border-color: rgba(239,68,68,0.5); color: #fca5a5; }
@keyframes bay-toast-in {
  from { opacity: 0; transform: translate(-50%, 20px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* 2026-08-18 T11:01 — Two overlapping date-picker filter blocks that
   used to live here have been REMOVED. The canonical rule is up above
   (§ "DATE INPUT — DARK PICKER (2026-07-14 · CLEANED 2026-08-18 T11:01)")
   and applies globally with `color-scheme: dark` and `filter: none`.
   Do not add any new `filter: invert(...)` on picker indicators or the
   icon will regress to BLACK — Chrome already paints it white under
   color-scheme:dark, and inverting an already-white glyph → black.
   See TROUBLESHOOTING.md § "2026-08-18 T11:01 — dark calendar icon". */


/* ─────────────────────────────────────────────────────────────────────
 * 2026-08-18 T10:50 — Migration modal: wider + unified 13 px typography
 * ─────────────────────────────────────────────────────────────────────
 * User reports on the Add Migration bulk pane:
 *   1. The type dropdown label ("External Migration (rack from anothe…")
 *      gets clipped because the 600 px default `.wb-add-rack-modal`
 *      width is too narrow for a 2-column Step-1 header.
 *   2. Font sizes are inconsistent — the field LABELS ("MIGRATION TYPE",
 *      "TARGET DELIVERY DATE") are 12 px, but the input text below,
 *      the hint copy, the textarea and the example lines all render
 *      smaller. User wants the whole modal harmonised at ~13 px.
 *
 * Fix (scoped to .wb-movement-modal so it doesn't leak into DECOM /
 * Rack / Bay Agenda modals):
 *   • Widen from 600 px → 1000 px (still 96 vw on smaller screens).
 *   • Enforce 13 px baseline typography on every input, select,
 *     textarea, label, hint and helper block. Keep the .wb-add-asset-label
 *     bold+uppercase so the field titles remain visually strong.
 * ───────────────────────────────────────────────────────────────────── */
.wb-add-rack-modal.wb-movement-modal,
.wb-add-asset-modal.wb-movement-modal {
  width: 1000px !important;
  max-width: 96vw !important;
}
.wb-movement-modal .wb-add-asset-body,
.wb-movement-modal .wb-add-asset-body *,
.wb-movement-modal .wb-add-asset-input,
.wb-movement-modal select.wb-add-asset-input,
.wb-movement-modal textarea.wb-add-asset-input,
.wb-movement-modal .wb-add-asset-field,
.wb-movement-modal .wb-add-asset-field * {
  font-size: 13px !important;
  line-height: 1.45 !important;
}
/* Keep the field labels bold + uppercase (12 px caps-style — they were
   already looking right; only enforce the family/weight so the global
   rule above doesn't accidentally shrink them). */
.wb-movement-modal .wb-add-asset-label {
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.4px !important;
  text-transform: uppercase !important;
}
/* The <code> examples in the bulk helper block are monospace — bump
   them slightly to 12.5 px so they align visually with the 13 px body
   but stay noticeably "code". */
.wb-movement-modal code {
  font-size: 12px !important;
  line-height: 1.5 !important;
}

/* 2026-08-18 T11:05 — Migration modal tabs ("Single Migration" /
   "Bulk (multiple)") aligned with the field labels ("MIGRATION TYPE",
   "TARGET DELIVERY DATE"): 12 px bold uppercase caps-style. Previously
   they rendered at 13 px normal weight, which looked visually smaller
   and less structured than the field labels below them. */
.wb-movement-modal .wb-add-rack-tabs .wb-add-rack-tab {
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.4px !important;
  text-transform: uppercase !important;
  padding: 12px 20px !important;
}

/* ─────────────────────────────────────────────────────────────────────
 * 2026-08-18 T11:12 — Add DECOM & Add Rack modal typography parity
 * ─────────────────────────────────────────────────────────────────────
 * Same visual treatment as .wb-movement-modal so all three "add" modals
 * (Migration / DECOM / Rack) look and feel identical. The three modals
 * use the same underlying `.wb-add-rack-modal` container class; the
 * differentiator is a modifier class (.wb-decom-modal for DECOM, none
 * for the vanilla Add Rack).
 *
 * Selectors:
 *   .wb-decom-modal                      → Add DECOM
 *   .wb-add-rack-modal:not(.wb-decom-modal):not(.wb-movement-modal):not(.wb-boost-modal)
 *                                        → vanilla Add Rack
 *
 * Fields applied (all !important to win over base rules):
 *   • Widen to 1000 px (matches Migration)
 *   • 13 px baseline body + inputs + selects + textareas
 *   • 12 px bold uppercase labels + tabs
 *   • 12 px monospace <code> inside helper blocks
 * ───────────────────────────────────────────────────────────────────── */
.wb-add-rack-modal.wb-decom-modal,
.wb-add-asset-modal.wb-decom-modal,
.wb-add-rack-modal:not(.wb-decom-modal):not(.wb-movement-modal):not(.wb-boost-modal) {
  width: 1000px !important;
  max-width: 96vw !important;
}
.wb-decom-modal .wb-add-asset-body,
.wb-decom-modal .wb-add-asset-body *,
.wb-decom-modal .wb-add-asset-input,
.wb-decom-modal select.wb-add-asset-input,
.wb-decom-modal textarea.wb-add-asset-input,
.wb-decom-modal .wb-add-asset-field,
.wb-decom-modal .wb-add-asset-field *,
.wb-add-rack-modal:not(.wb-decom-modal):not(.wb-movement-modal):not(.wb-boost-modal) .wb-add-asset-body,
.wb-add-rack-modal:not(.wb-decom-modal):not(.wb-movement-modal):not(.wb-boost-modal) .wb-add-asset-body *,
.wb-add-rack-modal:not(.wb-decom-modal):not(.wb-movement-modal):not(.wb-boost-modal) .wb-add-asset-input,
.wb-add-rack-modal:not(.wb-decom-modal):not(.wb-movement-modal):not(.wb-boost-modal) select.wb-add-asset-input,
.wb-add-rack-modal:not(.wb-decom-modal):not(.wb-movement-modal):not(.wb-boost-modal) textarea.wb-add-asset-input,
.wb-add-rack-modal:not(.wb-decom-modal):not(.wb-movement-modal):not(.wb-boost-modal) .wb-add-asset-field,
.wb-add-rack-modal:not(.wb-decom-modal):not(.wb-movement-modal):not(.wb-boost-modal) .wb-add-asset-field * {
  font-size: 13px !important;
  line-height: 1.45 !important;
}
.wb-decom-modal .wb-add-asset-label,
.wb-add-rack-modal:not(.wb-decom-modal):not(.wb-movement-modal):not(.wb-boost-modal) .wb-add-asset-label {
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.4px !important;
  text-transform: uppercase !important;
}
.wb-decom-modal code,
.wb-add-rack-modal:not(.wb-decom-modal):not(.wb-movement-modal):not(.wb-boost-modal) code {
  font-size: 12px !important;
  line-height: 1.5 !important;
}
.wb-decom-modal .wb-add-rack-tabs .wb-add-rack-tab,
.wb-add-rack-modal:not(.wb-decom-modal):not(.wb-movement-modal):not(.wb-boost-modal) .wb-add-rack-tabs .wb-add-rack-tab {
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.4px !important;
  text-transform: uppercase !important;
  padding: 12px 20px !important;
}

/* ─────────────────────────────────────────────────────────────────────
 * 2026-08-18 T11:01 — FINAL date/time picker icon rule
 * ─────────────────────────────────────────────────────────────────────
 * The T10:50 FIX above was WRONG: it re-inverted an icon that Chrome
 * already paints white via `color-scheme: dark`, producing a BLACK icon
 * on the dark modal background (exact user report of 2026-08-18 T10:59).
 *
 * This final block uses `!important` to WIN the cascade against any
 * historical rule that might sneak back in above (e.g. legacy
 * `#workboard-root input[type="date"]::-webkit-calendar-picker-indicator
 *  { filter: invert(1) brightness(1.4); }` — such a rule still exists
 * in the `-view` selectors near the top of this file for the workboard
 * calendar, but the modals are body-appended so `#workboard-root` never
 * matches inside modals anyway).
 *
 * Rule of thumb: `color-scheme: dark` alone gives you a WHITE calendar
 * icon in every Blink/Gecko/WebKit browser released after 2022. DO NOT
 * apply `filter: invert(...)` on top — it will BREAK it.
 * ───────────────────────────────────────────────────────────────────── */
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"] {
  color-scheme: dark !important;
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="week"]::-webkit-calendar-picker-indicator {
  filter: none !important;          /* undo any historical invert() */
  cursor: pointer !important;
  opacity: 0.85 !important;
  transition: opacity 0.15s ease;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1 !important;
}