* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  background: var(--bg-page);
  min-height: 100vh;
  padding: 20px;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  background: var(--surface);
  border-radius: 20px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.header {
  background: var(--grad-header);
  color: white;
  padding: 30px;
  text-align: center;
}

.header h1 {
  font-size: 2.5rem;
  margin-bottom: 10px;
  font-weight: 300;
}

.header p {
  opacity: 0.9;
  font-size: 1.1rem;
  padding-bottom: 10px;
}

/* Header data-vintage badge (populated by renderDataFreshness). Subtle pill on the
   gradient header; [hidden] must be restated because the display rule overrides it. */
.data-freshness {
  display: inline-block;
  margin: 0 auto 12px;
  padding: 4px 14px;
  font-size: 0.8rem;
  font-weight: 500;
  color: white;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
}

.data-freshness[hidden] {
  display: none;
}

.main-content {
  padding: 40px;
}

.section {
  margin-bottom: 40px;
  padding: 30px;
  border: 2px solid var(--border-light);
  border-radius: 15px;
  transition: all 0.3s ease;
}

.section:hover {
  border-color: var(--primary);
  box-shadow: 0 5px 15px rgba(102, 126, 234, 0.1);
}

.section-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  cursor: pointer;
}

.section-icon {
  font-size: 1.5rem;
  margin-right: 15px;
  color: var(--primary);
}

.section-title {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--text);
  flex-grow: 1;
}

.toggle-icon {
  font-size: 1rem;
  color: var(--text-subtle);
  transition: transform 0.3s ease;
}

.section.collapsed .toggle-icon {
  transform: rotate(180deg);
}

.section-content {
  transition: all 0.3s ease;
}

.section.collapsed .section-content {
  display: none;
}

.form-group {
  margin-bottom: 25px;
}

.form-label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: var(--text-body);
}

.form-control {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  background: var(--surface);
  color: var(--text);
  transition: border-color 0.3s ease;
}

.form-control:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.file-upload {
  position: relative;
  display: inline-block;
  cursor: pointer;
  width: 100%;
}

.file-upload input[type="file"] {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.file-upload-label {
  display: block;
  padding: 20px;
  border: 2px dashed var(--primary);
  border-radius: 10px;
  text-align: center;
  background: var(--surface-tint);
  transition: all 0.3s ease;
}

.file-upload:hover .file-upload-label,
.file-upload.dragover .file-upload-label {
  background: var(--surface-tint-strong);
  border-color: var(--primary-strong);
}

.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.checkbox-item {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  border: 2px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 120px;
}

.checkbox-item:hover {
  border-color: var(--primary);
  background: var(--surface-tint);
}

.checkbox-item input[type="checkbox"] {
  margin-right: 10px;
  transform: scale(1.2);
}

.radio-group {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.radio-item {
  display: flex;
  align-items: center;
  padding: 15px 20px;
  border: 2px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.radio-item:hover {
  border-color: var(--primary);
  background: var(--surface-tint);
}

.radio-item input[type="radio"] {
  margin-right: 12px;
  transform: scale(1.2);
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.btn {
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-block;
  text-align: center;
}

.btn-primary {
  background: var(--grad-primary);
  color: white;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}

.btn-secondary {
  background: var(--surface-alt);
  color: var(--text-muted);
  border: 2px solid var(--border-soft);
}

.btn-secondary:hover {
  background: var(--border-soft);
  border-color: var(--border-mid);
}

/* Filter presets bar */
.preset-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  margin-bottom: 16px;
  background: var(--surface-alt);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
}
.preset-label {
  font-weight: 600;
  color: var(--text);
}
.preset-select {
  width: auto;
  min-width: 200px;
  max-width: 100%;
  padding: 8px 12px;
}
.preset-bar .btn {
  padding: 8px 14px;
  font-size: 14px;
}
.preset-bar .btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.preset-status {
  font-size: 13px;
  font-weight: 600;
}
.preset-save-form {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.preset-name-input {
  width: 180px;
  padding: 8px 12px;
}
/* Armed two-step confirm state (Update/Delete/Overwrite awaiting 2nd click) */
.preset-bar .preset-armed {
  background: var(--danger-bg);
  color: var(--danger-text);
  border-color: var(--danger-border);
}

/* Scenario comparison */
.scenario-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  margin-top: 16px;
  background: var(--surface-alt);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
}
.scenario-title {
  font-weight: 700;
  color: var(--text);
}
.scenario-slots {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.scenario-slot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-muted);
  padding: 3px 6px 3px 8px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
}
.scenario-empty {
  font-size: 13px;
  color: var(--text-muted);
  font-style: italic;
}
.scenario-at {
  font-size: 11px;
  color: var(--text-subtle);
  white-space: nowrap;
}
.scenario-name-input {
  font: inherit;
  font-size: 13px;
  padding: 4px 8px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-slate);
  border-radius: 6px;
  max-width: 150px;
}
.scenario-name-new {
  max-width: 180px;
}
.scenario-name-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.scenario-remove {
  border: none;
  background: transparent;
  color: var(--text-subtle);
  font-size: 13px;
  line-height: 1;
  padding: 2px 4px;
  cursor: pointer;
  border-radius: 4px;
}
.scenario-remove:hover {
  color: var(--red-strong);
  background: var(--danger-bg);
}
/* N-way matrix: the grouped header centres each run's column under its measure. */
.scenario-nway-table thead th {
  text-align: center;
}
.scenario-nway-table tbody td:first-child {
  text-align: left;
}
.scenario-bar .btn {
  padding: 8px 14px;
  font-size: 14px;
}
.scenario-bar .btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.scenario-result {
  margin-top: 14px;
}
.scenario-legend {
  margin-bottom: 10px;
  color: var(--text-body);
}
.scenario-note {
  margin: 8px 0;
  color: var(--text-muted);
  font-style: italic;
}
.scenario-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
}
.scenario-kpi {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  min-width: 130px;
}
.scenario-kpi b {
  font-size: 18px;
  color: var(--text);
}
.scenario-kpi span {
  font-size: 12px;
  color: var(--text-muted);
}
.scenario-up {
  color: var(--good-strong);
}
.scenario-down {
  color: var(--red-strong);
}
.scenario-scroll {
  overflow: auto;
  max-height: 420px;
}
.scenario-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.scenario-table th,
.scenario-table td {
  padding: 8px 10px;
  border: 1px solid var(--border-mid);
  text-align: left;
  white-space: nowrap;
}
.scenario-table thead th {
  background: var(--surface-alt);
  font-weight: 600;
  /* Header stays visible while the changed-rows list scrolls; inset shadows
     stand in for the collapsed borders, which don't travel with sticky cells */
  position: sticky;
  top: 0;
  z-index: 1;
  box-shadow:
    inset 0 1px 0 var(--border-mid),
    inset 0 -1px 0 var(--border-mid);
}
.scenario-config {
  margin-bottom: 12px;
}
.scenario-config-title {
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}
.scenario-config-table {
  width: auto;
  min-width: 340px;
}
.scenario-changed {
  background: var(--surface-tint);
}
.scenario-a {
  color: var(--text-muted);
}
.scenario-b {
  color: var(--good-strong);
  font-weight: 600;
}
.scenario-same {
  color: var(--text-body);
}

/* Browser Storage and Fleet Snapshots (3.21): plain markup that storage-manager-ui.js
   renders into two hosts, so the rules hang off the host ids. Tokens only. */
#storageManagerPanel .table-wrapper {
  overflow-x: auto;
  margin: 10px 0 12px;
}
#storageManagerPanel table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
#storageManagerPanel th,
#storageManagerPanel td {
  padding: 8px 10px;
  border: 1px solid var(--border-mid);
  text-align: left;
}
#storageManagerPanel thead th {
  background: var(--surface-alt);
  font-weight: 600;
}
#storageManagerPanel code {
  font-size: 12px;
  overflow-wrap: anywhere;
}
#fleetSnapshotsPanel form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 10px 0;
}
#fleetSnapshotsPanel input[type="text"] {
  min-width: 220px;
  padding: 8px 10px;
  border: 1px solid var(--border-mid);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
}
#fleetSnapshotsPanel ul {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
}
#fleetSnapshotsPanel li {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid var(--border-soft);
}
#fleetSnapshotsPanel li strong {
  flex: 1 1 200px;
}

.alert {
  padding: 15px 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}

.alert-success {
  background: var(--success-bg);
  border: 1px solid var(--success-border);
  color: var(--success-text);
}

.alert-info {
  background: var(--info-bg);
  border: 1px solid var(--info-border);
  color: var(--info-text);
}

.alert-warning {
  background: var(--warning-bg);
  border: 1px solid var(--warning-border);
  color: var(--warning-text);
}

.alert-danger {
  background: var(--danger-bg);
  border: 1px solid var(--danger-border);
  color: var(--danger-text);
}

.sample-csv {
  background: var(--surface-alt);
  border: 1px solid var(--border-mid);
  border-radius: 8px;
  padding: 20px;
  font-family: "Courier New", monospace;
  margin-bottom: 20px;
}

.optimization-controls {
  background: var(--surface-tint);
  padding: 20px;
  border-radius: 10px;
  margin-top: 20px;
}

.range-input {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
}

.range-input input[type="number"] {
  width: 80px;
  padding: 8px;
  border: 2px solid var(--border);
  border-radius: 6px;
  text-align: center;
  background: var(--surface);
  color: var(--text);
}

.tooltip {
  position: relative;
  cursor: help;
}

.tooltip:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--tooltip-bg);
  color: var(--tooltip-text);
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12px;
  white-space: nowrap;
  z-index: 1000;
}

.progress-bar {
  width: 100%;
  height: 8px;
  background: var(--border-soft);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 20px;
}

.progress-fill {
  height: 100%;
  background: var(--grad-progress);
  width: 0%;
  transition: width 0.3s ease;
}

.hidden {
  display: none;
}

@media (max-width: 768px) {
  .grid-2,
  .grid-3 {
    grid-template-columns: 1fr;
  }

  .checkbox-group {
    flex-direction: column;
  }

  .header h1 {
    font-size: 2rem;
  }

  .main-content {
    padding: 20px;
  }
}
/* Template description styling */
.template-description {
  margin-bottom: 20px;
}

/* File upload styling */
.upload-icon {
  font-size: 2rem;
  margin-bottom: 10px;
}

.upload-subtext {
  color: var(--text-muted);
  margin-top: 5px;
}

/* Optimization controls styling */
.optimization-title {
  margin-bottom: 20px;
}

/* CPU utilization label — accessible text token (the brand --primary fails AA
   as text on the light surface). */
.cpu-utilization-label {
  color: var(--util-label-cpu);
  font-weight: 700;
}

/* Memory utilization label — accessible text token (brand --accent fails AA). */
.memory-utilization-label {
  color: var(--util-label-mem);
  font-weight: 700;
}

/* Readonly input styling */
.readonly-input {
  background: var(--surface-alt);
}

/* Advanced family group spacing */
.advanced-family-group {
  margin-top: 30px;
}

/* Generate button styling */
.generate-btn {
  width: 100%;
  font-size: 1.2rem;
  padding: 20px;
}

/* Progress text styling */
.progress-text {
  text-align: center;
  margin-top: 10px;
}

/* Download section styling */
.download-section {
  margin-top: 20px;
  text-align: center;
}

/* Labeled clusters of download buttons (Results / AWS Pricing Calculator /
   Analysis) so the section reads as groups instead of a flat button run */
.download-groups {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 12px;
  margin-top: 8px;
  text-align: left;
}

.download-group {
  background: var(--surface-alt);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  padding: 10px 14px 12px;
}

.download-group-label {
  font-size: 0.72em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.download-group-btns {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* Success icon styling */
.success-icon {
  margin-right: 10px;
}

/* Usage statistics grid */
.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

/* Counter card base styling */
.counter-card {
  color: white;
  padding: 20px;
  border-radius: 12px;
  text-align: center;
}

/* Tool usage card specific styling */
.tool-usage-card {
  background: var(--grad-primary);
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

/* VMs processed card specific styling */
.vms-processed-card {
  background: var(--grad-accent);
  box-shadow: 0 4px 15px rgba(78, 205, 196, 0.3);
}

/* Counter number styling */
.counter-number {
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 10px;
}

/* Counter title styling */
.counter-title {
  font-size: 1.1rem;
  opacity: 0.9;
}

/* Counter subtitle styling */
.counter-subtitle {
  font-size: 0.9rem;
  opacity: 0.8;
  margin-top: 5px;
}
nav a {
  margin-right: 10px;
  padding: 3px 9px;
  text-decoration: none;
  color: white; /* Default link color */
  background-color: transparent;
  border-radius: 4px;
  transition:
    background-color 0.3s,
    color 0.3s;
}

nav a:visited {
  color: white; /* Prevent color change after visit */
}

nav a:hover {
  background-color: var(--nav-hover-bg);
  color: var(--nav-hover-text);
}

nav a.active {
  background-color: var(--nav-active-bg);
  color: var(--nav-active-text);
  font-weight: bold;
  border: 1px solid var(--border-mid);
}

/* ── CSV multiselect dropdown ──────────────────────────────────────────────────
   Excel is the primary one-click download; the flat CSV exports live behind a
   "CSV ▾" checklist rendered by js/base/downloads.js (renderCsvMenu). */
.csv-dropdown {
  position: relative;
  display: inline-block;
}
.csv-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 20;
  min-width: 220px;
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--border-slate);
  border-radius: 8px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
/* .csv-menu sets display:flex and is defined after the generic .hidden rule, so at
   equal specificity it would win and .hidden could never close the menu. Restate the
   hidden state on a compound selector so toggleCsvMenu()'s .hidden actually hides it. */
.csv-menu.hidden {
  display: none;
}
.csv-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 0.875em;
  color: var(--text);
  cursor: pointer;
}
.csv-menu-item:hover {
  background: var(--surface-tint);
}
.csv-menu-item input {
  cursor: pointer;
}
.csv-menu-go {
  margin-top: 4px;
  width: 100%;
}

/* ── Executive print report ───────────────────────────────────────────────────
   A one-page summary (built by js/base/charts.js → buildExecutiveReport) that
   lives hidden in the page as a direct child of <body>. Hidden on screen; on
   print, the "Print report" button adds .printing-report to <body>, which hides
   every other top-level element and reveals only the report. Scoping on that
   class means a plain Ctrl+P prints the page as seen, and other pages that share
   this stylesheet but carry no report never print blank. */
#executiveReportSection {
  display: none;
}
@media print {
  body.printing-report > *:not(#executiveReportSection) {
    display: none !important;
  }
  body.printing-report #executiveReportSection {
    display: block;
    /* The meter and every chart bar carry their value in a background fill, and
       browsers drop background graphics when printing by default — so without
       this the report prints as empty outlines, which is the one thing it must
       never do. Scoped to the report so ordinary printing is unaffected. */
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    /* Force the LIGHT tokens the report and its charts read, regardless of the
       on-screen theme — printing a dark surface wastes ink and reads poorly.
       Only the tokens actually used inside the report are redeclared here. */
    --surface: #ffffff;
    --surface-tint: #f8f9ff;
    --text: #333333;
    --text-body: #555555;
    --text-soft: #64748b;
    --text-faint: #94a3b8;
    --success-bg: #d4edda;
    --success-border: #c3e6cb;
    --good-strong: #15803d;
    --amber-strong: #d97706;
    --red-strong: #dc2626;
    --chart-bar: #4c63d2;
    --chart-context: #64748b;
    --border-slate-light: #e2e8f0;
    --heading-indigo: #2c3e8c;
  }
}

/* Guidance under the "Size against" selector. The warning state is used when
   the chosen utilization statistic has no matching column in the uploaded
   file, so the run would silently fall back for every row. */
.form-hint {
  display: block;
  margin-top: 4px;
  color: var(--text-soft);
  font-size: 0.82em;
  line-height: 1.45;
}
.form-hint.hint-warning {
  color: var(--amber-strong);
  font-weight: 600;
}