/* Dash-specific additions to styles.css (loaded after it: assets load alphabetically). */

/* Dash 4's dcc components (Dropdown, Input, Upload, ...) read these variables, set light on :root.
   Set them on body so the components and their pop-overs (portalled into body) inherit the dark theme. */
body {
  --Dash-Stroke-Strong: rgba(255, 255, 255, 0.18);
  --Dash-Stroke-Weak: rgba(255, 255, 255, 0.10);
  --Dash-Fill-Interactive-Strong: #3987e5;
  --Dash-Fill-Interactive-Weak: rgba(255, 255, 255, 0.04);
  --Dash-Fill-Inverse-Strong: #1f1e1d;
  --Dash-Fill-Primary-Hover: #2a2927;
  --Dash-Fill-Primary-Active: rgba(57, 135, 229, 0.15);
  --Dash-Fill-Disabled: rgba(255, 255, 255, 0.06);
  --Dash-Text-Primary: #f0efec;
  --Dash-Text-Strong: #f0efec;
  --Dash-Text-Weak: #c3c2b7;
  --Dash-Text-Disabled: #898781;
  --Dash-Shading-Strong: transparent;
  --Dash-Shading-Weak: transparent;
  --Dash-Tooltip-Background-Color: #2a2927;
  --Dash-Tooltip-Border-Color: rgba(255, 255, 255, 0.18);
}

/* Dash injects a global `.tab` rule for dcc.Tabs (flex: 1, padding, no bottom border).
   Restore the styles.css look for our segmented buttons. */
.tabs > .tab {
  flex: 0 1 auto; min-width: auto; text-align: left;
  background-color: transparent; padding: 7px 14px;
  border-bottom: 0.5px solid var(--border-strong);
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.tabs > .tab:hover { background-color: var(--surface-2); }
.tabs > .tab[aria-pressed="true"] { background-color: var(--accent-soft); border-color: transparent; }
.tabs-main > .tab { padding: 9px 18px; }
@media (max-width: 760px) {
  .tabs > .tab { flex: none; }
}

/* Description pop-up shows on hover, or on focus (tap) for touch screens. */
.desc-pop { display: none; }
.desc:hover .desc-pop, .desc:focus .desc-pop, .desc:focus-within .desc-pop { display: block; }
.desc:focus { outline: none; }

/* The clickable top of a module card (name, % and progress) is a button so the pills stay separate buttons. */
.module-card { cursor: default; }
.module-card-main {
  display: block; width: 100%; padding: 0; border: none; background: none;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}

/* Upload drop zone */
.file-input { cursor: pointer; text-align: center; }
.file-input:hover { border-color: var(--accent); background: var(--surface-2); }

/* Status filter (dcc.Dropdown) sized like the search box */
.select-dd { min-width: 190px; font-size: 13px; }

.to-top[hidden] { display: none; }

/* Plotly charts: pointer on clickable marks */
.js-plotly-plot .plotly .cursor-crosshair, .js-plotly-plot .plotly .cursor-pointer { cursor: pointer; }

/* Site progress: breadcrumb, timeline strip, stage grid */
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 13px; color: var(--text-2); margin-bottom: 12px; }
.breadcrumb a { color: var(--accent); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb-sep { color: var(--muted); font-size: 12px; }
.breadcrumb-current { color: var(--text); font-weight: 500; }

.timeline-strip { background: var(--surface); border: 0.5px solid var(--border); border-radius: var(--radius); padding: 1rem 1.25rem; margin-bottom: 14px; display: grid; gap: 8px; }
.strip-facts { display: flex; flex-wrap: wrap; gap: 16px; color: var(--text-2); font-size: 13px; }
.strip-row { display: grid; grid-template-columns: 80px 1fr 48px; align-items: center; gap: 10px; font-size: 13px; }
.strip-label { color: var(--text-2); }
.strip-bar { height: 8px; border-radius: 999px; background: var(--border); overflow: hidden; }
.strip-bar span { display: block; height: 100%; border-radius: 999px; }
.strip-pct { text-align: right; }
.strip-status, .strip-missing { margin: 0; font-size: 13px; font-weight: 500; color: var(--muted); }

/* Grid items default to min-width: auto, so the stage grid's 640px min-width widened the whole page on
   narrow screens instead of scrolling inside .stage-grid-wrap. */
.stack > * { min-width: 0; }

.stage-grid-wrap { overflow-x: auto; }
.stage-grid { border-collapse: separate; border-spacing: 2px; width: 100%; min-width: 640px; font-size: 12px; }
/* The grid is not a data table: drop styles.css's table header band, row lines and striping. */
.stage-grid thead th { position: static; background: none; border: none; }
.stage-grid tbody td { border: none; }
.stage-grid tbody tr, .stage-grid tbody tr:nth-child(even), .stage-grid tbody tr:hover { background: none; }
.stage-grid th { color: var(--muted); font-size: 11px; font-weight: 400; text-align: center; padding: 2px 6px; white-space: nowrap; }
.stage-grid tbody th { color: var(--text-2); font-size: 12px; }
.stage-grid tbody td.num { color: var(--text-2); font-size: 11px; padding: 0 6px; }
.stage-grid th:first-child, .stage-grid tbody th { position: sticky; left: 0; background: var(--surface); text-align: left; z-index: 1; }
.stage-grid td { padding: 0; }
.cell { height: 9px; border-radius: 3px; }
.cell-NOT_STARTED { box-shadow: inset 0 0 0 0.5px var(--border); }
.cell-na { background: repeating-linear-gradient(45deg, transparent, transparent 3px, var(--border) 3px, var(--border) 4px); }
.cell.viz-pulse { animation: viz-pulse 1.6s ease-in-out infinite; }
.groundwork { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: 12px; color: var(--text-2); }
.legend-item { display: inline-flex; align-items: center; gap: 6px; }
.legend-swatch { width: 10px; height: 10px; border-radius: 3px; box-shadow: inset 0 0 0 0.5px var(--border); }
.project-meta { display: flex; align-items: center; gap: 12px; color: var(--text-2); font-size: 13px; }
@media (prefers-reduced-motion: reduce) { .cell.viz-pulse { animation: none; } }

/* Admin panel layout (colours and borders are in styles.css) */
.admin-slot { display: grid; gap: 12px; min-width: 0; }
.admin-slot:empty { display: none; }
.admin-panel .kpi-label { margin-bottom: 8px; }
.style-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 760px) { .style-options { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.upload-btn { display: inline-block; }
.btn-primary { background: var(--accent); border-color: transparent; color: #fff; }
.btn-primary:hover { background: #2f78d1; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; padding: 8px 10px; }
.threshold-dd { min-width: 100px; }
@media (max-width: 760px) { .admin-panel .card-head .filter-row > :is(h3, .chip) { flex: 0 0 auto; } }