/* ═══════════════════════════════════════════════════════════════════════
   ZAZ Cluster Dashboard — Styles
   AWS Cloudscape design system — light (primary) + dark (opt-in)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── DEFAULT = LIGHT MODE (AWS Cloudscape) ── */
:root {
  /* Page & surface */
  --bg-page:       #f2f3f3;
  --bg-card:       #ffffff;
  --bg-card-hover: #f8f9fa;
  --bg-header:     #232f3e;   /* AWS dark navy */
  --bg-header2:    #31465f;   /* secondary nav */
  --bg-input:      #ffffff;
  --bg-table-head: #fafafa;
  --bg-table-row:  #ffffff;
  --bg-table-alt:  #f8f9fa;

  /* Borders */
  --border:        #d5dbdb;
  --border-light:  #aab7b8;
  --border-focus:  #0073bb;

  /* Text */
  --text-primary:  #16191f;
  --text-secondary:#545b64;
  --text-muted:    #879596;
  --text-link:     #0073bb;

  /* AWS brand colours */
  --aws-orange:    #ff9900;
  --aws-orange-dk: #ec7211;
  --accent-blue:   #0073bb;
  --accent-blue-lt:#f0f7ff;
  --accent-green:  #1d8102;
  --accent-green-lt:#f2f8f0;
  --accent-yellow: #8d6605;
  --accent-yellow-lt:#fdf8ee;
  --accent-red:    #d13212;
  --accent-red-lt: #fdf3f1;
  --accent-purple: #6b40c3;
  --accent-teal:   #00a591;

  --font-main: 'Amazon Ember', 'Helvetica Neue', Roboto, Arial, sans-serif;
  --font-mono: 'Courier New', Courier, monospace;

  --radius:    8px;
  --radius-sm: 4px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.08);
  --shadow:    0 1px 4px rgba(0,0,0,0.1), 0 2px 8px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.12);
}

/* ── DARK MODE overrides ── */
body.dark-mode {
  --bg-page:       #0f1117;
  --bg-card:       #1a1d27;
  --bg-card-hover: #1f2335;
  --bg-header:     #0d1117;
  --border:        #2d3148;
  --border-light:  #3a3f5c;

  --text-primary:  #e8eaf6;
  --text-secondary:#9ea3c0;
  --text-muted:    #5c6080;

  --accent-blue:   #4a9eff;
  --accent-green:  #2ecc71;
  --accent-yellow: #f39c12;
  --accent-red:    #e74c3c;
  --accent-purple: #9b59b6;
  --accent-teal:   #1abc9c;

  --status-ready:  #27ae60;
  --status-shipped:#2980b9;
  --status-pending:#e67e22;
  --status-blocked:#c0392b;

  --shadow:    0 2px 12px rgba(0,0,0,0.4);
}

/* Dark mode component overrides */
body.dark-mode .top-bar { background: #0d1117; border-bottom-color: #2d3148; }
body.dark-mode .top-bar h1 { color: #e8eaf6; }
body.dark-mode .subtitle { color: #9ea3c0; }
body.dark-mode .cal-day          { background: #12151f; }
body.dark-mode .cal-day.cal-weekend { background: #0e1018; }
body.dark-mode .cal-day.cal-today   { background: rgba(74,158,255,0.07); }
body.dark-mode .cal-day-popup       { background: #1a1d27; }
body.dark-mode .cal-popup-rich-header { background: #0d1020; }
body.dark-mode .cal-week-day-header   { background: #12151f; }
body.dark-mode .cal-week-cell         { background: #12151f; }
body.dark-mode .data-table thead th  { background: #12151f; color: #9ea3c0; }
body.dark-mode .data-table tbody tr  { background: #1a1d27; }
body.dark-mode .data-table tbody tr:hover { background: #1f2335; }
body.dark-mode .outlook-modal        { background: #1a1d27; }
body.dark-mode .outlook-modal-header { background: #0d1020; }
body.dark-mode .outlook-field input,
body.dark-mode .outlook-field textarea { background: #0a0c12; color: #e8eaf6; }
body.dark-mode .next4-day-card        { background: #12151f; }
body.dark-mode .next4-day-title       { background: #0d1020; }
body.dark-mode .next4-day-card.next4-today .next4-day-title { background: rgba(74,158,255,0.1); }
body.dark-mode .col-picker-modal      { background: #1a1d27; }
body.dark-mode .filter-group select,
body.dark-mode .filter-group input    { background: #12151f; color: #e8eaf6; }
body.dark-mode .paste-inner textarea  { background: #0a0c12; color: #e8eaf6; }
body.dark-mode .code-block            { background: #0a0c12; color: #1abc9c; }
body.dark-mode .paste-method          { background: #0d1020; }
body.dark-mode .paste-method kbd      { background: #1a1d27; color: #e8eaf6; }
body.dark-mode ::-webkit-scrollbar-track { background: #0f1117; }
body.dark-mode ::-webkit-scrollbar-thumb { background: #3a3f5c; }
body.dark-mode .cal-view-toggle       { background: #12151f; }
body.dark-mode .banner-info  { background: rgba(74,158,255,0.08); color: #a8c8ff; }
body.dark-mode .banner-success { background: rgba(46,204,113,0.08); color: #a8ffcc; }
body.dark-mode .banner-error { background: rgba(231,76,60,0.08); color: #ffb3ae; }
body.dark-mode .stat-card    { background: #1a1d27; border-color: #2d3148; }
body.dark-mode .card         { background: #1a1d27; border-color: #2d3148; }
body.dark-mode .filter-group select,
body.dark-mode .filter-group input { border-color: #3a3f5c; }
body.dark-mode .rack-table thead .col-checkbox,
body.dark-mode .rack-table thead th[data-col="dc"],
body.dark-mode .rack-table thead th[data-col="az"],
body.dark-mode .rack-table thead th[data-col="assetId"],
body.dark-mode .rack-table thead th[data-col="position"] { background: #12151f; }
body.dark-mode .row-red    { background: rgba(192,57,43,0.06) !important; }
body.dark-mode .row-green  { background: rgba(39,174,96,0.05) !important; }
body.dark-mode .row-yellow { background: rgba(243,156,18,0.05) !important; }
body.dark-mode .row-red    .col-checkbox,
body.dark-mode .row-red    td[data-col="dc"],
body.dark-mode .row-red    td[data-col="assetId"],
body.dark-mode .row-red    td[data-col="position"] { background: #1e1210 !important; }
body.dark-mode .row-green  .col-checkbox,
body.dark-mode .row-green  td[data-col="dc"],
body.dark-mode .row-green  td[data-col="assetId"],
body.dark-mode .row-green  td[data-col="position"] { background: #101e12 !important; }
body.dark-mode .row-yellow .col-checkbox,
body.dark-mode .row-yellow td[data-col="dc"],
body.dark-mode .row-yellow td[data-col="assetId"],
body.dark-mode .row-yellow td[data-col="position"] { background: #1e1a10 !important; }
body.dark-mode .badge-ready   { background: rgba(39,174,96,0.2);  color: #2ecc71; border-color: rgba(39,174,96,0.4); }
body.dark-mode .badge-shipped { background: rgba(41,128,185,0.2); color: #5dade2; border-color: rgba(41,128,185,0.4); }
body.dark-mode .badge-pending { background: rgba(230,126,34,0.2); color: #f39c12; border-color: rgba(230,126,34,0.4); }
body.dark-mode .badge-blocked { background: rgba(192,57,43,0.2);  color: #e74c3c; border-color: rgba(192,57,43,0.4); }
body.dark-mode .badge-default { background: rgba(100,100,120,0.2);color: #9ea3c0; border-color: rgba(100,100,120,0.3); }
body.dark-mode .next3-day-card { background: #12151f; }
body.dark-mode .next3-day-title { background: #0d1020; }
body.dark-mode .cal-popup-site-header { background: rgba(0,0,0,0.2); }
body.dark-mode .cal-popup-rack-table thead th { background: #0a0c12; }
body.dark-mode .paste-section details { background: #1a1d27; border-color: #2d3148; }
body.dark-mode .col-picker-item:hover { background: #1f2335; }
body.dark-mode .btn-ghost { color: #9ea3c0; border-color: #3a3f5c; }
body.dark-mode .btn-ghost:hover { background: #1f2335; color: #e8eaf6; }
body.dark-mode .section-title { color: #e8eaf6; border-bottom-color: #2d3148; }
body.dark-mode .next4-selection-bar { background: rgba(74,158,255,0.08); border-color: rgba(74,158,255,0.25); }

/* Theme toggle button */
.theme-toggle {
  background: transparent;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 16px;
  cursor: pointer;
  padding: 5px 9px;
  line-height: 1;
  transition: background 0.15s, color 0.15s;
}
.theme-toggle:hover { background: var(--bg-card-hover); color: var(--text-primary); }

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-main);
  background: var(--bg-page);
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.5;
  min-height: 100vh;
}

/* ── UTILITIES ── */
.hidden { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════════
   BREADCRUMB + PAGE HEADER  (matches Shipments app layout)
   ═══════════════════════════════════════════════════════════════════════ */
.page-header {
  background: var(--bg-header);
  padding: 10px 24px 18px;
  border-bottom: 3px solid var(--aws-orange);
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  margin-bottom: 8px;
}

.breadcrumb-link {
  color: #4db8ff;
  text-decoration: none;
  font-weight: 500;
}
.breadcrumb-link:hover { text-decoration: underline; color: #80cfff; }

.breadcrumb-sep {
  color: rgba(255,255,255,0.4);
  font-size: 14px;
}

.breadcrumb-current {
  color: rgba(255,255,255,0.7);
}

.page-title-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}

/* LMPD-360 logo tile to the left of the "Planned Deliveries" title */
.page-title-logo {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  object-fit: cover;
  flex: 0 0 auto;
  box-shadow: 0 1px 4px rgba(0,0,0,0.35);
}

/* Keep the actions (badge) pushed to the far right now that the row is
   flex-start instead of space-between. */
.page-title-row .page-title-actions { margin-left: auto; }

.page-title {
  font-size: 28px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.3px;
  line-height: 1.2;
}

.page-title-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.last-updated-badge {
  font-size: 11px;
  color: rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 12px;
  padding: 3px 10px;
  white-space: nowrap;
}

/* Page header buttons — white ghost style on dark bg */
.page-header .btn-ghost {
  background: transparent;
  color: rgba(255,255,255,0.85);
  border-color: rgba(255,255,255,0.35);
}
.page-header .btn-ghost:hover {
  background: rgba(255,255,255,0.1);
  color: #ffffff;
  border-color: rgba(255,255,255,0.6);
}

/* Dark mode page header */
body.dark-mode .page-header { background: #0d1117; border-bottom-color: var(--aws-orange); }
body.dark-mode .page-title  { color: #e8eaf6; }
body.dark-mode .breadcrumb-current { color: rgba(232,234,246,0.6); }
body.dark-mode .last-updated-badge { color: rgba(232,234,246,0.5); background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); }

/* ═══════════════════════════════════════════════════════════════════════
   TOP BAR  — slim AWS nav bar (sticky)
   ═══════════════════════════════════════════════════════════════════════ */
.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-header);
  border-bottom: 1px solid rgba(255,255,255,0.1);
  padding: 0 24px;
  height: 58px;
  position: sticky;
  top: 0;
  z-index: 200;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

.top-bar-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo {
  font-size: 22px;
  line-height: 1;
}

.top-bar h1 {
  font-size: 17px;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: 0.2px;
}

.top-bar-right {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* User profile in header */
.user-profile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 3px 12px 3px 3px;
  border-radius: 24px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.15);
  cursor: pointer;
  transition: background 0.15s;
}

.user-profile:hover {
  background: rgba(255,255,255,0.12);
}

.user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,0.4);
  background: rgba(255,255,255,0.1);
}

.user-alias {
  font-size: 13px;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: 0.3px;
}

/* ── App Tabs (Planned Deliveries | Workboard) ── */
.top-bar-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
}

.app-tabs {
  display: flex;
  gap: 4px;
  background: rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 3px;
}

.app-tab {
  padding: 6px 16px;
  font-size: 15px;
  font-weight: 500;
  color: rgba(255,255,255,0.7);
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.app-tab:hover {
  color: #fff;
  background: rgba(255,255,255,0.1);
}

.app-tab.active {
  color: #fff;
  background: var(--accent-blue);
  box-shadow: 0 2px 6px rgba(0,115,187,0.4);
  font-weight: 600;
}

body.dark-mode .app-tab.active {
  background: #1a6fd4;
}

/* Theme toggle in top bar — white ghost */
.top-bar .theme-toggle {
  border-color: rgba(255,255,255,0.3);
  color: rgba(255,255,255,0.8);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}
.top-bar .theme-toggle:hover {
  background: rgba(255,255,255,0.12);
  color: #ffffff;
  border-color: rgba(255,255,255,0.5);
}

/* ═══════════════════════════════════════════════════════════════════════
   BUTTONS  — AWS Cloudscape style
   ═══════════════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 20px;
  border-radius: 20px;          /* pill shape like Shipments app */
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
  white-space: nowrap;
  line-height: 1.5;
}

/* ── Button click effects — ripple + press ── */
.btn {
  position: relative;
  overflow: hidden;
}

/* Press-down scale effect */
.btn:active {
  transform: scale(0.97);
  transition: transform 0.08s ease;
}

/* Ripple element injected by JS */
.btn-ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  animation: btn-ripple-anim 0.5s linear;
  pointer-events: none;
  opacity: 0.35;
}

@keyframes btn-ripple-anim {
  to { transform: scale(4); opacity: 0; }
}

/* Ripple colours per button type */
.btn-primary  .btn-ripple { background: rgba(255,255,255,0.6); }
.btn-ghost    .btn-ripple { background: rgba(0,115,187,0.25); }
.btn-secondary .btn-ripple { background: rgba(0,115,187,0.25); }
.btn-outlook  .btn-ripple { background: rgba(255,255,255,0.4); }

/* Primary = AWS orange (matches "Search" button in Shipments app) */
.btn-primary {
  background: var(--aws-orange);
  border-color: var(--aws-orange-dk);
  color: #000;
  font-weight: 700;
}
.btn-primary:hover {
  background: var(--aws-orange-dk);
  border-color: #c45e00;
  box-shadow: 0 2px 6px rgba(255,153,0,0.35);
}
.btn-primary:active { box-shadow: none; }

/* Secondary = white with border (matches "Clear", "Reset" in Shipments app) */
.btn-secondary {
  background: #ffffff;
  color: var(--text-primary);
  border-color: var(--border-light);
}
.btn-secondary:hover {
  background: var(--bg-card-hover);
  border-color: var(--accent-blue);
  color: var(--accent-blue);
}

/* Ghost = same as secondary in light mode */
.btn-ghost {
  background: #ffffff;
  color: var(--text-primary);
  border: 1px solid var(--border-light);
}
.btn-ghost:hover {
  background: var(--bg-card-hover);
  border-color: var(--accent-blue);
  color: var(--accent-blue);
}

/* Dark mode button overrides */
body.dark-mode .btn-primary {
  background: var(--aws-orange);
  border-color: var(--aws-orange-dk);
  color: #000;
}
body.dark-mode .btn-secondary,
body.dark-mode .btn-ghost {
  background: #1a1d27;
  color: #9ea3c0;
  border-color: #3a3f5c;
}
body.dark-mode .btn-secondary:hover,
body.dark-mode .btn-ghost:hover {
  background: #1f2335;
  color: #e8eaf6;
  border-color: #4a9eff;
}

/* ═══════════════════════════════════════════════════════════════════════
   BANNER  — Cloudscape flash bar style
   ═══════════════════════════════════════════════════════════════════════ */
.banner {
  margin: 12px 24px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  border: 1px solid;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

/* Light mode banners */
.banner-info {
  background: #f0f7ff;
  border-color: #9ecfee;
  color: #0073bb;
}
.banner-success {
  background: #f2f8f0;
  border-color: #b7e4a7;
  color: #1d8102;
}
.banner-error {
  background: #fdf3f1;
  border-color: #f5b8a8;
  color: #d13212;
}

/* Dark mode banners */
body.dark-mode .banner-info    { background: rgba(74,158,255,0.08);  border-color: rgba(74,158,255,0.3);  color: #a8c8ff; }
body.dark-mode .banner-success { background: rgba(46,204,113,0.08);  border-color: rgba(46,204,113,0.3);  color: #a8ffcc; }
body.dark-mode .banner-error   { background: rgba(231,76,60,0.08);   border-color: rgba(231,76,60,0.3);   color: #ffb3ae; }

/* ═══════════════════════════════════════════════════════════════════════
   MAIN LAYOUT
   ═══════════════════════════════════════════════════════════════════════ */
main {
  padding: 16px 24px 32px;
  max-width: 1800px;
  margin: 0 auto;
}

/* ═══════════════════════════════════════════════════════════════════════
   SUMMARY CARDS
   ═══════════════════════════════════════════════════════════════════════ */
/* 2026-07-03 v9 — Summary bar redesigned into 3 columns.
   The container was a plain auto-fit grid; now it's a flex row with
   three children: .summary-bar-left | .summary-bar-center | .summary-bar-right.
   Under 900px viewports the row wraps to a stacked layout.
   2026-07-03 v10 — layout height/overflow fixes:
    • align-items: stretch (already) + left/right columns fill via flex: 1
    • center column: overflow visible so Hub AZ card hover borders don't clip
    • right column (TYPE BREAKDOWN): align-self: stretch so it matches center height
    • left column cards: flex: 1 so TOTAL RACKS + AT LAST MILE HUB share vertical space */
.summary-cards {
  display: flex;
  align-items: stretch;
  gap: 14px;
  margin-bottom: 16px;
  flex-wrap: wrap;
  overflow: visible;                /* never clip child hover shadows */
}

/* Left column — 2 prominent summary cards stacked vertically.
   flex: 1 on each card = TOTAL RACKS and AT LAST MILE HUB share the full
   vertical height of the row equally (matches center AZ container height). */
.summary-bar-left {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 0 0 auto;
  min-width: 160px;
  align-self: stretch;
}
.summary-bar-left .stat-card {
  padding: 12px 16px;
  flex: 1;
  justify-content: center;          /* vertically center label/value/sub */
}
/* 2026-07-03 v12 — user feedback: "TOTAL RACKS no debe tener el borde
   izquierdo azul, debe ser como AT LAST MILE HUB". The STYLE OVERHAUL v2
   block (line ~3148) declares `.stat-card.stat-blue { border-left: 4px
   solid #1565c0 !important }` which paints an AZ-branded accent bar on
   the left of TOTAL RACKS. AT LAST MILE HUB uses `.stat-green` which has
   no equivalent rule → looks clean. Neutralize the accent for the two
   summary-bar-left cards so both share the same clean 1px neutral border,
   while KEEPING the blue text colour on `.stat-value` (that's `.stat-blue
   .stat-value` — a different rule, untouched). */
.summary-bar-left .stat-card.stat-blue,
.summary-bar-left .stat-card.stat-green,
.summary-bar-left .stat-card.stat-purple,
.summary-bar-left .stat-card.stat-teal,
.summary-bar-left .stat-card.stat-red,
.summary-bar-left .stat-card.stat-yellow {
  border-left: 1px solid var(--border, #d5dbdb) !important;
}


/* Center column — Hub + Regional AZ groups.
   overflow: visible + small padding = card hover borders/shadows render fully. */
.summary-bar-center {
  flex: 1 1 auto;
  min-width: 0;                     /* let the grid inside shrink */
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--border, #d5dbdb);
  border-radius: var(--radius, 8px);
  overflow: visible;                /* Fix 1 — do not clip HUB AZ hover borders */
}

/* Right column — Type Breakdown.
   align-self: stretch = matches full center-column height (Fix 2). */
.summary-bar-right {
  flex: 0 0 auto;
  min-width: 180px;
  display: flex;
  align-self: stretch;
}
.summary-bar-right .stat-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;          /* vertically center label + split row */
  align-items: stretch;
}


/* AZ group section header (label + optional button) */
.az-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.az-group-header--regional {
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px dashed var(--border, #d5dbdb);
}
.az-group-title {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-muted, #879596);
}
.az-group-hint {
  font-size: 10px;
  color: var(--text-muted, #879596);
  font-style: italic;
}
.az-group-empty {
  font-size: 11px;
  color: var(--text-muted, #879596);
  font-style: italic;
}

/* Row that holds the AZ filter cards.
   2026-07-03 v10 — Fix 1: HUB row previously used `overflow-x: auto` which
   forces `overflow-y: hidden`, clipping the hover translateY + coloured
   left border. Since Hub AZ cards are `flex: 1 1 0` (they always share the
   row width equally, no horizontal overflow expected), we drop the
   `overflow-x: auto` entirely and add `padding: 4px 3px` so the 2px hover
   lift + 4px box-shadow render fully on all 4 sides. */
.az-group-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
  flex-wrap: wrap;
  overflow: visible;
}
.az-group-row--hub {
  flex-wrap: nowrap;                /* keep Hub AZs on one row */
  overflow: visible;                /* Fix 1 — hover borders must render fully */
  padding: 4px 3px 6px;             /* room for hover lift + shadow + coloured border */
}


/* AZ filter card — base + hub + regional variants
   The base .az-filter-card class ALSO lives on the earlier legacy
   summary card variant, so we're being explicit with the two new
   modifier classes and using --az-color for per-AZ tinting. */
.az-filter-card--hub,
.az-filter-card--regional {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
  border: 1.5px solid var(--border, #d5dbdb);
  border-radius: 10px;
  background: var(--bg-card, #ffffff);
  cursor: pointer;
  user-select: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease,
              border-color 0.15s ease, background 0.15s ease,
              opacity 0.2s ease;
  min-width: 0;
  white-space: nowrap;
}

/* Hub AZ card — larger, coloured left border + coloured value.
   2026-07-03 v11 — Fix (real root cause): a later block on line ~3606
   declares `.az-filter-card { border-left: 3px solid transparent }` which
   has equal specificity to `.az-filter-card--hub` and is declared LATER,
   so it OVERRODE the coloured left border in the resting state (only
   .az-filter-card--active with !important made it reappear). Fix:
    a) use `.az-filter-card.az-filter-card--hub` (higher specificity) so
       the base rule can't override the coloured border, AND
    b) explicitly redeclare the same border on all 4 sides so the left
       matches the other 3 in the resting state (per user spec:
       "left border must be the SAME thickness and style as the other 3").
   The 4px coloured accent is applied via `border-left-color` + a bit
   more thickness ONLY on the left, keeping the AZ identity. */
.az-filter-card.az-filter-card--hub {
  flex: 1 1 0;
  min-width: 140px;
  border: 1.5px solid var(--border, #d5dbdb);
  border-left: 4px solid var(--az-color, #616161);
}
.az-filter-card.az-filter-card--hub:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  border-color: var(--az-color, #616161);
  border-left-color: var(--az-color, #616161);
}

.az-filter-card--hub .az-filter-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-muted, #879596);
}
.az-filter-card--hub .az-filter-value {
  font-size: 24px;
  font-weight: 800;
  color: var(--az-color, #616161);
  line-height: 1.1;
}
.az-filter-card--hub .az-filter-sub {
  font-size: 10px;
  color: var(--text-secondary, #545b64);
}

/* Regional AZ card — compact, neutral */
.az-filter-card--regional {
  flex: 0 0 auto;
  min-width: 84px;
  padding: 6px 12px;
  border-color: #e0e0e0;
  border-left-width: 1.5px;
  background: #fafafa;
}
.az-filter-card--regional:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  border-color: var(--text-muted, #879596);
  background: #ffffff;
}
.az-filter-card--regional .az-filter-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-primary, #16191f);
  line-height: 1.1;
}
.az-filter-card--regional .az-filter-value {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-secondary, #545b64);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
/* Fix 4 — regional cards must show a 3rd line ("N sites") matching the
   Hub AZ card structure. dashboard.js emits <span class="az-filter-sub">;
   without a rule the text still renders but at default inline size and
   colour — this styles it to be muted + tiny, consistent with the hub
   .az-filter-sub while staying compact for the smaller regional card. */
.az-filter-card--regional .az-filter-sub {
  font-size: 9px;
  font-weight: 500;
  color: var(--text-muted, #879596);
  line-height: 1.2;
  letter-spacing: 0.2px;
}


/* Active state — the currently selected AZ (single-select).
   Applied to .az-filter-card (the base class), so both hub and regional
   share the same activation ring while keeping their own tints. */
.az-filter-card--active {
  border-width: 2px !important;
  border-color: var(--az-color, var(--accent-blue, #1a73e8)) !important;
  background: color-mix(in srgb, var(--az-color, #1a73e8) 8%, var(--bg-card, #fff)) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--az-color, #1a73e8) 20%, transparent),
              0 4px 12px rgba(0,0,0,0.06) !important;
}
.az-filter-card--regional.az-filter-card--active {
  --az-color: var(--accent-blue, #1a73e8);   /* regionals use blue since they have no hue */
}
.az-filter-card--active .az-filter-value {
  color: var(--az-color, var(--accent-blue, #1a73e8));
}

/* Dimmed state — non-selected cards when a filter is active */
.az-filter-card--dimmed {
  opacity: 0.45;
  filter: grayscale(30%);
}
.az-filter-card--dimmed:hover {
  opacity: 0.75;
  filter: grayscale(10%);
}

/* Show All reset button — inline with the HUB AZs header */
#az-reset-btn {
  padding: 3px 10px;
  font-size: 11px;
  height: auto;
  line-height: 1.4;
}

/* Dark mode overrides */
body.dark-mode .summary-bar-center {
  background: var(--bg-card);
  border-color: var(--border);
}
body.dark-mode .az-filter-card--hub,
body.dark-mode .az-filter-card--regional {
  background: var(--bg-card);
  border-color: var(--border);
}
body.dark-mode .az-filter-card--regional {
  background: rgba(255,255,255,0.03);
}
body.dark-mode .az-group-header--regional {
  border-top-color: var(--border);
}

/* Responsive — under 900px the bar wraps to stacked layout */
@media (max-width: 899px) {
  .summary-bar-left,
  .summary-bar-right {
    flex: 1 1 100%;
  }
  .summary-bar-center {
    flex: 1 1 100%;
  }
  .summary-bar-left .stat-card { padding: 10px 12px; }
}


.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: border-color 0.15s;
}
.stat-card:hover { border-color: var(--border-light); }

.stat-card .stat-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-muted);
  font-weight: 600;
}

.stat-card .stat-value {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.1;
}

.stat-card .stat-sub {
  font-size: 11px;
  color: var(--text-secondary);
}

.stat-blue   .stat-value { color: var(--accent-blue); }
.stat-green  .stat-value { color: var(--accent-green); }
.stat-yellow .stat-value { color: var(--accent-yellow); }
.stat-red    .stat-value { color: var(--accent-red); }
.stat-teal   .stat-value { color: var(--accent-teal); }
.stat-purple .stat-value { color: var(--accent-purple); }

/* Split card — SERVER / NETWORK breakdown */
.stat-card-split {
  justify-content: space-between;
}

.stat-split-row {
  display: flex;
  align-items: center;
  gap: 0;
  flex: 1;
  margin-top: 6px;
}

.stat-split-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  gap: 2px;
}

.stat-split-value {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.1;
}

.stat-split-sub {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-muted);
}

.stat-split-divider {
  width: 1px;
  height: 40px;
  background: var(--border);
  flex-shrink: 0;
  margin: 0 4px;
}

.stat-blue-val   { color: var(--accent-blue); }
.stat-purple-val { color: var(--accent-purple); }

/* ═══════════════════════════════════════════════════════════════════════
   CARDS
   ═══════════════════════════════════════════════════════════════════════ */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: var(--shadow);
}

.section-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ═══════════════════════════════════════════════════════════════════════
   SECTION HEADER — shared style for section title + subtitle + divider.
   Added 2026-07-03 to standardize headers across "Racks at Hub",
   "4-Day Delivery Forecast" and "Delivery Calendar". Reference style
   matches the 4-Day Forecast section.
   ═══════════════════════════════════════════════════════════════════════ */
.section-header {
  margin-bottom: 16px;
}

.section-header__title {
  font-size: 15px;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0 0 3px 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.section-header__subtitle {
  font-size: 12px;
  font-weight: 400;
  color: #666;
  margin: 0 0 10px 0;
}

.section-header__divider {
  border: none;
  border-bottom: 1px solid #e8e8e8;
  margin: 0 0 16px 0;
}

/* Dark-mode overrides so the new header is readable on dark background. */
body.dark-mode .section-header__title    { color: #e8eaf6; }
body.dark-mode .section-header__subtitle { color: #9aa0b4; }
body.dark-mode .section-header__divider  { border-bottom-color: #2d3148; }

/* ═══════════════════════════════════════════════════════════════════════
   TABLES
   ═══════════════════════════════════════════════════════════════════════ */
.table-scroll {
  overflow: auto;
  border-radius: var(--radius-sm);
  max-height: 75vh;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.data-table thead th {
  background: var(--bg-table-head);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 10px 12px;
  text-align: left;
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 10;
}

.data-table thead th[onclick] {
  cursor: pointer;
  user-select: none;
}
.data-table thead th[onclick]:hover {
  background: #e8eaec;
  color: var(--text-primary);
}

body.dark-mode .data-table thead th { background: #12151f; color: #9ea3c0; }
body.dark-mode .data-table thead th[onclick]:hover { background: #1a1e2e; color: #e8eaf6; }

.sort-icon { opacity: 0.4; font-size: 10px; }
th.sort-asc  .sort-icon { opacity: 1; color: var(--accent-blue); }
th.sort-desc .sort-icon { opacity: 1; color: var(--accent-blue); }

.data-table tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background 0.1s;
  background: var(--bg-card);
}
.data-table tbody tr:hover { background: var(--bg-card-hover); }
.data-table tbody tr:last-child { border-bottom: none; }

/* Row colour variants — removed priority colouring, clean white rows */
.row-red    { background: var(--bg-card) !important; }
.row-green  { background: var(--bg-card) !important; }
.row-yellow { background: var(--bg-card) !important; }

.data-table tbody td {
  padding: 9px 12px;
  color: var(--text-primary);
  vertical-align: middle;
  white-space: nowrap;
}

/* Weekly table specifics */
.weekly-table td { text-align: center; }
.weekly-table th { text-align: center; }
.weekly-table td:first-child,
.weekly-table th:first-child { text-align: left; font-weight: 600; }
.col-total { color: var(--accent-blue) !important; }
.weekly-table .col-total { font-weight: 700; color: var(--accent-blue); }
.weekly-table tr:hover .col-total { color: var(--accent-blue); }

/* ═══════════════════════════════════════════════════════════════════════
   STATUS BADGES
   ═══════════════════════════════════════════════════════════════════════ */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.badge-ready    { background: rgba(39,174,96,0.2);  color: #2ecc71; border: 1px solid rgba(39,174,96,0.4); }
.badge-shipped  { background: rgba(41,128,185,0.2); color: #5dade2; border: 1px solid rgba(41,128,185,0.4); }
.badge-pending  { background: rgba(230,126,34,0.2); color: #f39c12; border: 1px solid rgba(230,126,34,0.4); }
.badge-blocked  { background: rgba(192,57,43,0.2);  color: #e74c3c; border: 1px solid rgba(192,57,43,0.4); }
.badge-default  { background: rgba(100,100,120,0.2);color: #9ea3c0; border: 1px solid rgba(100,100,120,0.3); }

/* Rack type row coloring */
.row-red    td:first-child { border-left: 3px solid var(--accent-red); }
.row-green  td:first-child { border-left: 3px solid var(--accent-green); }
.row-yellow td:first-child { border-left: 3px solid var(--accent-yellow); }

/* Priority coloring */
.priority-high   { color: var(--accent-red);    font-weight: 700; }
.priority-medium { color: var(--accent-yellow);  font-weight: 600; }
.priority-low    { color: var(--text-secondary); }

/* Lock state */
.lock-locked   { color: var(--text-muted); }
.lock-unlocked { color: var(--accent-green); }


/* ═══════════════════════════════════════════════════════════════════════
   FILTER PANEL
   ═══════════════════════════════════════════════════════════════════════ */
.filter-card { padding: 16px 20px; }

.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 130px;
}

.filter-group label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
}

.filter-group select,
.filter-group input {
  background: var(--bg-input);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  padding: 7px 10px;
  font-size: 13px;
  font-family: var(--font-main);
  outline: none;
  transition: border-color 0.15s;
  cursor: pointer;
}

.filter-group select:focus,
.filter-group input:focus {
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 2px rgba(74,158,255,0.15);
}

.filter-group-search { min-width: 180px; }
.filter-group-btn { justify-content: flex-end; }

.filter-count {
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-secondary);
}

/* ═══════════════════════════════════════════════════════════════════════
   RACK TABLE — COLUMN WIDTHS
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Sticky frozen columns: checkbox | DC | AZ | Asset ID | Position ── */
/* Checkbox col */
.rack-table .col-checkbox {
  position: sticky;
  left: 0;
  z-index: 3;
  background: inherit;
}
/* thead sticky checkbox needs higher z so it sits above body cells */
.rack-table thead .col-checkbox {
  z-index: 12;
  background: var(--bg-table-head);
}

/* DC */
.rack-table th[data-col="dc"],
.rack-table td[data-col="dc"] {
  position: sticky;
  left: 36px;
  z-index: 2;
  background: inherit;
  min-width: 80px;
}
.rack-table thead th[data-col="dc"] {
  z-index: 11;
  background: var(--bg-table-head);
}

/* Asset ID */
.rack-table th[data-col="assetId"],
.rack-table td[data-col="assetId"] {
  position: sticky;
  left: 116px;
  z-index: 2;
  background: inherit;
  min-width: 110px;
  font-family: var(--font-main);
}
.rack-table thead th[data-col="assetId"] {
  z-index: 11;
  background: var(--bg-table-head);
}

/* Position */
.rack-table th[data-col="position"],
.rack-table td[data-col="position"] {
  position: sticky;
  left: 226px;
  z-index: 2;
  background: inherit;
  min-width: 130px;
  box-shadow: 2px 0 6px -2px rgba(0,0,0,0.15);
}
.rack-table thead th[data-col="position"] {
  z-index: 11;
  background: var(--bg-table-head);
  box-shadow: 2px 0 6px -2px rgba(0,0,0,0.15);
}

/* Light mode overrides for sticky bg */
body.light-mode .rack-table thead .col-checkbox,
body.light-mode .rack-table thead th[data-col="dc"],
body.light-mode .rack-table thead th[data-col="assetId"],
body.light-mode .rack-table thead th[data-col="position"] {
  background: #f2f3f3;
}

/* ── LIGHT MODE: sticky scroll fix — solid opaque white backgrounds ── */
/* Default sticky body cells — must be solid white so scrolled content hides behind them */
body:not(.dark-mode) .rack-table .col-checkbox,
body:not(.dark-mode) .rack-table td[data-col="dc"],
body:not(.dark-mode) .rack-table td[data-col="assetId"],
body:not(.dark-mode) .rack-table td[data-col="position"] {
  background: #ffffff;
}
body:not(.dark-mode) .data-table tbody tr:hover .col-checkbox,
body:not(.dark-mode) .data-table tbody tr:hover td[data-col="dc"],
body:not(.dark-mode) .data-table tbody tr:hover td[data-col="assetId"],
body:not(.dark-mode) .data-table tbody tr:hover td[data-col="position"] {
  background: #f8f9fa;
}

.rack-table th[data-col="rackType"]        { min-width: 90px; }
.rack-table th[data-col="internalRackType"]{ min-width: 180px; }
.rack-table th[data-col="atLastMileHub"]   { min-width: 120px; }
.rack-table th[data-col="shipmentStatus"]  { min-width: 130px; }
.rack-table th[data-col="externalLinks"]   { min-width: 80px; }
.rack-table th[data-col="targetDelivery"]  { min-width: 140px; }
.rack-table th[data-col="cablingStatus"]   { min-width: 120px; }
.rack-table th[data-col="rats"]            { min-width: 100px; }
.rack-table th[data-col="priority"]        { min-width: 90px; }

.rack-table td.asset-id { font-family: var(--font-main); font-size: 13px; }

/* External links */
.ext-link {
  color: var(--accent-blue);
  text-decoration: none;
  font-size: 11px;
}
.ext-link:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════════════════
   RACK TOOLBAR
   ═══════════════════════════════════════════════════════════════════════ */
.rack-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 4px;
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg-card);
  padding: 8px 0;
}

.rack-toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.btn-sm {
  padding: 5px 12px;
  font-size: 12px;
}

.selection-info {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-blue);
  background: rgba(74,158,255,0.12);
  border: 1px solid rgba(74,158,255,0.3);
  border-radius: 12px;
  padding: 2px 10px;
  display: none;
}

/* Checkbox column */
.col-checkbox {
  width: 36px;
  text-align: center !important;
  padding: 0 8px !important;
}
.col-checkbox input[type=checkbox],
.row-chk {
  width: 15px;
  height: 15px;
  cursor: pointer;
  accent-color: var(--accent-blue);
}

/* ═══════════════════════════════════════════════════════════════════════
   COLUMN PICKER MODAL
   ═══════════════════════════════════════════════════════════════════════ */
.col-picker-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.col-picker-modal {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  width: 340px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 40px rgba(0,0,0,0.6);
  overflow: hidden;
}

.col-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}

.col-picker-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 16px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  line-height: 1;
}
.col-picker-close:hover { background: var(--bg-card-hover); color: var(--text-primary); }

.col-picker-actions {
  display: flex;
  gap: 8px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--border);
}

.col-picker-list {
  overflow-y: auto;
  padding: 8px 0;
  flex: 1;
}

.col-picker-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 16px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-secondary);
  transition: background 0.1s;
}
.col-picker-item:hover { background: var(--bg-card-hover); color: var(--text-primary); }
.col-picker-item input[type=checkbox] {
  width: 14px; height: 14px;
  accent-color: var(--accent-blue);
  cursor: pointer;
  flex-shrink: 0;
}

.col-picker-footer {
  padding: 10px 16px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
}

/* ═══════════════════════════════════════════════════════════════════════
   PASTE FALLBACK SECTION
   ═══════════════════════════════════════════════════════════════════════ */
.paste-section {
  margin: 0 24px 8px;
}

.paste-section details {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.paste-section summary {
  padding: 10px 16px;
  cursor: pointer;
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 600;
  user-select: none;
  list-style: none;
}
.paste-section summary::-webkit-details-marker { display: none; }
.paste-section summary:hover { color: var(--text-primary); background: var(--bg-card-hover); }

.paste-inner {
  padding: 14px 16px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.paste-inner p {
  font-size: 12px;
  color: var(--text-secondary);
}

.code-block {
  background: var(--bg-table-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--accent-teal);
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 80px;
  cursor: text;
  user-select: all;
}

.paste-method {
  background: var(--bg-table-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 12px;
  color: var(--text-secondary);
}

.paste-method strong {
  color: var(--text-primary);
  display: block;
  margin-bottom: 6px;
}

.paste-method ol {
  padding-left: 18px;
  margin: 6px 0 0;
  line-height: 1.8;
}

.paste-method kbd {
  background: var(--bg-card-hover);
  border: 1px solid var(--border-light);
  border-radius: 3px;
  padding: 1px 5px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-primary);
}

.paste-inner textarea {
  background: var(--bg-input);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  padding: 10px 12px;
  font-size: 12px;
  font-family: var(--font-mono);
  resize: vertical;
  outline: none;
  transition: border-color 0.15s;
}
.paste-inner textarea:focus {
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 2px rgba(74,158,255,0.15);
}

/* ═══════════════════════════════════════════════════════════════════════
   DELIVERY CALENDAR
   ═══════════════════════════════════════════════════════════════════════ */

/* Header row: title + controls */
.cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

.cal-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.cal-view-toggle {
  display: flex;
  gap: 4px;
  background: var(--bg-card-hover);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 3px;
}

.cal-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  min-width: 160px;
  text-align: center;
}

/* ── Monthly grid ── */
.cal-grid {
  width: 100%;
  overflow-x: auto;
}

/* 5 weekday cols (full width) + 2 weekend cols (narrow).
   2026-07-03 v2 — user feedback: when there ARE weekend deliveries the
   0.28fr weekend cols are too cramped to read the site rows. Solution:
   :has() selector detects any .cal-day.cal-weekend.cal-has-racks in the
   grid → switch to 7 equal columns so weekend cells become full-width.
   Falls back to the compact 5+2 layout when no weekend has racks
   (typical months with only weekday deliveries). */
.cal-month-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr) repeat(2, 0.28fr);
  gap: 3px;
  min-width: 600px;
}
/* When the month has ANY weekend delivery, weekends widen to 1fr so
   the site rows are legible. Weekday cells shrink slightly to compensate
   (7 equal cols instead of 5-full + 2-narrow) — this is what the user
   asked for ("estreches un poco las celdas del calendario y habilites
   una vista igual para el fin de semana"). */
.cal-month-grid:has(.cal-day.cal-weekend.cal-has-racks) {
  grid-template-columns: repeat(7, 1fr);
}

.cal-day-name {
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-muted);
  padding: 6px 0;
}

/* Weekend day-name headers are smaller */
.cal-day-name.cal-weekend-name {
  font-size: 8px;
  letter-spacing: 0.3px;
  color: var(--text-muted);
  opacity: 0.6;
}

.cal-day {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  min-height: 110px;
  padding: 6px 8px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cal-day:hover { border-color: var(--accent-blue); background: var(--bg-card-hover); }

/* Weekend cells: compact, no site rows */
.cal-day.cal-weekend {
  min-height: 40px;
  padding: 4px 5px;
  background: var(--bg-table-alt);
  opacity: 0.7;
}
.cal-day.cal-weekend:hover { opacity: 1; }

.cal-day.cal-empty {
  background: transparent;
  border-color: transparent;
  cursor: default;
  pointer-events: none;
}

.cal-day.cal-today {
  border-color: var(--accent-blue);
  background: rgba(74,158,255,0.07);
}

.cal-day.cal-today .cal-day-num {
  background: var(--accent-blue);
  color: #fff;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

.cal-day.cal-selected {
  border-color: var(--accent-teal);
  background: rgba(26,188,156,0.08);
}

.cal-day.cal-has-racks { border-color: var(--border-light); }

.cal-day-num {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  line-height: 22px;
}

.cal-day.cal-weekend .cal-day-num {
  font-size: 10px;
  line-height: 16px;
}

.cal-day.cal-other-month .cal-day-num { color: var(--text-muted); opacity: 0.4; }

/* Total rack count badge */
.cal-rack-count {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-blue);
  background: rgba(74,158,255,0.15);
  border-radius: 10px;
  padding: 1px 8px;
  align-self: flex-start;
  white-space: nowrap;
}

.cal-rack-count.count-high  { color: var(--accent-yellow); background: rgba(243,156,18,0.15); }
.cal-rack-count.count-today { color: var(--accent-green);  background: rgba(46,204,113,0.15); }

/* Per-site rows inside each day cell */
.cal-site-rows {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 3px;
}

.cal-site-row {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
}

.cal-site-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.cal-site-label {
  color: var(--text-secondary);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.cal-site-cnt {
  font-weight: 700;
  flex-shrink: 0;
}

/* ── Weekly grid ── */
.cal-week-grid {
  display: grid;
  grid-template-columns: 80px repeat(7, 1fr);
  gap: 3px;
  min-width: 600px;
}

.cal-week-time-col {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.cal-week-day-header {
  background: var(--bg-table-head);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 6px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.cal-week-day-header.cal-today-col {
  border-color: var(--accent-blue);
  color: var(--accent-blue);
  background: rgba(74,158,255,0.07);
}

.cal-week-day-header .wh-date {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  display: block;
  line-height: 1.2;
}

.cal-week-day-header.cal-today-col .wh-date { color: var(--accent-blue); }

.cal-week-cell {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  min-height: 120px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow: hidden;
}

.cal-week-cell.cal-today-col {
  border-color: var(--accent-blue);
  background: rgba(74,158,255,0.04);
}

.cal-week-rack-chip {
  background: rgba(74,158,255,0.12);
  border: 1px solid rgba(74,158,255,0.25);
  border-radius: 4px;
  padding: 3px 6px;
  font-size: 10px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: background 0.1s;
}
.cal-week-rack-chip:hover { background: rgba(74,158,255,0.22); color: var(--text-primary); }
.cal-week-rack-chip.chip-server  { border-color: rgba(74,158,255,0.4); }
.cal-week-rack-chip.chip-network { border-color: rgba(155,89,182,0.4); background: rgba(155,89,182,0.1); }

.cal-week-more {
  font-size: 10px;
  color: var(--text-muted);
  padding: 2px 4px;
  cursor: pointer;
}
.cal-week-more:hover { color: var(--accent-blue); }

/* ── Calendar day popup — full modal overlay ── */
.cal-popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  /* backdrop-filter removed — causes GPU recomposition lag on large pages */
}

.cal-day-popup {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  box-shadow: 0 16px 56px rgba(0,0,0,0.7);
  width: 98vw;
  max-width: 98vw;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-size: 13px;
  animation: calPopupIn 0.15s ease;
}

@keyframes calPopupIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.cal-popup-close {
  background: none; border: none;
  color: var(--text-muted); font-size: 18px;
  cursor: pointer; line-height: 1;
  padding: 4px 6px;
  border-radius: 4px;
  flex-shrink: 0;
  transition: background 0.1s, color 0.1s;
}
.cal-popup-close:hover { color: var(--text-primary); background: var(--bg-card-hover); }

/* Rich popup layout */
/* .cal-day-popup-rich has no own rules - it inherits everything from
   .cal-day-popup. Kept as a comment for the class-hierarchy note. */

.cal-popup-rich-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px 14px;
  background: var(--bg-table-head);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.cal-popup-rich-date {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
}

.cal-popup-rich-total {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 3px;
}

/* Body: 3-column grid, wraps to next row */
.cal-popup-rich-body {
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
  gap: 0;
}

/* Per-site block: fills its grid cell */
.cal-popup-site-block {
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  min-width: 0;   /* prevent grid blowout */
}
/* Remove right border on every 3rd block */
.cal-popup-site-block:nth-child(3n) { border-right: none; }
/* Remove bottom border on last row */
.cal-popup-site-block:nth-last-child(-n+3):nth-child(3n+1),
.cal-popup-site-block:nth-last-child(-n+3):nth-child(3n+2),
.cal-popup-site-block:nth-last-child(-n+3):nth-child(3n+3),
.cal-popup-site-block:last-child { border-bottom: none; }

/* Site header: dot + name on left, count + copy on right */
.cal-popup-site-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px 8px;
  background: rgba(0,0,0,0.2);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 2;
  white-space: nowrap;
}

.cal-popup-site-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.cal-popup-site-name {
  font-size: 14px;
  font-weight: 700;
  flex: 1;                /* pushes count+copy to the right */
  min-width: 0;
}

/* Right-aligned group: count + copy button */
.cal-popup-site-right {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-shrink: 0;
}

.cal-popup-site-total {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}

.cal-popup-copy-btn {
  background: rgba(74,158,255,0.1);
  border: 1px solid rgba(74,158,255,0.3);
  border-radius: var(--radius-sm);
  color: var(--accent-blue);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  padding: 3px 9px;
  white-space: nowrap;
  transition: background 0.1s;
}
.cal-popup-copy-btn:hover { background: rgba(74,158,255,0.22); }

/* Rack table inside each site block */
.cal-popup-rack-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  table-layout: auto;
}

.cal-popup-rack-table thead th {
  padding: 6px 12px 6px 14px;
  font-size: 14px;   /* 2026-10-08 feedback: was 10px */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
  background: var(--bg-table-head);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  text-align: left;
}

.cal-popup-rack-table tbody tr {
  border-bottom: 1px solid rgba(45,49,72,0.4);
  transition: background 0.1s;
}
.cal-popup-rack-table tbody tr:last-child { border-bottom: none; }
.cal-popup-rack-table tbody tr:hover { background: var(--bg-card-hover); }

.cal-popup-rack-table tbody td {
  padding: 5px 12px 5px 14px;
  white-space: nowrap;
  vertical-align: middle;
}

.cal-popup-pos   { color: var(--text-secondary); font-family: var(--font-main); }
.cal-popup-asset { color: var(--accent-blue);    font-family: var(--font-main); }
/* 2026-10-10 — Asset ID → Boost, IPN → Townsend BOM. Same blue as the asset
   cell, underline only on hover so the table keeps its current look. */
.cal-popup-link        { color: var(--accent-blue); text-decoration: none; }
.cal-popup-link:hover  { text-decoration: underline; }
.cal-popup-type  { color: var(--text-secondary); font-family: var(--font-main); }

/* ═══════════════════════════════════════════════════════════════════════
   LIGHT MODE — component overrides (default theme)
   ═══════════════════════════════════════════════════════════════════════ */

/* Top bar: AWS dark navy stays, but text must be white */
.top-bar h1   { color: #ffffff; }
.subtitle     { color: #b0bec5; }
.theme-toggle { border-color: rgba(255,255,255,0.3); color: rgba(255,255,255,0.8); }
.theme-toggle:hover { background: rgba(255,255,255,0.1); color: #ffffff; }

/* Banners in light mode */
.banner-info    { background: #f0f7ff; border-color: #0073bb; color: #0073bb; }
.banner-success { background: #f2f8f0; border-color: #1d8102; color: #1d8102; }
.banner-error   { background: #fdf3f1; border-color: #d13212; color: #d13212; }

/* Table header */
.data-table thead th {
  background: #f2f3f3;
  color: #545b64;
}
.data-table thead th[onclick]:hover {
  background: #e8eaec;
  color: #16191f;
}

/* Filter inputs */
.filter-group select,
.filter-group input {
  background: #ffffff;
  border-color: #aab7b8;
  color: #16191f;
}
.filter-group select:focus,
.filter-group input:focus {
  border-color: #0073bb;
  box-shadow: 0 0 0 2px rgba(0,115,187,0.15);
}

/* Calendar cells */
.cal-day          { background: #ffffff; }
.cal-day.cal-weekend { background: #f8f8f8; opacity: 0.85; }
.cal-day.cal-today   { background: rgba(0,115,187,0.05); border-color: #0073bb; }
.cal-day.cal-today .cal-day-num { background: #0073bb; }
.cal-week-day-header { background: #f2f3f3; }
.cal-week-cell       { background: #ffffff; }
.cal-view-toggle     { background: #f2f3f3; border-color: #d5dbdb; }

/* Calendar popup */
.cal-popup-rich-header { background: #f2f3f3; }
.cal-popup-rack-header { background: #e8eaec; }
.cal-popup-site-header { background: rgba(0,0,0,0.03); }
.cal-popup-rack-table thead th { background: #f2f3f3; color: #545b64; }
.cal-popup-rack-table tbody tr { border-bottom-color: rgba(213,219,219,0.6); }

/* Next4 day cards */
.next4-day-card  { background: #ffffff; }
.next4-day-title { background: #f2f3f3; color: #16191f; }
.next4-day-card.next4-today .next4-day-title { background: rgba(0,115,187,0.07); color: #0073bb; }

/* Next3 day cards */
.next3-day-card  { background: #ffffff; }
.next3-day-title { background: #f2f3f3; color: #16191f; }
.next3-day-card.next3-today .next3-day-title { background: rgba(0,115,187,0.07); color: #0073bb; }

/* Outlook modal */
.outlook-modal-header { background: #f2f3f3; }
.outlook-field input,
.outlook-field textarea { background: #ffffff; color: #16191f; border-color: #aab7b8; }
.outlook-field input:focus,
.outlook-field textarea:focus { border-color: #0073bb; box-shadow: 0 0 0 2px rgba(0,115,187,0.15); }

/* Column picker */
.col-picker-item:hover { background: #f2f3f3; }

/* Paste section */
.code-block   { background: #f8f8f8; color: #00a591; border-color: #d5dbdb; }
.paste-method { background: #f2f3f3; border-color: #d5dbdb; }
.paste-method kbd { background: #e8eaec; border-color: #aab7b8; color: #16191f; }
.paste-inner textarea { background: #ffffff; color: #16191f; }

/* Badges — light mode readable versions */
.badge-ready   { background: #f2f8f0; color: #1d8102; border-color: #b7e4a7; }
.badge-shipped { background: #f0f7ff; color: #0073bb; border-color: #9ecfee; }
.badge-pending { background: #fdf8ee; color: #8d6605; border-color: #f0d080; }
.badge-blocked { background: #fdf3f1; color: #d13212; border-color: #f5b8a8; }
.badge-default { background: #f2f3f3; color: #545b64; border-color: #d5dbdb; }

/* Row color variants — clean white, no priority tinting */
.row-red    { background: #ffffff !important; }
.row-green  { background: #ffffff !important; }
.row-yellow { background: #ffffff !important; }

/* Selection bar */
.next4-selection-bar { background: #f0f7ff; border-color: #9ecfee; color: #0073bb; }

/* Scrollbar */
::-webkit-scrollbar-track { background: #f2f3f3; }
::-webkit-scrollbar-thumb { background: #aab7b8; }
::-webkit-scrollbar-thumb:hover { background: #879596; }

/* Rack table sticky thead in light mode */
.rack-table thead .col-checkbox,
.rack-table thead th[data-col="dc"],
.rack-table thead th[data-col="az"],
.rack-table thead th[data-col="assetId"],
.rack-table thead th[data-col="position"] {
  background: #f2f3f3;
}

/* Light mode overrides for popup */
body.light-mode .cal-popup-rich-header { background: #f2f3f3; }
body.light-mode .cal-popup-rack-header { background: #e8eaec; }
body.light-mode .cal-popup-site-header { background: rgba(0,0,0,0.03); }

/* ═══════════════════════════════════════════════════════════════════════
   NEXT 3 DAYS PANEL
   ═══════════════════════════════════════════════════════════════════════ */

.next3-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin: 20px 0 12px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.next3-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}

.next3-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.next3-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
}

/* One card per day */
.next3-day-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.next3-day-card.next3-today { border-color: var(--accent-blue); }
.next3-day-card.next3-tomorrow { border-color: var(--border-light); }

.next3-day-title {
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 700;
  background: var(--bg-table-head);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.next3-day-card.next3-today .next3-day-title { background: rgba(74,158,255,0.1); color: var(--accent-blue); }

.next3-day-badge {
  font-size: 10px;
  font-weight: 700;
  background: rgba(74,158,255,0.15);
  color: var(--accent-blue);
  border-radius: 10px;
  padding: 1px 8px;
}

/* Site rows inside each day card */
.next3-site-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 12px;
  border-bottom: 1px solid var(--border);
  gap: 8px;
  cursor: pointer;
  transition: background 0.1s;
}
.next3-site-row:last-child { border-bottom: none; }
.next3-site-row:hover { background: var(--bg-card-hover); }

.next3-site-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  min-width: 60px;
}

.next3-site-count {
  font-size: 18px;
  font-weight: 700;
  color: var(--accent-blue);
  min-width: 32px;
  text-align: right;
}

.next3-site-types {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  flex: 1;
  justify-content: flex-end;
}

.next3-type-pill {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 8px;
  font-weight: 600;
}

.next3-type-server  { background: rgba(74,158,255,0.15); color: var(--accent-blue); }
.next3-type-network { background: rgba(155,89,182,0.15); color: var(--accent-purple); }
.next3-type-other   { background: rgba(100,100,120,0.15); color: var(--text-muted); }

.next3-empty {
  padding: 20px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

/* ── Outlook button ── */
.btn-outlook {
  background: #0078d4;
  color: #fff;
  border: none;
}
.btn-outlook:hover { background: #106ebe; transform: translateY(-1px); }
.btn-outlook:active { transform: translateY(0); }

/* Outlook modal */
.outlook-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  z-index: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.outlook-modal {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  width: 960px;
  max-width: 96vw;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 12px 48px rgba(0,0,0,0.7);
  overflow: hidden;
}

.outlook-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-table-head);
}

.outlook-modal-header strong {
  font-size: 14px;
  color: var(--text-primary);
}

.outlook-modal-body {
  padding: 16px 18px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.outlook-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.outlook-field label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
}

.outlook-field input,
.outlook-field textarea {
  background: var(--bg-input);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  padding: 8px 10px;
  font-size: 13px;
  font-family: var(--font-main);
  outline: none;
  transition: border-color 0.15s;
  resize: vertical;
}

.outlook-field input:focus,
.outlook-field textarea:focus {
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 2px rgba(74,158,255,0.15);
}

.outlook-field textarea { min-height: 120px; font-family: var(--font-mono); font-size: 11px; }

.outlook-modal-footer {
  padding: 12px 18px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.outlook-rack-count {
  font-size: 12px;
  color: var(--text-secondary);
  align-self: center;
  flex: 1;
}

/* ═══════════════════════════════════════════════════════════════════════
   NEXT 4 DAYS FORECAST PANEL
   ═══════════════════════════════════════════════════════════════════════ */

.next4-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.next4-header-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.next4-hint {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
}

.next4-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

/* Grid: one column per day */
.next4-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

@media (max-width: 1100px) { .next4-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .next4-grid { grid-template-columns: 1fr; } }

/* Day card */
.next4-day-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.next4-day-card.next4-today    { border-color: var(--accent-blue); }
.next4-day-card.next4-tomorrow { border-color: var(--border-light); }

.next4-day-title {
  padding: 9px 12px;
  font-size: 12px;
  font-weight: 700;
  background: var(--bg-table-head);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.next4-day-card.next4-today .next4-day-title {
  background: rgba(74,158,255,0.1);
  color: var(--accent-blue);
}

.next4-day-label {
  font-size: 10px;
  font-weight: 700;
  background: rgba(74,158,255,0.15);
  color: var(--accent-blue);
  border-radius: 10px;
  padding: 1px 8px;
  white-space: nowrap;
}

.next4-day-total {
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 600;
  white-space: nowrap;
}

/* Site row inside a day card */
.next4-site-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  transition: background 0.1s;
  cursor: default;
}
.next4-site-row:last-child { border-bottom: none; }
.next4-site-row:hover { background: var(--bg-card-hover); }

/* Checkbox for email selection */
.next4-site-chk {
  width: 15px;
  height: 15px;
  cursor: pointer;
  accent-color: var(--accent-blue);
  flex-shrink: 0;
}

.next4-site-name {
  font-size: 12px;
  font-weight: 700;
  min-width: 58px;
  flex-shrink: 0;
}

.next4-site-types {
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
  flex: 1;
}

.next4-type-pill {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 8px;
  font-weight: 600;
  white-space: nowrap;
}

.next4-type-server  { background: rgba(74,158,255,0.15);  color: var(--accent-blue); }
.next4-type-network { background: rgba(155,89,182,0.15);  color: var(--accent-purple); }
.next4-type-other   { background: rgba(100,100,120,0.15); color: var(--text-muted); }

.next4-site-count {
  font-size: 18px;
  font-weight: 700;
  color: var(--accent-blue);
  min-width: 28px;
  text-align: right;
  flex-shrink: 0;
}

/* Checked row highlight */
.next4-site-row.next4-checked {
  background: rgba(74,158,255,0.07);
  border-left: 3px solid var(--accent-blue);
}

.next4-empty {
  padding: 18px 12px;
  text-align: center;
  color: var(--text-muted);
  font-size: 12px;
}

/* Selection bar at bottom of section */
.next4-selection-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding: 10px 14px;
  background: rgba(74,158,255,0.08);
  border: 1px solid rgba(74,158,255,0.25);
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--accent-blue);
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════════
   NEXT4 RACK POPUP  (n4p) — centered, vertical, collapsible sites
   ═══════════════════════════════════════════════════════════════════════ */

/* Popup container — wide enough for 5 columns
   (Asset ID · Position · Rack Model · Cabling Status · IPN).
   2026-07-08: bumped from 820 → 1080 to fit the new Cabling Status
   badge (~110 px) between Rack Model and IPN without pushing IPN
   off-screen. 96vw cap so we still leave a small gutter on
   ultra-narrow viewports; the popup already caps at 92vh vertically. */
.n4p-popup {
  max-width: 1080px !important;
  width: 96vw !important;
  animation: calPopupIn 0.15s ease;
}

/* Single-site popup — same width as multi-site so the 5 columns don't
   crush. Was 820 (2026-07-02, 4 cols) → now 1080 (2026-07-08, 5 cols). */
.n4p-popup-single {
  max-width: 1080px !important;
}

/* Scrollable body */
.n4p-body {
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* One block per site */
.n4p-site-block {
  border-bottom: 1px solid var(--border);
}
.n4p-site-block:last-child { border-bottom: none; }

/* Clickable site header row */
.n4p-site-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  cursor: pointer;
  user-select: none;
  background: var(--bg-table-head);
  transition: background 0.1s;
}
.n4p-site-header:hover { background: var(--bg-card-hover); }

.n4p-site-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.n4p-site-name {
  font-size: 14px;
  font-weight: 700;
  flex: 1;
}

.n4p-site-pills {
  display: flex;
  gap: 4px;
}

.n4p-site-count {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}

.n4p-chevron {
  font-size: 10px;
  color: var(--text-muted);
  flex-shrink: 0;
  width: 14px;
  text-align: center;
}

/* Collapsible body */
.n4p-site-body {
  overflow: hidden;
  transition: max-height 0.2s ease, opacity 0.15s ease;
  max-height: 2000px;
  opacity: 1;
}

.n4p-site-body.n4p-collapsed {
  max-height: 0;
  opacity: 0;
}

/* Copy buttons bar inside each site */
.n4p-copy-bar {
  display: flex;
  gap: 8px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-page);
  flex-wrap: wrap;
}

/* ── n4p site section (div-based, one per site) ── */
.n4p-site-section {
  border-bottom: 1px solid var(--border);
}
.n4p-site-section:last-child { border-bottom: none; }

/* Site header: dot + name + pills + count + copy buttons + chevron — all on one row */
.n4p-site-hdr {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--bg-table-head);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  user-select: none;
  flex-wrap: wrap;
}
.n4p-site-hdr:hover { background: var(--bg-card-hover); }

/* Collapsible body */
.n4p-section-body {
  overflow: hidden;
  max-height: 3000px;
  transition: max-height 0.2s ease, opacity 0.15s ease;
  opacity: 1;
}
.n4p-section-body.n4p-collapsed {
  max-height: 0;
  opacity: 0;
}

/* Shared table inside each section */
.n4p-shared-table {
  width: 100%;
  table-layout: fixed;
}
/* 5 columns (2026-07-08): Asset ID · Position · Rack Model · Cabling Status · IPN.
   Was 4 cols in 22/30/26/22 layout — bumped to 5 by inserting a Cabling
   Status column between Rack Model and IPN. Position (widest — 24 chars)
   still takes the most room; Cabling Status is a fixed 130px because the
   badge (`.cabling-badge`) has predictable width regardless of value. */
/* 2026-10-08 — 6 columns since the Townsend BBU column was added.
   2026-10-09 — BBU widened 13% → 18% so the summary rows ("24  RP PPS · 4.4 kW",
   the widest at ~125px) fit without the td ellipsis swallowing the label;
   Position/Rack Model/Cabling give up 1–2% each, still well above their text.
   2026-10-18 — Cabling 12% → 17% so the CABLING_IN_PROGRESS pill (~143px at
   11px + 26px cell padding) no longer clips to "CABLING_IN_PROGR"; Asset ID /
   IPN / BBU give back 2/2/1%, each still well above its widest text
   (10-digit asset, 14-char IPN, "24  RP PPS · 4.4 kW" summary). Note the
   min-width on td.cal-popup-cabling is ignored under table-layout: fixed —
   only these th percentages size the columns. */
.n4p-shared-table th:nth-child(1) { width: 12%; }   /* Asset ID */
.n4p-shared-table th:nth-child(2) { width: 21%; }   /* Position (widest — 24 chars) */
.n4p-shared-table th:nth-child(3) { width: 19%; }   /* Rack Model */
.n4p-shared-table th:nth-child(4) { width: 17%; }   /* Cabling Status — badge pill, fits CABLING_IN_PROGRESS */
.n4p-shared-table th:nth-child(5) { width: 14%; }   /* IPN */
.n4p-shared-table th:nth-child(6) { width: 17%; }   /* BBU — count + family pill / summary with kW */
.n4p-shared-table td,
.n4p-shared-table th {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 6px 8px;
}

/* Dark mode overrides */
body.dark-mode .n4p-site-hdr { background: #12151f; }
body.dark-mode .n4p-site-hdr:hover { background: #1a1e2e; }
body.dark-mode .n4p-site-header { background: #12151f; }
body.dark-mode .n4p-site-header:hover { background: #1a1e2e; }
body.dark-mode .n4p-copy-bar { background: #0f1117; }

/* ═══════════════════════════════════════════════════════════════════════
   AI CHAT ASSISTANT
   ═══════════════════════════════════════════════════════════════════════ */

/* Floating bubble button — orange (AWS brand) */
.ai-chat-btn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff9900 0%, #ec7211 100%);
  color: #fff;
  font-size: 28px;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(255,153,0,0.55);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s, box-shadow 0.15s;
}
.ai-chat-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 24px rgba(255,153,0,0.7);
}

/* Chat panel — original size */
.ai-chat-panel {
  position: fixed;
  bottom: 96px;
  right: 28px;
  width: 440px;
  height: 520px;
  min-width: 300px;
  min-height: 250px;
  max-width: calc(100vw - 20px);
  max-height: calc(100vh - 58px); /* never above top bar (48px) + 10px gap */
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  box-shadow: 0 8px 40px rgba(0,0,0,0.35);
  z-index: 499;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: aiPanelIn 0.18s ease;
  resize: none; /* we handle resize ourselves */
}
@keyframes aiPanelIn {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}

/* Header — draggable */
.ai-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: var(--bg-header);
  border-bottom: 2px solid var(--aws-orange);
  flex-shrink: 0;
  cursor: grab;
  user-select: none;
}
.ai-chat-header:active { cursor: grabbing; }

/* Resize handles */
.ai-chat-resize {
  position: absolute;
  z-index: 10;
}
.ai-chat-resize-n  { top: -3px; left: 8px; right: 8px; height: 6px; cursor: n-resize; }
.ai-chat-resize-w  { top: 8px; bottom: 8px; left: -3px; width: 6px; cursor: w-resize; }
.ai-chat-resize-nw { top: -4px; left: -4px; width: 12px; height: 12px; cursor: nw-resize; }
.ai-chat-resize-ne { top: -4px; right: -4px; width: 12px; height: 12px; cursor: ne-resize; }
.ai-chat-resize-sw { bottom: -4px; left: -4px; width: 12px; height: 12px; cursor: sw-resize; }
.ai-chat-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ai-chat-icon { font-size: 22px; line-height: 1; color: #4db8ff; }
.ai-chat-icon svg { width: 30px; height: 30px; }
.ai-chat-reset {
  background: none;
  border: 1px solid rgba(255,255,255,0.25);
  color: rgba(255,255,255,0.7);
  font-size: 13px;
  cursor: pointer;
  padding: 3px 7px;
  border-radius: 4px;
  line-height: 1;
  margin-left: 4px;
  transition: background 0.12s, color 0.12s;
}
.ai-chat-reset:hover { background: rgba(255,255,255,0.12); color: #fff; }
.ai-chat-title {
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
}
.ai-chat-subtitle {
  font-size: 10px;
  color: rgba(255,255,255,0.55);
}
.ai-chat-close {
  background: none;
  border: none;
  color: rgba(255,255,255,0.7);
  font-size: 16px;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
  line-height: 1;
}
.ai-chat-close:hover { background: rgba(255,255,255,0.12); color: #fff; }

/* Messages area */
.ai-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Message bubbles */
.ai-msg { display: flex; }
.ai-msg-user { justify-content: flex-end; }
.ai-msg-bot  { justify-content: flex-start; }

.ai-msg-bubble {
  max-width: 85%;
  padding: 9px 12px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.5;
}
.ai-msg-user .ai-msg-bubble {
  background: var(--accent-blue);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.ai-msg-bot .ai-msg-bubble {
  background: var(--bg-table-alt);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-bottom-left-radius: 4px;
}

/* Typing indicator */
.ai-msg-typing .ai-msg-bubble {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 14px;
}
.ai-typing-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-muted);
  animation: aiTypingBounce 1.2s infinite ease-in-out;
}
.ai-typing-dot:nth-child(2) { animation-delay: 0.2s; }
.ai-typing-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes aiTypingBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30%            { transform: translateY(-5px); opacity: 1; }
}

/* Quick action buttons */
/* Chart quick-action buttons row */
.ai-chat-chart-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  padding: 4px 12px 8px;
  border-bottom: 1px solid var(--border);
  align-items: center;
}
.ai-chart-btns-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-right: 2px;
}
.ai-chart-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.ai-chart-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
  filter: brightness(1.1);
}
.ai-chart-btn:active {
  transform: translateY(0);
}

.ai-chat-quick-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 12px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.ai-quick-btn {
  background: var(--bg-table-alt);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 10px;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  white-space: nowrap;
}
.ai-quick-btn:hover {
  background: var(--accent-blue);
  color: #fff;
  border-color: var(--accent-blue);
}

/* Input row */
.ai-chat-input-row {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.ai-chat-input {
  flex: 1;
  background: var(--bg-input);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  padding: 7px 10px;
  font-size: 13px;
  font-family: var(--font-main);
  outline: none;
  transition: border-color 0.15s;
  resize: none;
  min-height: 34px;
  max-height: 120px;
  overflow-y: auto;
  line-height: 1.4;
  field-sizing: content; /* Chrome 123+ auto-grow */
}
.ai-chat-input:focus {
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 2px rgba(74,158,255,0.15);
}
.ai-chat-send { flex-shrink: 0; }

/* Dark mode overrides */
body.dark-mode .ai-chat-panel { background: #1a1d27; border-color: #2d3148; }
body.dark-mode .ai-chat-header { background: #0d1117; }
body.dark-mode .ai-msg-bot .ai-msg-bubble { background: #12151f; border-color: #2d3148; color: #e8eaf6; }
body.dark-mode .ai-quick-btn { background: #12151f; border-color: #2d3148; color: #9ea3c0; }
body.dark-mode .ai-quick-btn:hover { background: #4a9eff; color: #fff; border-color: #4a9eff; }
body.dark-mode .ai-chat-input { background: #0a0c12; border-color: #3a3f5c; color: #e8eaf6; }

/* ═══════════════════════════════════════════════════════════════════════
   AI CHART MODAL — compact, email-modal sized
   ═══════════════════════════════════════════════════════════════════════ */
.ai-chart-modal {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  box-shadow: 0 12px 48px rgba(0,0,0,0.5);
  width: 600px;
  max-width: 94vw;
  height: 520px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: calPopupIn 0.15s ease;
}
.ai-chart-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-table-head);
  flex-shrink: 0;
}
body.dark-mode .ai-chart-modal {
  background: #1a1d27;
  border-color: #2d3148;
}
body.dark-mode .ai-chart-modal-header {
  background: #12151f;
}

/* ═══════════════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════════════ */
.footer {
  text-align: center;
  padding: 16px;
  font-size: 11px;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
  margin-top: 8px;
}

/* ═══════════════════════════════════════════════════════════════════════
   SCROLLBAR
   ═══════════════════════════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-page); }
::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #4a4f70; }

/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .top-bar { flex-direction: column; gap: 10px; align-items: flex-start; }
  main { padding: 12px 12px 24px; }
  .summary-cards { grid-template-columns: repeat(2, 1fr); }
  .filter-row { flex-direction: column; }
  .filter-group { min-width: 100%; }
}

/* ── Holiday highlighting ─────────────────────────────────────────── */
.cal-day.cal-holiday {
  background: #fff3e0 !important;
  border-left: 3px solid #ff9800;
  position: relative;
}

/* Holiday label — name + type badge, doubled font size vs old 9px */
.cal-holiday-label {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 2px 0 4px;
  padding: 2px 4px;
  background: rgba(255, 152, 0, 0.12);
  border-radius: 4px;
  border-left: 2px solid #ff9800;
}
.cal-holiday-name {
  /* 2026-08-07 — reduced from 18px to match .cal-site-row font size (~12px)
     per user feedback: 'La letra de los festivos es muy grande, que sea igual
     que las pills de los sites'. Historic 9px was too small; 18px was too big;
     12px = same as site chips + rack counts inside the day cell. */
  font-size: 12px;
  font-weight: 700;
  color: #e65100;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cal-holiday-type {
  /* 2026-08-07 v2 — bumped 10px → 12px per user feedback: both lines
     (name AND type) should be the same size as the site pills (12px)
     so the whole holiday label reads as a coherent 2-line unit rather
     than a title + subtitle. */
  font-size: 12px;
  font-weight: 500;
  color: #bf360c;
  opacity: 0.85;
  line-height: 1.2;
}

body.dark-mode .cal-day.cal-holiday {
  background: rgba(255, 152, 0, 0.1) !important;
  border-left-color: #ff9800;
}
body.dark-mode .cal-holiday-label {
  background: rgba(255, 152, 0, 0.08);
  border-left-color: #ff9800;
}
body.dark-mode .cal-holiday-name {
  color: #ffb74d;
}
body.dark-mode .cal-holiday-type {
  color: #ffa726;
}

/* ═══════════════════════════════════════════════════════════════════════
   STYLE OVERHAUL v2 — Asana calendar, Pro forecast, Neon dark mode
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. CALENDAR — Asana-style coloured chips ──────────────────────── */
/* 2026-07-03 user feedback (v2): only wanted the last visible site row
   to render fully — not to grow every cell to fit ALL sites. Previous
   fix went too far (removed max-height entirely so busy days ballooned).
   Correct behaviour: fixed cell height that fits ~5 site rows + the
   date/total header, and any 6th+ site row is reachable via internal
   scroll (as it was before, but with enough room so the 5th visible
   row is NEVER clipped — that was the actual bug).
   Cell budget: 6px pad-top + 6px date-num line + 4px gap + (5 × 18px
   site rows) + 4px pad-bottom ≈ 110px. Round up to 175px for breathing
   room + potential holiday label. */
.cal-month-grid {
  min-width: 1100px !important;
  gap: 6px !important;
}
.cal-day {
  height: 165px !important;       /* fits 5 site rows + date + optional holiday label (was 175, reduced per 2026-07-03 v3 feedback) */
  min-height: unset !important;
  max-height: 165px !important;
  padding: 6px 5px !important;
  overflow-y: auto;                /* 6th+ site row scrolls inside the cell */
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
  transition: scrollbar-color 0.2s ease;
}
.cal-day:hover {
  scrollbar-color: var(--accent-blue, #4a9eff) transparent;
}
.cal-day::-webkit-scrollbar { width: 3px; }
.cal-day::-webkit-scrollbar-track { background: transparent; }
.cal-day::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 10px;
  transition: background 0.2s ease;
}
.cal-day:hover::-webkit-scrollbar-thumb {
  background: var(--accent-blue, #4a9eff);
}

/* 2026-08-07 UX fix — user feedback: 'los dias del fin de semana no se
   expande el recuadro hasta abajo donde le corresponde por casilla'.
   Screenshot showed SAT/SUN cells stuck at ~40px in a month with zero
   weekend deliveries, breaking the grid layout so the row heights on
   weeks 1 and 6 didn't match. Fix: weekend cells now ALWAYS have the
   same height as weekday cells (165 px), regardless of racks. They
   keep the slightly greyer background (see :2061 rule above) so the
   viewer still can tell weekends apart, and they still short-circuit
   the "No Deliveries" pill (that's classifyEmptyDay() in dashboard.js,
   which returns null for weekends anyway). Historic 40px compact rule
   removed. */
.cal-day.cal-weekend {
  height: 165px !important;
  min-height: unset !important;
  max-height: 165px !important;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Weekend expanded — racks exist: match weekday height + scroll for overflow */
.cal-day.cal-weekend.cal-has-racks {
  height: 165px !important;
  max-height: 165px !important;
  opacity: 1 !important;
  background: var(--bg-card) !important;
  overflow-y: auto;
  overflow-x: hidden;
}
body.dark-mode .cal-day.cal-weekend.cal-has-racks {
  background: #12151f !important;
}

/* 2026-07-03 v4 — when the MONTH has any weekend delivery (grid is in
   7-col mode via :has()), even the EMPTY weekend cells should look like
   a normal empty weekday: white background, full opacity, same height
   as weekday cells. Feedback: "los dias del fin de semana que estan
   vacios teniendo racks en fines de semana pues que se vea igual,
   blanca e igual de estilo como un dia entre semana sin racks".
   Without this rule, empty SAT/SUN cells kept their `background:
   var(--bg-table-alt)` grey + opacity: 0.7 from the compact-weekend
   base style, making them look "different" in a month where weekends
   are active. */
.cal-month-grid:has(.cal-day.cal-weekend.cal-has-racks) .cal-day.cal-weekend:not(.cal-has-racks):not(.cal-empty) {
  height: 165px !important;
  max-height: 165px !important;
  opacity: 1 !important;
  background: var(--bg-card) !important;
  padding: 6px 5px !important;
}
body.dark-mode .cal-month-grid:has(.cal-day.cal-weekend.cal-has-racks) .cal-day.cal-weekend:not(.cal-has-racks):not(.cal-empty) {
  background: #12151f !important;
}
.cal-day-num {
  font-size: 15px !important;
  font-weight: 700 !important;
}
.cal-site-rows {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 6px;
}
/* Calendar day header — day number left, rack count right */
.cal-day-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

/* Hide the old dot */
.cal-site-dot { display: none !important; }

/* Coloured chip per site
   2026-08-07 v2 — bumped font-size 11px → 12px per user feedback:
   "las pills de los sites es 11px? si es asi que sea 12px". */
.cal-site-row {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  transition: transform 0.15s, box-shadow 0.15s;
}
.cal-site-row:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}
/* AZ group coloring — applied via data-az attribute */
.cal-site-row[data-az="ZAZ60"] { background: #e3f2fd; border-left: 3px solid #1565c0; }
.cal-site-row[data-az="ZAZ61"] { background: #fff8e1; border-left: 3px solid #f9a825; }
.cal-site-row[data-az="ZAZ62"] { background: #fce4ec; border-left: 3px solid #c62828; }
/* 2026-08-25 — MAD55 pill in Delivery Calendar day cells: light grey */
.cal-site-row[data-az="MAD55"] { background: #f5f5f5; border-left: 3px solid #9e9e9e; }

/* 2026-07-03 — ZAZ AZ colouring in Month calendar cells (matches hub-az +
   4-Day Forecast palette). Selector uses data-az attribute set by
   renderMonthCalendar() → dcToAzGroup(site). Same colours as the
   .next4-site-row block so all three sections tell the same visual story.
   ZAZ has 3 AZs: AZ60 (blue), AZ61 (amber), AZ62 (red). */
.cal-site-row[data-az="ZAZ60"] { background: #e3f2fd; border-left: 3px solid #1565c0; }
.cal-site-row[data-az="ZAZ61"] { background: #fff8e1; border-left: 3px solid #f9a825; }
.cal-site-row[data-az="ZAZ62"] { background: #fce4ec; border-left: 3px solid #c62828; }
.cal-site-row[data-az="MAD55"] { background: #f5f5f5; border-left: 3px solid #9e9e9e; }


/* ── Week view site-label rows (2026-07-03) ────────────────────────────
   Was a plain <div style="color:${site-color}">SITE</div>. Redesigned to
   match the hub-az + 4-Day patterns: AZ-coloured background + border-left,
   site name + rack-count badge on the right. Height matches .cal-week-cell
   so the sticky-left column aligns with the day cells. */
.cal-week-site-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 700;
  border-radius: var(--radius-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-height: 120px;
}
.cal-week-site-tot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 22px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  color: inherit;
  font-size: 11px;
  font-weight: 800;
  padding: 0 8px;
  font-variant-numeric: tabular-nums;
}
body.dark-mode .cal-week-site-tot { background: rgba(255, 255, 255, 0.12); }

.cal-site-label { color: #1a1a1a !important; font-weight: 600; }
.cal-site-cnt {
  /* 2026-08-07 v3 — bumped 11px → 12px per user feedback:
     "la cantidad de racks en la pill no puede ser tamaño 12px tambien?".
     Matches the site-name text (12px) so both sides of the pill are
     equal-weight visually. */
  margin-left: auto;
  background: transparent;
  color: #1a1a1a !important;
  padding: 0;
  border-radius: 0;
  font-size: 12px;
  font-weight: 700;
  min-width: auto;
  text-align: right;
}

/* ── 2. GRADIENT GLOW under page header ────────────────────────────── */
.page-header, header, .header-bar {
  position: relative;
}
.page-header::after, header::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  right: 0;
  height: 8px;
  background: linear-gradient(to bottom, rgba(255,152,0,0.25), transparent);
  pointer-events: none;
  z-index: 1;
}

/* ── 3. SUMMARY CARDS — AZ-specific colours ────────────────────────── */
.stat-card {
  position: relative;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}
.stat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
/* AZ60 blue border */
.stat-card.stat-blue { border-left: 4px solid #1565c0 !important; }
/* AZ61 yellow/amber border */
.stat-card.stat-purple { border-left: 4px solid #f9a825 !important; }
/* AZ62 pink/red border */
.stat-card.stat-teal { border-left: 4px solid #c62828 !important; }

/* Donut chart placeholder */
.stat-donut {
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 6px solid #e0e0e0;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
}
.stat-donut.donut-blue  { border-color: #42a5f5; border-top-color: #e3f2fd; }
.stat-donut.donut-amber { border-color: #ffca28; border-top-color: #fff8e1; }
.stat-donut.donut-pink  { border-color: #ef5350; border-top-color: #fce4ec; }

/* Sparkline placeholder */
.stat-sparkline {
  display: inline-block;
  width: 80px; height: 24px;
  background: linear-gradient(to right, rgba(74,158,255,0.1), rgba(74,158,255,0.3));
  border-radius: 4px;
  margin-top: 4px;
}

/* ── 4. FOUR-DAY FORECAST — Professional redesign ──────────────────── */
.next4-day-card {
  border-radius: 12px !important;
  border: 1px solid #e0e0e0 !important;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
  position: relative;
}
.next4-day-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}
/* Accent bar on left edge */
.next4-day-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: #9e9e9e;
  border-radius: 12px 0 0 12px;
}
.next4-today::before  { background: #1565c0 !important; }
.next4-tomorrow::before { background: #00897b !important; }

/* Split header */
.next4-day-title {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 12px 14px !important;
  border-bottom: 1px solid #f0f0f0;
  background: #fafafa;
}
.next4-day-total {
  background: #e3f2fd;
  color: #1565c0;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
}

/* AZ-coloured site rows */
.next4-site-row {
  padding: 8px 14px !important;
  border-radius: 0 !important;
  border-bottom: 1px solid #f5f5f5;
  transition: background 0.15s;
  position: relative;
}
.next4-site-row:last-child { border-bottom: none; }
.next4-site-row:hover { background: rgba(0,0,0,0.02); }

/* AZ60 pair rows — blue pastel */
.next4-site-row[data-key*="ZAZ060"],
.next4-site-row[data-key*="ZAZ070"] {
  background: #e3f2fd;
  border-left: 3px solid #42a5f5;
}
.next4-site-row[data-key*="ZAZ060"]:hover,
.next4-site-row[data-key*="ZAZ070"]:hover {
  background: #bbdefb;
}
/* AZ61 pair rows — yellow/amber pastel */
.next4-site-row[data-key*="ZAZ061"],
.next4-site-row[data-key*="ZAZ071"] {
  background: #fff8e1;
  border-left: 3px solid #ffca28;
}
.next4-site-row[data-key*="ZAZ061"]:hover,
.next4-site-row[data-key*="ZAZ071"]:hover {
  background: #ffecb3;
}
/* AZ62 pair rows — pink/red pastel */
.next4-site-row[data-key*="ZAZ062"],
.next4-site-row[data-key*="ZAZ072"] {
  background: #fce4ec;
  border-left: 3px solid #ef5350;
}
.next4-site-row[data-key*="ZAZ062"]:hover,
.next4-site-row[data-key*="ZAZ072"]:hover {
  background: #f8bbd0;
}

/* 2026-07-03 — IAD AZ colours in the 4-Day Forecast.
   Same idea as ZAZ but using the data-az attribute (emitted by
   renderNext4Days() → dcToAzGroup(site)) so we don't have to enumerate
   146 site codes. Matches HUB_AZ_CONFIG's palette (blue / amber / red /
   green) so calendar + hub-az cards + forecast are visually consistent. */
.next4-site-row[data-az="ZAZ60"] {
  background: #e3f2fd;
  border-left: 3px solid #1565c0;
}
.next4-site-row[data-az="ZAZ60"]:hover { background: #bbdefb; }

.next4-site-row[data-az="ZAZ61"] {
  background: #fff8e1;
  border-left: 3px solid #f9a825;
}
.next4-site-row[data-az="ZAZ61"]:hover { background: #ffecb3; }

.next4-site-row[data-az="ZAZ62"] {
  background: #fce4ec;
  border-left: 3px solid #c62828;
}
.next4-site-row[data-az="ZAZ62"]:hover { background: #f8bbd0; }

/* 2026-08-25 — MAD55 (regional AZ, non-HUB) painted in neutral light grey
   so it stands apart from the three ZAZ hub-AZs (blue / amber / red) and
   reads as "external / secondary" at a glance. */
.next4-site-row[data-az="MAD55"] {
  background: #f5f5f5;
  border-left: 3px solid #9e9e9e;
}
.next4-site-row[data-az="MAD55"]:hover { background: #eeeeee; }

/* Dark mode — same 4 AZs, lower alpha */
body.dark-mode .next4-site-row[data-az="ZAZ60"] {
  background: rgba(21, 101, 192, 0.15);
  border-left-color: #42a5f5;
}
body.dark-mode .next4-site-row[data-az="ZAZ61"] {
  background: rgba(249, 168, 37, 0.15);
  border-left-color: #ffca28;
}
body.dark-mode .next4-site-row[data-az="ZAZ62"] {
  background: rgba(198, 40, 40, 0.15);
  border-left-color: #ef5350;
}
body.dark-mode .next4-site-row[data-az="MAD55"] {
  background: rgba(158, 158, 158, 0.15);
  border-left-color: #bdbdbd;
}


/* Circular count badge */
.next4-site-count {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: #1565c0 !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

/* Progress bar under site row */
.next4-site-row::after {
  content: '';
  position: absolute;
  bottom: 0; left: 14px; right: 14px;
  height: 2px;
  background: linear-gradient(to right, rgba(21,101,192,0.3), rgba(21,101,192,0.05));
  border-radius: 1px;
}

/* ── 5. DARK MODE — Neon / Glassmorphism ───────────────────────────── */
body.dark-mode {
  background: #0a0a1a !important;
  background-image:
    radial-gradient(circle at 20% 50%, rgba(74,158,255,0.04) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(156,39,176,0.04) 0%, transparent 50%),
    radial-gradient(circle at 50% 80%, rgba(0,150,136,0.04) 0%, transparent 50%) !important;
  animation: darkBgShift 30s ease-in-out infinite alternate;
}
@keyframes darkBgShift {
  0%   { background-position: 0% 0%; }
  100% { background-position: 100% 100%; }
}

/* Dot-grid overlay */
body.dark-mode::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
  z-index: 0;
}

/* Glassmorphism cards */
body.dark-mode .stat-card,
body.dark-mode .next4-day-card,
body.dark-mode .filter-card,
body.dark-mode .card {
  background: rgba(20, 20, 40, 0.7) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.05) !important;
}

/* Neon glow on values */
body.dark-mode .stat-value {
  text-shadow: 0 0 12px rgba(74,158,255,0.6), 0 0 24px rgba(74,158,255,0.3) !important;
  color: #4a9eff !important;
}
body.dark-mode .stat-card.stat-green .stat-value {
  text-shadow: 0 0 12px rgba(46,204,113,0.6), 0 0 24px rgba(46,204,113,0.3) !important;
  color: #2ecc71 !important;
}
body.dark-mode .stat-card.stat-purple .stat-value {
  text-shadow: 0 0 12px rgba(255,202,40,0.6), 0 0 24px rgba(255,202,40,0.3) !important;
  color: #ffca28 !important;
}
body.dark-mode .stat-card.stat-teal .stat-value {
  text-shadow: 0 0 12px rgba(239,83,80,0.6), 0 0 24px rgba(239,83,80,0.3) !important;
  color: #ef5350 !important;
}

/* Neon glow on buttons */
body.dark-mode .btn-primary {
  box-shadow: 0 0 12px rgba(74,158,255,0.4), 0 0 24px rgba(74,158,255,0.15) !important;
}
body.dark-mode .btn-primary:hover {
  box-shadow: 0 0 20px rgba(74,158,255,0.6), 0 0 40px rgba(74,158,255,0.25) !important;
}

/* Neon glow on table headers */
body.dark-mode #rack-table thead th {
  text-shadow: 0 0 8px rgba(74,158,255,0.3);
  border-bottom: 1px solid rgba(74,158,255,0.2) !important;
}

/* Scan line animation on page header */
body.dark-mode .page-header::before,
body.dark-mode header::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 100%;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(74,158,255,0.03) 50%,
    transparent 100%
  );
  background-size: 100% 4px;
  animation: scanLine 8s linear infinite;
  pointer-events: none;
  z-index: 2;
}
@keyframes scanLine {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}

/* Pulse ring on today's calendar cell */
body.dark-mode .cal-today {
  position: relative;
}
body.dark-mode .cal-today::before {
  content: '';
  position: absolute;
  top: -2px; left: -2px; right: -2px; bottom: -2px;
  border: 2px solid rgba(74,158,255,0.4);
  border-radius: 8px;
  animation: pulseRing 2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes pulseRing {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50%      { opacity: 0.8; transform: scale(1.02); }
}

/* HUD corner brackets on cards */
body.dark-mode .stat-card::before,
body.dark-mode .stat-card::after {
  content: '';
  position: absolute;
  width: 12px; height: 12px;
  border-color: rgba(74,158,255,0.3);
  border-style: solid;
  pointer-events: none;
}
body.dark-mode .stat-card::before {
  top: 4px; left: 4px;
  border-width: 2px 0 0 2px;
}
body.dark-mode .stat-card::after {
  bottom: 4px; right: 4px;
  border-width: 0 2px 2px 0;
}

/* Dark mode calendar chips — white text + AZ-coloured backgrounds */
body.dark-mode .cal-site-row {
  background: rgba(255,255,255,0.08);
}
body.dark-mode .cal-site-row[data-az="ZAZ60"] { background: rgba(21,101,192,0.35); border-left-color: #42a5f5; }
body.dark-mode .cal-site-row[data-az="ZAZ61"] { background: rgba(249,168,37,0.3); border-left-color: #ffca28; }
body.dark-mode .cal-site-row[data-az="ZAZ62"] { background: rgba(198,40,40,0.3); border-left-color: #ef5350; }
/* 2026-08-25 — MAD55 dark mode pill in Delivery Calendar day cells */
body.dark-mode .cal-site-row[data-az="MAD55"] { background: rgba(158,158,158,0.2); border-left-color: #bdbdbd; }

body.dark-mode .cal-site-label { color: #e0e0e0 !important; }
body.dark-mode .cal-site-cnt {
  color: #e0e0e0 !important;
  background: transparent;
}

/* Dark mode forecast AZ rows */
body.dark-mode .next4-site-row[data-key*="ZAZ060"],
body.dark-mode .next4-site-row[data-key*="ZAZ070"] {
  background: rgba(21,101,192,0.15);
  border-left-color: #42a5f5;
}
body.dark-mode .next4-site-row[data-key*="ZAZ061"],
body.dark-mode .next4-site-row[data-key*="ZAZ071"] {
  background: rgba(249,168,37,0.15);
  border-left-color: #ffca28;
}
body.dark-mode .next4-site-row[data-key*="ZAZ062"],
body.dark-mode .next4-site-row[data-key*="ZAZ072"] {
  background: rgba(198,40,40,0.15);
  border-left-color: #ef5350;
}

/* Dark mode forecast card */
body.dark-mode .next4-day-title {
  background: rgba(255,255,255,0.03) !important;
  border-bottom-color: rgba(255,255,255,0.06) !important;
}
body.dark-mode .next4-day-total {
  background: rgba(74,158,255,0.15);
  color: #4a9eff;
}
body.dark-mode .next4-site-count {
  background: rgba(74,158,255,0.8) !important;
}

/* Dark mode gradient glow — orange → transparent */
body.dark-mode .page-header::after,
body.dark-mode header::after {
  background: linear-gradient(to bottom, rgba(255,152,0,0.15), transparent) !important;
}

/* Dark mode holiday */
body.dark-mode .cal-day.cal-holiday {
  background: rgba(255,152,0,0.08) !important;
  border-left-color: #ff9800;
}

/* ── Forecast site names: black (light) / white (dark) ─────────────── */
.next4-site-name {
  color: #1a1a1a !important;
}
body.dark-mode .next4-site-name {
  color: #e0e0e0 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   HUB RACKS BY AZ GROUP SECTION
   ═══════════════════════════════════════════════════════════════════════ */
.hub-az-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.hub-az-hint {
  font-size: 12px;
  color: var(--text-muted);
}

/* 2026-07-03 v8 — when exactly ONE card is visible in the section (e.g.
   after clicking IAD ADAMSTOWN in the Section-1 filter), the flex row
   would leave a huge empty gutter on the right. These two modifier
   classes (toggled from JS in applyGlobalAZFilter) center the single
   card and the header inside the section container. Multi-card layout
   is untouched. */
.hub-az-grid--single {
  justify-content: center;
}
.hub-az-header--single {
  justify-content: center;
  text-align: center;
}
.hub-az-header--single .hub-az-hint {
  /* Keep the hint immediately next to the title even when centered.
     .hub-az-hint has no explicit width so the flex align + gap does
     the right thing without needing a wrapper element. */
  margin-left: 4px;
}


/* ── AZ Filter Cards (Section 1) ────────────────────────────────────
   2026-07-03 v11 — REMOVED `border-left: 3px solid transparent` from
   the base rule. It was silently overriding the coloured 4px left
   border on `.az-filter-card--hub` in the resting state (equal
   specificity, later in file → base rule wins). The Hub / Regional
   modifier blocks now own the entire border declaration. */
.az-filter-card {
  cursor: pointer;
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out,
              opacity 0.2s ease-in-out, filter 0.2s ease-in-out;
  user-select: none;
}
.az-filter-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.13);
}

/* Active: prominent, elevated, tinted.
   2026-07-03 v13 — respect the per-AZ colour (--az-color, set inline via
   `style="--az-color:${colour}"` on each hub card). Was hardcoded to
   `--accent-blue`, so IAD HOLIDAY (red) / IAD SOUTH (amber) / IAD ADAMSTOWN
   (green) painted their active left border BLUE instead of matching the
   card's AZ hue. Now the left border stays the AZ colour on all sides,
   consistent with the earlier `.az-filter-card--active` block (line ~715). */
.az-filter-card--active {
  border-left: 4px solid var(--az-color, var(--accent-blue, #0073bb)) !important;
  box-shadow: 0 6px 24px color-mix(in srgb, var(--az-color, #0073bb) 22%, transparent) !important;
  background: color-mix(in srgb, var(--az-color, #1a73e8) 7%, var(--bg-card, #fff)) !important;
  transform: translateY(-2px);
}
body.dark-mode .az-filter-card--active {
  background: color-mix(in srgb, var(--az-color, #4a9eff) 12%, var(--bg-card, #1a1d27)) !important;
  box-shadow: 0 6px 24px color-mix(in srgb, var(--az-color, #4a9eff) 30%, transparent) !important;
}

/* Dimmed: receded, greyed out */
.az-filter-card--dimmed {
  opacity: 0.42;
  transform: scale(0.97);
  filter: grayscale(20%);
}
.az-filter-card--dimmed:hover {
  opacity: 0.65;
  transform: scale(0.98);
}

/* AZ cards — horizontal scroll row (no wrap)
   2026-07-03 v5 feedback: ALL cards (IAD NORTH/SOUTH/HOLIDAY/ADAMSTOWN, DCA54,
   ALE61, …) MUST be reachable by horizontal scroll. Bug in v4: card had
   max-width: calc(33% - x) so when there were >3 cards the container's
   scrollWidth still equalled clientWidth (each card shrank to 33%), so no
   scroll appeared. Fix: cards use a real pixel width (--cw), the container's
   `overflow-x: auto` shows a THIN always-visible scrollbar, and no max-width
   is set on the card. Overflow blooms naturally past clientWidth. */
/* AZ cards — horizontal scroll wrapper.
   2026-07-03 v6 feedback (final): user reported "5+ cards visible, ALE61
   missing from scroll". Two bugs in v5:
     a) Card width 380px was too small; on 1900px viewport 4-5 fit.
     b) The regional-card render loop in dashboard.js used
        `knownSites.has(site)` which filtered out multi-AZ sites,
        so ALE61 (site IAD314 listed under IAD SOUTH) never rendered.
   Fix (a): CSS uses `flex: 0 0 calc(33.333% - 12px)` on each card so
   exactly 3 fit in the wrapper. When the render loop emits a 4th, 5th,
   6th card, their combined widths still exceed the wrapper (each is
   33.333% of it, minus a 12px gap share), causing scrollWidth to grow
   past clientWidth → real horizontal scroll.
   Fix (b): see dashboard.js v6 — group regionals by `r.az`, not `r.dc`. */
.hub-az-grid {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  gap: 12px;
  padding-bottom: 8px;
  scroll-behavior: smooth;
  width: 100%;
  /* Visible scrollbar — user REQUESTED it be visible so they know they
     can scroll. Light track + AWS-blue thumb, 8px tall. */
  scrollbar-width: thin;
  scrollbar-color: var(--accent-blue, #0073bb) rgba(0, 0, 0, 0.08);
}
.hub-az-grid::-webkit-scrollbar {
  height: 10px;
}
.hub-az-grid::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.06);
  border-radius: 5px;
}
.hub-az-grid::-webkit-scrollbar-thumb {
  background: var(--accent-blue, #0073bb);
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.4);
}
.hub-az-grid::-webkit-scrollbar-thumb:hover {
  background: #0056a3;
}

/* Individual AZ card — exactly 1/4 of the visible wrapper (minus its
   share of the gap). 4 cards fill the visible area; 5th+ scroll.
   2026-07-03 v7 feedback: user changed the target from 3 → 4 cards
   visible. Only the width formula changes; the flex/scroll/scrollbar
   machinery from v6 is untouched. */
.hub-az-card {
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  overflow: hidden;
  transition: box-shadow 0.15s ease;
  flex: 0 0 calc(25% - 12px);
  min-width: calc(25% - 12px);
  width: calc(25% - 12px);
  display: flex;
  flex-direction: column;
}

/* Mobile fallback: 3 cards may be too crushed under 900px. Give each a
   min pixel width so they don't collapse below readable. */
@media (max-width: 899px) {
  .hub-az-card {
    flex: 0 0 300px;
    min-width: 300px;
    width: 300px;
  }
}



.hub-az-card:hover {
  box-shadow: var(--shadow);
}

/* Card header strip (coloured by AZ) */
.hub-az-card-header {
  padding: 12px 16px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
}
.hub-az-card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}
.hub-az-card-sites {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 2px;
}
.hub-az-card-count {
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
}

/* Cabling progress bar */
.hub-az-cabling {
  padding: 12px 16px 8px;
}
.hub-az-cabling-label {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-secondary);
  margin-bottom: 5px;
}
.hub-az-cabling-pct {
  font-weight: 700;
  font-size: 13px;
}
.hub-az-progress-track {
  height: 8px;
  background: var(--border);
  border-radius: 4px;
  overflow: hidden;
}
.hub-az-progress-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.4s ease;
}
.hub-az-progress-fill.pct-100 { background: #1d8102; }
.hub-az-progress-fill.pct-high { background: #2ecc71; }
.hub-az-progress-fill.pct-mid  { background: #f39c12; }
.hub-az-progress-fill.pct-low  { background: #e74c3c; }

/* Cabling status breakdown pills */
.hub-az-cabling-breakdown {
  padding: 0 16px 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.hub-az-cabling-pill {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 10px;
  background: var(--bg-page);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  white-space: nowrap;
}
.hub-az-cabling-pill.pill-cabled     { background: #f2f8f0; border-color: #1d8102; color: #1d8102; }
.hub-az-cabling-pill.pill-pending    { background: #fdf8ee; border-color: #8d6605; color: #8d6605; }
.hub-az-cabling-pill.pill-blocked    { background: #fdf3f1; border-color: #d13212; color: #d13212; }
/* 2026-07-03 — soft red for NOT CABLED (rojo suave, más apagado que
   .pill-blocked). Reservado a "NOT_CABLED" para que "BLOCKED"/"REJECTED"
   sigan siendo el rojo fuerte. */
.hub-az-cabling-pill.pill-not-cabled { background: #fdecea; border-color: #f28b82; color: #b3261e; }

/* Next4 day card — site rows scroll container (max 5 rows visible) */
.next4-sites-scroll {
  overflow-y: auto;
  max-height: calc(5 * 46px); /* 5 rows × ~46px each (padding 8px top+bottom + content) */
  scrollbar-width: thin;
  scrollbar-color: var(--accent-blue, #4a9eff) transparent;
}
.next4-sites-scroll::-webkit-scrollbar { width: 4px; }
.next4-sites-scroll::-webkit-scrollbar-track { background: transparent; }
.next4-sites-scroll::-webkit-scrollbar-thumb {
  background: var(--accent-blue, #4a9eff);
  border-radius: 2px;
}

/* Site rows inside card — FIXED height so every card shares the same
   footprint. Cards with 4 sites (IAD ADAMSTOWN) match the visual height
   of cards with 20+ sites (IAD NORTH); the extra room stays empty at the
   bottom instead of raising the footer. Overflow → internal scroll.
   2026-07-03 feedback: 'que ensanches hacia abajo por defecto el espacio
   donde estan los datos de cableado de los sites'. */
.hub-az-sites {
  padding: 0 16px 10px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
  flex: 1 1 auto;
  overflow-y: auto;
  /* 5 rows × 34px + a bit of head/tail padding = same for every card */
  height: calc(5 * 34px + 12px);
  min-height: calc(5 * 34px + 12px);
  scrollbar-width: thin;
  scrollbar-color: var(--accent-blue, #4a9eff) transparent;
}
.hub-az-sites::-webkit-scrollbar { width: 4px; }
.hub-az-sites::-webkit-scrollbar-track { background: transparent; }
.hub-az-sites::-webkit-scrollbar-thumb {
  background: var(--accent-blue, #4a9eff);
  border-radius: 2px;
}
/* 2026-07-03 v3 — 3-col flex layout per the product spec:
     [LEFT: site name]  [CENTER: S/N · % cabled]  [RIGHT: total count]
   Site name is 500 weight, min-width 60px, left-aligned. Center piece
   groups S/N (muted grey) + separator '·' + % cabled (coloured red /
   orange / green / dark-green) inline; flex:1 so it takes all the space
   between the two edges. Total count is bold, right-aligned, min-width
   30px, so the digits stack across every row. */
.hub-az-site-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 5px 0;
  border-bottom: 1px solid var(--border-light);
  font-size: 12px;
}
.hub-az-site-row:last-child { border-bottom: none; }

/* Col 1 — LEFT: site name */
.hub-az-site-name {
  flex: 0 0 auto;
  min-width: 60px;
  font-weight: 500;
  color: var(--text-primary);
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Col 2 — CENTER: S/N · % cabled (inline, horizontally + vertically centered) */
.hub-az-site-center {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 8px;
  text-align: center;
  min-width: 0;                 /* let flex children shrink if space is tight */
  overflow: hidden;
  white-space: nowrap;
}
.hub-az-site-sn {
  font-size: 10px;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.hub-az-site-sep {
  font-size: 10px;
  color: var(--text-muted);
  opacity: 0.6;
}
.hub-az-site-pct {
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Legacy: some callers still ship .hub-az-site-meta — keep it working as a
   fallback in case an old cached page loads. */
.hub-az-site-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-secondary);
  justify-content: flex-end;
}
.hub-az-site-count {
  font-weight: 700;
  font-size: 13px;
  color: var(--text-primary);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Card footer with "See in table" button */
.hub-az-card-footer {
  padding: 10px 16px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 8px;
}

/* ── Modal ── */
.hub-az-modal {
  background: var(--bg-card);
  border-radius: var(--radius);
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  width: 96vw;
  max-width: 1100px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.hub-az-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.hub-az-modal-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
}
.hub-az-modal-subtitle {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
}
.hub-az-modal-body {
  overflow-y: auto;
  padding: 16px 20px;
  flex: 1;
}

/* Modal site section */
.hub-az-modal-site {
  margin-bottom: 20px;
}
.hub-az-modal-site-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--border);
}
.hub-az-modal-site-name {
  font-size: 14px;
  font-weight: 700;
}
.hub-az-modal-site-count {
  font-size: 12px;
  color: var(--text-secondary);
}

/* Modal rack table */
.hub-az-modal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.hub-az-modal-table th {
  background: var(--bg-table-head);
  padding: 6px 10px;
  text-align: left;
  font-weight: 600;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.hub-az-modal-table td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--border-light);
  color: var(--text-primary);
  vertical-align: middle;
  white-space: nowrap;
}
.hub-az-modal-table tr:last-child td { border-bottom: none; }
.hub-az-modal-table tr:hover td { background: var(--bg-table-alt); }

/* Cabling status badge in modal */
.cabling-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}
.cabling-badge.cabled    { background: #f2f8f0; color: #1d8102; border: 1px solid #1d8102; }
.cabling-badge.pending   { background: #fdf8ee; color: #8d6605; border: 1px solid #8d6605; }
.cabling-badge.blocked   { background: #fdf3f1; color: #d13212; border: 1px solid #d13212; }
/* 2026-07-08 — soft red pill para NOT_CABLED en todos los popups del
   calendario (Next4 day/site, day popup, site popup). Idéntico al
   .hub-az-cabling-pill.pill-not-cabled ya existente en las tarjetas
   Hub AZ. Reservado a "NOT_CABLED" para que "BLOCKED"/"REJECTED"
   sigan siendo el rojo fuerte .cabling-badge.blocked. */
.cabling-badge.not-cabled { background: #fdecea; color: #b3261e; border: 1px solid #f28b82; }
.cabling-badge.unknown   { background: var(--bg-page); color: var(--text-muted); border: 1px solid var(--border); }

/* Dark mode */
body.dark-mode .hub-az-card { background: var(--bg-card); border-color: var(--border); }
body.dark-mode .hub-az-progress-track { background: rgba(255,255,255,0.1); }
body.dark-mode .hub-az-cabling-pill { background: rgba(255,255,255,0.05); }
body.dark-mode .hub-az-modal { background: var(--bg-card); }
body.dark-mode .hub-az-modal-table th { background: rgba(255,255,255,0.05); }

/* ═══════════════════════════════════════════════════════════════════════
   FEEDBACK BUTTON + PANEL
   ═══════════════════════════════════════════════════════════════════════ */

/* Feedback button — same size as AI chat button, sits to its left */
.feedback-btn {
  position: fixed;
  bottom: 24px;
  right: 104px; /* AI button: right:24px + width:64px + gap:16px = 104 */
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1a73e8 0%, #0d47a1 100%);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(26,115,232,0.45);
  z-index: 1000;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  overflow: visible;
}
.feedback-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 20px rgba(26,115,232,0.6);
}

/* Envelope animation — slides down into mailbox on load, then on hover */
@keyframes envelopeDrop {
  0%   { transform: translateY(0px);  opacity: 1; }
  40%  { transform: translateY(6px);  opacity: 1; }
  60%  { transform: translateY(10px); opacity: 0.6; }
  100% { transform: translateY(14px); opacity: 0; }
}
@keyframes envelopeReturn {
  0%   { transform: translateY(14px); opacity: 0; }
  100% { transform: translateY(0px);  opacity: 1; }
}

/* On page load: play the drop animation once */
.feedback-btn .feedback-envelope {
  animation: envelopeDrop 1.8s ease-in-out 1.5s forwards;
}

/* On hover: loop the animation continuously — 50% slower */
.feedback-btn:hover .feedback-envelope {
  animation: envelopeDrop 1.4s ease-in-out infinite;
}

/* Feedback panel — same blue gradient as the mailbox button */
.feedback-panel {
  position: fixed;
  bottom: 96px;
  right: 104px;
  width: 780px;
  height: 600px;
  background: linear-gradient(160deg, #1a73e8 0%, #0d47a1 100%);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 12px;
  box-shadow: 0 8px 40px rgba(13,71,161,0.55);
  z-index: 1001;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.feedback-panel.hidden {
  display: none;
}

/* Feedback textarea placeholder — white on blue background */
#feedback-input::placeholder {
  color: rgba(255,255,255,0.55);
}

/* Formatting toolbar buttons */
.fb-fmt-btn {
  background: var(--bg-table-alt, #f8f9fa);
  border: 1px solid var(--border, #d5dbdb);
  border-radius: 4px;
  color: var(--text-secondary, #545b64);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  padding: 3px 8px;
  line-height: 1.4;
  transition: background 0.1s, color 0.1s;
  white-space: nowrap;
}
.fb-fmt-btn:hover {
  background: var(--accent-blue, #0073bb);
  color: #fff;
  border-color: var(--accent-blue, #0073bb);
}

/* Dark mode */
body.dark-mode .feedback-btn {
  background: linear-gradient(135deg, #1a73e8 0%, #0d47a1 100%);
}
body.dark-mode .feedback-panel {
  background: var(--bg-card);
  border-color: var(--border);
}


/* ═══════════════════════════════════════════════════════════════════
   CUSTOM VIEWS — CV-T23
   Welcome Modal + Shade Panel + View Switcher pill + Multi-select
   dropdowns + Toast rail. Every rule honours body.dark-mode with a
   corresponding override at the bottom. See docs/CUSTOM-VIEWS-PLAN.md
   § 9 for the component contracts.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Screen-reader only ────────────────────────────────────────── */
.cv-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── View Switcher pill (CV-T22) ───────────────────────────────── */
.view-switcher-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 10px;
  min-width: 180px;
  max-width: 240px;
  height: 34px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  color: #ffffff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.view-switcher-pill[hidden] { display: none; }
.view-switcher-pill:hover {
  background: rgba(255, 255, 255, 0.24);
  border-color: rgba(255, 255, 255, 0.42);
}
.view-switcher-pill:active { transform: translateY(1px); }
.view-switcher-pill[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.28);
  border-color: rgba(255, 255, 255, 0.5);
}
.view-switcher-pill[aria-expanded="true"] .view-switcher-pill-chevron {
  transform: rotate(180deg);
}
.view-switcher-pill-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.24);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.5px;
}
.view-switcher-pill-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.view-switcher-pill-chevron {
  font-size: 10px;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  opacity: 0.85;
}

/* ── View Switcher dropdown ────────────────────────────────────── */
.view-switcher-dropdown {
  position: absolute;
  top: 100%;
  right: 8px;
  margin-top: 8px;
  min-width: 260px;
  max-width: 320px;
  max-height: 400px;
  overflow-y: auto;
  padding: 6px;
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
  z-index: 900;
  color: var(--text-primary, #1f2937);
  animation: cv-dropdown-in 0.16s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.view-switcher-dropdown[hidden] { display: none; }
@keyframes cv-dropdown-in {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.cv-switcher-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 0;
  background: transparent;
  color: inherit;
  border-radius: 8px;
  cursor: pointer;
  width: 100%;
  text-align: left;
  font-size: 13px;
  font-family: inherit;
  transition: background 0.12s ease;
}
.cv-switcher-item:hover {
  background: rgba(0, 0, 0, 0.04);
}
.cv-switcher-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.06);
  font-weight: 700;
  font-size: 11px;
  flex-shrink: 0;
}
.cv-switcher-item-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cv-switcher-item-active-marker {
  color: var(--accent-blue, #1a73e8);
  font-size: 11px;
  font-weight: 600;
}
.cv-switcher-item[aria-current="true"] .cv-switcher-item-name {
  font-weight: 600;
}
.cv-switcher-separator {
  height: 1px;
  background: var(--border-color, #e5e7eb);
  margin: 6px 4px;
}
.cv-switcher-action {
  color: var(--accent-blue, #1a73e8);
}
.cv-switcher-action-disabled {
  color: var(--text-secondary, #6b7280);
  cursor: not-allowed;
}
.cv-switcher-empty {
  padding: 12px;
  font-size: 12px;
  color: var(--text-secondary, #6b7280);
  text-align: center;
}

/* ── Welcome Modal overlay (CV-T20) ────────────────────────────── */
.cv-welcome-overlay {
  position: fixed;
  inset: 0;
  z-index: 500000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 25, 40, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  animation: cv-welcome-overlay-in 0.32s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  padding: 20px;
  overflow-y: auto;
}
.cv-welcome-overlay[hidden] { display: none; }
@keyframes cv-welcome-overlay-in {
  to { opacity: 1; }
}

.cv-welcome-card {
  width: min(720px, 100%);
  max-width: 720px;
  background: var(--bg-card, #ffffff);
  border-radius: 20px;
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.32);
  padding: 32px 32px 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  transform: scale(0.96);
  opacity: 0;
  animation: cv-welcome-card-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.05s forwards;
  color: var(--text-primary, #1f2937);
}
@keyframes cv-welcome-card-in {
  to { transform: scale(1); opacity: 1; }
}

.cv-welcome-eyebrow {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-secondary, #6b7280);
  margin-bottom: 4px;
}
.cv-welcome-title {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--text-primary, #1f2937);
}
.cv-welcome-subtitle {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-secondary, #4b5563);
}

.cv-welcome-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.cv-welcome-grid > *:nth-child(4) { grid-column-start: 1; }

.cv-preset-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 18px 16px;
  border: 1.5px solid var(--border-color, #e5e7eb);
  border-radius: 14px;
  background: var(--bg-card, #ffffff);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
  min-height: 180px;
  position: relative;
}
.cv-preset-card:hover {
  border-color: var(--accent-blue, #1a73e8);
  background: rgba(26, 115, 232, 0.03);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(26, 115, 232, 0.15);
}
.cv-preset-card:focus-visible {
  outline: 2px solid var(--accent-blue, #1a73e8);
  outline-offset: 3px;
}
.cv-preset-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(26, 115, 232, 0.14), rgba(26, 115, 232, 0.06));
  color: var(--accent-blue, #1a73e8);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.5px;
}
.cv-preset-title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-primary, #1f2937);
}
.cv-preset-desc {
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-secondary, #6b7280);
  margin: 0;
}
.cv-preset-az-picker {
  margin-top: 8px;
  width: 100%;
}
.cv-preset-az-picker select {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--border-color, #d1d5db);
  border-radius: 8px;
  background: var(--bg-page, #ffffff);
  color: var(--text-primary, #1f2937);
  font-family: inherit;
  font-size: 12px;
}
.cv-preset-choose-btn {
  margin-top: auto;
  align-self: stretch;
  padding: 8px 12px;
  background: var(--accent-blue, #1a73e8);
  color: #fff;
  border: 0;
  border-radius: 8px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}
.cv-preset-choose-btn:hover { background: #1863c9; }
.cv-preset-choose-btn:disabled {
  background: rgba(26, 115, 232, 0.4);
  cursor: not-allowed;
}
.cv-preset-choose-btn.cv-preset-choose-loading {
  background: var(--accent-blue, #1a73e8);
  color: #fff;
  cursor: progress;
  position: relative;
}
.cv-preset-choose-btn.cv-preset-choose-loading::after {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-left: 8px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: cv-spin 0.9s linear infinite;
  vertical-align: middle;
}
@keyframes cv-spin { to { transform: rotate(360deg); } }

.cv-welcome-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  border-top: 1px solid var(--border-color, #e5e7eb);
  padding-top: 20px;
}
.cv-welcome-hint {
  font-size: 12px;
  color: var(--text-secondary, #6b7280);
}
.cv-welcome-blank-btn {
  padding: 8px 14px;
  border: 1px solid var(--border-color, #d1d5db);
  border-radius: 8px;
  background: transparent;
  color: var(--text-primary, #1f2937);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.cv-welcome-blank-btn:hover {
  border-color: var(--accent-blue, #1a73e8);
  background: rgba(26, 115, 232, 0.04);
}

/* ── Shade Panel (CV-T21) ──────────────────────────────────────── */
.cv-shade-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 25, 40, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 400000;
  opacity: 0;
  animation: cv-fade-in 0.28s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.cv-shade-backdrop[hidden] { display: none; }
@keyframes cv-fade-in { to { opacity: 1; } }

/* 2026-07-03 redesign — was right-slide sidebar, now centered modal
   sharing the visual system of the Welcome Modal (per user feedback:
   "quiero que esta vista principal diseñada se aplique al sidebar,
   el usuario vera una ventana emergente con ese shade detras"). */
/* Modal wrapper — .cv-shade is a full-viewport flex-center container.
   Its DIRECT children (header, body, footer, delete-confirm) are stacked
   vertically and painted as ONE cohesive card via a shared background.
   Zero JS/HTML changes needed. */
.cv-shade {
  position: fixed;
  inset: 0;
  z-index: 400001;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: transparent;
  box-shadow: none;
  animation: cv-welcome-overlay-in 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  pointer-events: none;   /* the card children get pointer-events auto below */
}
.cv-shade[hidden] { display: none; }

/* Every direct child paints on the same white pill; borders between
   sections give visual separation but there's a single outer shadow
   applied to header (top) and footer (bottom) via ::before/::after. */
.cv-shade > .cv-shade-header,
.cv-shade > .cv-shade-body,
.cv-shade > .cv-shade-footer,
.cv-shade > .cv-shade-delete-confirm,
.cv-shade > .cv-shade-banner {
  background: var(--bg-card, #ffffff);
  /* 2026-07-03 v2 — was min(560px…), now nearly 2× wider so filters fit in
     a 2-col grid and the user rarely (never on desktop) has to scroll. */
  width: min(1080px, calc(100vw - 48px));
  color: var(--text-primary, #1f2937);
  pointer-events: auto;
  animation: cv-welcome-card-in 0.34s cubic-bezier(0.16, 1, 0.3, 1) 0.04s both;
  border-left: 1px solid var(--border-color, #e5e7eb);
  border-right: 1px solid var(--border-color, #e5e7eb);
}
.cv-shade > .cv-shade-header {
  border-radius: 20px 20px 0 0;
  border-top: 1px solid var(--border-color, #e5e7eb);
  padding: 22px 28px 18px;
  box-shadow: 0 -12px 24px rgba(0, 0, 0, 0.06);
}
.cv-shade > .cv-shade-body {
  /* Taller than before (was 60vh) so all sections fit without scroll on
     laptop 900px+ viewports; the body still scrolls if the viewport is
     smaller than the content (mobile / short laptops). */
  max-height: 78vh;
  overflow-y: auto;
  padding: 22px 28px 24px;
}
.cv-shade > .cv-shade-footer {
  padding: 16px 24px;
  border-radius: 0 0 20px 20px;
  border-bottom: 1px solid var(--border-color, #e5e7eb);
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.24);
}
.cv-shade > .cv-shade-delete-confirm {
  padding: 14px 24px;
  border-radius: 0 0 20px 20px;
  border-bottom: 1px solid var(--border-color, #e5e7eb);
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.24);
}
/* When the delete-confirm strip appears, the footer above it loses its
   bottom rounding + shadow (delete-confirm becomes the bottom). */
.cv-shade > .cv-shade-footer:has(+ .cv-shade-delete-confirm:not([hidden])) {
  border-radius: 0;
  box-shadow: none;
  border-bottom: none;
}
/* Banner (validation error at the top of body) — no rounding/border */
.cv-shade > .cv-shade-banner {
  padding: 12px 24px;
  border-radius: 0;
  border-top: 0;
}

.cv-shade-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border-color, #e5e7eb);
  gap: 12px;
}
.cv-shade-header-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cv-shade-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(26, 115, 232, 0.16), rgba(26, 115, 232, 0.08));
  color: var(--accent-blue, #1a73e8);
  font-weight: 700;
  font-size: 15px;
  flex-shrink: 0;
}
.cv-shade-title { font-size: 15px; font-weight: 700; line-height: 1.2; }
.cv-shade-subtitle {
  font-size: 11px;
  color: var(--text-secondary, #6b7280);
  margin-top: 2px;
}
.cv-shade-close {
  border: 0;
  background: transparent;
  color: var(--text-secondary, #6b7280);
  font-size: 20px;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.cv-shade-close:hover {
  background: rgba(0, 0, 0, 0.06);
  color: var(--text-primary, #1f2937);
}

.cv-shade-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.cv-shade-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cv-shade-section-title {
  margin: 0;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-secondary, #6b7280);
  font-weight: 700;
}
.cv-shade-section-desc {
  margin: -4px 0 0;
  font-size: 12px;
  color: var(--text-secondary, #6b7280);
  line-height: 1.4;
}
.cv-shade-section-desc-small { font-size: 11px; color: var(--text-secondary, #6b7280); }

.cv-shade-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cv-shade-field-inline {
  flex-direction: row;
  align-items: center;
  gap: 12px;
  position: relative;
}
.cv-shade-field-checkbox {
  flex-direction: row;
  align-items: center;
  gap: 10px;
}
.cv-shade-field-checkbox input { margin: 0; }
.cv-shade-field-checkbox .cv-shade-field-label { margin: 0; }
.cv-shade-field-checkbox .cv-shade-field-hint { margin-left: auto; }
.cv-shade-field-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary, #1f2937);
}
.cv-shade-field-hint {
  font-size: 11px;
  color: var(--text-secondary, #6b7280);
  line-height: 1.3;
}
.cv-shade-input {
  padding: 8px 10px;
  border: 1px solid var(--border-color, #d1d5db);
  border-radius: 8px;
  background: var(--bg-page, #ffffff);
  color: var(--text-primary, #1f2937);
  font-family: inherit;
  font-size: 13px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.cv-shade-input:focus {
  outline: none;
  border-color: var(--accent-blue, #1a73e8);
  box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.15);
}

.cv-shade-icon-picker-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid var(--border-color, #d1d5db);
  border-radius: 8px;
  background: var(--bg-page, #ffffff);
  color: var(--text-primary, #1f2937);
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  transition: border-color 0.15s ease;
}
.cv-shade-icon-picker-btn:hover { border-color: var(--accent-blue, #1a73e8); }
.cv-shade-icon-picker {
  position: absolute;
  top: calc(100% + 4px);
  left: 60px;
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.14);
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
  z-index: 400002;
  animation: cv-dropdown-in 0.16s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.cv-shade-icon-picker[hidden] { display: none; }
.cv-shade-icon-option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 0;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  color: var(--text-primary, #1f2937);
  font-size: 15px;
  font-weight: 700;
  transition: background 0.12s ease, transform 0.1s ease;
}
.cv-shade-icon-option:hover {
  background: rgba(26, 115, 232, 0.08);
  transform: scale(1.06);
}
.cv-shade-icon-option[aria-pressed="true"] {
  background: rgba(26, 115, 232, 0.18);
  color: var(--accent-blue, #1a73e8);
}

.cv-shade-radios, .cv-shade-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
}
.cv-shade-radios-small { gap: 4px 10px; font-size: 11px; }
.cv-shade-radios label, .cv-shade-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-primary, #1f2937);
  cursor: pointer;
}
.cv-shade-chip {
  padding: 4px 10px;
  border: 1px solid var(--border-color, #d1d5db);
  border-radius: 999px;
  background: var(--bg-page, #ffffff);
  transition: background 0.12s ease, border-color 0.12s ease;
  user-select: none;
}
.cv-shade-chip input { margin: 0; }
.cv-shade-chip:has(input:checked) {
  background: rgba(26, 115, 232, 0.12);
  border-color: var(--accent-blue, #1a73e8);
  color: var(--accent-blue, #1a73e8);
  font-weight: 600;
}
.cv-shade-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-primary, #1f2937);
}
.cv-shade-toggle-small { font-size: 11px; color: var(--text-secondary, #6b7280); }
.cv-shade-field-inline-toggles {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.cv-shade-tdd-config {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.cv-shade-inline-input {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-secondary, #6b7280);
}
.cv-shade-inline-input input {
  width: 70px;
  padding: 4px 6px;
  border: 1px solid var(--border-color, #d1d5db);
  border-radius: 6px;
  background: var(--bg-page, #ffffff);
  color: var(--text-primary, #1f2937);
  font-family: inherit;
  font-size: 12px;
}
.cv-shade-inline-input input[type="date"] { width: 130px; }

/* ═══════════════════════════════════════════════════════════════
   Shade Panel — WIDE LAYOUT (2026-07-03 v3)
   Feedback: "que sea ancho, grande, bonito, para no tener que
   hacer scroll tampoco". At ≥900px viewports the shade becomes a
   2-column form; every section is a self-contained "card" with a
   thin left accent + soft background so the user can orient
   without reading — glance the acronym, jump to the group.
   ═══════════════════════════════════════════════════════════════ */

/* Section becomes a visually delimited card. Padding + border + a
   thin accent stripe on the left keep it distinct from the plain
   white body. */
.cv-shade > .cv-shade-body .cv-shade-section {
  position: relative;
  padding: 16px 18px 16px 22px;
  background: var(--bg-page, #f9fafb);
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 12px;
  gap: 14px;
}
.cv-shade > .cv-shade-body .cv-shade-section::before {
  content: '';
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: 3px;
  background: var(--accent-blue, #1a73e8);
  opacity: 0.55;
}
/* Section title sits on top of the card, with a bit of extra room */
.cv-shade > .cv-shade-body .cv-shade-section > .cv-shade-section-title {
  font-size: 13px;
  color: var(--accent-blue, #1a73e8);
  letter-spacing: 1.6px;
}

/* Multi-column body — dense form fits without scroll on laptop 900+ */
@media (min-width: 900px) {
  /* Metadata (Name / Icon / Default) → 3 columns */
  .cv-shade > .cv-shade-body .cv-shade-section-meta {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.5fr);
    grid-template-rows: auto;
    align-items: start;
    column-gap: 20px;
    row-gap: 10px;
  }
  /* Every direct child of the metadata section spans one column */
  .cv-shade > .cv-shade-body .cv-shade-section-meta > .cv-shade-field {
    margin: 0;
  }

  /* Filters section → 2-column grid.
     Fields flow left-to-right then top-to-bottom. TDD (last field
     with radios + toggles + config inputs) needs the full width. */
  .cv-shade > .cv-shade-body
  .cv-shade-section[aria-labelledby="cv-shade-filters-h"] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
    row-gap: 14px;
  }
  .cv-shade > .cv-shade-body
  .cv-shade-section[aria-labelledby="cv-shade-filters-h"]
    > .cv-shade-section-title {
    grid-column: 1 / -1;
  }
  /* "Target delivery range" is the widest field (radios + 3 date
     inputs + 2 toggles) — give it the whole row */
  .cv-shade > .cv-shade-body
  .cv-shade-section[aria-labelledby="cv-shade-filters-h"]
    > .cv-shade-field:has(.cv-shade-tdd-config) {
    grid-column: 1 / -1;
  }

  /* Sections cards (visibility toggles) → 3-column */
  .cv-shade > .cv-shade-body
  .cv-shade-section[aria-labelledby="cv-shade-sections-h"]
    .cv-shade-section-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }
}

/* At ≥1200px we can afford 3 columns in filters — even less scroll */
@media (min-width: 1200px) {
  .cv-shade > .cv-shade-body
  .cv-shade-section[aria-labelledby="cv-shade-filters-h"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Below 900px (tablets / narrow laptops) keep the original stacked
   layout — nothing to do, the base rules handle it. */

/* Dark mode: section card uses a slightly lighter surface than the
   solid body so borders stay visible */
body.dark-mode .cv-shade > .cv-shade-body .cv-shade-section {
  background: #111827;
  border-color: #374151;
}
body.dark-mode .cv-shade > .cv-shade-body .cv-shade-section::before {
  background: #93c5fd;
}
body.dark-mode .cv-shade > .cv-shade-body .cv-shade-section > .cv-shade-section-title {
  color: #93c5fd;
}

/* ── Multi-select dropdown (CV-T35) ────────────────────────────── */
.cv-multi-select {
  position: relative;
  display: block;
}
.cv-multi-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  min-height: 34px;
  border: 1px solid var(--border-color, #d1d5db);
  border-radius: 8px;
  background: var(--bg-page, #ffffff);
  color: var(--text-primary, #1f2937);
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  width: 100%;
  text-align: left;
  transition: border-color 0.15s ease;
}
.cv-multi-select-trigger:hover { border-color: var(--accent-blue, #1a73e8); }
.cv-multi-select-trigger[aria-expanded="true"] {
  border-color: var(--accent-blue, #1a73e8);
  box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.15);
}
.cv-multi-select-trigger-chevron {
  font-size: 10px;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  opacity: 0.7;
}
.cv-multi-select-trigger[aria-expanded="true"] .cv-multi-select-trigger-chevron {
  transform: rotate(180deg);
}
.cv-multi-select-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 10px;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.14);
  z-index: 400003;
  max-height: 320px;
  display: flex;
  flex-direction: column;
  animation: cv-dropdown-in 0.16s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.cv-multi-select-panel[hidden] { display: none; }
.cv-multi-select-search {
  padding: 8px 10px;
  border: 0;
  border-bottom: 1px solid var(--border-color, #e5e7eb);
  background: transparent;
  color: var(--text-primary, #1f2937);
  font-family: inherit;
  font-size: 12px;
  outline: none;
}
.cv-multi-select-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
  min-height: 40px;
}
.cv-multi-select-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 12px;
  color: var(--text-primary, #1f2937);
  user-select: none;
  transition: background 0.1s ease;
}
.cv-multi-select-option:hover { background: rgba(26, 115, 232, 0.06); }
.cv-multi-select-option input { margin: 0; }
.cv-multi-select-group-header {
  padding: 6px 12px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-secondary, #6b7280);
  background: rgba(0, 0, 0, 0.02);
  cursor: pointer;
}
.cv-multi-select-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-top: 1px solid var(--border-color, #e5e7eb);
  gap: 8px;
}
.cv-multi-select-footer-btn {
  border: 0;
  background: transparent;
  color: var(--accent-blue, #1a73e8);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
}
.cv-multi-select-footer-btn:hover { background: rgba(26, 115, 232, 0.08); }
.cv-multi-select-done {
  background: var(--accent-blue, #1a73e8);
  color: #fff;
  padding: 4px 12px;
  border-radius: 6px;
}
.cv-multi-select-done:hover { background: #1863c9; }
.cv-multi-select-empty {
  padding: 12px;
  text-align: center;
  font-size: 11px;
  color: var(--text-secondary, #6b7280);
}

/* ── Sections grid (CV-T21) ────────────────────────────────────── */
.cv-shade-section-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.cv-shade-section-card {
  padding: 12px;
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.cv-shade-section-card:has(input[data-cv-section-visible]:not(:checked)) {
  border-color: var(--border-color, #e5e7eb);
  background: rgba(0, 0, 0, 0.02);
  opacity: 0.65;
}
.cv-shade-section-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary, #1f2937);
  cursor: pointer;
}

/* ── Shade banner (validation errors) ──────────────────────────── */
.cv-shade-banner {
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.4;
}
.cv-shade-banner[hidden] { display: none; }
.cv-shade-banner-error {
  background: rgba(220, 38, 38, 0.08);
  color: #991b1b;
  border: 1px solid rgba(220, 38, 38, 0.24);
}
.cv-shade-banner-warning {
  background: rgba(234, 179, 8, 0.1);
  color: #854d0e;
  border: 1px solid rgba(234, 179, 8, 0.28);
}

/* ── Shade footer ──────────────────────────────────────────────── */
.cv-shade-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--border-color, #e5e7eb);
  background: var(--bg-card, #ffffff);
}
.cv-shade-footer-right { display: flex; gap: 8px; }
.cv-shade-btn {
  padding: 8px 14px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
  border: 1px solid transparent;
}
.cv-shade-btn:active { transform: translateY(1px); }
.cv-shade-btn-primary {
  background: var(--accent-blue, #1a73e8);
  color: #fff;
  border-color: var(--accent-blue, #1a73e8);
}
.cv-shade-btn-primary:hover { background: #1863c9; border-color: #1863c9; }
.cv-shade-btn-primary:disabled {
  background: rgba(26, 115, 232, 0.4);
  border-color: rgba(26, 115, 232, 0.4);
  cursor: progress;
}
.cv-shade-btn-ghost {
  background: transparent;
  color: var(--text-primary, #1f2937);
  border-color: var(--border-color, #d1d5db);
}
.cv-shade-btn-ghost:hover {
  background: rgba(0, 0, 0, 0.04);
  border-color: var(--accent-blue, #1a73e8);
}
.cv-shade-btn-danger {
  background: transparent;
  color: #b91c1c;
  border-color: rgba(185, 28, 28, 0.4);
}
.cv-shade-btn-danger:hover { background: rgba(185, 28, 28, 0.08); border-color: #b91c1c; }

.cv-shade-delete-confirm {
  padding: 12px 20px;
  border-top: 1px solid var(--border-color, #e5e7eb);
  background: rgba(220, 38, 38, 0.05);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.cv-shade-delete-confirm[hidden] { display: none; }
.cv-shade-delete-msg {
  font-size: 12px;
  color: #7f1d1d;
  font-weight: 500;
}
.cv-shade-delete-actions { display: flex; gap: 8px; }

/* ── Toast rail (transient notifications) ──────────────────────── */
.cv-toast-rail {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 500001;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
  max-width: 380px;
  pointer-events: none;
}
.cv-toast {
  min-width: 220px;
  max-width: 100%;
  background: var(--bg-card, #ffffff);
  color: var(--text-primary, #1f2937);
  padding: 10px 14px;
  border-radius: 10px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.15);
  border: 1px solid var(--border-color, #e5e7eb);
  border-left-width: 3px;
  font-size: 13px;
  line-height: 1.35;
  pointer-events: auto;
  animation: cv-toast-in 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
@keyframes cv-toast-in {
  from { transform: translateY(6px) scale(0.96); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}
.cv-toast.cv-toast-out {
  animation: cv-toast-out 0.28s cubic-bezier(0.4, 0, 1, 1) both;
}
@keyframes cv-toast-out {
  from { transform: translateY(0); opacity: 1; }
  to   { transform: translateY(6px); opacity: 0; }
}
.cv-toast-success { border-left-color: #16a34a; }
.cv-toast-info    { border-left-color: var(--accent-blue, #1a73e8); }
.cv-toast-warning { border-left-color: #eab308; }
.cv-toast-error   { border-left-color: #dc2626; }
.cv-toast-message { flex: 1; }
.cv-toast-close {
  background: transparent;
  border: 0;
  color: var(--text-secondary, #6b7280);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 4px;
  margin: -2px -4px 0 0;
  border-radius: 4px;
}
.cv-toast-close:hover { background: rgba(0, 0, 0, 0.06); color: var(--text-primary, #1f2937); }

/* ── prefers-reduced-motion ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .cv-welcome-overlay,
  .cv-welcome-card,
  .cv-shade-backdrop,
  .cv-shade,
  .view-switcher-dropdown,
  .cv-toast,
  .cv-multi-select-panel,
  .cv-shade-icon-picker {
    animation-duration: 0.1s !important;
  }
}

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .cv-welcome-grid { grid-template-columns: repeat(2, 1fr); }
  .cv-welcome-grid > *:nth-child(4) { grid-column-start: auto; }
}
  @media (max-width: 600px) {
  .cv-welcome-grid { grid-template-columns: 1fr; }
  .cv-welcome-card { padding: 24px 20px 20px; }
  .cv-welcome-title { font-size: 22px; }
  .view-switcher-pill { min-width: 44px; max-width: 44px; padding: 6px; }
  .view-switcher-pill-label { display: none; }
  /* Mobile: modal takes the full viewport width but keeps rounded top. */
  .cv-shade { padding: 0; align-items: stretch; }
  .cv-shade > .cv-shade-header,
  .cv-shade > .cv-shade-body,
  .cv-shade > .cv-shade-footer,
  .cv-shade > .cv-shade-delete-confirm { width: 100vw; border-radius: 0; }
  .cv-shade > .cv-shade-body { max-height: none; }
}

/* ── Dark mode overrides ───────────────────────────────────────── */
body.dark-mode .view-switcher-dropdown,
body.dark-mode .cv-welcome-card,
body.dark-mode .cv-shade,
body.dark-mode .cv-shade-footer,
body.dark-mode .cv-multi-select-panel,
body.dark-mode .cv-shade-icon-picker,
body.dark-mode .cv-toast {
  background: #1f2937;
  color: #f3f4f6;
  border-color: #374151;
}
body.dark-mode .cv-switcher-item { color: #f3f4f6; }
body.dark-mode .cv-switcher-item:hover { background: rgba(255, 255, 255, 0.06); }
body.dark-mode .cv-switcher-separator { background: #374151; }
body.dark-mode .cv-switcher-action { color: #93c5fd; }
body.dark-mode .cv-switcher-empty,
body.dark-mode .cv-welcome-eyebrow,
body.dark-mode .cv-welcome-subtitle,
body.dark-mode .cv-welcome-hint,
body.dark-mode .cv-shade-subtitle,
body.dark-mode .cv-shade-section-title,
body.dark-mode .cv-shade-section-desc,
body.dark-mode .cv-shade-section-desc-small,
body.dark-mode .cv-shade-field-hint,
body.dark-mode .cv-multi-select-empty,
body.dark-mode .cv-toast-close,
body.dark-mode .cv-multi-select-group-header {
  color: #9ca3af;
}
body.dark-mode .cv-welcome-title,
body.dark-mode .cv-shade-title,
body.dark-mode .cv-shade-field-label,
body.dark-mode .cv-multi-select-option,
body.dark-mode .cv-multi-select-trigger,
body.dark-mode .cv-shade-input,
body.dark-mode .cv-shade-icon-picker-btn,
body.dark-mode .cv-shade-icon-option,
body.dark-mode .cv-shade-inline-input input,
body.dark-mode .cv-shade-chip,
body.dark-mode .cv-shade-toggle,
body.dark-mode .cv-shade-radios label,
body.dark-mode .cv-shade-btn-ghost,
body.dark-mode .cv-shade-section-toggle,
body.dark-mode .cv-welcome-blank-btn,
body.dark-mode .cv-preset-title {
  color: #f3f4f6;
}
body.dark-mode .cv-preset-desc { color: #d1d5db; }
body.dark-mode .cv-preset-card {
  background: #1f2937;
  border-color: #374151;
}
body.dark-mode .cv-preset-card:hover {
  background: rgba(147, 197, 253, 0.06);
  border-color: #93c5fd;
  box-shadow: 0 4px 16px rgba(147, 197, 253, 0.14);
}
body.dark-mode .cv-preset-icon {
  background: linear-gradient(135deg, rgba(147, 197, 253, 0.24), rgba(147, 197, 253, 0.1));
  color: #93c5fd;
}
body.dark-mode .cv-preset-choose-btn { background: #3b82f6; border-color: #3b82f6; }
body.dark-mode .cv-preset-choose-btn:hover { background: #2563eb; }
body.dark-mode .cv-shade-input,
body.dark-mode .cv-shade-icon-picker-btn,
body.dark-mode .cv-multi-select-trigger,
body.dark-mode .cv-preset-az-picker select,
body.dark-mode .cv-shade-inline-input input {
  background: #111827;
  border-color: #374151;
}
body.dark-mode .cv-shade-chip {
  background: #111827;
  border-color: #374151;
}
body.dark-mode .cv-shade-chip:has(input:checked) {
  background: rgba(147, 197, 253, 0.16);
  border-color: #93c5fd;
  color: #93c5fd;
}
body.dark-mode .cv-multi-select-search {
  background: transparent;
  border-bottom-color: #374151;
  color: #f3f4f6;
}
body.dark-mode .cv-shade-close:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #f3f4f6;
}
body.dark-mode .cv-multi-select-option:hover { background: rgba(147, 197, 253, 0.1); }
body.dark-mode .cv-shade-btn-ghost {
  border-color: #374151;
}
body.dark-mode .cv-shade-btn-ghost:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: #93c5fd;
}
body.dark-mode .cv-shade-btn-primary { background: #3b82f6; border-color: #3b82f6; }
body.dark-mode .cv-shade-btn-primary:hover { background: #2563eb; border-color: #2563eb; }
body.dark-mode .cv-shade-btn-danger {
  color: #fca5a5;
  border-color: rgba(252, 165, 165, 0.36);
}
body.dark-mode .cv-shade-btn-danger:hover {
  background: rgba(252, 165, 165, 0.14);
  border-color: #fca5a5;
}
body.dark-mode .cv-shade-delete-confirm {
  background: rgba(252, 165, 165, 0.06);
  border-top-color: #374151;
}
body.dark-mode .cv-shade-delete-msg { color: #fca5a5; }
body.dark-mode .cv-shade-banner-error {
  background: rgba(252, 165, 165, 0.14);
  color: #fca5a5;
  border-color: rgba(252, 165, 165, 0.36);
}
body.dark-mode .cv-shade-banner-warning {
  background: rgba(253, 224, 71, 0.14);
  color: #fde68a;
  border-color: rgba(253, 224, 71, 0.28);
}
body.dark-mode .cv-shade-section-card {
  background: #1f2937;
  border-color: #374151;
}
body.dark-mode .cv-multi-select-group-header {
  background: rgba(255, 255, 255, 0.03);
}

/* CUSTOM VIEWS — Inline Section Editors (CV-T60) — REMOVED 2026-07-03 v2
   User feedback: "quita las ruedas de ⚙ las secciones, no las necesitamos".
   All .cv-section-cog / .cv-section-pop rules deleted; the shade panel is
   the single edit surface for view/section config. */

/* ═══════════════════════════════════════════════════════════════════════
   NO DELIVERIES LABEL (2026-07-08 v3, ZAZ only)
   Applied to .cal-day.cal-no-deliveries cells in the month calendar.
   Business rule: a working day D is "No Deliveries" when it falls INSIDE
   the visibility window (HOY + next 3 working days) and has no racks
   with TDD assigned. Semántica: the team already has visibility into D
   and confirms — deterministically, without storage — that nothing is
   coming. When "hoy" advances past D, D drops out of the window and
   reverts to a plain white cell.
   Visual design: white ↔ #eeeeee diagonal stripes on a light-grey base,
   with a slate-grey pill centred in the cell (via .cal-locked-label /
   .cal-locked-text — those class names are LEGACY from the retired
   "Locked Period" feature but kept because they encode the shared
   pill-centring layout; renaming them would churn multiple render
   paths for zero visual gain).
   2026-07-08 v3: `.cal-locked-period` was removed completely along with
   the rest of the "Locked Period" logic in dashboard.js. Only
   `.cal-no-deliveries` remains as a rayada cell state.
   ═══════════════════════════════════════════════════════════════════════ */
.cal-no-deliveries {
  /* Diagonal white ↔ grey stripes on a light-grey base (#f8f8f8) — same
     tone family as .cal-day.cal-weekend so the two shades feel like
     siblings. 8px bands read as "striped" at a glance without shouting. */
  background-image: repeating-linear-gradient(
    -45deg,
    #ffffff 0px,
    #ffffff 8px,
    #eeeeee 8px,
    #eeeeee 16px
  ) !important;
  background-color: #f8f8f8 !important;
  border-color: #d5dbdb !important;
}
.cal-no-deliveries .cal-day-num {
  color: #6b7280;   /* subtle grey — day number still readable */
}
/* Shared pill layout — centred both vertically and horizontally inside
   .cal-day (which is display:flex/column with min-height:110px). The
   flex:1 + align/justify centre puts the pill dead-centre regardless of
   cell height. Class names begin with `cal-locked-` for legacy reasons
   (see comment block above). */
.cal-locked-label {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 8px 4px;
  pointer-events: none;   /* clicks pass through to .cal-day */
}
.cal-locked-text {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #4b5563;                                     /* slate grey */
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid #d5dbdb;                          /* same as .cal-day border */
  border-radius: 999px;
  padding: 4px 12px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  white-space: nowrap;
}
/* Dark-mode overrides */
body.dark-mode .cal-no-deliveries {
  background-image: repeating-linear-gradient(
    -45deg,
    #12151f 0px,
    #12151f 8px,
    #1a1d27 8px,
    #1a1d27 16px
  ) !important;
  background-color: #0e1018 !important;
  border-color: #2d323f !important;
}
body.dark-mode .cal-no-deliveries .cal-day-num {
  color: #9ca3af;
}
body.dark-mode .cal-locked-text {
  color: #e5e7eb;
  background: rgba(31, 41, 55, 0.9);
  border-color: #4b5563;
}




/* CUSTOM VIEWS — Inline Section Editors (CV-T60) — REMOVED 2026-07-03 v2
   User feedback: "quita las ruedas de ⚙ las secciones, no las necesitamos".
   All .cv-section-cog / .cv-section-pop rules deleted; the shade panel is
   the single edit surface for view/section config. */

/* ═══════════════════════════════════════════════════════════════════
   CLOUDSCAPE-STYLE DATE RANGE PICKER  (2026-07-07)
   Replaces the single-date <input type="date"> for TARGET DELIVERY DATE.
   Trigger + popover mirror the visual language of Cloudscape's
   DateRangePicker (AWS Console). Preset buttons apply on single click.
   ═══════════════════════════════════════════════════════════════════ */
.filter-group-daterange { min-width: 220px; position: relative; }

.cs-daterange { position: relative; display: inline-block; width: 100%; }

.cs-daterange-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 220px;
  width: 100%;
  padding: 8px 12px;
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--border, #d5dbdb);
  border-radius: 8px;
  font-size: 14px;
  color: var(--text-primary, #16191f);
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.cs-daterange-trigger:hover {
  border-color: #ff9900;
  box-shadow: 0 2px 6px rgba(255,153,0,0.15);
}
.cs-daterange-trigger[aria-expanded="true"] {
  border-color: #ff9900;
  box-shadow: 0 0 0 3px rgba(255,153,0,0.18);
}
.cs-daterange-trigger--active {
  background: #fff8e1;
  border-color: #ff9900;
  color: #b26a00;
  font-weight: 600;
}
.cs-daterange-icon { font-size: 16px; flex-shrink: 0; }
.cs-daterange-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-daterange-chevron { color: var(--text-muted, #687078); font-size: 10px; flex-shrink: 0; }

/* ── Popover panel ────────────────────────────────────────────────── */
.cs-daterange-popover {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 500;
  min-width: 380px;
  max-width: 480px;
  background: #ffffff;
  border: 1px solid #d5dbdb;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.08);
  padding: 16px;
  animation: cs-daterange-fadein 0.15s ease-out;
}
@keyframes cs-daterange-fadein {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.cs-daterange-mode {
  display: flex;
  gap: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid #eaeded;
  margin-bottom: 12px;
  font-size: 13px;
  color: #16191f;
}
.cs-daterange-mode label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
}
.cs-daterange-mode input[type="radio"] { accent-color: #ff9900; margin: 0; }

.cs-daterange-section { padding-bottom: 12px; }

.cs-daterange-presets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.cs-daterange-preset {
  padding: 8px 10px;
  border: 1px solid #d5dbdb;
  border-radius: 6px;
  background: #ffffff;
  font-size: 13px;
  font-weight: 500;
  color: #16191f;
  cursor: pointer;
  transition: all 0.12s ease;
  text-align: left;
}
.cs-daterange-preset:hover {
  background: #fff8e1;
  border-color: #ff9900;
  color: #b26a00;
}
.cs-daterange-preset:active {
  background: #ffedb3;
  transform: translateY(1px);
}

.cs-daterange-absolute {
  display: flex;
  gap: 12px;
  padding: 8px 0;
}
.cs-daterange-field {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cs-daterange-field label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #687078;
}
.cs-daterange-field input[type="date"] {
  padding: 6px 8px;
  border: 1px solid #d5dbdb;
  border-radius: 6px;
  font-size: 13px;
  color: #16191f;
}
.cs-daterange-field input[type="date"]:focus {
  outline: none;
  border-color: #ff9900;
  box-shadow: 0 0 0 2px rgba(255,153,0,0.18);
}

.cs-daterange-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid #eaeded;
}
.cs-daterange-footer .btn.btn-primary {
  background: #ff9900;
  border-color: #ff9900;
  color: #ffffff;
}
.cs-daterange-footer .btn.btn-primary:hover { background: #e88900; border-color: #e88900; }

/* Dark mode — respect the existing theme */
body.dark-mode .cs-daterange-trigger {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.15);
  color: #e8eaf6;
}
body.dark-mode .cs-daterange-trigger:hover,
body.dark-mode .cs-daterange-trigger[aria-expanded="true"] {
  border-color: #ff9900;
}
body.dark-mode .cs-daterange-trigger--active {
  background: rgba(255,153,0,0.15);
  color: #ffca28;
}
body.dark-mode .cs-daterange-popover {
  background: #1f2733;
  border-color: rgba(255,255,255,0.15);
  color: #e8eaf6;
}
body.dark-mode .cs-daterange-mode,
body.dark-mode .cs-daterange-mode label { color: #e8eaf6; }
body.dark-mode .cs-daterange-mode { border-bottom-color: rgba(255,255,255,0.1); }
body.dark-mode .cs-daterange-preset {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.15);
  color: #e8eaf6;
}
body.dark-mode .cs-daterange-preset:hover {
  background: rgba(255,153,0,0.15);
  color: #ffca28;
}
body.dark-mode .cs-daterange-field input[type="date"] {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.15);
  color: #e8eaf6;
  color-scheme: dark;
}
body.dark-mode .cs-daterange-footer { border-top-color: rgba(255,255,255,0.1); }


/* ═══════════════════════════════════════════════════════════════════
   CLOUDSCAPE-STYLE MULTI-SELECT (2026-07-07)
   Inherits .cs-daterange-trigger + .cs-daterange-popover base styles.
   Adds list + option + search + footer styling for the DC / AZ /
   Shipment Status / Rack Type multi-select filters.
   ═══════════════════════════════════════════════════════════════════ */
.filter-group-multi { min-width: 220px; position: relative; }

.cs-multi { position: relative; display: inline-block; width: 100%; }

.cs-multi-popover {
  min-width: 260px;
  max-width: 360px;
  max-height: 480px;
  display: flex;
  flex-direction: column;
  padding: 12px;
}

.cs-multi-search-row {
  padding-bottom: 8px;
  border-bottom: 1px solid #eaeded;
  margin-bottom: 8px;
  flex-shrink: 0;
}
.cs-multi-search {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid #d5dbdb;
  border-radius: 6px;
  font-size: 13px;
  outline: none;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.cs-multi-search:focus {
  border-color: #ff9900;
  box-shadow: 0 0 0 2px rgba(255,153,0,0.18);
}

.cs-multi-list {
  flex: 1;
  overflow-y: auto;
  min-height: 100px;
  max-height: 320px;
  margin-bottom: 8px;
}
.cs-multi-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  color: #16191f;
  user-select: none;
  transition: background 0.1s ease;
}
.cs-multi-option:hover {
  background: #fff8e1;
}
.cs-multi-option input[type="checkbox"] {
  accent-color: #ff9900;
  margin: 0;
  cursor: pointer;
}
.cs-multi-empty {
  padding: 20px;
  text-align: center;
  color: #687078;
  font-size: 12px;
  font-style: italic;
}
.cs-multi-footer {
  padding-top: 8px;
  border-top: 1px solid #eaeded;
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  flex-shrink: 0;
}
.cs-multi-footer .btn.btn-primary {
  background: #ff9900;
  border-color: #ff9900;
  color: #ffffff;
}
.cs-multi-footer .btn.btn-primary:hover {
  background: #e88900;
  border-color: #e88900;
}

/* Dark mode */
body.dark-mode .cs-multi-popover {
  background: #1f2733;
  border-color: rgba(255,255,255,0.15);
}
body.dark-mode .cs-multi-search-row { border-bottom-color: rgba(255,255,255,0.1); }
body.dark-mode .cs-multi-search {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.15);
  color: #e8eaf6;
}
body.dark-mode .cs-multi-option { color: #e8eaf6; }
body.dark-mode .cs-multi-option:hover { background: rgba(255,153,0,0.15); }
body.dark-mode .cs-multi-empty { color: rgba(255,255,255,0.5); }
body.dark-mode .cs-multi-footer { border-top-color: rgba(255,255,255,0.1); }



/* 2026-07-07 fix — [hidden] override for Cloudscape popovers.
   Bug: .cs-multi-popover { display: flex; } overrode the browser's
   default `display: none` on `[hidden]` so popovers rendered open.
   The rules below force them closed until the JS strips `hidden`. */
.cs-multi-popover[hidden],
.cs-daterange-popover[hidden] {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════
   2026-07-07 v3 — Filter row visual unification.
   The DC / AZ / Status / Rack Type / Target Delivery Date fields all
   render as `.cs-daterange-trigger` (rounded 8px, 1px border,
   subtle shadow, orange hover/focus ring). The Search Asset ID input
   and the Multi-Asset / Clear buttons were still using the plain
   `.filter-group input` + `.btn.btn-ghost` styles → visual mismatch
   pointed out by user feedback. Reskin below unifies all three.
   ═══════════════════════════════════════════════════════════════════ */

/* Search Asset ID input — match .cs-daterange-trigger */
.filter-group-search input[type="text"] {
  padding: 8px 12px !important;
  background: var(--bg-card, #ffffff) !important;
  border: 1px solid var(--border, #d5dbdb) !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  color: var(--text-primary, #16191f) !important;
  transition: all 0.15s ease !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
  min-width: 220px;
  width: 100%;
  cursor: text;
}
.filter-group-search input[type="text"]:hover {
  border-color: #ff9900 !important;
  box-shadow: 0 2px 6px rgba(255,153,0,0.15) !important;
}
.filter-group-search input[type="text"]:focus {
  outline: none !important;
  border-color: #ff9900 !important;
  box-shadow: 0 0 0 3px rgba(255,153,0,0.18) !important;
}
body.dark-mode .filter-group-search input[type="text"] {
  background: rgba(255,255,255,0.05) !important;
  border-color: rgba(255,255,255,0.15) !important;
  color: #e8eaf6 !important;
}
body.dark-mode .filter-group-search input[type="text"]:hover,
body.dark-mode .filter-group-search input[type="text"]:focus {
  border-color: #ff9900 !important;
}

/* Multi-Asset + Clear buttons inside .filter-group-btn — match trigger */
.filter-group-btn { gap: 8px; }
.filter-group-btn .btn {
  padding: 8px 12px !important;
  background: var(--bg-card, #ffffff) !important;
  border: 1px solid var(--border, #d5dbdb) !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  color: var(--text-primary, #16191f) !important;
  transition: all 0.15s ease !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
  font-weight: 500;
  line-height: 1.2;
  height: auto;
}
.filter-group-btn .btn:hover {
  border-color: #ff9900 !important;
  color: #b26a00 !important;
  background: #fff8e1 !important;
  box-shadow: 0 2px 6px rgba(255,153,0,0.15) !important;
}
.filter-group-btn .btn:active {
  transform: translateY(1px);
  box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
}
body.dark-mode .filter-group-btn .btn {
  background: rgba(255,255,255,0.05) !important;
  border-color: rgba(255,255,255,0.15) !important;
  color: #e8eaf6 !important;
}
body.dark-mode .filter-group-btn .btn:hover {
  background: rgba(255,153,0,0.15) !important;
  border-color: #ff9900 !important;
  color: #ffca28 !important;
}

/* The `#btn-clear-filters` gets a subtle red tint on hover to signal
   "destructive action" without breaking the unified palette. */
#btn-clear-filters:hover {
  border-color: #d32f2f !important;
  color: #d32f2f !important;
  background: #ffebee !important;
  box-shadow: 0 2px 6px rgba(211,47,47,0.15) !important;
}
body.dark-mode #btn-clear-filters:hover {
  background: rgba(211,47,47,0.15) !important;
  border-color: #ef5350 !important;
  color: #ef5350 !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   RACK DETAIL — mini Filters card (2026-07-08, ZAZ port from IAD)
   ═══════════════════════════════════════════════════════════════════════
   The Rack Detail section reuses the top Filters card shell (.filter-card
   + .filter-row + .filter-group) so the visual language matches. These
   three rules tune the layout for the two-column row (Cabling multi + Actions
   button group) and the count strip below it. Same block as iad/styles.css.
   ═══════════════════════════════════════════════════════════════════════ */

/* Two flexible columns: Cabling multi on the left, Actions on the right. */
.rack-detail-row {
  grid-template-columns: minmax(220px, 340px) 1fr;
}

/* Actions button strip inside the .filter-group-btn column — same look
   as the top .filter-group-btn (Multi-Asset + Clear) but justified right. */
.rack-detail-actions-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

/* Selection info line — right-aligned, muted colour, same tone as the
   top .filter-count block. */
.rack-detail-count {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-height: 20px;
  padding-top: 8px;
}
.rack-detail-count .selection-info {
  font-weight: 500;
  color: var(--text-secondary, #4b5563);
}

/* Responsive: on narrow viewports, stack the two columns instead of side-by-side */
@media (max-width: 900px) {
  .rack-detail-row {
    grid-template-columns: 1fr;
  }
  .rack-detail-actions-row {
    justify-content: flex-start;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   2026-07-08 — Cabling Status column in the 4-Day / Calendar rack
   popups (Section 3 day popup, single-site popup, and Delivery
   Calendar day popup — all share _buildN4SharedTable() in dashboard.js).
   The Rack Model column is nth-child(3), the new Cabling Status column
   is nth-child(4), and IPN is nth-child(5). Keep the min-width and
   white-space:nowrap so the .cabling-badge pill (~110 px) doesn't wrap
   inside a narrow column. Font-size 11 px matches the other .cal-popup-*
   cells (Position / IPN etc.).
   ═══════════════════════════════════════════════════════════════════ */
.cal-popup-rack-table th:nth-child(4),
.cal-popup-rack-table td.cal-popup-cabling {
  min-width: 110px;
  white-space: nowrap;
}
.cal-popup-rack-table .cabling-badge {
  font-size: 11px;
}

/* ── Townsend BBU (2026-10-08) ─────────────────────────────────────────── */
.cal-popup-bbu { white-space: nowrap; }
.bbu-count { font-weight: 700; font-variant-numeric: tabular-nums; display: inline-block; min-width: 2ch; text-align: right; }
.bbu-type { display: inline-block; margin-left: 6px; min-width: 52px; text-align: center; padding: 1px 7px; border-radius: 10px;
            font-size: 10.5px; font-weight: 700; letter-spacing: .2px; border: 1px solid transparent; }
/* Family colours (2026-10-08 feedback): WMW blue · RP strong blue · RP48 green · RP PPS orange · WMW240 violet */
.bbu-type-wmw12   { background: rgba(74,158,255,0.14);  color: #4a9eff; border-color: rgba(74,158,255,0.40); }
.bbu-type-rp12    { background: rgba(37,99,235,0.16);   color: #2563eb; border-color: rgba(37,99,235,0.45); }
.bbu-type-rp48    { background: rgba(22,163,74,0.14);   color: #16a34a; border-color: rgba(22,163,74,0.40); }
.bbu-type-rp12-pps{ background: rgba(255,153,0,0.16);   color: #e07b00; border-color: rgba(255,153,0,0.45); }
.bbu-type-wmw240  { background: rgba(139,92,246,0.14);  color: #7c3aed; border-color: rgba(139,92,246,0.40); }
.bbu-type-unknown { background: rgba(148,163,184,0.14); color: #64748b; border-color: rgba(148,163,184,0.40); }
body.dark-mode .bbu-type-rp12 { color: #60a5fa; }
body.dark-mode .bbu-type-rp48 { color: #4ade80; }
body.dark-mode .bbu-type-rp12-pps { color: #fb923c; }
body.dark-mode .bbu-type-wmw240 { color: #a78bfa; }
/* 2026-10-09 — "RP*": RP12 by design, but the BOM also qualifies the PPS shelf
   (iRP: the as-built may be either). The * is amber so it reads as a note,
   and the footnote row under the site summary spells out what to verify. */
.bbu-star { color: #b45309; font-weight: 900; margin-left: 1px; }
body.dark-mode .bbu-star { color: #fbbf24; }
.bbu-type.bbu-alt { border-style: dashed; }
/* 2026-10-10 — resolved from the as-built shelf (HWMON): the BOM allowed both
   shelves but we know which one was installed. Solid pill (ambiguity gone)
   with a thicker border so it reads as "confirmed" next to a BOM-only pill. */
.bbu-type.bbu-asbuilt { border-width: 2px; padding: 0 6px; }
/* The pill is a <button> since 2026-10-10 (opens the BBU detail modal). */
button.bbu-type { font-family: inherit; line-height: 1.5; cursor: pointer; vertical-align: baseline; }
button.bbu-type:hover { filter: brightness(1.08); box-shadow: 0 0 0 2px rgba(74,158,255,0.18); }
button.bbu-type:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 1px; }
.n4p-shared-table tr.n4p-sum-foot td.bbu-foot[data-bbu-alt-assets] { cursor: pointer; }
.n4p-shared-table tr.n4p-sum-foot td.bbu-foot[data-bbu-alt-assets]:hover { color: var(--text-primary); }
.bbu-foot-more { color: var(--accent-blue); font-weight: 600; margin-left: 4px; }

/* ── BBU detail modal (2026-10-10) ───────────────────────────────────── */
.bbu-info-overlay { z-index: 900; }
.bbu-info-modal {
  background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius);
  box-shadow: 0 16px 56px rgba(0,0,0,0.6); width: 640px; max-width: 96vw; max-height: 90vh;
  display: flex; flex-direction: column; overflow: hidden; font-size: 13px; animation: calPopupIn 0.15s ease;
}
.bbu-info-hdr { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px 12px; background: var(--bg-table-head); border-bottom: 1px solid var(--border); }
.bbu-info-hdr-main { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.bbu-info-count { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text-primary); line-height: 1; }
.bbu-info-unit  { font-size: 13px; font-weight: 700; color: var(--text-secondary); letter-spacing: .4px; }
.bbu-info-pill  { font-size: 12px; margin-left: 4px; padding: 2px 10px; cursor: default; }
.bbu-info-kw    { font-size: 12px; color: var(--text-secondary); margin-left: 2px; }
.bbu-info-rack  { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 10px 18px; border-bottom: 1px solid var(--border); font-size: 12px; color: var(--text-primary); }
.bbu-info-k     { color: var(--text-muted, #94a3b8); font-size: 10.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; margin-right: 5px; }
.bbu-info-body  { padding: 14px 18px; overflow: auto; display: flex; flex-direction: column; gap: 14px; }
.bbu-info-foot  { padding: 8px 18px 10px; border-top: 1px solid var(--border); font-size: 11px; color: var(--text-muted, #94a3b8); }
.bbu-verdict { border-radius: 8px; padding: 12px 14px; border: 1px solid; line-height: 1.45; }
.bbu-verdict p { margin: 6px 0 0; }
.bbu-verdict-title { font-weight: 700; font-size: 13.5px; }
.bbu-verdict-foot  { font-size: 11.5px; color: var(--text-secondary); }
.bbu-verdict-amber   { background: rgba(245,158,11,0.10); border-color: rgba(245,158,11,0.45); }
.bbu-verdict-amber .bbu-verdict-title { color: #b45309; }
.bbu-verdict-green   { background: rgba(22,163,74,0.10);  border-color: rgba(22,163,74,0.40); }
.bbu-verdict-green .bbu-verdict-title { color: #15803d; }
.bbu-verdict-neutral { background: var(--bg-table-head);  border-color: var(--border); }
body.dark-mode .bbu-verdict-amber .bbu-verdict-title { color: #fbbf24; }
body.dark-mode .bbu-verdict-green .bbu-verdict-title { color: #4ade80; }
/* --bg-table-head has no dark override (#fafafa) — same explicit fix the day
   popup header uses (body.dark-mode .cal-popup-rich-header). */
body.dark-mode .bbu-info-hdr       { background: #0d1020; }
body.dark-mode .bbu-verdict-neutral { background: #12151f; }
/* Label colour rule: white = non-PPS 4.2 kW · yellow = PPS 4.4 kW */
.bbu-swatches { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.bbu-swatch-row { display: flex; align-items: center; gap: 10px; font-size: 12.5px; padding: 6px 8px; border-radius: 6px; background: rgba(0,0,0,0.03); }
body.dark-mode .bbu-swatch-row { background: rgba(255,255,255,0.05); }
.bbu-swatch-row.bbu-swatch-dim { opacity: .45; }
.bbu-swatch-row.bbu-swatch-expect { font-weight: 600; box-shadow: inset 0 0 0 1px rgba(22,163,74,0.45); }
.bbu-swatch { width: 34px; height: 18px; border-radius: 3px; flex-shrink: 0; border: 1px solid rgba(0,0,0,0.35); }
.bbu-swatch-white  { background: #fafafa; }
.bbu-swatch-yellow { background: #fbbf24; }
.bbu-swatch-tag { margin-left: auto; font-size: 10.5px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; color: #15803d; }
body.dark-mode .bbu-swatch-tag { color: #4ade80; }
.bbu-info-sec-title { font-size: 10.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--text-muted, #94a3b8); margin-bottom: 6px; }
.bbu-m-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.bbu-m-table td, .bbu-m-table th { padding: 5px 8px; border-top: 1px solid var(--border); text-align: left; vertical-align: top; }
.bbu-m-table th { font-size: 10.5px; letter-spacing: .4px; text-transform: uppercase; color: var(--text-muted, #94a3b8); border-top: none; }
.bbu-m-table tr:first-child td { border-top: none; }
.bbu-m-kind { color: var(--text-secondary); font-weight: 600; white-space: nowrap; width: 54px; }
.bbu-m-pn   { font-family: var(--font-mono, monospace); white-space: nowrap; }
.bbu-m-qty  { white-space: nowrap; font-variant-numeric: tabular-nums; }
.bbu-m-desc { color: var(--text-secondary); }
.bbu-info-note { margin: 0 0 8px; font-size: 12px; color: var(--text-secondary); line-height: 1.4; }
.bbu-info-warn { border: 1px solid rgba(220,38,38,0.45); background: rgba(220,38,38,0.08); color: #b91c1c; border-radius: 6px; padding: 8px 12px; font-size: 12px; }
.bbu-sum-kw { font-weight: 400; color: var(--text-muted, #94a3b8); }
.n4p-shared-table tr.n4p-sum-foot td.bbu-foot { text-align: left; white-space: normal; font-size: 11px; font-weight: 400; color: var(--text-secondary); padding-top: 4px; line-height: 1.35; }
.n4p-shared-table tr.n4p-sum-foot td.bbu-foot .bbu-star { margin-right: 4px; }
.bbu-none, .bbu-na { color: var(--text-muted, #94a3b8); }
.bbu-pending { color: var(--text-muted, #94a3b8); letter-spacing: 2px; }
.bbu-err { color: #f87171; font-weight: 700; }
/* Per-site summary rows at the bottom of each site table (under the BBU column).
   Same 12px as the data rows; the label sits next to the number in the BBU cell. */
.n4p-shared-table tr.n4p-sum-row td { border-top: none; padding-top: 3px; padding-bottom: 3px; background: var(--bg-table-head); font-size: 12px; }
.n4p-shared-table tr.n4p-sum-total td { border-top: 1px solid var(--border); padding-top: 7px; }
.n4p-shared-table tr.n4p-sum-row:last-child td { padding-bottom: 8px; }
.n4p-sum-row .bbu-count { font-size: 12px; }
.bbu-sum-type { display: inline-block; margin-left: 6px; min-width: 52px; text-align: left; font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.n4p-shared-table td.n4p-sum-label { text-align: right; font-weight: 700; color: var(--text-primary); letter-spacing: .3px; padding-right: 4px; }
/* SERVER rack in an even position — planning error */
.n4p-row-even-server td.pos-even-server { color: #dc2626; font-weight: 700; }
.pos-even-server .pos-even-msg { display: block; font-size: 10.5px; font-weight: 700; color: #dc2626; letter-spacing: .2px; margin-top: 1px; }
.n4p-row-even-server { background: rgba(220,38,38,0.06); }
.n4p-shared-table td.pos-even-server { white-space: normal; line-height: 1.25; }