/* =====================================================================
   PRISM theme for the Task Optimiser
   Applies the RapidPM (PRISM) design system from Claude Design as a
   pure override layer — no markup or JS changes, no functional impact.
   Tokens sourced from the PRISM Design System project.
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Roboto+Mono:wght@400;500&display=swap');

:root {
  --prism-primary: #30016a;
  --prism-primary-hover: #240152;
  --prism-primary-50: #4a148c;
  --prism-secondary-bg: #e4dfef;
  --prism-secondary-hover: #b4a4ca;
  --prism-background: #f3f0f9;
  --prism-border: #d5cade;
  --prism-body-text: #374151;
  --prism-muted: #6b7280;
  --prism-success: #059669;
  --prism-warning: #d97706;
  --prism-error: #dc2626;
  --prism-card-border: rgba(48, 1, 106, 0.08);
  --prism-primary-a08: rgba(48, 1, 106, 0.08);
  --prism-primary-a15: rgba(48, 1, 106, 0.15);
  --prism-header-bg: rgba(48, 1, 106, 0.97);
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Roboto Mono', ui-monospace, Menlo, monospace;
  --gradient-primary: linear-gradient(135deg, #30016a 0%, #4a148c 100%);
  --gradient-primary-hover: linear-gradient(135deg, #24014f 0%, #380f6e 100%);
  --shadow-card: 0 2px 8px rgba(48, 1, 106, 0.08);
  --shadow-btn-hover: 0 4px 12px rgba(48, 1, 106, 0.2);
}

/* ---- App canvas + type ---- */
body {
  background: var(--prism-background) !important;
  font-family: var(--font-sans) !important;
  color: var(--prism-body-text);
  font-size: 13px;
}

/* ---- Header stripe ---- */
.navbar.bg-primary {
  background: var(--prism-header-bg) !important;
  box-shadow: 0 1px 3px rgba(48, 1, 106, 0.25);
}
.navbar-brand { font-weight: 700; letter-spacing: -0.3px; }

/* ---- Cards ---- */
.card {
  border: 1px solid var(--prism-card-border) !important;
  border-radius: 10px !important;
  box-shadow: var(--shadow-card);
  background: rgba(255, 255, 255, 0.92);
}
.card-title { color: var(--prism-primary) !important; font-weight: 700; }

/* ---- Buttons ---- */
.btn { border-radius: 6px !important; font-weight: 600; }
.btn-success, .btn-success:focus {           /* Optimize */
  background: var(--gradient-primary) !important;
  border-color: var(--prism-primary) !important;
  color: #fff !important;
}
.btn-success:hover:not(:disabled) {
  background: var(--gradient-primary-hover) !important;
  box-shadow: var(--shadow-btn-hover);
}
.btn-primary, .btn-info {                     /* Export / secondary actions */
  background: var(--prism-secondary-bg) !important;
  border-color: rgba(48, 1, 106, 0.3) !important;
  color: var(--prism-primary) !important;
}
.btn-primary:hover:not(:disabled), .btn-info:hover:not(:disabled) {
  background: var(--prism-secondary-hover) !important;
}
.btn-outline-secondary { color: var(--prism-primary); border-color: var(--prism-border); }
.btn-outline-secondary:hover { background: var(--prism-primary-a08); color: var(--prism-primary); border-color: var(--prism-primary); }
.btn-outline-primary { color: var(--prism-primary) !important; border-color: rgba(48,1,106,0.3) !important; }
.btn-check:checked + .btn-outline-primary {
  background: var(--prism-primary) !important; border-color: var(--prism-primary) !important; color: #fff !important;
}

/* ---- Tabs (view switcher) ---- */
.nav-tabs { border-bottom-color: var(--prism-border); }
.nav-tabs .nav-link { color: var(--prism-muted); font-weight: 600; border: none; }
.nav-tabs .nav-link:hover { color: var(--prism-primary); border: none; }
.nav-tabs .nav-link.active {
  color: var(--prism-primary);
  background: transparent;
  border: none;
  border-bottom: 2px solid var(--prism-primary);
}

/* ---- Links / accents ---- */
a { color: var(--prism-primary); }
.text-primary { color: var(--prism-primary) !important; }

/* ---- Summary metrics ---- */
.metric { background: #fff; border: 1px solid var(--prism-card-border); border-radius: 10px; padding: 10px 8px; box-shadow: var(--shadow-card); }
.metric-value { font-weight: 800 !important; color: var(--prism-primary); }
.metric-value.text-success { color: var(--prism-success) !important; }
.metric-label { font-size: 10px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--prism-muted); }

/* ---- Runs chips ---- */
#runsList button {
  border-radius: 9999px !important;
  border: 1px solid var(--prism-border) !important;
  background: #fff; color: var(--prism-body-text);
}
#runsList button:hover {
  border-color: var(--prism-primary) !important;
  background: var(--prism-primary-a08); color: var(--prism-primary);
}

/* ---- Upload area ---- */
#uploadArea { border: 2px dashed var(--prism-secondary-hover) !important; border-radius: 12px; background: rgba(255,255,255,0.6); }
#uploadArea:hover { border-color: var(--prism-primary) !important; background: var(--prism-primary-a08); }

/* ---- Excel toolbar ---- */
.excel-toolbar { background: #faf8fd !important; border-color: var(--prism-border) !important; border-radius: 8px 8px 0 0; }
.excel-toolbar button { border-color: var(--prism-border) !important; color: var(--prism-primary); border-radius: 6px; }
.excel-toolbar button:hover { background: var(--prism-primary-a08) !important; }
.formula-bar input { border-color: var(--prism-border) !important; font-family: var(--font-mono) !important; border-radius: 6px; }

/* ---- ag-Grid (Grid view) ---- */
.ag-theme-balham {
  --ag-header-background-color: var(--prism-primary);
  --ag-header-foreground-color: #ffffff;
  --ag-border-color: var(--prism-border);
  --ag-odd-row-background-color: rgba(228, 223, 239, 0.45);
  --ag-row-hover-color: rgba(180, 164, 202, 0.30);
  --ag-selected-row-background-color: var(--prism-primary-a15);
  --ag-range-selection-border-color: var(--prism-primary);
  --ag-font-family: var(--font-sans);
  --ag-font-size: 12px;
}
.ag-theme-balham .ag-header-group-cell { font-weight: 700; letter-spacing: 0.4px; }

/* ---- DHTMLX Gantt ---- */
.gantt_grid_scale, .gantt_task_scale, .gantt_scale_line {
  background-color: var(--prism-primary) !important;
  color: #fff !important;
  border-color: var(--prism-primary-50) !important;
}
.gantt_grid_head_cell, .gantt_scale_cell { color: #fff !important; font-weight: 500; }
.gantt_grid_data .gantt_cell { color: var(--prism-body-text); border-right-color: var(--prism-border); }
.gantt_row, .gantt_task_row { border-bottom-color: rgba(48, 1, 106, 0.08) !important; }
.gantt_row.odd, .gantt_task_row.odd { background-color: rgba(228, 223, 239, 0.45); }
.gantt_container { border: 1px solid var(--prism-border); border-radius: 0 0 10px 10px; font-family: var(--font-sans); }

/* ---- Form controls ---- */
.form-control, .form-select {
  border-color: var(--prism-border);
  border-radius: 7px;
  font-family: var(--font-sans);
}
.form-control:focus, .form-select:focus {
  border-color: var(--prism-primary);
  box-shadow: 0 0 0 3px var(--prism-primary-a15);
}
.form-range::-webkit-slider-thumb { background: var(--prism-primary); }
.form-range::-moz-range-thumb { background: var(--prism-primary); }
.form-check-input:checked { background-color: var(--prism-primary); border-color: var(--prism-primary); }

/* ---- Columns picker ---- */
#columnsMenu { border-color: var(--prism-border) !important; border-radius: 10px !important; box-shadow: 0 8px 24px rgba(48, 1, 106, 0.18) !important; }

/* ---- Progress strip stays informational blue (matches design) ---- */
#optimizeProgress { border-radius: 8px; }

/* =====================================================================
   Compact vertical rhythm — less dead space above the plan
   ===================================================================== */
.navbar.mb-4 { margin-bottom: 12px !important; }
#projectSection > .card.mb-4,
#projectSection > .mb-4,
#projectSection > .mb-3 { margin-bottom: 10px !important; }
.card-body { padding: 12px 16px !important; }
.card-body .card-title { margin-bottom: 10px; font-size: 13px; }
#validationBanner .alert, #validationBanner.alert { padding: 8px 14px; margin-bottom: 8px !important; }
#validationBanner > .alert:last-child { margin-bottom: 0 !important; }

/* Summary: one tight row of small metric tiles */
#summarySection .row.mb-3 { margin-bottom: 8px !important; flex-wrap: nowrap; gap: 8px; }
#summarySection .row.mb-3 > div { flex: 1 1 0; max-width: none; padding: 0; }
#summarySection .metric { padding: 6px 6px; }
#summarySection .metric-value { font-size: 19px !important; line-height: 1.2; }
#summarySection .metric-label { font-size: 8.5px; }

/* Results strip: single compact line */
#validationSection .card-body, #validationSection .alert { padding: 8px 14px !important; margin-bottom: 0 !important; }
.alert { padding-top: 8px; padding-bottom: 8px; }

/* Controls: tuck the Runs row against the fields */
#runsPanel.mt-3 { margin-top: 8px !important; }
#optimizeProgress.mt-3 { margin-top: 8px !important; }

/* ---- Resources sheet ---- */
#resourcesSheet thead th {
  background: var(--prism-primary); color: #fff; font-size: 10.5px;
  text-transform: uppercase; letter-spacing: 0.4px; font-weight: 500;
}
#resourcesSheet td { border-color: var(--prism-border); font-size: 13px; }
.skill-chip {
  background: var(--prism-secondary-bg); color: var(--prism-primary);
  font-weight: 600; font-size: 11px;
}