/* ═══════════════════════════════════════════════════════════════════════════
 dashboard.-new.css – Organisational Health Survey Dashboard
 ═══════════════════════════════════════════════════════════════════════════ */

/* ── Reset & tokens ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
 /* Brand — professional navy/blue palette */
 --brand-primary: #1D4ED8;
 --brand-secondary: #1E40AF;
 --brand-accent: #0369A1;

 /* Section colours — aligned with org framework diagram */
 --col-purpose: #1E3A5F;
 --col-talent: #1D6A8A;
 --col-process: #5B21B6;
 --col-structure: #0D6B56;
 --col-enablers: #9D174D;

 /* KPI colours — professional, muted */
 --kpi-blue: #1D4ED8;
 --kpi-green: #047857;
 --kpi-purple: #5B21B6;
 --kpi-amber: #B45309;
 --kpi-teal: #0369A1;
 --kpi-red: #B91C1C;

 /* Neutrals – light theme */
 --bg-canvas: #F1F5F9;
 --bg-surface: #FFFFFF;
 --bg-surface2: #F8FAFC;
 --border: #E2E8F0;
 --text-primary: #0F172A;
 --text-secondary:#475569;
 --text-muted: #94A3B8;

 /* Sidebar */
 --sidebar-bg: #0C1524;
 --sidebar-text: #CBD5E1;
 --sidebar-hover:#1E293B;
 --sidebar-active:#1D4ED8;
 --sidebar-w: 240px;

 /* Misc */
 --radius-sm: 6px;
 --radius-md: 10px;
 --radius-lg: 14px;
 --shadow-sm: 0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.04);
 --shadow-md: 0 4px 12px rgba(0,0,0,.08);
 --shadow-lg: 0 8px 24px rgba(0,0,0,.10);
 --transition: .18s ease;
}

/* Dark theme */
[data-theme="dark"] {
 --bg-canvas: #0B1120;
 --bg-surface: #111827;
 --bg-surface2: #1F2937;
 --border: #1F2937;
 --text-primary: #F1F5F9;
 --text-secondary:#94A3B8;
 --text-muted: #475569;
 --sidebar-bg: #070D1A;
 --sidebar-hover:#1E293B;
}

html { scroll-behavior: smooth; }

body {
 font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
 background: var(--bg-canvas);
 color: var(--text-primary);
 display: flex;
 min-height: 100vh;
 font-size: 14px;
 line-height: 1.6;
}

/* ═══════════════════ SIDEBAR ═══════════════════ */
.sidebar {
 width: var(--sidebar-w);
 background: var(--sidebar-bg);
 display: flex;
 flex-direction: column;
 position: fixed;
 top: 0; left: 0;
 height: 100vh;
 z-index: 200;
 transition: transform var(--transition);
 overflow-y: auto;
}

.sidebar-logo {
 display: flex;
 align-items: center;
 gap: 10px;
 padding: 22px 20px 18px;
 border-bottom: 1px solid rgba(255,255,255,.06);
}
.logo-mark { color: var(--brand-primary); font-size: 16px; }
.logo-text {
 color: #F1F5F9;
 font-weight: 600;
 font-size: 15px;
 letter-spacing: .3px;
}

/* Org selector */
.org-selector-wrap {
 padding: 14px 14px 10px;
 border-bottom: 1px solid rgba(255,255,255,.06);
}
.org-selector-label {
 display: flex;
 align-items: center;
 gap: 6px;
 color: var(--text-muted);
 font-size: 10px;
 font-weight: 700;
 letter-spacing: .8px;
 text-transform: uppercase;
 margin-bottom: 6px;
}
.org-selector-label svg { width: 13px; height: 13px; fill: currentColor; flex-shrink: 0; }
.org-selector-control {
 position: relative;
}
.org-selector-control select {
 width: 100%;
 appearance: none;
 -webkit-appearance: none;
 background: rgba(255,255,255,.07);
 border: 1px solid rgba(255,255,255,.12);
 border-radius: var(--radius-sm);
 color: #F1F5F9;
 font-size: 12px;
 font-weight: 500;
 padding: 7px 28px 7px 10px;
 cursor: pointer;
 outline: none;
 transition: border-color var(--transition), background var(--transition);
}
.org-selector-control select:hover,
.org-selector-control select:focus {
 border-color: var(--brand-primary);
 background: rgba(255,255,255,.11);
}
.org-selector-control select option { background: #1e2536; color: #F1F5F9; }
.select-caret {
 position: absolute;
 right: 8px;
 top: 50%;
 transform: translateY(-50%);
 width: 16px;
 height: 16px;
 fill: var(--text-muted);
 pointer-events: none;
}

.sidebar-nav {
 flex: 1;
 padding: 12px 8px;
 display: flex;
 flex-direction: column;
 gap: 2px;
}

.nav-item {
 display: flex;
 align-items: center;
 gap: 10px;
 padding: 9px 12px;
 border-radius: var(--radius-sm);
 color: var(--sidebar-text);
 text-decoration: none;
 font-size: 13px;
 font-weight: 500;
 cursor: pointer;
 transition: background var(--transition), color var(--transition);
}
.nav-item svg { width: 18px; height: 18px; fill: currentColor; flex-shrink: 0; }
.nav-item:hover { background: var(--sidebar-hover); color: #F1F5F9; }
.nav-item.active { background: var(--sidebar-active); color: #fff; }

.nav-divider {
 height: 1px;
 background: rgba(255,255,255,.06);
 margin: 8px 4px;
}

.sidebar-footer {
 padding: 12px 20px;
 color: var(--text-muted);
 font-size: 11px;
 border-top: 1px solid rgba(255,255,255,.06);
}

/* ═══════════════════ MAIN ═══════════════════ */
.main {
 margin-left: var(--sidebar-w);
 flex: 1;
 display: flex;
 flex-direction: column;
 min-height: 100vh;
}

/* ── Top bar ── */
.topbar {
 position: sticky;
 top: 0;
 z-index: 100;
 background: var(--bg-surface);
 border-bottom: 1px solid var(--border);
 display: flex;
 align-items: center;
 gap: 16px;
 padding: 0 24px;
 height: 60px;
 box-shadow: var(--shadow-sm);
}

.sidebar-toggle {
 display: none;
 flex-direction: column;
 gap: 5px;
 background: none;
 border: none;
 cursor: pointer;
 padding: 4px;
}
.sidebar-toggle span {
 display: block;
 width: 22px; height: 2px;
 background: var(--text-primary);
 border-radius: 2px;
}

.topbar-title { flex: 1; }
.topbar-title h1 { font-size: 16px; font-weight: 600; line-height: 1.2; color: var(--text-primary); }
.topbar-title p { font-size: 12px; color: var(--text-muted); }

.topbar-actions { display: flex; align-items: center; gap: 10px; }

.badge { 
 display: inline-flex; align-items: center;
 padding: 3px 10px; border-radius: 99px;
 font-size: 11px; font-weight: 600; letter-spacing: .3px;
}
.badge-live { background: #DCFCE7; color: #166534; }
[data-theme="dark"] .badge-live { background: #14532D; color: #86EFAC; }

.btn-icon {
 width: 34px; height: 34px;
 border: 1px solid var(--border);
 border-radius: var(--radius-sm);
 background: var(--bg-surface2);
 display: flex; align-items: center; justify-content: center;
 cursor: pointer;
 transition: background var(--transition);
}
.btn-icon svg { width: 18px; height: 18px; fill: var(--text-secondary); }
.btn-icon:hover { background: var(--bg-canvas); }

/* ── Content ── */
.content { flex: 1; padding: 24px; }

.page { display: none; }
.page.active { display: block; }

/* ═══════════════════ KPI CARDS ═══════════════════ */
.kpi-grid {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
 gap: 16px;
 margin-bottom: 24px;
}

.kpi-card {
 background: var(--bg-surface);
 border: 1px solid var(--border);
 border-radius: var(--radius-md);
 padding: 16px 18px;
 display: flex;
 align-items: flex-start;
 gap: 14px;
 box-shadow: var(--shadow-sm);
 transition: box-shadow var(--transition), transform var(--transition);
 border-left: 3px solid transparent;
}
.kpi-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }

.kpi-icon {
 width: 40px; height: 40px;
 border-radius: 8px;
 display: flex; align-items: center; justify-content: center;
 flex-shrink: 0;
 opacity: 0.85;
}
.kpi-icon svg { width: 20px; height: 20px; fill: #fff; }
.kpi-blue { background: var(--kpi-blue); }
.kpi-green { background: var(--kpi-green); }
.kpi-purple { background: var(--kpi-purple); }
.kpi-amber { background: var(--kpi-amber); }
.kpi-teal { background: var(--kpi-teal); }
.kpi-red { background: var(--kpi-red); }

.kpi-title, .kpi-label { font-size: 11px; color: var(--text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: .6px; margin-bottom: 4px; }
.kpi-value { font-size: 22px; font-weight: 800; color: var(--text-primary); line-height: 1; word-break: break-word; }
.kpi-value-sm { font-size: 16px; font-weight: 700; }

/* ═══════════════════ CHART CARDS ═══════════════════ */
.charts-row {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 16px;
 align-items: start;
 margin-bottom: 24px;
}
.chart-card {
 background: var(--bg-surface);
 border: 1px solid var(--border);
 border-radius: var(--radius-md);
 padding: 20px;
 box-shadow: var(--shadow-sm);
 margin-bottom: 0;
}
.chart-card.mb-4 { margin-bottom: 24px; }
.chart-card-lg { /* full column */ }

.chart-card-header { margin-bottom: 16px; }
.chart-card-header h3 { font-size: 15px; font-weight: 700; }
.chart-subtitle { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

.chart-wrapper { position: relative; }
.chart-sm { height: 200px; }
.chart-md { height: 280px; }
.chart-lg { height: 360px; }

/* ═══════════════════ AI CARDS ═══════════════════ */
.ai-card {
 background: var(--bg-surface);
 border: 1px solid var(--border);
 border-radius: var(--radius-md);
 box-shadow: var(--shadow-sm);
 overflow: hidden;
 margin-bottom: 24px;
}
.ai-card-header {
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 14px 20px;
 border-bottom: 1px solid var(--border);
 background: var(--bg-surface2);
}
.ai-badge {
 display: flex;
 align-items: center;
 gap: 6px;
 font-size: 11px;
 font-weight: 700;
 color: var(--brand-primary);
 text-transform: uppercase;
 letter-spacing: 0.7px;
}
.ai-badge svg { width: 14px; height: 14px; fill: currentColor; display: block; }

.ai-card-body { padding: 20px; }

/* Scope-bar containers: strip default padding — bar has its own */
#swotAiBody,
#gapAiScope { padding: 0; }
#swotAiBody:empty,
#gapAiScope:empty { display: none; }

.ai-placeholder { color: var(--text-secondary); font-size: 13px; }
.ai-placeholder-text { color: var(--text-secondary); font-size: 13px; padding: 0 0 8px 0; }

.ai-generated h4 {
 font-size: 13px;
 font-weight: 700;
 color: var(--text-primary);
 margin: 16px 0 6px;
 text-transform: uppercase;
 letter-spacing: .5px;
 border-bottom: 1px solid var(--border);
 padding-bottom: 4px;
}
.ai-generated h4:first-child { margin-top: 0; }
.ai-generated p { font-size: 13px; line-height: 1.65; color: var(--text-secondary); margin-bottom: 8px; }
.px-4 { padding-left: 20px; padding-right: 20px; }
.pb-2 { padding-bottom: 12px; }

/* ═══════════════════ SECTION PAGE ═══════════════════ */
.section-hero {
 display: flex;
 align-items: flex-start;
 justify-content: space-between;
 gap: 20px;
 margin-bottom: 24px;
}
.section-hero-info h2 { font-size: 22px; font-weight: 800; }
.section-hero-info p { font-size: 13px; color: var(--text-secondary); margin-top: 4px; }

/* Controls area for section hero (Category / Sub Category selects) */
.section-hero-controls {
	display: flex;
	align-items: center;
	gap: 12px;
}
.section-hero-controls .org-selector-label { margin: 0; font-size: 12px; text-transform: none; color: var(--text-secondary); }
.section-hero-controls .org-selector-control { min-width: 160px; }
.section-hero-controls select { width: 160px; padding: 8px 10px; font-size: 13px; }

.section-score-badge {
 padding: 10px 20px;
 border-radius: var(--radius-md);
 color: #fff;
 text-align: center;
 min-width: 100px;
 flex-shrink: 0;
}

/* Combined pillars page — separator between sections */
.section-block + .section-block {
 border-top: 1px solid var(--border);
 padding-top: 2rem;
 margin-top: 0.5rem;
}
.section-score-badge .score-num { font-size: 28px; font-weight: 800; line-height: 1; }
.section-score-badge .score-label { font-size: 10px; font-weight: 500; opacity: .85; text-transform: uppercase; letter-spacing: .5px; }

/* Question list within a section */
.questions-list { display: flex; flex-direction: column; gap: 12px; }

.question-item {
 background: var(--bg-surface);
 border: 1px solid var(--border);
 border-radius: var(--radius-md);
 padding: 16px 18px;
 box-shadow: var(--shadow-sm);
 transition: box-shadow var(--transition);
}
.question-item:hover { box-shadow: var(--shadow-md); }

.question-header {
 display: flex;
 align-items: flex-start;
 gap: 14px;
 margin-bottom: 10px;
}
.question-score {
 font-size: 20px;
 font-weight: 800;
 min-width: 48px;
 text-align: center;
 line-height: 1;
}
.question-text { font-size: 13px; font-weight: 500; flex: 1; }
.question-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

/* Stacked bar */
.rating-bar {
 display: flex;
 height: 8px;
 border-radius: 99px;
 overflow: hidden;
 gap: 1px;
 margin-top: 8px;
}
.rating-bar-seg { height: 100%; transition: width .3s ease; }
.seg-1 { background: #EF4444; }
.seg-2 { background: #F59E0B; }
.seg-3 { background: #3B82F6; }
.seg-4 { background: #10B981; }

.rating-legend {
 display: flex;
 gap: 12px;
 margin-top: 6px;
 flex-wrap: wrap;
}
.legend-item {
 display: flex;
 align-items: center;
 gap: 4px;
 font-size: 10px;
 color: var(--text-muted);
}
.legend-dot { width: 8px; height: 8px; border-radius: 50%; }

/* Notes under a question */
.question-notes { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.note-chip {
 display: flex;
 gap: 8px;
 align-items: flex-start;
 margin-bottom: 8px;
 font-size: 12px;
 color: var(--text-secondary);
 line-height: 1.5;
}
.note-chip::before {
 content: '"';
 font-size: 20px;
 color: var(--brand-primary);
 line-height: .8;
 flex-shrink: 0;
}

/* ═══════════════════ SWOT ═══════════════════ */
.swot-grid {
 display: grid;
 grid-template-columns: 1fr 1fr;
 grid-template-rows: 1fr 1fr;
 gap: 16px;
}
.swot-card {
 background: var(--bg-surface);
 border-radius: var(--radius-lg);
 padding: 20px;
 border: 1px solid var(--border);
 box-shadow: var(--shadow-sm);
 position: relative;
 overflow: hidden;
 min-height: 200px;
}
.swot-card::before {
 content: '';
 position: absolute;
 top: 0; left: 0; right: 0;
 height: 4px;
}
.swot-s::before { background: #047857; }
.swot-w::before { background: #B91C1C; }
.swot-o::before { background: #1D4ED8; }
.swot-t::before { background: #B45309; }

.swot-label {
 position: absolute;
 top: 12px; right: 16px;
 font-size: 32px;
 font-weight: 900;
 opacity: .06;
 color: var(--text-primary);
 line-height: 1;
}
.swot-card h4 { font-size: 14px; font-weight: 700; margin-bottom: 12px; }
.swot-body { font-size: 13px; color: var(--text-secondary); line-height: 1.7; }
.swot-placeholder { color: var(--text-muted); font-size: 12px; font-style: italic; }

.swot-item {
 display: flex;
 gap: 8px;
 align-items: flex-start;
 margin-bottom: 8px;
}
.swot-bullet { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; margin-top: 6px; }
.swot-s .swot-bullet { background: #047857; }
.swot-w .swot-bullet { background: #B91C1C; }
.swot-o .swot-bullet { background: #1D4ED8; }
.swot-t .swot-bullet { background: #B45309; }

/* ═══════════════════ GAP ANALYSIS ═══════════════════ */
.table-wrapper { overflow-x: auto; }
.data-table {
 width: 100%;
 border-collapse: collapse;
 font-size: 12px;
}
.data-table th {
 text-align: left;
 padding: 10px 12px;
 background: var(--bg-surface2);
 border-bottom: 2px solid var(--border);
 font-weight: 700;
 color: var(--text-secondary);
 text-transform: uppercase;
 font-size: 11px;
 letter-spacing: .5px;
 white-space: nowrap;
}
.data-table td {
 padding: 10px 12px;
 border-bottom: 1px solid var(--border);
 vertical-align: middle;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: var(--bg-surface2); }

.heat-bar {
 display: flex;
 align-items: center;
 gap: 6px;
}
.heat-fill {
 height: 8px;
 border-radius: 99px;
 min-width: 4px;
}
.heat-critical { background: #B91C1C; }
.heat-high { background: #B45309; }
.heat-medium { background: #1D4ED8; }
.heat-low { background: #10B981; }

.tag-section {
 display: inline-block;
 padding: 2px 8px;
 border-radius: 99px;
 font-size: 10px;
 font-weight: 600;
 letter-spacing: .3px;
}
.tag-Purpose { background: #EFF6FF; color: #1E3A5F; }
.tag-Talent { background: #F0F9FF; color: #1D6A8A; }
.tag-Process { background: #F5F3FF; color: #5B21B6; }
.tag-Structure { background: #F0FDF4; color: #0D6B56; }
.tag-Enablers { background: #FFF0F6; color: #9D174D; }

[data-theme="dark"] .tag-Purpose { background: #1e3a5f40; color: #93C5FD; }
[data-theme="dark"] .tag-Talent { background: #1d6a8a40; color: #7DD3FC; }
[data-theme="dark"] .tag-Process { background: #5b21b640; color: #C4B5FD; }
[data-theme="dark"] .tag-Structure { background: #0d6b5640; color: #6EE7B7; }
[data-theme="dark"] .tag-Enablers { background: #9d174d40; color: #F9A8D4; }

/* ═══════════════════ NOTES ═══════════════════ */
.notes-toolbar {
 display: flex;
 align-items: center;
 gap: 12px;
 margin-bottom: 20px;
 flex-wrap: wrap;
}
.search-box {
 display: flex;
 align-items: center;
 gap: 8px;
 background: var(--bg-surface);
 border: 1px solid var(--border);
 border-radius: var(--radius-sm);
 padding: 0 12px;
 flex: 1;
 min-width: 200px;
}
.search-box svg { width: 16px; height: 16px; fill: var(--text-muted); flex-shrink: 0; }
.search-box input {
 border: none;
 background: none;
 padding: 8px 0;
 font-size: 13px;
 color: var(--text-primary);
 width: 100%;
 outline: none;
}
.filter-select {
 padding: 8px 12px;
 background: var(--bg-surface);
 border: 1px solid var(--border);
 border-radius: var(--radius-sm);
 font-size: 12px;
 color: var(--text-primary);
 cursor: pointer;
 outline: none;
}

.notes-grid {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
 gap: 14px;
}

.note-card {
 background: var(--bg-surface);
 border: 1px solid var(--border);
 border-radius: var(--radius-md);
 padding: 16px;
 box-shadow: var(--shadow-sm);
 transition: box-shadow var(--transition);
 position: relative;
}
.note-card:hover { box-shadow: var(--shadow-md); }
.note-card-section {
 font-size: 10px;
 font-weight: 700;
 text-transform: uppercase;
 letter-spacing: .5px;
 margin-bottom: 6px;
}
.note-card-question {
 font-size: 11px;
 color: var(--text-muted);
 margin-bottom: 10px;
 font-style: italic;
 line-height: 1.4;
}
.note-card-text {
 font-size: 13px;
 color: var(--text-primary);
 line-height: 1.65;
}
.note-card::before {
 content: '"';
 position: absolute;
 top: 8px;
 right: 14px;
 font-size: 48px;
 line-height: 1;
 opacity: .06;
 font-family: Georgia, serif;
 color: var(--brand-primary);
}

/* ═══════════════════ QUESTION RANK LIST ═══════════════════ */
.question-rank-list {
 display: flex;
 flex-direction: column;
 gap: 8px;
 padding: 4px 0;
 max-height: 340px;
 overflow-y: auto;
}
.rank-item {
 display: flex;
 align-items: center;
 gap: 12px;
 padding: 10px 12px;
 background: var(--bg-surface2);
 border-radius: var(--radius-sm);
 border: 1px solid var(--border);
}
.rank-num {
 font-size: 12px;
 font-weight: 700;
 color: var(--text-muted);
 min-width: 20px;
}
.rank-score {
 font-size: 16px;
 font-weight: 800;
 min-width: 36px;
 text-align: center;
}
.rank-text { font-size: 12px; flex: 1; line-height: 1.4; }

/* ═══════════════════ MODAL ═══════════════════ */
.modal-overlay {
 position: fixed;
 inset: 0;
 background: rgba(0,0,0,.5);
 z-index: 500;
 display: flex;
 align-items: center;
 justify-content: center;
 backdrop-filter: blur(4px);
}
.modal {
 background: var(--bg-surface);
 border-radius: var(--radius-lg);
 padding: 28px;
 width: 420px;
 max-width: 95vw;
 box-shadow: var(--shadow-lg);
}
.modal-title { font-size: 18px; font-weight: 800; margin-bottom: 8px; }
.modal-desc { font-size: 13px; color: var(--text-secondary); margin-bottom: 20px; }
.modal-field { margin-bottom: 14px; }
.modal-field label { display: block; font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; }
.modal-field input,
.modal-field select {
 width: 100%;
 padding: 9px 12px;
 background: var(--bg-surface2);
 border: 1px solid var(--border);
 border-radius: var(--radius-sm);
 font-size: 13px;
 color: var(--text-primary);
 outline: none;
}
.modal-field input:focus,
.modal-field select:focus { border-color: var(--brand-primary); }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }

.btn-primary {
 padding: 9px 18px;
 background: var(--brand-primary);
 color: #fff;
 border: none;
 border-radius: var(--radius-sm);
 font-size: 13px;
 font-weight: 600;
 cursor: pointer;
}
.btn-primary:hover { background: var(--brand-secondary); }

.btn-secondary {
 padding: 9px 18px;
 background: var(--bg-canvas);
 color: var(--text-primary);
 border: 1px solid var(--border);
 border-radius: var(--radius-sm);
 font-size: 13px;
 font-weight: 600;
 cursor: pointer;
}

/* ═══════════════════ FAB ═══════════════════ */
.fab {
 position: fixed;
 bottom: 28px;
 right: 28px;
 width: 52px; height: 52px;
 border-radius: 50%;
 background: var(--brand-primary);
 border: none;
 cursor: pointer;
 display: flex;
 align-items: center;
 justify-content: center;
 box-shadow: var(--shadow-lg);
 z-index: 300;
 transition: background var(--transition), transform var(--transition);
}
.fab svg { width: 24px; height: 24px; fill: #fff; }
.fab:hover { background: var(--brand-secondary); transform: scale(1.08); }

/* ═══════════════════ STATIC SUMMARY ═══════════════════ */
.static-summary { margin-top: 16px; }
.summary-section {
 margin-bottom: 14px;
 padding: 12px 14px;
 background: var(--bg-surface2);
 border-radius: var(--radius-sm);
 border-left: 3px solid var(--brand-primary);
}
.summary-section h5 { font-size: 13px; font-weight: 700; margin-bottom: 4px; }
.summary-section p { font-size: 12px; color: var(--text-secondary); line-height: 1.6; }

/* Loading spinner */
.spinner {
 display: inline-block;
 width: 18px; height: 18px;
 border: 2px solid var(--border);
 border-top-color: var(--brand-primary);
 border-radius: 50%;
 animation: spin .7s linear infinite;
 margin-right: 8px;
 vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* AI generated content */
.ai-generated {
 font-size: 13px;
 line-height: 1.75;
 color: var(--text-primary);
}
.ai-generated h4 { font-size: 14px; font-weight: 700; margin: 12px 0 6px; }
.ai-generated ul { padding-left: 20px; }
.ai-generated li { margin-bottom: 4px; }

/* Misc helpers */
.mt-4 { margin-top: 24px; }
.mb-4 { margin-bottom: 24px; }

/* Score colouring */
.score-critical { color: #EF4444; }
.score-low { color: #F59E0B; }
.score-medium { color: #3B82F6; }
.score-high { color: #10B981; }

/* ═══════════════════ RESPONSIVE ═══════════════════ */
@media (max-width: 900px) {
 .sidebar { transform: translateX(-100%); }
 .sidebar.open { transform: translateX(0); }
 .main { margin-left: 0; }
 .sidebar-toggle { display: flex; }
 .charts-row { grid-template-columns: 1fr; }
 .swot-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
 .kpi-grid { grid-template-columns: 1fr 1fr; }
 .content { padding: 16px; }
}

/* ═══════════════════ AI REGEN BUTTON ═══════════════════ */
.ai-regen-btn {
 display: inline-flex;
 align-items: center;
 gap: 5px;
 padding: 5px 12px;
 font-size: 11px;
 font-weight: 600;
 color: var(--brand-primary);
 background: transparent;
 border: 1px solid var(--brand-primary);
 border-radius: 6px;
 cursor: pointer;
 letter-spacing: .3px;
 transition: background .15s, color .15s;
}
.ai-regen-btn:hover { background: var(--brand-primary); color: #fff; }
.ai-regen-btn svg { flex-shrink: 0; }

/* ═══════════════════ AI LOADING STATE ═══════════════════ */
.ai-loading {
 display: flex;
 align-items: center;
 gap: 10px;
 padding: 16px;
 color: var(--text-secondary);
 font-size: 13px;
}
.swot-loading {
 display: flex;
 align-items: center;
 gap: 8px;
 color: var(--text-muted);
 font-size: 12px;
 padding: 8px 4px;
}

/* ═══════════════════ AI EXEC SUMMARY ═══════════════════ */
.ai-exec-summary { padding: 4px 0; }
.ai-exec-headline {
 display: flex;
 align-items: flex-start;
 gap: 14px;
 margin-bottom: 20px;
 padding-bottom: 16px;
 border-bottom: 1px solid var(--border);
}
.ai-headline-text {
 font-size: 17px;
 font-weight: 700;
 color: var(--text-primary);
 line-height: 1.4;
 flex: 1;
}
.ai-maturity-badge {
 flex-shrink: 0;
 font-size: 10px;
 font-weight: 700;
 padding: 4px 10px;
 border-radius: 20px;
 text-transform: uppercase;
 letter-spacing: .6px;
 margin-top: 3px;
}
.ai-maturity-badge.ai-maturity-early,
.ai-maturity-badge.ai-maturity-low { background: #FEF2F2; color: #B91C1C; }
.ai-maturity-badge.ai-maturity-developing,
.ai-maturity-badge.ai-maturity-emerging { background: #FFFBEB; color: #B45309; }
.ai-maturity-badge.ai-maturity-established,
.ai-maturity-badge.ai-maturity-moderate { background: #EFF6FF; color: #1D4ED8; }
.ai-maturity-badge.ai-maturity-advanced,
.ai-maturity-badge.ai-maturity-high { background: #F0FDF4; color: #047857; }
.ai-exec-grid {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 24px;
 margin-bottom: 16px;
}
@media (max-width: 720px) { .ai-exec-grid { grid-template-columns: 1fr; } }
.ai-section-label {
 font-size: 11px;
 font-weight: 700;
 color: var(--text-muted);
 text-transform: uppercase;
 letter-spacing: .8px;
 margin: 0 0 10px;
}
.ai-findings-list { margin: 0; padding-left: 18px; }
.ai-findings-list li { font-size: 13px; color: var(--text-secondary); line-height: 1.6; margin-bottom: 6px; }
.ai-priorities-list { display: flex; flex-direction: column; gap: 8px; }
.ai-priority-item {
 display: flex;
 align-items: flex-start;
 gap: 10px;
 font-size: 13px;
 color: var(--text-secondary);
 line-height: 1.5;
}
.ai-priority-num {
 flex-shrink: 0;
 width: 20px;
 height: 20px;
 border-radius: 50%;
 background: var(--brand-primary);
 color: #fff;
 font-size: 10px;
 font-weight: 700;
 display: flex;
 align-items: center;
 justify-content: center;
 margin-top: 1px;
}
.ai-exec-outlook {
 display: flex;
 align-items: flex-start;
 gap: 10px;
 padding: 12px 16px;
 background: var(--bg-surface2);
 border-left: 3px solid var(--brand-primary);
 border-radius: 0 6px 6px 0;
 font-size: 13px;
 color: var(--text-secondary);
 line-height: 1.6;
}
.ai-outlook-icon { color: var(--brand-primary); flex-shrink: 0; margin-top: 1px; }

/* ═══════════════════ AI GAP OUTPUT ═══════════════════ */
.ai-gap-output { padding: 4px 0; }
.ai-gap-priorities { display: flex; flex-direction: column; gap: 12px; }
.ai-gap-priority {
 display: flex;
 align-items: flex-start;
 gap: 12px;
 padding: 12px;
 background: var(--bg-surface2);
 border-radius: 8px;
 border: 1px solid var(--border);
}
.ai-gap-rank {
 flex-shrink: 0;
 font-size: 12px;
 font-weight: 700;
 color: var(--brand-primary);
 width: 28px;
 text-align: center;
}
.ai-gap-content { flex: 1; min-width: 0; }
.ai-gap-header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.ai-gap-header strong { font-size: 13px; color: var(--text-primary); }
.ai-gap-score { font-size: 12px; color: var(--text-muted); }
.ai-gap-delta { font-size: 11px; font-weight: 600; color: #B91C1C; background: #FEF2F2; padding: 1px 6px; border-radius: 4px; }
.ai-gap-cause, .ai-gap-action { font-size: 12px; color: var(--text-secondary); margin: 3px 0; line-height: 1.5; }
.ai-gap-badge {
 font-size: 10px;
 font-weight: 600;
 padding: 2px 8px;
 border-radius: 10px;
 text-transform: capitalize;
}
.ai-plan-list { display: flex; flex-direction: column; gap: 8px; }
.ai-plan-row {
 display: flex;
 align-items: flex-start;
 gap: 10px;
 padding: 8px 12px;
 background: var(--bg-surface2);
 border-radius: 6px;
}
.ai-plan-content { flex: 1; font-size: 13px; color: var(--text-primary); line-height: 1.5; }
.ai-plan-content strong { display: block; }
.ai-plan-when, .ai-plan-owner { font-size: 11px; color: var(--text-muted); margin-right: 10px; }
.ai-quick-wins { padding-left: 18px; margin: 0; }
.ai-quick-wins li { font-size: 13px; color: var(--text-secondary); line-height: 1.6; margin-bottom: 4px; }
.ai-metrics { display: flex; flex-direction: column; gap: 6px; }
.ai-metric-row {
 display: flex;
 align-items: center;
 gap: 12px;
 font-size: 13px;
 padding: 6px 0;
 border-bottom: 1px solid var(--border);
}
.ai-metric-row strong { color: var(--text-primary); flex: 1; }
.ai-metric-row span { color: var(--text-secondary); font-size: 12px; }
.ai-metric-by { font-size: 11px; color: var(--text-muted); }
.ai-investment-card {
 margin-top: 16px;
 padding: 14px 16px;
 background: var(--bg-surface2);
 border: 1px solid var(--border);
 border-radius: 8px;
}
.ai-investment-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; margin-top: 8px; }
.ai-investment-grid > div { font-size: 13px; }
.ai-investment-grid strong { display: block; font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 3px; }
.ai-investment-grid span { color: var(--text-primary); }
.ai-budget-band { background: #EFF6FF; color: #1D4ED8; font-weight: 600; padding: 2px 8px; border-radius: 4px; }
.ai-inv-notes { grid-column: 1 / -1; color: var(--text-secondary); font-size: 12px; }

/* ═══════════════════ AI NOTES SYNTHESIS ═══════════════════ */
.ai-notes-synthesis { padding: 4px 0; }
.ai-synthesis-summary {
 display: flex;
 gap: 10px;
 align-items: flex-start;
 padding: 12px 16px;
 background: linear-gradient(135deg, var(--bg-surface2), var(--bg-surface));
 border-left: 3px solid var(--brand-primary);
 border-radius: 0 8px 8px 0;
 font-size: 14px;
 line-height: 1.6;
 color: var(--text-primary);
 font-weight: 500;
 margin-bottom: 4px;
}
.ai-summary-glyph { color: var(--brand-primary); flex-shrink: 0; }
.ai-themes-grid { display: flex; flex-direction: column; gap: 12px; }
.ai-theme-card {
 padding: 14px 16px;
 border: 1px solid var(--border);
 border-radius: 8px;
 background: var(--bg-surface2);
}
.ai-theme-header {
 display: flex;
 align-items: center;
 gap: 8px;
 flex-wrap: wrap;
 margin-bottom: 6px;
}
.ai-sentiment-dot { font-size: 14px; }
.ai-theme-name { font-size: 13px; color: var(--text-primary); }
.ai-theme-pillar { font-size: 11px; font-weight: 600; }
.ai-sentiment-label { font-size: 10px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; margin-left: auto; }
.ai-theme-summary { font-size: 13px; color: var(--text-secondary); line-height: 1.6; margin: 0 0 8px; }
.ai-quote {
 margin: 4px 0;
 padding: 6px 12px;
 border-left: 2px solid var(--border);
 font-size: 12px;
 color: var(--text-muted);
 font-style: italic;
 line-height: 1.5;
}
.ai-concerns-list, .ai-signals-list, .ai-actions-list { display: flex; flex-direction: column; gap: 8px; }
.ai-concern-row, .ai-signal-row {
 display: flex;
 align-items: flex-start;
 gap: 10px;
 font-size: 13px;
 color: var(--text-secondary);
 line-height: 1.5;
 padding: 8px 12px;
 background: var(--bg-surface2);
 border-radius: 6px;
}
.ai-concern-freq {
 flex-shrink: 0;
 font-size: 9px;
 font-weight: 700;
 padding: 2px 6px;
 border-radius: 4px;
 text-transform: uppercase;
 letter-spacing: .5px;
 margin-top: 2px;
}
.ai-freq-high { background: #FEF2F2; color: #B91C1C; }
.ai-freq-medium { background: #FFFBEB; color: #B45309; }
.ai-freq-low { background: #F0FDF4; color: #047857; }
.ai-concern-pillar, .ai-signal-pillar {
 display: inline-block;
 margin-left: 8px;
 font-size: 10px;
 font-weight: 600;
 color: var(--text-muted);
 background: var(--bg-surface);
 border-radius: 4px;
 padding: 1px 6px;
}
.ai-leverageable-tag {
 display: inline-block;
 margin-left: 8px;
 font-size: 10px;
 font-weight: 700;
 color: #047857;
 background: #F0FDF4;
 border-radius: 4px;
 padding: 1px 6px;
}
.ai-signal-icon { color: #10B981; flex-shrink: 0; font-weight: 700; }
.ai-action-card {
 padding: 12px 14px;
 border-left: 3px solid #1D4ED8;
 background: var(--bg-surface2);
 border-radius: 0 8px 8px 0;
}
.ai-action-header {
 display: flex;
 align-items: center;
 gap: 8px;
 flex-wrap: wrap;
 margin-bottom: 6px;
}
.ai-action-tag {
 font-size: 10px;
 font-weight: 700;
 padding: 2px 8px;
 border-radius: 10px;
 text-transform: capitalize;
}
.ai-action-timeline { font-size: 11px; color: var(--text-muted); }
.ai-action-owner { font-size: 11px; color: var(--text-muted); }
.ai-action-text { font-size: 13px; color: var(--text-secondary); line-height: 1.6; margin: 0; }

/* ═══════════════════ AI NARRATIVE (SWOT summary) ═══════════════════ */
.ai-narrative {
 font-size: 13px;
 line-height: 1.7;
 color: var(--text-secondary);
 white-space: pre-wrap;
}