/* PAC Business Control Tower v1.7.28 — stable UI baseline
   Loaded after the historical consolidated stylesheet. This layer intentionally
   resets only interactive primitives: pages, dropdowns, tables and Plotly. */

:root {
  --pac27-bg: #061d25;
  --pac27-surface: #0a303a;
  --pac27-surface-2: #0d3944;
  --pac27-border: rgba(153,233,242,.34);
  --pac27-text: #f2fcfd;
  --pac27-muted: #b7d2d7;
  --pac27-accent: #99e9f2;
}

/* Page visibility remains controlled by one explicit class only. */
.pac-page-panel.is-hidden { display: none !important; }
.pac-page-panel.is-active {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  overflow: visible !important;
  min-width: 0 !important;
}

/* No historical loader may intercept the UI. */
#pac-global-loading-overlay, .pac-global-loading-overlay {
  display: none !important; visibility: hidden !important; opacity: 0 !important;
  pointer-events: none !important;
}
body.pac-system-is-loading { overflow: auto !important; }

/* ----------------------------- FILTERS ---------------------------------- */
#filterbar, #filters-panel, .filters-panel, .filters-grid, .filterbar-main,
.global-controls-card, .filter-card, .filter-block, .delivery-rule-field,
.finance-controls-section, .finance-controls-grid, .commercial-filter-grid,
.legacy-filter-grid, .scope-alerts-filter-grid, .tariff-controls-card,
.tariff-scenario-card, [class*="filter-grid"], [class*="filters-grid"] {
  overflow: visible !important;
}
#filterbar { position: sticky !important; z-index: 50000 !important; }
.filters-panel, .filters-grid { position: relative !important; z-index: 50010 !important; }
.filter-card, .filter-block, .delivery-rule-field,
.finance-controls-grid > div, .commercial-filter-grid > div,
.legacy-filter-grid > div, .scope-alerts-filter-grid > div,
[class*="filter-grid"] > div, [class*="filters-grid"] > div {
  position: relative !important; z-index: 1 !important; overflow: visible !important;
}
.filter-card:focus-within, .filter-block:focus-within, .delivery-rule-field:focus-within,
.finance-controls-grid > div:focus-within, .commercial-filter-grid > div:focus-within,
.legacy-filter-grid > div:focus-within, .scope-alerts-filter-grid > div:focus-within,
[class*="filter-grid"] > div:focus-within, [class*="filters-grid"] > div:focus-within {
  z-index: 60000 !important;
}

.Select, .pac-dropdown, .dash-dropdown, .pac-filter-control {
  position: relative !important; overflow: visible !important; color: var(--pac27-text) !important;
}
.Select.is-open { z-index: 65000 !important; }
.Select-control, .Select.is-open > .Select-control, .Select.is-focused > .Select-control,
.pac-dropdown .Select-control, .dash-dropdown .Select-control {
  min-height: 42px !important; height: auto !important;
  background: #082a34 !important; color: var(--pac27-text) !important;
  border: 1px solid var(--pac27-border) !important; border-radius: 10px !important;
  box-shadow: none !important; overflow: visible !important;
}
.Select-placeholder, .Select-value, .Select-value-label, .Select-input, .Select-input > input,
.Select--single > .Select-control .Select-value, .Select--single > .Select-control .Select-value-label {
  color: var(--pac27-text) !important; -webkit-text-fill-color: var(--pac27-text) !important;
  background: transparent !important; opacity: 1 !important;
}
.Select-placeholder { color: var(--pac27-muted) !important; -webkit-text-fill-color: var(--pac27-muted) !important; }
.Select--multi .Select-value {
  background: rgba(153,233,242,.14) !important; border: 1px solid rgba(153,233,242,.38) !important;
  border-radius: 999px !important; color: var(--pac27-text) !important;
}
.Select--multi .Select-value-label, .Select--multi .Select-value-icon, .Select-clear-zone, .Select-arrow-zone {
  color: var(--pac27-text) !important;
}
.Select-arrow { border-top-color: var(--pac27-accent) !important; }

/* Only the outer menu is absolute. Forcing the virtualized grid to absolute
   collapsed its measured height and produced the thin empty line seen in UI. */
.Select-menu-outer {
  position: absolute !important; top: 100% !important; left: 0 !important; right: 0 !important;
  z-index: 70000 !important; max-height: 360px !important; overflow: visible !important;
  background: #071f28 !important; color: var(--pac27-text) !important;
  border: 1px solid rgba(153,233,242,.60) !important; border-radius: 10px !important;
  box-shadow: 0 18px 46px rgba(0,0,0,.62) !important;
}
.Select-menu {
  position: relative !important; display: block !important; max-height: 356px !important;
  overflow-y: auto !important; overflow-x: hidden !important; background: #071f28 !important;
}
.VirtualizedSelectGrid {
  position: relative !important; display: block !important; overflow: auto !important;
  background: #071f28 !important;
}
.Select-option, .VirtualizedSelectOption {
  display: flex !important; align-items: center !important; min-height: 42px !important;
  padding: 9px 12px !important; background: #071f28 !important;
  color: var(--pac27-text) !important; -webkit-text-fill-color: var(--pac27-text) !important;
  white-space: normal !important; line-height: 1.3 !important;
  border-bottom: 1px solid rgba(153,233,242,.08) !important;
}
.Select-option.is-focused, .Select-option:hover, .VirtualizedSelectFocusedOption,
.VirtualizedSelectOption:hover { background: #12414c !important; color: #fff !important; }
.Select-option.is-selected, .VirtualizedSelectSelectedOption {
  background: rgba(153,233,242,.22) !important; color: #fff !important; font-weight: 800 !important;
}
.filter-label, .filter-card label, .filter-block label, .delivery-rule-field label,
.finance-controls-grid label, .commercial-filter-grid label, .legacy-filter-grid label,
.scope-alerts-filter-grid label { color: #ddfbff !important; font-weight: 800 !important; }

/* ----------------------------- TABLES ----------------------------------- */
.dash-table-container {
  display: block !important; width: 100% !important; min-width: 0 !important;
  min-height: 120px !important; height: auto !important; visibility: visible !important;
  opacity: 1 !important; overflow: visible !important; contain: none !important;
  position: relative !important; z-index: 2 !important;
}
.dash-table-container .dash-spreadsheet-container,
.dash-table-container .dash-spreadsheet-inner,
.dash-table-container .dash-spreadsheet {
  display: block !important; width: 100% !important; min-width: 0 !important;
  min-height: 90px !important; height: auto !important; visibility: visible !important;
  opacity: 1 !important; contain: none !important; position: relative !important;
}
.dash-table-container .dash-spreadsheet-container,
.dash-table-container .dash-spreadsheet-inner { overflow: auto !important; }
.dash-table-container .dash-spreadsheet-inner table {
  display: table !important; width: 100% !important; min-width: 100% !important;
  height: auto !important; table-layout: auto !important; visibility: visible !important; opacity: 1 !important;
}
.dash-table-container thead { display: table-header-group !important; }
.dash-table-container tbody { display: table-row-group !important; }
.dash-table-container tr { display: table-row !important; }
.dash-table-container th, .dash-table-container td { display: table-cell !important; }
/* PAC HF6B-B1 | Visibility recovery.
   The previous global rule display:none on Dash fixed row/column layers could blank
   native DataTables. Let Dash manage those layers. */
.dash-table-container .dash-fixed-row,
.dash-table-container .dash-fixed-column {
  visibility: visible !important;
  opacity: 1 !important;
}
.dash-table-container .previous-next-container {
  display: flex !important; visibility: visible !important; opacity: 1 !important; min-height: 42px !important;
}

/* Direction tables are wide by design but remain a single DOM table. */
.v178-direction-page .v178-table-panel, .v178-direction-page .v179-client-table-panel {
  overflow: visible !important; contain: none !important;
}
.v178-direction-page .dash-table-container { min-height: 190px !important; }
#direction-client-projection-table .dash-spreadsheet-inner table {
  width: max-content !important; min-width: 2940px !important; table-layout: fixed !important;
}
#direction-week-comparison-table .dash-spreadsheet-inner table,
#direction-momentum-table .dash-spreadsheet-inner table,
#direction-decline-alert-table .dash-spreadsheet-inner table { min-width: 980px !important; }

/* ----------------------------- PLOTLY ----------------------------------- */
/* Undo the historical global 1px/opacity:0 chartless rule. */
.dash-graph {
  display: block !important; position: relative !important; width: 100% !important;
  height: 370px !important; min-height: 320px !important; max-height: none !important;
  opacity: 1 !important; visibility: visible !important; overflow: hidden !important;
  pointer-events: auto !important; margin: 0 !important; padding: 0 !important;
}
.dash-graph .js-plotly-plot, .dash-graph .plot-container, .dash-graph .svg-container {
  display: block !important; position: relative !important; width: 100% !important;
  height: 100% !important; min-height: 320px !important; max-height: none !important;
  opacity: 1 !important; visibility: visible !important; overflow: visible !important; pointer-events: auto !important;
}
.dash-graph svg, .dash-graph canvas {
  display: block !important; width: 100% !important; height: 100% !important;
  opacity: 1 !important; visibility: visible !important; pointer-events: auto !important;
}
.dash-graph .modebar { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; }

/* These executive modules intentionally remain chartless. */
.v178-direction-page .dash-graph, .page-commercial .dash-graph, .page-finance .dash-graph,
#pac-legacy-overview-compat { display: none !important; }
.pac-chartless-panel { display: none !important; }

/* Cards stay below opened dropdowns. */
.kpi-grid, .kpi-card, .metric-card, .v178-summary-grid, .v178-panel,
.card, .table-card, .dash-table-container { z-index: 1; }

@media (max-width: 900px) {
  .filters-grid, .commercial-filter-grid, .finance-controls-grid,
  .legacy-filter-grid, .scope-alerts-filter-grid { grid-template-columns: 1fr !important; }
  .dash-graph { height: 330px !important; min-height: 290px !important; }
}

/* Open dropdown ancestors must not clip the menu. */
.pac-page-panel.is-active .card:has(.Select.is-open),
.pac-page-panel.is-active .table-card:has(.Select.is-open),
.pac-page-panel.is-active .panel:has(.Select.is-open),
.pac-page-panel.is-active [class*="card"]:has(.Select.is-open),
.pac-page-panel.is-active [class*="panel"]:has(.Select.is-open) {
  overflow: visible !important;
  position: relative !important;
  z-index: 62000 !important;
}
.Select-menu-outer { display: block !important; }


/* v1.7.28: session-stable interactions and resilient empty states. */
#filterbar { isolation: isolate; }
.filters-panel.closed { overflow: hidden !important; }
.filters-panel.open { overflow: visible !important; }
.pac-page-content-shell { min-width: 0 !important; overflow: visible !important; }
.pac-page-panel.is-active { animation: pac1728PageIn .14s ease-out; }
@keyframes pac1728PageIn { from { opacity: .72; transform: translateY(2px); } to { opacity: 1; transform: none; } }

/* Dash dropdown portal/menu must remain above sticky filters and table headers. */
.Select-menu-outer { min-height: 44px !important; }
.Select-noresults { display: block !important; padding: 12px !important; color: var(--pac27-muted) !important; }

/* Do not blank a hovered table row. */
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner td.focused,
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner td:hover {
  background-color: #12414c !important;
  color: #ffffff !important;
}

/* A mounted but inactive page stays in the DOM for state retention, but is inert. */
.pac-page-panel.is-hidden { pointer-events: none !important; }
.pac-page-panel.is-active { pointer-events: auto !important; }