/* High-contrast, professional skin */
:root {
  /* Dark theme defaults */
  --bg: #0a0f1a;
  --panel: #0e1624;
  --panel-2: #101b2d;
  --input: #0b1320;
  --border: #2a3a55;
  --text: #f2f6ff;   /* very high contrast */
  --muted: #d7def2;  /* still bright enough for readability */
  --link: #c9dcff;
  --accent: #80b0ff;
  --accent-2: #9cc0ff;
  --ok: #3ed598;
  --warn: #ffcc66;
  --bad: #ff6b6b;
  --shadow: 0 10px 24px rgba(0,0,0,.35);
  --radius: 14px;
}

[data-theme="light"] {
  --bg: #f7f9ff;
  --panel: #ffffff;
  --panel-2: #f2f6ff;
  --input: #f8faff;
  --border: #ccdaf6;
  --text: #111a2e;   /* high contrast on light */
  --muted: #2a3a55;
  --link: #1f56ff;
  --accent: #2a66ff;
  --accent-2: #4794ff;
  --ok: #138d5a;
  --warn: #b78908;
  --bad: #c93434;
  --shadow: 0 10px 24px rgba(16,34,74,.12);
}

html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

.app { display: grid; grid-template-columns: 260px 1fr; min-height: 100vh; }
@media (max-width: 992px){ .app{ grid-template-columns: 1fr; } }

.sidebar {
  background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
  border-right: 1px solid var(--border);
  padding: 24px 18px;
  position: sticky; top: 0; height: 100vh;
}
.brand { display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.4px; font-size:20px; margin-bottom: 20px; }
.brand i { font-size:22px; color: var(--accent-2); }

.nav-section { margin-top: 14px; }
.nav-title { color: var(--text); opacity: .88; font-size: 12px; letter-spacing:.6px; text-transform: uppercase; margin: 12px 8px; }
.sidelink {
  display:flex; align-items:center; gap:10px;
  padding: 10px 12px; border-radius: 10px; color: var(--text); text-decoration: none;
}
.sidelink:hover { background: rgba(255,255,255,.08); }
.sidelink.active { background: rgba(128,176,255,.18); border: 1px solid rgba(128,176,255,.5); }

.main { display:flex; flex-direction: column; }
.topbar {
  display:flex; align-items:center; justify-content: space-between;
  padding: 16px 18px; position: sticky; top: 0; z-index: 2;
  background: linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,0));
  backdrop-filter: blur(6px);
}
.topbar-title { font-weight: 700; letter-spacing:.2px; }
.actions .toggle { border:1px solid var(--border); background: var(--panel); color: var(--text); }

.content { padding: 8px 14px 28px; }

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.strong { font-weight: 600; }

.section-header {
  display:flex; align-items:center; justify-content: space-between;
  padding: 10px 12px;
  background: linear-gradient(180deg, rgba(128,176,255,.12), rgba(0,0,0,0));
  border-radius: 10px;
  border: 1px solid var(--border);
}
.section-header h6, .section-header span { color: var(--text); }

.chart-wrap { position: relative; height: 360px; width: 100%; }

/* Metric cards */
.metric { display:flex; align-items:center; gap:14px; padding:16px; }
.metric-icon { width:42px; height:42px; display:grid; place-items:center; border-radius:12px; font-size:22px; }
.metric-icon.ok { background: rgba(255,255,255,.06); color: var(--bad); }
.metric-icon.warn { background: rgba(255,255,255,.06); color: var(--warn); }
.metric-icon.info { background: rgba(255,255,255,.06); color: var(--accent); }
.metric-title { font-size: 14px; font-weight: 600; color: var(--text); }
.metric-kpi { font-size: 26px; font-weight: 800; color: var(--text); }
.metric-help { font-size: 12px; color: var(--text); opacity: .9; }

/* Forms & buttons */
.form-label { color: var(--text); font-weight: 600; }
.form-control, .form-select { background: var(--input); border: 1px solid var(--border); color: var(--text); }
.form-control::placeholder { color: #c9d3ee; }
.form-control:focus, .form-select:focus { border-color: var(--accent); box-shadow: 0 0 0 .2rem rgba(128,176,255,.25); }

.btn-primary {
  background: var(--accent); border-color: var(--accent); color: #0b1220; font-weight: 700;
}
.btn-primary:hover { background: var(--accent-2); border-color: var(--accent-2); }
.btn-outline-light { color: var(--text); border-color: var(--border); }
.btn-outline-light:hover { border-color: var(--accent); background: rgba(128,176,255,.15); }

/* Tables */
.table { color: var(--text); }
.table thead th { color: var(--text); opacity: .9; border-color: var(--border); font-weight: 700; }
.table td, .table th { border-color: var(--border); }

/* Helper text */
.lead-strong { font-size: 16px; color: var(--text); }
.help { font-size: 12px; color: var(--text); opacity: .95; margin-top: 6px; }
.steps { padding-left: 16px; }
.steps li { margin-bottom: 6px; color: var(--text); }

.cf { white-space: pre-wrap; font-size: .92rem; background: var(--input); color: var(--text); padding: 12px; border-radius: 10px; border: 1px solid var(--border); }
.tag { display:inline-block; padding: 4px 8px; border: 1px solid var(--border); border-radius: 999px; }

/* --- High-contrast fixes for tables and section headers --- */

/* recent table and any .table headers */
.table thead th,
#recent-table thead th {
  color: var(--text) !important;            /* ensure bright text */
  opacity: 1 !important;                    /* kill any Bootstrap dimming */
  font-weight: 700;
  border-color: var(--border) !important;
}

/* sortable header state + arrows */
#recent-table thead th.sortable { cursor: pointer; user-select: none; }
#recent-table thead th.sorted-asc::after  { content: " \25B2"; color: var(--text); } /* ▲ */
#recent-table thead th.sorted-desc::after { content: " \25BC"; color: var(--text); } /* ▼ */

/* section header title + subtitle */
.section-header h6,
.section-header span {
  color: var(--text) !important;
  opacity: 1 !important;                    /* no faint subtitles */
}

/* badges read better on dark/light themes */
.badge.text-bg-danger,
.badge.text-bg-warning,
.badge.text-bg-success,
.badge.text-bg-secondary {
  color: #ffffff;
}

/* table row text contrast */
.table td {
  color: var(--text) !important;
  opacity: 0.98;
}

/* === Fix: make Recent Findings match the theme (no white panels) === */

/* Ensure panel is never white */
.panel {
  background: var(--panel) !important;
  border: 1px solid var(--border) !important;
}

/* Table inside panels inherits dark theme colors */
.panel .table {
  /* Bootstrap table CSS variables */
  --bs-table-color: var(--text);
  --bs-table-bg: var(--panel);
  --bs-table-border-color: var(--border);
  --bs-table-striped-bg: rgba(255,255,255,.06);
  --bs-table-striped-color: var(--text);
  --bs-table-hover-bg: rgba(128,176,255,.12);
  --bs-table-hover-color: var(--text);
  color: var(--text) !important;
  background-color: var(--panel) !important;
  border-color: var(--border) !important;
}

/* Headers high-contrast */
.panel .table thead th {
  color: var(--text) !important;
  background-color: var(--panel-2) !important;
  border-color: var(--border) !important;
  opacity: 1 !important;
  font-weight: 700;
}

/* Body rows and hover state */
.panel .table tbody tr {
  background-color: var(--panel) !important;
}
.panel .table tbody tr:hover {
  background-color: rgba(128,176,255,.12) !important; /* subtle hover */
}

/* Make the sortable arrows use theme color */
#recent-table thead th.sorted-asc::after,
#recent-table thead th.sorted-desc::after {
  color: var(--text);
}

/* Section header text must not be muted */
.section-header h6,
.section-header span {
  color: var(--text) !important;
  opacity: 1 !important;
}

:root {
  /* existing variables… */
  --aws-color: #80b0ff;
  --azure-color: #66c2ff;
  --gcp-color: #f0b429;
  --total-color: #d896ff;
}
[data-theme="light"] {
  /* adjust for light mode… */
  --aws-color: #3454ff;
  --azure-color: #007fff;
  --gcp-color: #d99000;
  --total-color: #8c5acf;
}