/* css/styles.css - Complete Stylesheet for Navigator */

/* =================================================================
   THEME VARIABLES (CSS CUSTOM PROPERTIES)
   ================================================================= */
:root {
    /* Light Mode Colors */
    --bg-primary: #FFFFFF;
    --bg-secondary: #F8FAFC;
    --bg-card: #FFFFFF;
    --bg-hover: #F3F4F6;
    --border-color: #E5E7EB;
    --text-primary: #091A2D;
    --text-secondary: #64748B;
    --text-muted: #94A3B8;
    --link-text: #48AADD;
    --brand-primary: #091A2D;
    --accent-blue: #48AADD;
    --accent-teal: #4CC6C4;
    --electric-blue: #00BFFF;
    --purple: #6C65CD;
    --status-success: #229254;
    --status-warning: #D97706;
    --status-error: #DC2626;
    --status-info: #3B82F6;
    --shadow: rgba(9, 26, 45, 0.05);
    --shadow-hover: rgba(9, 26, 45, 0.1);
    --alert-bg: #FEF2F2; /* red-50 */
    --alert-border: #F87171; /* red-400 */
    --alert-text: #991B1B; /* red-800 */
    --alert-icon-color: #F87171; /* red-400 */
    --accent-blue-translucent: rgba(72, 170, 221, 0.1); /* 10% opacity of your light mode blue */
        --accent-teal-translucent: rgba(76, 198, 196, 0.2);
    --status-success-translucent: rgba(34, 146, 84, 0.2);
    --status-error-translucent: rgba(220, 38, 38, 0.2);
    --purple-translucent: rgba(108, 101, 205, 0.2);
}

[data-theme="dark"] {
    /* Dark Mode Colors */
    --bg-primary: #020617;
    --bg-secondary: #0F172A;
    --bg-card: #1E293B;
    --bg-hover: #334155;
    --border-color: #475569;
    --text-primary: #F8FAFC;
    --text-secondary: #CBD5E1;
    --text-muted: #94A3B8;
    --link-text: #60A5FA;
    --brand-primary: #0F172A;
    --accent-blue: #60A5FA;
    --accent-teal: #5EEADC;
    --electric-blue: #40BFFF;
    --purple: #818CF8;
    --status-success: #34D399;
    --status-warning: #FBBF24;
    --status-error: #F87171;
    --status-info: #60A5FA;
    --shadow: rgba(0, 0, 0, 0.1);
    --shadow-hover: rgba(0, 0, 0, 0.2);
    --alert-bg: #450a0a; /* dark red */
    --alert-border: #ef4444; /* red-500 */
    --alert-text: #fecaca; /* red-200 */
    --alert-icon-color: #ef4444; /* red-500 */
     --accent-blue-translucent: rgba(96, 165, 250, 0.15); /* 15% opacity of your dark mode blue */
         --accent-teal-translucent: rgba(94, 234, 220, 0.25);
    --status-success-translucent: rgba(52, 211, 153, 0.25);
    --status-error-translucent: rgba(248, 113, 113, 0.25);
    --purple-translucent: rgba(129, 140, 248, 0.25);

}


/* =================================================================
   BASE STYLES & LAYOUT
   ================================================================= */
html, body { 
    height: 100vh;
    overflow: hidden; 
}


.app-container {
    display: flex;
    height: 100%;
}

.main-content-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#main-content {
    flex: 1;
    overflow-y: auto; /* The main area scrolls by default */
    padding: 0.75rem 0.75rem; /* REDUCED: 50% less padding for more screen space */
    height: calc(100vh - 5rem);
    transition: grid-template-columns 0.3s ease-in-out;
}
/* Sidebar & Header */
#sidebar {
    background-color: var(--bg-card);
    border-right-color: var(--border-color);
    transition: all 0.3s ease-in-out; /* Changed to 'all' for width transition */
    height: 100%;
    /* REMOVED PADDING FROM HERE */
    display: flex; /* Added for flex-direction */
    flex-direction: column; /* Added for layout */
}

/* ADD this new class for the menu's padding */
.sidebar-menu-container {
    padding: 1rem; /* Padding is now here */
}

#sidebar .border-b, #sidebar .border-t {
    border-color: var(--border-color);
    transition: border-color 0.3s ease;
}

header {
    background-color: var(--bg-card);
    border-bottom-color: var(--border-color);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

#header-title {
    color: var(--text-primary);
    transition: color 0.3s ease;
}

#company-selector {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--border-color);
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
#company-selector:focus {
    --tw-ring-color: var(--accent-blue);
}

/* CORRECTED: Sidebar Footer layout */
.sidebar-footer {
    position: relative;
    padding: 1rem;
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    /* MODIFIED: This is the key to the left/right alignment */
    justify-content: space-between; 
}

/* CORRECTED: Combined styles for all footer buttons */
.settings-icon, .theme-toggle-button, .logout-button {
    background: none;
    border: 1px solid transparent;
    cursor: pointer;
    color: var(--text-secondary);
    padding: 8px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.settings-icon:hover, .theme-toggle-button:hover, .logout-button:hover {
    color: var(--text-primary);
    background-color: var(--bg-hover);
}

/* This is the magic for showing/hiding the correct theme icon */
[data-theme="light"] .moon-icon { display: none; }
[data-theme="dark"] .sun-icon { display: none; }


/* CORRECTED: Settings Modal Styles */
#settings-popup-modal {
    position: absolute;
    bottom: 100%;
    left: 1rem;
    margin-bottom: 0.5rem;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    box-shadow: 0 4px 12px var(--shadow-hover);
    width: 220px;
    z-index: 100;
    opacity: 0;
    transform: translateY(10px);
    visibility: hidden;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

#settings-popup-modal.visible {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}


.theme-toggle-button {
    padding: 8px; /* Ensure it's just the icon */
}

.theme-toggle-button .sun-icon,
.theme-toggle-button .moon-icon {
    color: inherit;
}

/* This is the magic for showing/hiding the correct icon */
[data-theme="light"] .moon-icon { display: none; }
[data-theme="dark"] .sun-icon { display: none; }

/* Active nav link style */
.nav-link.active {
    background-color: var(--accent-blue-translucent); /* This now works for both themes */
    color: var(--accent-blue);
    font-weight: 600;
}


/* =================================================================
   HOME PAGE DASHBOARD STYLES (ORIGINAL LAYOUT)
   ================================================================= */
.dashboard-container {
    padding: 1.5rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.section-title {
    font-size: 1.25rem; /* 20px */
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

/* Alert */
.dashboard-alert {
    background-color: var(--alert-bg);
    border-left: 4px solid var(--alert-border);
    border-radius: 0.5rem;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}
.alert-icon {
    color: var(--alert-icon-color);
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
}
.alert-title {
    font-weight: 700;
    color: var(--alert-text);
}
.alert-text {
    font-size: 0.875rem;
    color: var(--alert-text);
}

/* KPI Grid */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
}
.kpi-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    padding: 1.5rem;
    box-shadow: 0 1px 3px var(--shadow);
}
.kpi-label {
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
    font-size: 0.875rem;
}
.kpi-value {
    font-size: 1.875rem; /* 30px */
    font-weight: 700;
}
.kpi-detail {
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

/* Pipeline */
.pipeline-wrapper {
    display: flex;
    width: 100%;
    overflow-x: auto;
}
.chevron-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    height: 3.5rem; /* 56px */
    padding: 0 1rem 0 2.5rem;
    color: white;
    font-weight: 600;
    background-color: var(--bg-color);
    flex-shrink: 0;
    flex-grow: 1;
    min-width: 180px;
}
.chevron-item:not(:first-child) {
    margin-left: -1.5rem;
}
.chevron-item:first-child {
    border-top-left-radius: 0.5rem;
    border-bottom-left-radius: 0.5rem;
    padding-left: 1.5rem;
}
.chevron-item:last-child {
    border-top-right-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
}
.chevron-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -1.5rem;
    top: 0;
    width: 0;
    height: 0;
    border-top: 1.75rem solid transparent;
    border-bottom: 1.75rem solid transparent;
    border-left: 1.5rem solid var(--bg-color);
    z-index: 10;
}
.chevron-name {
    flex-grow: 1;
    text-align: center;
    font-size: 0.875rem;
}
.chevron-count {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    font-size: 0.875rem;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.25);
    font-weight: 700;
}

/* Company Grid */
.company-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}
.company-card, .add-company-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 1px 3px var(--shadow);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.company-card:hover {
    border-color: var(--accent-blue);
    box-shadow: 0 4px 12px var(--shadow-hover);
    cursor: pointer;
}
.company-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.75rem;
}
.company-name {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary);
}
.company-stage {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    border-radius: 99px;
}
.company-stats {
    display: flex;
    justify-content: space-around;
    text-align: center;
    padding: 0.75rem 0;
    margin: 0.75rem 0;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}
.stat-label {
    font-size: 0.75rem;
    color: var(--text-muted);
}
.stat-value {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
}
.company-footer {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.status-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}
.status-text {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
}
.add-company-card {
    border-style: dashed;
    border-width: 2px;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    min-height: 180px;
    transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}
.add-company-card:hover {
    border-color: var(--accent-blue);
    color: var(--accent-blue);
    background-color: var(--bg-hover);
    cursor: pointer;
}
.add-icon {
    margin-bottom: 0.5rem;
    color: var(--text-muted);
}
.add-text {
    font-weight: 600;
}


/* =================================================================
   PORTCO PAGE STYLES
   ================================================================= */
/* Use portfolio-container for consistent padding and max-width */
.portco-container {
    padding: 1.5rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
.portco-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}
.portco-title {
    font-size: 1.875rem;
    font-weight: 700;
    color: var(--text-primary);
}
.portco-subtitle {
    font-size: 1rem;
    color: var(--text-secondary);
}
.portco-status-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.5rem; /* Reduced padding for compact size */
    border-radius: 99px;
    font-weight: 600;
    font-size: 0.875rem;
}
.portco-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    padding: 1.5rem;
    box-shadow: 0 1px 3px var(--shadow);
}
.card-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1rem;
}
.portco-grid-2-1 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}
.portco-grid-2-1 > div:first-child {
    grid-column: span 1 / span 1;
}
.portco-grid-2-1 > div:last-child {
    grid-column: span 2 / span 2;
}

/* Progress Bar */
.progress-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}
.progress-percent {
    font-weight: 600;
    color: var(--text-primary);
}
.progress-bar-container {
    width: 100%;
    background-color: var(--bg-hover);
    border-radius: 99px;
    height: 0.625rem; /* 10px */
}
.progress-bar-fill {
    background-color: var(--accent-blue);
    height: 100%;
    border-radius: 99px;
}
.progress-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.5rem;
}

/* Scorecard */
.scorecard-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.score-item {
    background-color: var(--bg-secondary);
    padding: 1rem;
    border-radius: 0.5rem;
    text-align: center;
}
.score-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
}
.score-value {
    font-size: 1.5rem;
    font-weight: 700;
}

/* Activity List */
.activity-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.activity-item {
    padding: 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid var(--border-color);
    border-left-width: 4px;
}
.activity-item.activity-success { border-left-color: var(--status-success); }
.activity-item.activity-error { border-left-color: var(--status-error); }
.activity-item.activity-info { border-left-color: var(--status-info); }
.activity-title {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-primary);
}
.activity-time {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Workstreams */
.workstream-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.workstream-card {
    position: relative;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    padding: 1rem;
}
.workstream-card.alert {
    cursor: pointer;
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 1px var(--accent-blue);
}
.workstream-card.alert:hover {
    background-color: var(--bg-hover);
}
.workstream-alert-dot {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--status-error);
}
.workstream-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}
.workstream-title {
    font-weight: 700;
    color: var(--text-primary);
}
.workstream-status {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.5rem;
    border-radius: 0.5rem;
}
.workstream-metrics {
    display: flex;
    justify-content: space-around;
    text-align: center;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
}
.workstream-value {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
}
.workstream-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* Status Badge Colors */
.status-completed { background-color: #34D39920; color: var(--status-success); }
.status-progress { background-color: #60A5FA20; color: var(--status-info); }
.status-pending { background-color: #818CF820; color: var(--purple); }
.status-warning { background-color: #FBBF2420; color: var(--status-warning); }
.status-error { background-color: #F8717120; color: var(--status-error); }

.status-ping {
    position: relative;
    display: flex;
    width: 12px;
    height: 12px;
}
.status-ping::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: var(--status-info);
    animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}
.status-ping::after {
    content: '';
    position: relative;
    display: block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--status-info);
}
.status-dot-solid {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--status-success);
}

/* CloudVantage Specific */
.program-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.program-item {
    display: grid;
    grid-template-columns: 3fr 2fr 2fr 4fr 1fr;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    background-color: var(--bg-secondary);
    border-radius: 0.5rem;
}
.program-name { font-weight: 600; color: var(--text-primary); }
.program-dept { font-size: 0.875rem; color: var(--text-secondary); }
.program-status { font-size: 0.75rem; font-weight: 600; padding: 0.25rem 0.5rem; border-radius: 99px; }
.program-progress-container { background-color: var(--bg-hover); border-radius: 99px; height: 8px; }
.program-progress-bar { background-color: var(--accent-blue); height: 100%; border-radius: 99px; }
.program-progress-text { font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); text-align: right; }

.tabs-container { border-bottom: 1px solid var(--border-color); margin-bottom: 1.5rem; }
.tab-nav { display: flex; gap: 0.5rem; }
.tab-content-area { display: flex; flex-direction: column; gap: 1rem; }
.dept-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.dept-kpi-item { background-color: var(--bg-secondary); padding: 1rem; border-radius: 0.5rem; text-align: center; }
.dept-kpi-label { font-size: 0.875rem; color: var(--text-secondary); }
.dept-kpi-value { font-size: 1.5rem; font-weight: 600; }
.dept-content { color: var(--text-secondary); line-height: 1.6; }
.dept-actions { display: flex; justify-content: flex-end; }
.primary-button {
    background-color: var(--accent-blue);
    color: white;
    font-weight: 600;
    padding: 0.25rem 0.5rem; /* Reduced padding for compact size */
    border-radius: 0.5rem;
    border: none;
    cursor: pointer;
    transition: opacity 0.2s;
}
.primary-button:hover { opacity: 0.9; }

/* =================================================================
   ARIA PAGE STYLES
   ================================================================= */
.aria-workstream-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}
.aria-workstream-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px var(--shadow);
    display: flex;
    flex-direction: column;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.aria-workstream-card.active {
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 2px var(--accent-blue);
}

/* css/styles.css */
.aria-workstream-card .card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    height: 40px; /* Set fixed height for header */
}
.aria-workstream-card .card-content {
    padding: 1rem 1rem 0.5rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.aria-workstream-card .card-stats {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex-grow: 1; /* Allow this section to grow */
    justify-content: center; /* Center the stats vertically in the available space */
}
.aria-workstream-card .stat-value {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 1.125rem; /* Standardized font size */
}
.aria-workstream-card .card-icon {
    background-color: var(--bg-secondary);
    width: 40px;
    height: 40px;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.aria-workstream-card .card-icon svg {
    width: 24px;
    height: 24px;
    color: var(--accent-blue);
}
.aria-workstream-card .card-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.aria-workstream-card .stat-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 0.875rem;
}
.aria-workstream-card .stat-label {
    color: var(--text-secondary);
}

.card-button-wrapper {
    padding: 0.5rem 1rem 1rem;
    margin-top: auto;
}
.aria-workstream-card .card-button {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    width: 100%;
    padding: 0.5rem;
    font-weight: 600;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.aria-workstream-card .card-button:hover {
    background-color: var(--bg-hover);
    border-color: var(--text-secondary);
}
.aria-workstream-card.active .card-button {
    background-color: var(--accent-blue);
    color: white;
    border-color: var(--accent-blue);
}

/* Suggestions Grid */
.aria-suggestions-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

/* Suggested Prompts & Actions */
.suggested-actions-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.list-header {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}
.suggested-action-card {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    text-align: left;
    width: 100%;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}

.suggested-action-card:hover {
    background-color: var(--bg-hover);
    border-color: var(--accent-blue);
}
.suggested-action-card:hover {
    background-color: var(--bg-hover);
    border-color: var(--accent-blue);
}

/* Aria Response Content */
.aria-response-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Aria NextGen Response Bubble Layout - Only for NextGen */
.aria-nextgen-conversation-container .aria-response-bubble {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 1.5rem;
}

.aria-nextgen-conversation-container .aria-avatar {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background-color: var(--accent-blue);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    margin-top: 0.25rem;
}

.aria-nextgen-conversation-container .aria-avatar svg {
    width: 20px;
    height: 20px;
}

/* Ensure original Aria layout is preserved - override any conflicting rules */
.aria-response-wrapper .aria-response-bubble {
    display: block !important;
    width: 100% !important;
    background-color: var(--bg-secondary);
    padding: 1rem 1.5rem;
    border-radius: 0.75rem;
    border: 1px solid var(--border-color);
}
.aria-response-content .build-item {
    opacity: 0; /* Start completely invisible */
    transform: translateY(20px); /* Start slightly lower */
    transition: opacity 0.4s ease, transform 0.4s ease; /* Animate these properties */
}

.aria-response-content .build-item.visible {
    opacity: 1; /* Fade to fully visible */
    transform: translateY(0); /* Slide up to its final position */
}

.response-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
}
.response-subtitle {
    font-size: 0.875rem;
    color: var(--text-muted);
}
.response-section-title {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}
.response-text {
    color: var(--text-secondary);
    line-height: 1.6;
}
.response-title-area {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.user-prompt-bubble {
    background-color: var(--bg-hover);
    padding: 1rem 1.5rem;
    border-radius: 0.5rem;
    border: 1px solid var(--border-color);
}

/* Judgement Box */
.judgement-box {
    padding: 1rem;
    border-radius: 0.5rem;
    border-left-width: 4px;
}
.judgement-box.success { background-color: #34D3991A; border-color: var(--status-success); }
.judgement-box.warning { background-color: #FBBF241A; border-color: var(--status-warning); }
.judgement-box.error { background-color: #F871711A; border-color: var(--status-error); }
.judgement-title { font-weight: 700; }
.judgement-box.success .judgement-title { color: var(--status-success); }
.judgement-box.warning .judgement-title { color: var(--status-warning); }
.judgement-box.error .judgement-title { color: var(--status-error); }
.judgement-text { font-size: 0.875rem; color: var(--text-secondary); }

/* Bar Chart */
.bar-chart-container { display: flex; flex-direction: column; gap: 0.75rem; }
.bar-chart-item { display: flex; align-items: center; gap: 1rem; }
.bar-label { width: 100px; font-size: 0.875rem; color: var(--text-secondary); flex-shrink: 0; }
.bar-wrapper { flex-grow: 1; background-color: var(--bg-hover); border-radius: 0.25rem; }
.bar { height: 24px; border-radius: 0.25rem; color: white; font-size: 0.75rem; display: flex; align-items: center; padding: 0 0.5rem; }

/* Funnel Chart */
.funnel-chart-container { display: flex; flex-direction: column; gap: 0.25rem; }
.funnel-item { display: flex; align-items: center; gap: 1rem; }
.funnel-label { width: 100px; font-size: 0.875rem; color: var(--text-secondary); flex-shrink: 0; text-align: right; }
.funnel-bar { height: 28px; border-radius: 0.25rem; color: white; font-size: 0.75rem; display: flex; align-items: center; padding: 0 0.75rem; transition: width 0.5s ease; }

/* Stacked Bar Chart */
.stacked-bar-container { display: flex; width: 100%; height: 24px; border-radius: 0.25rem; overflow: hidden; }
.stacked-bar-segment { color: white; font-size: 0.75rem; display: flex; align-items: center; justify-content: center; }

/* Data Table */
.data-table-container { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th, .data-table td { padding: 0.75rem; text-align: left; border-bottom: 1px solid var(--border-color); }
.data-table th { font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; }
.data-table td { font-size: 0.875rem; color: var(--text-secondary); }
.data-table .text-error { color: var(--status-error); font-weight: 600; }
.data-table .text-success { color: var(--status-success); font-weight: 600; }
.data-table .text-warning { color: var(--status-warning); font-weight: 600; }

/* Status Badge */
.status-badge { font-size: 0.75rem; font-weight: 600; padding: 0.25rem 0.5rem; border-radius: 99px; }
.status-badge.critical { background-color: #F8717120; color: var(--status-error); }
.status-badge.high { background-color: #FBBF2420; color: var(--status-warning); }

/* Analysis Box */
.analysis-box {
    background-color: var(--bg-secondary);
    padding: 1rem;
    border-radius: 0.5rem;
    border-left: 3px solid var(--accent-blue);
}

/* Alert Callout */
.alert-callout {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-left-width: 4px;
    border-radius: 0.5rem;
    padding: 1rem;
    box-shadow: 0 1px 3px var(--shadow);
}
.alert-callout.error { border-left-color: var(--status-error); }
.alert-callout-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}
.alert-callout.error .alert-callout-title { color: var(--status-error); }

/* =================================================================
   MINOR OBSERVATIONS
   ================================================================= */
.card-base { background-color: var(--bg-card); border: 1px solid var(--border-color); border-radius: 0.75rem; padding: 1rem; }
.minor-observations-header { display: flex; justify-content: space-between; align-items: center; width: 100%; background: none; border: none; cursor: pointer; padding: 0; }
.minor-observations-header .chevron-icon { color: var(--text-muted); transition: transform 0.3s; }
.minor-observations-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; padding-top: 1rem; }
.minor-observation-item { background-color: var(--bg-secondary); padding: 0.75rem; border-radius: 0.5rem; display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; font-size: 0.875rem; color: var(--text-secondary); }
.minor-observations-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; }

/* Typing indicator styles */
.typing-indicator {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1rem;
    animation: fadeIn 0.3s ease-in;
}

.typing-dots {
    display: flex;
    gap: 4px;
    margin-bottom: 8px;
}

.typing-dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #666;
    animation: typingDots 1.4s infinite ease-in-out;
}

.typing-dots span:nth-child(1) { animation-delay: -0.32s; }
.typing-dots span:nth-child(2) { animation-delay: -0.16s; }
.typing-dots span:nth-child(3) { animation-delay: 0s; }

@keyframes typingDots {
    0%, 80%, 100% { transform: scale(0.8); opacity: 0.5; }
    40% { transform: scale(1); opacity: 1; }
}

.typing-message {
    font-style: italic;
    color: #666;
    font-size: 0.9rem;
}
/* FIX: Increased max-height to allow all 12 items to be visible */
.minor-observations-content.expanded { max-height: 100vh; transition: max-height 0.3s ease-in; }

/* List Container */
.list-container { display: flex; flex-direction: column; gap: 1rem; }
.list-item { display: flex; align-items: flex-start; gap: 0.75rem; }
.list-number { font-size: 1.25rem; font-weight: 700; }
.list-title { font-weight: 600; color: var(--text-primary); }
.list-text { font-size: 0.875rem; color: var(--text-secondary); }

/* Timeline Container */
.timeline-container { display: flex; flex-direction: column; gap: 1.5rem; }
.timeline-phase-title { font-weight: 600; color: var(--text-primary); margin-bottom: 0.75rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--accent-blue); }
.timeline-items { list-style-type: disc; padding-left: 1.5rem; color: var(--text-secondary); font-size: 0.875rem  }
    /* space-y: 0.5rem; }

/* New Prompt Input Area styles are handled by .prompt-area-large-v4 */
.prompt-input {
    flex-grow: 1;
    background: transparent;
    border: none;
    resize: none;
    color: var(--text-primary);
    font-size: 1rem;
    padding: 0.5rem;
}
.prompt-input:focus {
    outline: none;
}
.prompt-actions-left, .prompt-actions-right {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.file-attachment-display {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.25rem 0.5rem;
    width: 100%;
}
.file-pill {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--bg-hover);
    border: 1px solid var(--border-color);
    border-radius: 99px;
    padding: 0.25rem 0.5rem 0.25rem 0.75rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
}
.file-pill .remove-file-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1.25rem;
    padding: 0;
    line-height: 1;
}
/* Feedback Icons */
.feedback-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.feedback-icon .icon-filled { display: none; }
.feedback-icon.filled .icon-unfilled { display: none; }
.feedback-icon.filled .icon-filled { display: block; }
.feedback-icon.filled { color: var(--accent-blue); }
.tooltip-text {
    position: absolute;
    background-color: var(--text-primary);
    color: var(--bg-primary);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 10;
}
.feedback-icon:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}
.tooltip-right {
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
    margin-left: 8px;
}
.tooltip-left {
    top: 50%;
    right: 100%;
    transform: translateY(-50%);
    margin-right: 8px;
}
.tooltip-bottom {
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
}

/* Feedback Modal */
.feedback-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}
.feedback-modal-content {
    background-color: var(--bg-card);
    padding: 1.5rem;
    border-radius: 0.75rem;
    width: 90%;
    max-width: 400px;
    box-shadow: 0 10px 25px var(--shadow-hover);
}
.feedback-modal-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}
.feedback-modal-text {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
}
.feedback-textarea {
    width: 100%;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    padding: 0.5rem;
    color: var(--text-primary);
    resize: vertical;
}
.feedback-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1rem;
}
.secondary-button {
    background-color: var(--bg-hover);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    padding: 0.25rem 0.5rem; /* Reduced padding for compact size */
    border-radius: 0.5rem;
    font-weight: 600;
    cursor: pointer;
}


/* NEW: Settings Modal Styles */
.settings-modal {
    position: absolute;
    bottom: calc(100% + 0.5rem);
    left: 1rem;
    right: 1rem;
    width: 260px;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    max-height: 60vh;
    z-index: 100;
    opacity: 0;
    transform: translateY(10px);
    visibility: hidden;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    overflow-y: auto;
    overflow-x: hidden;
}

.settings-modal.visible {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}

/* Settings Modal Scrollbar */
.settings-modal::-webkit-scrollbar {
    width: 6px;
}

.settings-modal::-webkit-scrollbar-track {
    background: transparent;
}

.settings-modal::-webkit-scrollbar-thumb {
    background-color: var(--text-secondary);
    border-radius: 3px;
    opacity: 0.5;
}

.settings-modal::-webkit-scrollbar-thumb:hover {
    background-color: var(--text-primary);
}

/* Settings Section Headers */
.settings-section-header {
    cursor: pointer;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    transition: color 0.2s ease;
}

.settings-section-header:hover {
    color: var(--text-primary);
}

/* Settings Section Content */
.settings-section-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    padding-left: 0.25rem;
}

.settings-section-content.expanded {
    max-height: 600px;
    transition: max-height 0.3s ease-in;
    margin-bottom: 0.5rem;
}

.settings-section-content a {
    display: block;
    color: var(--text-primary);
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.1s ease;
}

.settings-section-content a:hover {
    background-color: var(--bg-hover);
    color: var(--brand-blue);
    transform: translateX(2px);
}

.settings-section-content button {
    color: var(--text-primary);
    transition: background-color 0.2s ease, transform 0.1s ease;
}

.settings-section-content button[data-action="reset-app-state"]:hover {
    background-color: rgba(239, 68, 68, 0.1);
    transform: translateX(2px);
}

/* Settings Chevron Icon */
.settings-chevron {
    transition: transform 0.3s ease;
    stroke: currentColor;
}

.settings-chevron.rotated {
    transform: rotate(90deg);
}

/* Dashboard Cards & Form Elements */
.stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
    transition: all 0.3s ease;
}

.stat-card:hover {
    box-shadow: 0 4px 12px var(--shadow-hover);
    transform: translateY(-2px);
}

.control-card,
.table-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
}

.form-select,
.form-input {
    width: 100%;
    padding: 0.625rem 1rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.875rem;
    transition: all 0.2s ease;
}

.form-select:focus,
.form-input:focus {
    outline: none;
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-select option {
    background: var(--bg-primary);
    color: var(--text-primary);
}

.btn-primary,
.btn-secondary,
.btn-success {
    padding: 0.5rem 1.5rem;
    border: none;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

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

.btn-primary:hover {
    background: var(--brand-blue-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.btn-secondary {
    background: var(--bg-hover);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.btn-secondary:hover {
    background: var(--bg-secondary);
}

.btn-success {
    background: var(--status-success);
    color: white;
}

.btn-success:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.data-table {
    width: 100%;
    border-collapse: collapse;
}

.data-table thead {
    background: var(--bg-hover);
}

.data-table th {
    padding: 0.75rem 1.5rem;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.data-table tbody tr {
    border-bottom: 1px solid var(--border-color);
    transition: background-color 0.2s ease;
}

.data-table tbody tr:hover {
    background: var(--bg-hover);
}

.data-table td {
    padding: 1rem 1.5rem;
    color: var(--text-primary);
    font-size: 0.875rem;
}

.data-table tbody tr:last-child {
    border-bottom: none;
}

.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
}

.category-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}
.category-content.expanded {
    max-height: 2000px; /* High value to accommodate content */
    transition: max-height 0.3s ease-in;
}
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 20px;
}
.toggle-switch-sm {
    width: 28px;
    height: 16px;
}
.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--bg-hover);
    transition: .4s;
}
.slider:before {
    position: absolute;
    content: "";
    height: 12px;
    width: 12px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
}
.toggle-switch-sm .slider:before {
    height: 10px;
    width: 10px;
    left: 3px;
    bottom: 3px;
}
input:checked + .slider {
    background-color: var(--accent-blue);
}
input:focus + .slider {
    box-shadow: 0 0 1px var(--accent-blue);
}
input:checked + .slider:before {
    transform: translateX(14px);
}
.toggle-switch-sm input:checked + .slider:before {
    transform: translateX(12px);
}
.slider.round {
    border-radius: 34px;
}
.slider.round:before {
    border-radius: 50%;
}


/* =================================================================
   WORKSPACE V2 STYLES
   ================================================================= */
.workspace-container-v2 {
    padding: 1.5rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Header Boxes */
.workspace-header, .thesis-box {
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    padding: 1.5rem;
    background-color: var(--bg-card);
}
.thesis-box {
    background-color: #EFF6FF; /* blue-50 */
    border-color: #BFDBFE; /* blue-200 */
}
[data-theme="dark"] .thesis-box {
    background-color: #1E293B;
    border-color: #3B82F6;
}
.header-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}
.header-text {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

/* Main Grid Layout */
.workspace-grid-v2 {
    display: grid;
    grid-template-columns: 4fr 6fr; /* 40/60 split */
    gap: 2rem;
}
.input-column, .synthesis-column {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Input Column */
.input-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    padding: 1rem;
}
.input-title {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color);
}
.input-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.input-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    border-radius: 0.5rem;
    background-color: var(--bg-secondary);
}
.item-content {
    flex-grow: 1;
}
.item-impact-badge {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.125rem 0.5rem;
    border-radius: 99px;
    text-transform: uppercase;
}
.item-impact-badge[data-impact="high"] { background-color: #FEE2E2; color: #B91C1C; }
.item-impact-badge[data-impact="medium"] { background-color: #FEF3C7; color: #B45309; }
[data-theme="dark"] .item-impact-badge[data-impact="high"] { background-color: #7f1d1d; color: #fecaca; }
[data-theme="dark"] .item-impact-badge[data-impact="medium"] { background-color: #78350f; color: #fde68a; }
.item-title {
    font-weight: 600;
    color: var(--text-primary);
    margin-top: 0.25rem;
}
.item-description {
    font-size: 0.875rem;
    color: var(--text-secondary);
}
.action-pills {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
    margin-left: 1rem;
}
.action-pills button {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background-color: var(--bg-card);
    cursor: pointer;
    transition: background-color 0.2s;
}
.action-pills button:hover {
    background-color: var(--bg-hover);
}

/* Synthesis Column */
.output-actions-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    padding: 1rem;
}
.output-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.75rem;
}
.output-button {
    padding: 0.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    border: 1px solid var(--border-color);
    background-color: var(--bg-secondary);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}
.output-button.primary {
    background-color: var(--accent-blue);
    color: white;
    border-color: var(--accent-blue);
}
.output-button:hover {
    background-color: var(--bg-hover);
    color: var(--text-primary);
}
.output-button.primary:hover {
    opacity: 0.9;
}

.synthesis-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    padding: 1rem;
    flex-grow: 1;
}
.strategic-narrative, .work-plan {
    min-height: 150px;
    padding: 0.75rem;
    background-color: var(--bg-secondary);
    border-radius: 0.5rem;
    color: var(--text-secondary);
}
.strategic-narrative:focus {
    outline: 1px solid var(--accent-blue);
}
.simulation-lab {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.simulation-graph {
    height: 250px;
    position: relative;
} 
/* =================================================================
   WORKSPACE V3 STYLES (OCT 2023 REDESIGN)
   ================================================================= */

.workspace-v3-container {
    padding: 1.5rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* --- Top Section --- */
.workspace-v3-top-section {
    display: grid;
    grid-template-columns: 1fr; /* Single column layout */
    gap: 1.5rem;
    align-items: start;
}
.ws-narrative-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 0.75rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.ws-narrative-header .ws-input-title {
    margin-bottom: 0; /* Remove margin from title inside this header */
    border-bottom: none;
}

.ws-output-button-small {
    padding: 0.5rem 0.75rem;
    background-color: var(--bg-secondary);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s;
}

.ws-output-button-small:hover {
    background-color: var(--accent-blue);
    color: white;
    border-color: var(--accent-blue);
}

.workspace-v3-header {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    padding: 1.5rem;
}

.ws-header-title-area {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}
.ws-header-title {
    font-size: 1.5rem;
    font-weight: 700;
}
.ws-header-description {
    font-size: 1rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
}
.ws-header-stage-badge {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    border-radius: 99px;
    background-color: var(--accent-blue-light);
    color: var(--accent-blue);
    white-space: nowrap;
}
[data-theme="dark"] .ws-header-stage-badge {
    background-color: #1e40af;
    color: #bfdbfe;
}

.ws-priorities-title {
    font-weight: 600;
    margin-bottom: 0.5rem;
}
.ws-priorities-text {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

.ws-output-module {
    position: relative;
}
.ws-output-button {
    width: 100%;
    padding: 0.75rem 1rem;
    background-color: var(--accent-blue);
    color: white;
    border: none;
    border-radius: 0.5rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: background-color 0.2s;
}
.ws-output-button:hover {
    background-color: #1d4ed8; /* darker blue */
}
[data-theme="dark"] .ws-output-button:hover {
    background-color: #60a5fa; /* lighter blue */
}

.ws-output-popup {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.5rem;
    width: 280px;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    box-shadow: 0 4px 12px var(--shadow-hover);
    padding: 0.5rem;
    z-index: 50;
}
.ws-output-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    border-radius: 0.5rem;
}
.ws-output-item:hover {
    background-color: var(--bg-hover);
}
.ws-output-name {
    font-weight: 500;
}
.ws-output-formats {
    display: flex;
    gap: 0.5rem;
}
.ws-format-icon {
    width: 28px;
    height: 28px;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s;
}
.ws-format-icon:hover {
    opacity: 1;
}

/* --- Bottom Section --- */
.workspace-v3-bottom-section {
    display: grid;
    grid-template-columns: 4fr 6fr; /* NEW: 40/60 split */
    gap: 1.5rem;
    align-items: start;
}
.ws-input-column, .ws-narrative-column {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.ws-input-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    padding: 1rem;
}
.ws-input-title {
    font-weight: 600;
    padding-bottom: 0.75rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}
.ws-input-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.ws-input-item {
    background-color: var(--bg-secondary);
    border-radius: 0.5rem;
    padding: 0.75rem;
}
.ws-input-item-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}
.ws-item-title {
    font-weight: 600;
}
.ws-item-description {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
}
.ws-item-badges {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    align-items: flex-end;
    flex-shrink: 0;
}
.ws-item-badge {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.125rem 0.5rem;
    border-radius: 99px;
    text-transform: capitalize;
}
.ws-item-badge.impact-high, .ws-item-badge.complexity-high, .ws-item-badge.severity-critical { background-color: #FEE2E2; color: #B91C1C; }
.ws-item-badge.impact-medium, .ws-item-badge.complexity-medium, .ws-item-badge.severity-high { background-color: #FEF3C7; color: #B45309; }
.ws-item-badge.impact-low, .ws-item-badge.complexity-low { background-color: #D1FAE5; color: #065F46; }

[data-theme="dark"] .ws-item-badge.impact-high, [data-theme="dark"] .ws-item-badge.complexity-high, [data-theme="dark"] .ws-item-badge.severity-critical { background-color: #7f1d1d; color: #fecaca; }
[data-theme="dark"] .ws-item-badge.impact-medium, [data-theme="dark"] .ws-item-badge.complexity-medium, [data-theme="dark"] .ws-item-badge.severity-high { background-color: #78350f; color: #fde68a; }
[data-theme="dark"] .ws-item-badge.impact-low, [data-theme="dark"] .ws-item-badge.complexity-low { background-color: #064e3b; color: #a7f3d0; }

.ws-item-actions {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
    display: flex;
    gap: 0.75rem;
}
.ws-action-toggle {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
}
.ws-action-toggle .icon-shell {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    border: 1px solid var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    transition: all 0.2s;
}
.ws-action-toggle .icon-shell svg {
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.2s;
}
.ws-action-toggle.active .icon-shell {
    background-color: var(--accent-blue);
    border-color: var(--accent-blue);
    color: white;
}
.ws-action-toggle.active .icon-shell svg {
    opacity: 1;
    transform: scale(1);
}

.ws-narrative-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    padding: 1rem;
}
.ws-narrative-content {
    min-height: 400px;
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.6;
}
.ws-narrative-content p {
    margin-bottom: 1rem;
}
.ws-narrative-content strong {
    color: var(--text-primary);
    font-weight: 600;
}
.ws-narrative-content .narrative-tag {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--accent-blue);
    margin-left: 0.25rem;
}
.ws-narrative-placeholder {
    color: var(--text-muted);
}

/* =================================================================
   HOME PAGE V2 STYLES (AI-NATIVE REDESIGN)
   ================================================================= */

.home-v2-container {
    padding: 1.5rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto; /* Center the content */
}

/* --- AI Briefing Card --- */
.ai-briefing-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    padding: 1.5rem 2rem;
    box-shadow: 0 4px 12px var(--shadow);
    border-left: 4px solid var(--accent-blue);
}

.briefing-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.briefing-header svg {
    color: var(--accent-blue);
}

.briefing-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

.briefing-text {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-secondary);
}

.briefing-text strong {
    font-weight: 600;
    color: var(--text-primary);
}

/* --- Large Prompt Area --- */
.prompt-area-large {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.suggestion-pills-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.suggestion-pill {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 0.375rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.suggestion-pill:hover {
    background-color: var(--bg-hover);
    border-color: var(--accent-blue);
    color: var(--accent-blue);
}

.prompt-textarea {
    width: 100%;
    background-color: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 1.125rem; /* Larger font for typing */
    resize: none;
    padding: 0.5rem;
}

.prompt-textarea:focus {
    outline: none;
}

.prompt-textarea::placeholder {
    color: var(--text-muted);
}

.prompt-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-color);
}

.prompt-button-primary {
    background-color: var(--accent-blue);
    color: white;
    font-weight: 600;
    padding: 0.625rem 1.25rem;
    border-radius: 0.5rem;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: opacity 0.2s;
}

.prompt-button-primary:hover {
    opacity: 0.9;
}

/* --- Data Deep Dive Section --- */
.data-deep-dive {
    padding-top: 2rem;
    border-top: 1px solid var(--border-color);
}

.data-deep-dive .section-title {
    margin-bottom: 0;
}

#deep-dive-content.hidden {
    display: none;
}

#deep-dive-chevron.rotate-180 {
    transform: rotate(180deg);
}
.nav-link .nav-icon {
    margin-right: 0.75rem; /* 12px */
    color: var(--text-muted);
    transition: color 0.2s ease;
}

.nav-link.active .nav-icon,
.nav-link:hover .nav-icon {
    color: var(--accent-blue);
}
/* =================================================================
   PORTFOLIO PAGE (HOME V3) STYLES
   ================================================================= */

.portfolio-container {
    padding: 1.5rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.portfolio-chart-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    padding: 1.5rem;
    box-shadow: 0 4px 12px var(--shadow);
}

.chart-header {
    margin-bottom: 1.5rem;
}

.chart-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

.chart-subtitle {
    font-size: 0.875rem;
    color: var(--text-muted);
}

.chart-wrapper {
    height: 350px;
    position: relative;
}

.chart-narrative {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

.chart-narrative strong {
    font-weight: 600;
    color: var(--text-primary);
}

/* Advanced Prompt Box V2 */
.prompt-area-large-v2 {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.prompt-input-wrapper {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    padding: 0.25rem 0.5rem;
}

.prompt-input-wrapper:focus-within {
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 1px var(--accent-blue);
}

.prompt-area-large-v2 .prompt-textarea {
    padding: 0.5rem;
    border: none;
    flex-grow: 1;
    font-size: 1rem;
}

.prompt-area-large-v2 .prompt-actions-right {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.prompt-area-large-v2 .prompt-send-button {
    background-color: var(--accent-blue);
    color: white;
    border-radius: 0.5rem;
    padding: 0.625rem;
    border: none;
    cursor: pointer;
    transition: opacity 0.2s;
}
.prompt-area-large-v2 .prompt-send-button:hover {
    opacity: 0.9;
}
/* =================================================================
   PORTFOLIO PAGE (CONVERSATIONAL V4) STYLES
   ================================================================= */

.portfolio-container {
    padding: 1.5rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

/* Advanced Prompt Box V3 - Aligned with ARIA page */
.prompt-area-large-v3 {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.prompt-input-wrapper {
    display: flex;
    align-items: center; /* Vertically center items */
    gap: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    padding: 0.25rem 0.5rem;
}

.prompt-input-wrapper:focus-within {
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 1px var(--accent-blue);
}

.prompt-area-large-v3 .prompt-textarea {
    padding: 0.5rem;
    border: none;
    flex-grow: 1;
    font-size: 1rem;
    line-height: 1.5;
}

.prompt-area-large-v3 .prompt-actions-left,
.prompt-area-large-v3 .prompt-actions-right {
    display: flex;
    align-items: center;
    align-self: flex-end; /* Align buttons to the bottom of the text area */
    gap: 0.5rem;
}

.prompt-area-large-v3 .prompt-send-button {
    background-color: var(--accent-blue);
    color: white;
    border-radius: 0.5rem;
    padding: 0.625rem;
    border: none;
    cursor: pointer;
    transition: opacity 0.2s;
}
.prompt-area-large-v3 .prompt-send-button:hover { opacity: 0.9; }

/* New Response Card Styles */
.portfolio-response-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    padding: 1.5rem;
    margin-top: 1rem;
}

/* Scenario Model Styles */
.scenario-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}
.scenario-card {
    background-color: var(--bg-secondary);
    border-radius: 0.5rem;
    padding: 1rem;
}
.scenario-card.scenario-highlight {
    border: 2px solid var(--accent-blue);
}

/* =================================================================
   SPLIT-PANE DESIGN FOR ARIA RESPONSES
   ================================================================= */

.split-pane-container {
    display: flex;
    height: 100%;
    min-height: 400px;
    border-radius: 0.5rem;
    overflow: visible; /* Changed from hidden to allow overlay */
    background-color: var(--bg-primary);
    position: relative; /* Required for absolute positioning of right pane */
}

/* Toggle button for reasoning panel */
.reasoning-toggle-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1000;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.reasoning-toggle-btn:hover {
    background: var(--bg-secondary);
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.reasoning-toggle-btn:active {
    transform: scale(0.95);
}

/* Loading Spinner */
.loading-spinner {
    width: 1rem;
    height: 1rem;
    border: 2px solid var(--border-color);
    border-top: 2px solid var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading-container {
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.split-pane-left {
    flex: 1 1 75%;
    min-width: 0;
    padding: 1rem;
    overflow-y: auto;
    background-color: var(--bg-primary);
    transition: flex 0.3s ease;
    width: 100%;
    max-width: 100%;
}

/* Left pane should always use full available width when right pane is hidden or collapsed */
.split-pane-container:has(.split-pane-right.reasoning-auto-hidden) .split-pane-left,
.split-pane-container:has(.split-pane-right.reasoning-collapsed) .split-pane-left {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* When right pane is visible, left pane takes remaining space */
.split-pane-container:has(.split-pane-right.reasoning-visible) .split-pane-left {
    flex: 1 1 calc(100% - 33%);
    width: calc(100% - 33%);
    max-width: calc(100% - 33%);
}

/* When right pane is hidden, left pane expands to fill space */
.split-pane-container.right-pane-hidden .split-pane-left {
    flex: 1 1 100%;
}

.split-pane-container:has(.split-pane-right[style*="display: none"]) .split-pane-left,
.split-pane-container .split-pane-left:only-child {
    flex: 1 1 100%;
}

.split-pane-right {
    flex: 0 0 25%;
    min-width: 0;
    padding: 1rem;
    background-color: var(--bg-secondary);
    border-left: 1px solid var(--border-color);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
}

/* Right pane states: visible, collapsed, hidden */
.split-pane-right.reasoning-visible {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 33%;
    min-width: 300px;
    max-width: 50%;
    z-index: 100;
    box-shadow: -4px 0 12px rgba(0, 0, 0, 0.15);
    flex: 0 0 auto;
}

.split-pane-right.reasoning-collapsed {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 60px;
    min-width: 60px;
    max-width: 60px;
    z-index: 100;
    padding: 1rem 0.5rem;
    flex: 0 0 auto;
}

.split-pane-right.reasoning-auto-hidden {
    display: none !important;
}

/* When right pane is hidden, left pane takes full width */
.split-pane-container:has(.split-pane-right.reasoning-auto-hidden) .split-pane-left,
.split-pane-container:has(.split-pane-right[style*="display: none"]) .split-pane-left,
.split-pane-container.right-pane-hidden .split-pane-left {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* When right pane is visible, left pane still uses most of the space but reasoning overlays on top */
.split-pane-container:has(.split-pane-right.reasoning-visible) .split-pane-left {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    /* Reasoning panel overlays on top, so left pane can use full width */
}

/* Ensure toggle button is always visible */
.reasoning-toggle-btn {
    pointer-events: auto;
    z-index: 1001 !important;
}

.split-pane-divider {
    width: 8px;
    background-color: var(--border-color);
    cursor: col-resize;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.divider-handle {
    width: 4px;
    height: 40px;
    background-color: var(--text-secondary);
    border-radius: 2px;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.split-pane-divider:hover .divider-handle {
    opacity: 1;
}

.reasoning-panel {
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.reasoning-header {
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
}

.reasoning-content {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    color: var(--text-secondary);
}

.reasoning-step {
    margin-bottom: 0.75rem;
    padding: 0.5rem;
    background-color: var(--bg-primary);
    border-radius: 0.375rem;
    border-left: 2px solid var(--accent-blue);
    font-size: 0.75rem;
}

.reasoning-step:last-child {
    margin-bottom: 0;
}

/* Dark mode adjustments */
[data-theme="dark"] .split-pane-right {
    background-color: #1f2937;
    border-left-color: #374151;
}

[data-theme="dark"] .reasoning-step {
    background-color: #111827;
    border-left-color: #3b82f6;
    color: #9ca3af;
}

[data-theme="dark"] .reasoning-content {
    color: #9ca3af;
}

[data-theme="dark"] .reasoning-header {
    border-bottom-color: #374151;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .split-pane-container {
        flex-direction: column;
        min-height: auto;
    }
    
    .split-pane-left,
    .split-pane-right {
        width: 100%;
    }
    
    .split-pane-divider {
        width: 100%;
        height: 8px;
        cursor: row-resize;
    }
    
    .divider-handle {
        width: 40px;
        height: 4px;
    }
}

/* =================================================================
   COMPANY SELECTION PROMPT DARK MODE FIX
   ================================================================= */
[data-theme="dark"] .comprehensive-analysis p,
[data-theme="dark"] .comprehensive-analysis .text-sm {
    color: #cbd5e1 !important;
}

[data-theme="dark"] .comprehensive-analysis .text-xs {
    color: #94a3b8 !important;
}
.scenario-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 1rem;
}
.scenario-metric {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-color);
}
.scenario-metric:last-child {
    border-bottom: none;
}
.scenario-label {
    font-size: 0.875rem;
    color: var(--text-secondary);
}
.scenario-value {
    font-size: 1.25rem;
    font-weight: 700;
}
/* =================================================================
   PORTFOLIO PAGE (CONVERSATIONAL V5) STYLES
   ================================================================= */

/* --- Compact Company Strip --- */
.company-strip-container {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    padding-bottom: 1rem; /* For scrollbar spacing */
}
.company-strip-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    padding: 1rem;
    min-width: 250px;
    transition: all 0.2s ease;
    cursor: pointer;
}
.company-strip-card:hover {
    border-color: var(--accent-blue);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--shadow-hover);
}
.company-strip-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}
.company-strip-name {
    font-weight: 600;
    color: var(--text-primary);
}
.company-strip-kpis {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.875rem;
    color: var(--text-secondary);
}
.company-strip-kpis li {
    display: flex;
    justify-content: space-between;
    padding: 0.25rem 0;
}
.company-strip-kpis li span:last-child {
    font-weight: 500;
    color: var(--text-primary);
}

/* --- Refined Prompt Box (V4) --- */
.prompt-area-large-v4 {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.prompt-area-large-v4 .prompt-textarea {
    background: transparent;
    border: none;
    resize: none;
    color: var(--text-primary);
    font-size: 1.125rem;
    padding: 0.5rem;
    width: 100%;
}
.prompt-area-large-v4 .prompt-textarea:focus {
    outline: none;
}
.prompt-actions-bottom-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
}
.prompt-actions-bottom-bar .prompt-action-button {
    color: var(--text-muted);
}
.prompt-actions-bottom-bar .prompt-action-button:hover {
    color: var(--text-primary);
    background-color: var(--bg-hover);
}

/* --- Compact Company Strip (V2) --- */
.company-strip-status {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
}

/* --- Recommended Actions & Follow-ups --- */
.recommended-actions-container, .follow-up-container {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}
.actions-list, .fup-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.5rem;
}
.action-button, .fup-button {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 0.25rem 0.5rem; /* Reduced padding for compact size */
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}
.action-button:hover, .fup-button:hover {
    background-color: var(--bg-hover);
    border-color: var(--accent-blue);
    color: var(--accent-blue);
}
.action-button {
    background-color: var(--accent-blue-translucent);
    border-color: var(--accent-blue);
    color: var(--accent-blue);
}

/* --- FUP Response: People Grid --- */
.people-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}
.person-card {
    background-color: var(--bg-secondary);
    border-radius: 0.5rem;
    padding: 1rem;
}
.person-card h4 { font-weight: 600; }
.person-card p { font-size: 0.875rem; color: var(--text-muted); }
.person-card span { font-size: 0.875rem; color: var(--text-secondary); margin-top: 0.5rem; display: block; }

/* =================================================================
   PORTCO PAGE (DILIGENCE HUB) STYLES
   ================================================================= */

.diligence-hub-container {
    padding: 1.5rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
}

.diligence-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.75rem;
}

.diligence-pills .pill {
    padding: 0.25rem 0.5rem; /* Reduced padding for compact size */
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.2s ease;
    background-color: var(--bg-secondary);
    color: var(--text-secondary);
}

.diligence-pills .pill:hover {
    background-color: var(--bg-hover);
    color: var(--text-primary);
}

.diligence-pills .pill.active {
    background-color: var(--accent-blue-translucent);
    color: var(--accent-blue);
    border-color: var(--accent-blue);
}

.diligence-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.workstream-synthesis {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--accent-blue);
    border-radius: 0.75rem;
    padding: 1.5rem;
}

.synthesis-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.synthesis-text {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-secondary);
}

.synthesis-text strong {
    font-weight: 600;
    color: var(--text-primary);
}

.finding-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 1rem;
}

.finding-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.finding-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.finding-card-body {
    font-size: 0.875rem;
    color: var(--text-secondary);
    flex-grow: 1;
}
.finding-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    border-top: 1px solid var(--border-color);
    padding-top: 0.75rem;
}

.card-action-button {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 0.375rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* css/styles.css */

/* =================================================================
   PORTCO PAGE (DILIGENCE HUB V7 - GANTT CHART FINAL) STYLES
   ================================================================= */

.gantt-container-v7 {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    padding: 1rem;
    font-family: 'Inter', sans-serif;
    position: relative;
}

.gantt-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}
.gantt-main-title { font-size: 1.25rem; font-weight: 700; }
.gantt-control-buttons { display: flex; gap: 0.5rem; }
.gantt-control-btn {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    width: 36px; height: 36px;
    border-radius: 0.5rem;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
}
.gantt-control-btn:hover { background-color: var(--bg-hover); color: var(--text-primary); }

.gantt-scroll-wrapper {
    max-height: 75vh;
    overflow: auto;
    position: relative;
}

.gantt-grid-container {
    display: grid;
    grid-template-columns: 420px 1fr;
    min-width: 1120px;
}

.gantt-left-pane {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    z-index: 30;
    background-color: var(--bg-card);
}

.gantt-right-pane {
    width: 100%;
}

.gantt-left-header, .gantt-right-header {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 20;
    background-color: var(--bg-card);
    border-bottom: 2px solid var(--border-color);
    height: 41px;
    display: grid;
    align-items: end;
    padding-bottom: 0.5rem;
}

.gantt-left-header {
    z-index: 40;
    grid-template-columns: 50px 1fr 100px;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    font-weight: 600;
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
}

.gantt-right-header {
    grid-template-columns: repeat(17, 1fr);
    gap: 2px;
}

.gantt-day-header { text-align: center; font-size: 0.7rem; color: var(--text-muted); }
.gantt-day-header span { display: block; }
.gantt-day-header.weekend { opacity: 0.5; }
.gantt-day-header.today span:last-child { background-color: var(--accent-blue); color: white; border-radius: 50%; width: 20px; height: 20px; line-height: 20px; margin: 0 auto; }

.gantt-right-body {
    position: relative;
}

.gantt-today-band {
    position: absolute;
    top: 0;
    bottom: 0;
    background-color: var(--accent-blue-translucent);
    z-index: 1;
    pointer-events: none;
}

.gantt-phase-group, .gantt-category-group { display: contents; }
.gantt-row { display: contents; }

.gantt-row-left.hover, .gantt-row-right.hover { background-color: var(--bg-hover); }
.gantt-row-left, .gantt-row-right { border-bottom: 1px solid var(--border-color); cursor: pointer; }
.gantt-phase-header-left, .gantt-phase-header-right { background-color: var(--bg-secondary); }

.gantt-phase-details, .gantt-category-details, .gantt-task-details {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    font-size: 0.875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 33px;
}
.gantt-phase-details { font-weight: 600; }
.gantt-category-details { padding-left: 2rem; }
.gantt-task-details {
    display: grid;
    grid-template-columns: 50px 1fr 100px;
    padding-left: 4rem;
}
.gantt-task-id { font-weight: 500; color: var(--text-muted); }
.gantt-task-element { color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; }
.gantt-task-status { display: flex; align-items: center; justify-content: center; padding-left: 0.5rem; }

.status-pill-column {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    border-radius: 99px;
    white-space: nowrap;
}
.status-pill-column.status-completed { background-color: #D1FAE5; color: #065F46; }
.status-pill-column.status-in-progress { background-color: #DBEAFE; color: #1E40AF; }
.status-pill-column.status-upcoming { background-color: #F3F4F6; color: #4B5563; }
.status-pill-column.status-late, .status-pill-column.status-blocked { background-color: #FEE2E2; color: #991B1B; }
[data-theme="dark"] .status-pill-column.status-completed { background-color: #064e3b; color: #a7f3d0; }
[data-theme="dark"] .status-pill-column.status-in-progress { background-color: #1e40af; color: #bfdbfe; }
[data-theme="dark"] .status-pill-column.status-upcoming { background-color: #374151; color: #d1d5db; }
[data-theme="dark"] .status-pill-column.status-late, [data-theme="dark"] .status-pill-column.status-blocked { background-color: #7f1d1d; color: #fecaca; }

.gantt-timeline-grid {
    display: grid;
    grid-template-columns: repeat(17, 40px);
    gap: 2px;
    padding: 4px 0;
    align-items: center;
    height: 33px;
}
.gantt-summary-bar { height: 8px; border-radius: 4px; opacity: 0.7; }
.phase-bar { background-color: var(--text-muted); }
.category-bar { background-color: var(--text-secondary); }
.gantt-bar { height: 20px; border-radius: 4px; }
.gantt-bar-extension {
    height: 20px;
    border-radius: 4px;
    background-image: repeating-linear-gradient(
        -45deg,
        rgba(255, 255, 255, 0.4),
        rgba(255, 255, 255, 0.4) 4px,
        transparent 4px,
        transparent 8px
    );
}

.ws-business { background-color: var(--accent-blue); }
.ws-commercial { background-color: var(--accent-teal); }
.ws-technology { background-color: var(--purple); }
.ws-financial { background-color: var(--status-warning); }
.ws-synthesis, .ws-value, .ws-investment, .ws-final { background-color: var(--text-secondary); }

.chevron-icon { transition: transform 0.2s ease-in-out; }
.chevron-icon.rotate-180 { transform: rotate(180deg); }

.gantt-phase-content, .gantt-category-content { display: contents; }
.gantt-row.collapsed { display: none; }

/* Filter Modal */
.gantt-modal {
    position: absolute; 
    top: 52px;
    right: 1rem;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    box-shadow: 0 10px 25px var(--shadow-hover);
    z-index: 50; 
    width: 440px;
    opacity: 0; 
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.2s ease;
}
.gantt-modal.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.gantt-modal-content { padding: 1.5rem; }
.gantt-modal-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1.5rem;
}
.filter-modal-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2rem;
}
.filter-group-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color);
}
.filter-group-header .filter-group-title {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}
.filter-group-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    text-transform: none;
}
.filter-group-actions {
    display: flex;
    gap: 0.75rem;
}
.filter-action-btn {
    background: none;
    border: none;
    padding: 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--accent-blue);
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}
.filter-action-btn:hover {
    opacity: 1;
    text-decoration: underline;
}
.custom-checkbox-wrapper {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.375rem 0;
    cursor: pointer;
}
.custom-checkbox-wrapper input[type="checkbox"] { display: none; }
.custom-checkbox {
    width: 18px;
    height: 18px;
    border: 2px solid var(--border-color);
    border-radius: 0.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s ease;
}
.checkbox-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    transition: color 0.2s ease;
}
.custom-checkbox-wrapper:hover .custom-checkbox { border-color: var(--accent-blue); }
.custom-checkbox-wrapper:hover .checkbox-label { color: var(--text-primary); }
.custom-checkbox-wrapper input:checked + .custom-checkbox {
    background-color: var(--accent-blue);
    border-color: var(--accent-blue);
}
.custom-checkbox-wrapper input:checked + .custom-checkbox::after {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    width: 12px;
    height: 12px;
    display: block;
    line-height: 1;
}

/* Task Detail Modal */
.gantt-modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(9, 26, 45, 0.5);
    display: flex; align-items: center; justify-content: center;
    z-index: 100; opacity: 0; visibility: hidden; transition: all 0.2s ease;
}
.gantt-modal-overlay.visible { opacity: 1; visibility: visible; }
.gantt-task-modal {
    background-color: var(--bg-card);
    border-radius: 0.75rem;
    width: 90%; max-width: 600px;
    box-shadow: 0 10px 25px var(--shadow-hover);
    transform: scale(0.95);
    transition: all 0.2s ease;
}
.gantt-modal-overlay.visible .gantt-task-modal { transform: scale(1); }
.gantt-modal-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
    display: flex; justify-content: space-between; align-items: center;
}
.gantt-modal-header h3 { font-size: 1.25rem; font-weight: 700; }
.gantt-modal-header .close-btn { background: none; border: none; font-size: 1.5rem; color: var(--text-muted); cursor: pointer; }
.gantt-modal-body { padding: 1.5rem; display: flex; flex-direction: column; gap: 1.25rem; }
.modal-section-title { font-size: 0.75rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; margin-bottom: 0.5rem; }
.modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.modal-info-item p:first-child { font-weight: 500; color: var(--text-secondary); }
.modal-info-item p:last-child { font-weight: 600; color: var(--text-primary); }
.modal-description p { font-size: 0.875rem; color: var(--text-secondary); line-height: 1.6; }
.modal-dependencies ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.modal-dependencies li { font-size: 0.875rem; color: var(--text-secondary); }
.modal-dependencies li.none { color: var(--text-muted); }
.modal-status-assessment {
    background-color: var(--bg-secondary);
    border-left: 3px solid var(--accent-blue);
    padding: 1rem;
    border-radius: 0.5rem;
}
.modal-suggested-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.75rem;
}
.modal-action-button {
    background-color: var(--bg-hover);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 0.25rem 0.5rem; /* Reduced padding for compact size */
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}
.modal-action-button:hover {
    background-color: var(--accent-blue-translucent);
    border-color: var(--accent-blue);
    color: var(--accent-blue);
}
.dependency-item.completed {
    color: var(--status-success);
    font-weight: 500;
}
.dependency-item.completed::before {
    content: '✓ ';
    font-weight: 700;
}
.modal-aria-button {
    width: 100%;
    margin-top: 1rem;
    padding: 0.75rem;
    background-color: var(--accent-blue);
    color: white;
    font-weight: 600;
    border-radius: 0.5rem;
    border: none;
    cursor: pointer;
    transition: opacity 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}
.modal-aria-button:hover {
    opacity: 0.9;
}
/* =================================================================
   MODELING CANVAS V2 STYLES (OCT 2023)
   ================================================================= */

.modeling-container {
    display: grid;
    grid-template-columns: repeat(12, 1fr); /* Keep the 12-column base */
    gap: 1.5rem;
    padding: 1.5rem;
    height: calc(100vh - 5rem);
}

.modeling-pane {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    height: 100%;
    overflow: hidden;
}

.modeling-left-pane { grid-column: span 8 / span 8; } /* Wider left pane */
.modeling-right-pane { grid-column: span 4 / span 4; } /* Skinnier right pane */

.modeling-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
}

/* Right Pane: Tree View */
.tree-view-container {
    flex-grow: 1;
    overflow-y: auto;
}
.tree-node {
    padding: 0.5rem;
    border-radius: 0.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: background-color 0.2s;
}
.tree-node:hover { background-color: var(--bg-hover); }
.tree-node.active { background-color: var(--accent-blue-translucent); border: 1px solid var(--accent-blue); }
.tree-node.active .node-label { color: var(--accent-blue); font-weight: 600; }

.tree-node .chevron { color: var(--text-muted); transition: transform 0.2s; }
.tree-node .chevron.expanded { transform: rotate(90deg); }

.node-label { font-weight: 500; }
.node-children { padding-left: 1.5rem; }
.node-children.collapsed { display: none; }

/* Left Pane: Radar & Sliders */
.radar-card { height: 400px; }
.description-card { flex-grow: 1; overflow-y: auto; }
.slider-group { margin-top: 0.5rem; }
.slider-label { font-size: 0.75rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; }
.maturity-slider-horizontal { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.5rem; }
.maturity-slider-horizontal span { font-size: 0.875rem; font-weight: 500; }

.tobe-slider-vertical { display: flex; gap: 1rem; margin-top: 1rem; }
.tobe-slider-vertical input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 150px;
    height: 8px;
    background: var(--bg-hover);
    border-radius: 5px;
    outline: none;
    writing-mode: bt-lr; /* vertical */
    transform: rotate(180deg); /* flip it */
}

/* Middle Pane: ARIA Perspective */
.aria-perspective-card {
    background-color: var(--bg-secondary);
    border-left: 4px solid var(--accent-blue);
    padding: 1rem; /* Reduced from 1.5rem to save space */
    border-radius: 0.75rem;
    flex-grow: 1;
    overflow-y: auto;
}
.aria-perspective-card h3 { color: var(--accent-blue); font-weight: 700; }
.aria-perspective-card p, .aria-perspective-card li { font-size: 0.875rem; color: var(--text-secondary); line-height: 1.6; }

/* =================================================================
   MODELING CANVAS V3 STYLES (IMAGE-BASED REDESIGN)
   ================================================================= */

.modeling-v3-container {
    padding: 1.5rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* KPI Cards */
.kpi-grid-modeling {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
}
.kpi-card-modeling {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    padding: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.kpi-card-modeling .icon {
    flex-shrink: 0;
    color: var(--text-muted);
}
.kpi-label-modeling {
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
    font-size: 0.875rem;
}
.kpi-value-modeling {
    font-size: 1.875rem; /* 30px */
    font-weight: 700;
    color: var(--text-primary);
}

/* Capability List */
.capability-list-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.capability-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    padding: 1.5rem;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
}
.capability-card:hover {
    border-color: var(--accent-blue);
    box-shadow: 0 4px 12px var(--shadow-hover);
    transform: translateY(-2px);
}
.capability-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}
.capability-title-group {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.discipline-tag {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    border-radius: 99px;
    background-color: var(--accent-blue-translucent);
    color: var(--accent-blue);
}
.capability-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
}
.capability-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: center;
}
.gap-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    width: fit-content;
    margin-top: 0.5rem;
}
.gap-badge.high { background-color: #FEE2E2; color: #B91C1C; }
.gap-badge.medium { background-color: #FEF3C7; color: #B45309; }
[data-theme="dark"] .gap-badge.high { background-color: #7f1d1d; color: #fecaca; }
[data-theme="dark"] .gap-badge.medium { background-color: #78350f; color: #fde68a; }


/* Custom Maturity Slider */
.maturity-slider-wrapper {
    display: flex;
    flex-direction: column;
}
.slider-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.5rem;
}
.slider-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
}
.slider-value-group {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}
.slider-value-text {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    background-color: var(--bg-hover);
    padding: 0.125rem 0.5rem;
    border-radius: 0.25rem;
}
.slider-value-num {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
}
.slider-track {
    position: relative;
    width: 100%;
    height: 8px;
    background: linear-gradient(to right, 
        var(--status-error) 0%, var(--status-error) 25%, 
        var(--status-warning) 25%, var(--status-warning) 50%, 
        var(--status-info) 50%, var(--status-info) 75%, 
        var(--status-success) 75%, var(--status-success) 100%);
    border-radius: 99px;
}
.slider-thumb {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    background-color: var(--bg-card);
    border: 3px solid var(--accent-blue);
    border-radius: 50%;
    box-shadow: 0 2px 4px var(--shadow);
}
/* =================================================================
   MODELING CANVAS V4 STYLES (INTERACTIVE THREE-PANE)
   ================================================================= */

.modeling-container {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1.5rem; /* 24px */
    padding: 1.5rem;
    height: calc(100vh - 5rem); /* Full height minus header */
}

.modeling-pane {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    height: 100%;
    overflow: hidden;
}

.modeling-left-pane { grid-column: span 5 / span 5; }
.modeling-middle-pane { grid-column: span 3 / span 3; }
.modeling-right-pane { grid-column: span 4 / span 4; }

.modeling-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
}

/* Right Pane: Tree View */
.tree-view-container {
    flex-grow: 1;
    overflow-y: auto;
}
.tree-node {
    padding: 0.5rem;
    border-radius: 0.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: background-color 0.2s;
}
.tree-node:hover { background-color: var(--bg-hover); }
.tree-node.active { background-color: var(--accent-blue-translucent); }
.tree-node.active .node-label { color: var(--accent-blue); font-weight: 600; }

.tree-node .chevron { color: var(--text-muted); transition: transform 0.2s; width: 16px; height: 16px; flex-shrink: 0; }
.tree-node .chevron.expanded { transform: rotate(90deg); }
.tree-node .chevron.hidden { visibility: hidden; } /* For domains */

.node-label { font-weight: 500; }
.node-children { padding-left: 1.5rem; }

/* Left Pane: Radar & Sliders */
.radar-card { height: 400px; }
.description-card { flex-grow: 1; overflow-y: auto; }

/* Custom Maturity Slider from previous design */
.maturity-slider-wrapper {
    display: flex;
    flex-direction: column;
    margin-top: 1rem;
}
.slider-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.5rem;
}
.slider-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
}
.slider-value-group {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}
.slider-value-text {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    background-color: var(--bg-hover);
    padding: 0.125rem 0.5rem;
    border-radius: 0.25rem;
}
.slider-value-num {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
}
.slider-track {
    position: relative;
    width: 100%;
    height: 8px;
    background: linear-gradient(to right, 
        var(--status-error) 0%, var(--status-error) 25%, 
        var(--status-warning) 25%, var(--status-warning) 50%, 
        var(--status-info) 50%, var(--status-info) 75%, 
        var(--status-success) 75%, var(--status-success) 100%);
    border-radius: 99px;
}
.slider-thumb {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    background-color: var(--bg-card);
    border: 3px solid var(--accent-blue);
    border-radius: 50%;
    box-shadow: 0 2px 4px var(--shadow);
}
.tobe-slider-vertical { display: flex; gap: 1rem; margin-top: 1rem; }
.tobe-slider-vertical input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 150px;
    height: 8px;
    background: var(--bg-hover);
    border-radius: 5px;
    outline: none;
    writing-mode: bt-lr; /* vertical */
    transform: rotate(180deg); /* flip it */
}

/* Middle Pane: ARIA Perspective */
.aria-perspective-card {
    background-color: var(--bg-secondary);
    border-left: 4px solid var(--accent-blue);
    padding: 1rem; /* Reduced from 1.5rem to save space */
    border-radius: 0.75rem;
    flex-grow: 1;
    overflow-y: auto;
}
.aria-perspective-card h3 { color: var(--accent-blue); font-weight: 700; }
.aria-perspective-card p, .aria-perspective-card li { font-size: 0.875rem; color: var(--text-secondary); line-height: 1.6; }

/* =================================================================
   MODELING CANVAS V7 STYLES (DUAL-THUMB SLIDER)
   ================================================================= */

.modeling-container {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1.5rem;
    padding: 1.5rem;
    height: calc(100vh - 5rem);
}

.modeling-pane {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    height: 100%;
    overflow: hidden;
}

.modeling-left-pane { grid-column: span 9 / span 9; } 
.modeling-right-pane { grid-column: span 3 / span 3; }

.modeling-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
}

.tree-view-container { flex-grow: 1; overflow-y: auto; }
.tree-node { padding: 0.5rem; border-radius: 0.5rem; cursor: pointer; display: flex; align-items: center; gap: 0.5rem; transition: background-color 0.2s; }
.tree-node:hover { background-color: var(--bg-hover); }
.tree-node.active { background-color: var(--accent-blue-translucent); }
.tree-node.active .node-label { color: var(--accent-blue); font-weight: 600; }
.tree-node .chevron { color: var(--text-muted); transition: transform 0.2s; width: 16px; height: 16px; flex-shrink: 0; }
.tree-node .chevron.expanded { transform: rotate(90deg); }
.tree-node .chevron.hidden { visibility: hidden; }
.node-label { font-weight: 500; }
.node-children { padding-left: 1.5rem; }

.radar-card { height: 480px; padding: 0; }
.description-card { flex-grow: 1; overflow-y: auto; }

.radar-table-grid {
    display: grid;
    grid-template-columns: 6fr 4fr;
    gap: 1.5rem;
    height: 100%;
    width: 100%;
    padding: 1.5rem;
}
.radar-chart-container {
    position: relative;
    height: 100%;
    padding-top: 0.25rem; /* Minimal padding for title */
}

.radar-chart-title {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    z-index: 10;
}

/* Larger fonts and better contrast for expanded mode */
.compass-card.radar-card.expanded .radar-chart-title {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--text-primary);
}

.compass-card.radar-card.expanded .radar-chart-container {
    padding-top: 0.5rem; /* Minimal space for larger title */
}

.maturity-table-container {
    overflow-y: auto;
    height: 100%;
}
.maturity-table {
    width: 100%;
    border-collapse: collapse;
}
.maturity-table th, .maturity-table td {
    padding: 0.5rem 0.375rem; /* Reduced from 0.75rem 0.5rem to save space */
    text-align: left;
    font-size: 0.875rem;
    border-bottom: 1px solid var(--border-color);
}
.maturity-table th {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    position: sticky;
    top: 0;
    background-color: var(--bg-card);
}
.maturity-table th.score-cell {
    text-align: center;
}
.maturity-table td.stage-cell {
    white-space: nowrap;
}
.maturity-table tbody tr {
    cursor: pointer;
    transition: background-color 0.2s;
}
.maturity-table tbody tr:hover {
    background-color: var(--bg-hover);
}
.maturity-table .score-cell { font-weight: 600; text-align: center; }
.maturity-table .gap-positive { color: var(--status-success); }
.maturity-table .gap-negative { color: var(--status-error); }


.dual-slider-component { margin-top: 1.5rem; }
.dual-slider-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 1rem; }
.dual-slider-labels { font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); }
.dual-slider-values { font-size: 1.25rem; font-weight: 700; color: var(--text-primary); }
.dual-slider-values .value-text { font-size: 0.875rem; font-weight: 600; background-color: var(--bg-hover); padding: 0.125rem 0.5rem; border-radius: 0.25rem; margin-left: 0.25rem; }

.dual-slider-track-container { position: relative; height: 24px; }
.dual-slider-track {
    position: absolute;
    top: 8px;
    left: 0;
    width: 100%;
    height: 8px;
    background: linear-gradient(to right, var(--purple), var(--accent-blue), var(--accent-teal));
    border-radius: 99px;
}
.dual-slider-range-input {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    height: 24px;
    z-index: 10;
    margin: 0;
}
.dual-slider-range-input::-webkit-slider-runnable-track { background: transparent; }
.dual-slider-range-input::-moz-range-track { background: transparent; }

.dual-slider-range-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    margin-top: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 4px solid;
    background-color: var(--bg-card);
    box-shadow: 0 2px 4px var(--shadow-hover);
}

.dual-slider-range-input::-moz-range-thumb {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 4px solid;
    background-color: var(--bg-card);
    box-shadow: 0 2px 4px var(--shadow-hover);
}

.dual-slider-range-input.as-is::-webkit-slider-thumb { border-color: var(--purple); }
.dual-slider-range-input.to-be::-webkit-slider-thumb { border-color: var(--accent-blue); }
.dual-slider-range-input.as-is::-moz-range-thumb { border-color: var(--purple); }
.dual-slider-range-input.to-be::-moz-range-thumb { border-color: var(--accent-blue); }

/* UPDATED: Container for Aria indicators above the slider */
.aria-indicator-container {
    position: relative;
    height: 28px;
    width: 100%;
    margin-bottom: 4px; /* Space between indicators and slider track */
}
.aria-indicator {
    position: absolute;
    bottom: 0; /* Triangle at the bottom of the container */
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
}
/* UPDATED: Use border-top to point down */
.aria-indicator.as-is { border-top: 8px solid var(--purple); }
.aria-indicator.to-be { border-top: 8px solid var(--accent-blue); }

.aria-indicator-label {
    position: absolute;
    top: 0; /* Label at the top of the container */
    transform: translateX(-50%);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}
.aria-indicator-label.as-is { color: var(--purple); }
.aria-indicator-label.to-be { color: var(--accent-blue); }


/* UPDATED: Added margin-top for spacing */
.dual-slider-descriptions {
    margin-top: 1.5rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.slider-description-box {
    font-size: 0.875rem;
    color: var(--text-secondary);
    padding: 0.75rem;
    background-color: var(--bg-secondary);
    border-radius: 0.5rem;
    min-height: 60px;
    line-height: 1.6;
}

.aria-perspective-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--accent-blue);
    border-radius: 0.75rem;
    padding: 1rem; /* Reduced from 1.5rem to save space */
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    overflow-y: auto;
}
.aria-perspective-card h3 { color: var(--accent-blue); font-weight: 700; }
.aria-perspective-card p, .aria-perspective-card li { font-size: 0.875rem; color: var(--text-secondary); line-height: 1.6; }
.aria-perspective-card p { margin-bottom: 1rem; }

/* ARIA Insight Summary Styles */
.aria-insight-summary {
    max-height: 100%;
    overflow-y: auto;
}

.aria-item-detail {
    border: 1px solid var(--border-color);
    transition: all 0.2s ease;
}

.aria-item-detail:hover {
    border-color: var(--accent-blue);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.confidence-bar-wrapper {
    position: relative;
    width: 100%;
    height: 12px;
    background-color: var(--bg-tertiary);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 0.75rem;
}

.confidence-bar {
    height: 100%;
    background: linear-gradient(90deg, #ef4444 0%, #f59e0b 50%, #10b981 100%);
    border-radius: 6px;
    transition: width 0.3s ease;
}

/* ARIA Perspective Detail Styles */
.aria-perspective-detail {
    padding: 0.5rem 0;
}

.aria-score-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    padding: 1rem;
    background-color: var(--bg-secondary);
    border-radius: 0.5rem;
    border: 1px solid var(--border-color);
}

.aria-score-item {
    text-align: center;
}

.aria-score-item label {
    display: block;
    margin-bottom: 0.25rem;
}

.aria-score-item span {
    display: block;
    color: var(--accent-blue);
}

        .aria-confidence-section {
            padding: 1.25rem;
            background-color: var(--bg-secondary);
            border-radius: 0.5rem;
            border: 1px solid var(--border-color);
            min-height: 120px;
        }

.aria-rationale-section {
    padding: 1rem;
    background-color: var(--bg-secondary);
    border-radius: 0.5rem;
    border: 1px solid var(--border-color);
}

/* New ARIA Perspective Layout Styles */
.aria-scores-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.aria-score-column {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.aria-column-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.aria-score-display {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
}

.aria-score-value {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

.aria-rationale-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.aria-rationale-header svg {
    color: var(--text-secondary);
}

.aria-rationale-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.aria-rationale-text {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}

/* Bottom Row: Confidence Bar and Rationale */
.aria-confidence-row {
    width: 100%;
}

.aria-confidence-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.aria-confidence-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.aria-confidence-value {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
}

.aria-confidence-rationale {
    margin-top: 0.5rem;
}

.aria-confidence-text {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}

/* Drill Down Header Styles */
.drill-down-header {
    position: relative;
    margin-bottom: 1rem;
}

/* Removed the bottom border line to eliminate double lines */

.drill-down-expand-btn {
    background: #4C1D95; /* Darker purple color */
    color: white;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    position: absolute;
    top: 0;
    right: 0;
}

.drill-down-expand-btn:hover {
    background: #4C1D95;
    opacity: 0.8;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Radar Header Styles */
.radar-header {
    position: relative;
    margin-bottom: 1rem;
}

.radar-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--border-color);
}

.radar-expand-btn {
    background: #4C1D95; /* Darker purple color */
    color: white;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    position: absolute;
    top: 0;
    right: 0;
}

.radar-expand-btn:hover {
    background: #4C1D95;
    opacity: 0.8;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.drill-down-expand-btn svg {
    width: 12px;
    height: 12px;
}

/* Hierarchical Inventory Modal Styles */
.hierarchical-inventory-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.hierarchical-inventory-content {
    background: var(--bg-card);
    border-radius: 0.75rem;
    width: 90%;
    max-width: 1200px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.hierarchical-inventory-header {
    padding: 1.5rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
}

.hierarchical-inventory-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.hierarchical-inventory-filters {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.filter-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.filter-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.filter-toggle {
    position: relative;
    width: 44px;
    height: 24px;
    background: var(--bg-tertiary);
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.filter-toggle.active {
    background: var(--accent-blue);
}

.filter-toggle::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    transition: transform 0.2s ease;
}

.filter-toggle.active::after {
    transform: translateX(20px);
}

.close-modal-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 0.375rem;
    transition: all 0.2s ease;
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 10;
}

.close-modal-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.hierarchical-inventory-body {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
}

/* Scope Inconsistency Warning */
.scope-inconsistency-warning {
    color: #f59e0b;
    font-size: 0.875rem;
    margin-left: 0.25rem;
    cursor: help;
}

.hierarchical-table {
    width: 100%;
    border-collapse: collapse;
}

.hierarchical-table th {
    background: var(--bg-secondary);
    padding: 0.75rem;
    text-align: left;
    font-weight: 600;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 10;
}

.hierarchical-table td {
    padding: 0.75rem;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-secondary);
}

.hierarchical-table tr:hover {
    background: var(--bg-hover);
}

.element-name {
    font-weight: 500;
    color: var(--text-primary);
}

.element-name.level-1 { padding-left: 0; }
.element-name.level-2 { padding-left: 1.5rem; }
.element-name.level-3 { padding-left: 3rem; }
.element-name.level-4 { padding-left: 4.5rem; }

.scope-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 600;
}

.scope-indicator.on {
    background: var(--status-success);
    color: white;
}

.scope-indicator.off {
    background: var(--bg-tertiary);
    color: var(--text-muted);
}

.score-cell {
    text-align: center;
    font-weight: 500;
}

.aria-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 600;
}

.aria-indicator.yes {
    background: var(--accent-blue);
    color: white;
}

.aria-indicator.no {
    background: var(--bg-tertiary);
    color: var(--text-muted);
}

.calculated-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 600;
}

.calculated-indicator.calculated {
    background: #f59e0b;
    color: white;
}

.calculated-indicator.stored {
    background: #3b82f6;
    color: white;
}

.dual-slider-labels { cursor: pointer; }
.dual-slider-labels.active {
    font-weight: 700;
    color: var(--text-primary);
}

.dual-slider-range-input::-webkit-slider-thumb { pointer-events: auto; }
.dual-slider-range-input::-moz-range-thumb { pointer-events: auto; }

.aria-perspective-card h3 {
    margin: 0;
    color: var(--accent-blue);
}

.aria-perspective-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.reset-button {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 0.25rem;
    transition: all 0.2s ease;
}

.reset-button:hover {
    color: var(--text-primary);
    background-color: var(--bg-hover);
}

#aria-perspective-content h4 {
    font-weight: 700;
    color: var(--text-primary);
}

.tree-view-container .node-label {
    font-size: 0.875rem;
}
/* css/styles.css - ADD THESE STYLES AT THE END OF THE FILE */

/* =================================================================
   KNOWLEDGE GRAPH PAGE V2 STYLES
   ================================================================= */

.knowledge-page-layout {
    display: grid;
    grid-template-columns: 280px 1fr 320px; /* Left | Center | Right */
    gap: 1.5rem; /* 24px */
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.knowledge-left-panel, .knowledge-right-panel, .knowledge-center-stage {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    height: 100%;
    overflow: hidden;
}

.control-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    padding: 1rem 1.5rem;
    box-shadow: 0 1px 3px var(--shadow);
}

.knowledge-left-panel .control-card {
    flex-shrink: 0;
}

.knowledge-right-panel .control-card {
    flex-grow: 1;
    overflow-y: auto;
}

.knowledge-center-stage {
    gap: 1rem;
}

.search-bar-wrapper {
    position: relative;
    flex-shrink: 0;
}

#knowledge-search-input {
    width: 100%;
    padding: 0.75rem 2.5rem 0.75rem 1rem;
    border-radius: 0.5rem;
    border: 1px solid var(--border-color);
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 1rem;
}
#knowledge-search-input:focus {
    outline: none;
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 2px var(--accent-blue-translucent);
}

#knowledge-search-clear {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--text-muted);
    cursor: pointer;
    display: none;
}

#knowledge-graph-card {
    flex-grow: 1;
    position: relative;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px var(--shadow);
    overflow: auto; /* Enable scroll bars when content overflows */
    /* Ensure zoom behavior works properly */
    cursor: grab;
    user-select: none; /* Prevent text selection during pan */
}

#knowledge-graph-card:active {
    cursor: grabbing;
}

#knowledge-graph-card svg {
    cursor: grab;
}

#knowledge-graph-card svg:active {
    cursor: grabbing;
}

/* Zoom Controls */
.zoom-controls {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    z-index: 30;
}

.zoom-btn {
    width: 40px;
    height: 40px;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px var(--shadow);
}

.zoom-btn:hover {
    background-color: var(--bg-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px var(--shadow);
}

.zoom-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px var(--shadow);
}

.zoom-btn svg {
    color: var(--text-primary);
}

.zoom-level-indicator {
    width: 40px;
    height: 24px;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-primary);
    box-shadow: 0 2px 4px var(--shadow);
}

/* Aria NextGen Styles */
body.page-aria-nextgen {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

body.page-aria-nextgen main#main-content {
    padding: 0.75rem !important;
}

/* NextGen Welcome Message */
.welcome-message .aria-response-bubble {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    padding: 1.5rem;
    margin-bottom: 1rem;
    box-shadow: 0 2px 4px var(--shadow);
}

/* NextGen Response Styling */
.nextgen-response {
    line-height: 1.6;
}

.nextgen-response h1,
.nextgen-response h2,
.nextgen-response h3,
.nextgen-response h4,
.nextgen-response h5,
.nextgen-response h6 {
    color: var(--text-primary);
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    font-weight: 600;
}

.nextgen-response h1 {
    font-size: 1.5rem;
    border-bottom: 2px solid var(--accent-blue);
    padding-bottom: 0.5rem;
}

.nextgen-response h2 {
    font-size: 1.25rem;
    color: var(--accent-blue);
}

.nextgen-response h3 {
    font-size: 1.125rem;
    color: var(--accent-teal);
}

.nextgen-response p {
    margin-bottom: 1rem;
    color: var(--text-secondary);
}

.nextgen-response ul,
.nextgen-response ol {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}

.nextgen-response li {
    margin-bottom: 0.5rem;
    color: var(--text-secondary);
}

.nextgen-response strong {
    color: var(--text-primary);
    font-weight: 600;
}

.nextgen-response code {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 0.25rem;
    padding: 0.125rem 0.375rem;
    font-family: 'Courier New', monospace;
    font-size: 0.875rem;
    color: var(--accent-blue);
}

.nextgen-response pre {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    padding: 1rem;
    overflow-x: auto;
    margin-bottom: 1rem;
}

.nextgen-response pre code {
    background: none;
    border: none;
    padding: 0;
    color: var(--text-primary);
}

/* Split Response Layout */
.split-response-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1.5rem;
    margin-top: 1rem;
}

.professional-response-panel {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    padding: 1.5rem;
    box-shadow: 0 2px 4px var(--shadow);
}

.technical-insights-panel {
    background-color: var(--bg-secondary);
    border: 1px solid var(--accent-teal);
    border-radius: 0.75rem;
    padding: 1.5rem;
    box-shadow: 0 2px 4px var(--shadow);
}

.panel-header {
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--border-color);
}

.panel-header h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.technical-insights-panel .panel-header {
    border-bottom-color: var(--accent-teal);
}

.technical-insights-panel .panel-header h3 {
    color: var(--accent-teal);
}

.insight-section {
    margin-bottom: 1.5rem;
    padding: 1rem;
    background-color: var(--bg-primary);
    border-radius: 0.5rem;
    border-left: 3px solid var(--accent-blue);
}

.insight-section h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.5rem 0;
}

.insight-section p {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0.25rem 0;
    line-height: 1.4;
}

.insight-section strong {
    color: var(--text-primary);
    font-weight: 600;
}

/* Responsive design for smaller screens */
@media (max-width: 768px) {
    .split-response-layout {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .professional-response-panel,
    .technical-insights-panel {
        padding: 1rem;
    }
}

.nextgen-response blockquote {
    border-left: 4px solid var(--accent-blue);
    padding-left: 1rem;
    margin: 1rem 0;
    color: var(--text-secondary);
    font-style: italic;
}

.nextgen-response table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
    background-color: var(--bg-card);
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 2px 4px var(--shadow);
}

.nextgen-response th,
.nextgen-response td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.nextgen-response th {
    background-color: var(--bg-secondary);
    font-weight: 600;
    color: var(--text-primary);
}

.nextgen-response td {
    color: var(--text-secondary);
}

.nextgen-response tr:hover {
    background-color: var(--bg-hover);
}

/* NextGen Error Styling */
.error-message {
    background-color: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 0.5rem;
    padding: 1rem;
    margin: 1rem 0;
}

.error-message h4 {
    color: #dc2626;
    margin-bottom: 0.5rem;
}

.error-message p {
    color: #dc2626;
    margin: 0;
}

/* NextGen Typing Indicator */
.typing-indicator .typing-dots {
    display: flex;
    gap: 0.25rem;
    align-items: center;
}

.typing-indicator .typing-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--accent-blue);
    animation: typing 1.4s infinite ease-in-out;
}

.typing-indicator .typing-dots span:nth-child(1) {
    animation-delay: -0.32s;
}

.typing-indicator .typing-dots span:nth-child(2) {
    animation-delay: -0.16s;
}

@keyframes typing {
    0%, 80%, 100% {
        transform: scale(0.8);
        opacity: 0.5;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

/* NextGen Settings Modal */
#nextgen-settings-modal {
    position: absolute;
    bottom: calc(100% + 0.5rem);
    left: 1rem;
    right: 1rem;
    width: 260px;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    max-height: 60vh;
    overflow-y: auto;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.2s ease;
}

#nextgen-settings-modal.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* NextGen Suggestion Pills */
.suggestion-pill {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
    margin: 0.25rem;
    display: inline-block;
}

.suggestion-pill:hover {
    background-color: var(--bg-hover);
    border-color: var(--accent-blue);
    color: var(--accent-blue);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px var(--shadow);
}

/* NextGen User Message Styling */
.user-message-bubble {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    justify-content: flex-end;
}

.user-avatar {
    width: 32px;
    height: 32px;
    background-color: var(--accent-blue);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
}

.user-message-content {
    background-color: var(--accent-blue);
    color: white;
    padding: 0.75rem 1rem;
    border-radius: 1rem 1rem 0.25rem 1rem;
    max-width: 70%;
    word-wrap: break-word;
}

.user-message-content p {
    margin: 0;
    line-height: 1.5;
}

/* NextGen Aria Response Styling - Only for NextGen */
.aria-nextgen-conversation-container .aria-response-bubble {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    justify-content: flex-start;
}

/* Ensure original Aria response wrapper layout is preserved */
.aria-response-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    justify-content: flex-start;
    margin-right: auto;
    max-width: 100% !important; /* Use full width - removed 85% constraint */
    width: 100%;
}

.aria-avatar {
    width: 32px;
    height: 32px;
    background-color: var(--accent-teal);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
}

.aria-response-content {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 1rem 1rem 1rem 0.25rem;
    padding: 1rem;
    max-width: 100% !important;
    word-wrap: break-word;
    box-shadow: 0 2px 4px var(--shadow);
}

.aria-response-content h3 {
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.aria-response-content p {
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
    line-height: 1.6;
}

.aria-response-content ul {
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
}

.aria-response-content li {
    margin-bottom: 0.25rem;
}

.control-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color);
}

.legend-item, .filter-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
}
.filter-item label {
    cursor: pointer;
    color: var(--text-secondary);
}
.filter-item input {
    cursor: pointer;
}

/* Detail Pane Styles */
#detail-pane-content .detail-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    color: var(--text-muted);
}
.detail-header {
    padding-bottom: 0.75rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
    border-left: 4px solid;
    padding-left: 0.75rem;
}
.detail-title { font-size: 1.125rem; font-weight: 700; color: var(--text-primary); }
.detail-group { font-size: 0.75rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; }
.detail-body .detail-section { margin-bottom: 1rem; }
.detail-body strong { font-weight: 600; color: var(--text-primary); font-size: 0.875rem; }
.detail-body p { font-size: 0.875rem; color: var(--text-secondary); margin-top: 0.25rem; }


/* D3 Graph Styles */
.node { cursor: pointer; }
.node text { text-anchor: middle; pointer-events: none; dominant-baseline: middle; }
.node rect, .node circle, .node path {
    stroke: var(--bg-card);
    stroke-width: 3px;
    transition: filter 0.2s ease;
}
.node:hover rect, .node:hover circle, .node:hover path {
    filter: brightness(1.2);
}
.node.faded { opacity: 0.2; transition: opacity 0.3s ease; }
.node.highlighted-search { opacity: 1; }
.node.highlighted-search rect, .node.highlighted-search circle, .node.highlighted-search path {
    stroke: var(--status-warning);
    stroke-width: 4px;
}
.node.selected rect, .node.selected circle, .node.selected path {
    stroke: var(--accent-blue);
    stroke-width: 4px;
}

.link {
    stroke: var(--text-muted);
    stroke-width: 1.5px;
    stroke-opacity: 0.6;
    transition: all 0.3s ease;
}
.link.faded { stroke-opacity: 0.1; }
.link.highlighted { stroke: var(--accent-blue); stroke-width: 3px; stroke-opacity: 1; }

/* css/styles.css - ADD these variables inside :root and [data-theme="dark"] */

:root {
    /* ... existing variables ... */
    --node-fill-subtle: #F1F5F9; /* slate-100 */
    --node-text-subtle: #091A2D; /* custom dark blue */
    --accent-blue-translucent: rgba(72, 170, 221, 0.2); /* 20% opacity */
}

[data-theme="dark"] {
    /* ... existing variables ... */
    --node-fill-subtle: #475569; /* slate-600 */
    --node-text-subtle: #F8FAFC; /* slate-50 */
    --accent-blue-translucent: rgba(96, 165, 250, 0.25); /* 25% opacity */
}

/* ADD these new styles for the knowledge page layout */
.knowledge-left-panel {
    overflow-y: auto; /* Allow scrolling for many filters */
}
.control-card {
    margin-bottom: 1.5rem;
}
.control-card:last-child {
    margin-bottom: 0;
}
.filter-item label {
    line-height: 1.2;
}

* Enriched Detail Pane Grid Styles */
.detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin: 1rem 0;
    font-size: 0.875rem;
}
.detail-grid strong {
    font-weight: 600;
    color: var(--text-primary);
    display: block;
    margin-bottom: 0.125rem;
}
.detail-grid p {
    color: var(--text-secondary);
    margin: 0;
}

/* NEW: Tree-View Filter Styles */
.filter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color);
}
.filter-header span {
    font-weight: 600;
    font-size: 1rem;
}
.filter-header button {
    background: none;
    border: none;
    color: var(--accent-blue);
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
}
.filter-tree-item {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 0.25rem 0;
    font-size: 0.875rem;
}
.filter-tree-item > label {
    font-weight: 500;
    color: var(--text-primary);
}
.filter-tree-children {
    width: 100%;
    padding-left: 1.25rem;
    margin-top: 0.25rem;
}
.filter-tree-children .filter-tree-item > label {
    font-weight: 400;
    color: var(--text-secondary);
}

/* NEW: Toggle Switch Styles */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 20px;
}
.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.toggle-switch .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--bg-hover);
    transition: .4s;
    border-radius: 34px;
}
.toggle-switch .slider:before {
    position: absolute;
    content: "";
    height: 12px;
    width: 12px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}
.toggle-switch input:checked + .slider {
    background-color: var(--accent-blue);
}
.toggle-switch input:checked + .slider:before {
    transform: translateX(14px);
}

/* NEW: Enriched Detail Pane Styles */
.quality-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 99px;
    font-size: 0.75rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}
.quality-badge.good { background-color: var(--status-success); color: white; }
.quality-badge.concerns { background-color: var(--status-warning); color: white; }
.quality-badge.bad { background-color: var(--status-error); color: white; }

/* NEW: Simplified Filter Styles */
.filter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}
.filter-header .control-title {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}
.filter-header button {
    background: none;
    border: none;
    color: var(--accent-blue);
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
}
.filter-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.3rem 0;
}
.filter-item label {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

/* NEW: Toggle Switch Styles */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 20px;
}
.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.toggle-switch .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--bg-hover);
    transition: .4s;
    border-radius: 34px;
}
.toggle-switch .slider:before {
    position: absolute;
    content: "";
    height: 12px;
    width: 12px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}
.toggle-switch input:checked + .slider {
    background-color: var(--accent-blue);
}
.toggle-switch input:checked + .slider:before {
    transform: translateX(14px);
}

/* NEW: Enriched Detail Pane Styles */
.quality-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 99px;
    font-size: 0.75rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}
.quality-badge.good { background-color: var(--status-success); color: white; }
.quality-badge.concerns { background-color: var(--status-warning); color: white; }
.quality-badge.bad { background-color: var(--status-error); color: white; }

.detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin: 1rem 0;
    font-size: 0.875rem;
}
.detail-grid strong {
    font-weight: 600;
    color: var(--text-primary);
    display: block;
    margin-bottom: 0.125rem;
    font-size: 0.8rem;
}
.detail-grid p {
    color: var(--text-secondary);
    margin: 0;
    font-size: 0.8rem;
    word-break: break-word;
}
.detail-section-list li {
    font-size: 0.8rem;
}
/* NEW: Tree-View Filter Styles */
.filter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color);
}
.filter-header .control-title {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}
.filter-header button {
    background: none;
    border: none;
    color: var(--accent-blue);
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
}
.filter-section-title {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}
.filter-tree-item {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 0.25rem 0;
    font-size: 0.875rem;
}
.filter-tree-item.is-parent > .filter-parent-label {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    cursor: pointer;
    font-weight: 600;
    color: var(--text-primary);
}
.filter-tree-item.is-parent > .filter-parent-label .chevron-icon {
    width: 16px;
    height: 16px;
    color: var(--text-muted);
    transition: transform 0.2s ease-in-out;
}
.filter-tree-item.is-parent > .filter-parent-label .chevron-icon.expanded {
    transform: rotate(90deg);
}
.filter-tree-children {
    width: 100%;
    padding-left: 1.25rem;
    margin-top: 0.25rem;
}
.filter-tree-children.collapsed {
    display: none;
}
.filter-tree-children .filter-tree-item > label {
    font-weight: 400;
    color: var(--text-secondary);
}

/* NEW: Toggle Switch Styles */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 20px;
}
.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.toggle-switch .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--bg-hover);
    transition: .4s;
    border-radius: 34px;
}
.toggle-switch .slider:before {
    position: absolute;
    content: "";
    height: 12px;
    width: 12px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}
.toggle-switch input:checked + .slider {
    background-color: var(--accent-blue);
}
.toggle-switch input:checked + .slider:before {
    transform: translateX(14px);
}

/* NEW: Graph Reset Button */
.graph-reset-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 36px;
    height: 36px;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}
.graph-reset-btn:hover {
    background-color: var(--bg-hover);
    color: var(--text-primary);
}

/* NEW: Legend Subheader */
.legend-subheader {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-color);
}

/* NEW: Tree-View Filter Styles */
.filter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}
.filter-header .control-title {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}
.filter-header button {
    background: none;
    border: none;
    color: var(--accent-blue);
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
}
.filter-section-title {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}
.filter-tree-item {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 0.25rem 0;
    font-size: 0.875rem;
}
.filter-tree-item.is-parent > .filter-parent-label {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    cursor: pointer;
    font-weight: 600;
    color: var(--text-primary);
}
.filter-tree-item.is-parent > .filter-parent-label .chevron-icon {
    width: 16px;
    height: 16px;
    color: var(--text-muted);
    transition: transform 0.2s ease-in-out;
}
.filter-tree-item.is-parent > .filter-parent-label .chevron-icon.expanded {
    transform: rotate(90deg);
}
.filter-tree-children {
    width: 100%;
    padding-left: 1.25rem;
    margin-top: 0.25rem;
}
.filter-tree-children.collapsed {
    display: none;
}
.filter-tree-children .filter-tree-item > label {
    font-weight: 400;
    color: var(--text-secondary);
}

/* NEW: Toggle Switch Styles */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 20px;
}
.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.toggle-switch .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--bg-hover);
    transition: .4s;
    border-radius: 34px;
}
.toggle-switch .slider:before {
    position: absolute;
    content: "";
    height: 12px;
    width: 12px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}
.toggle-switch input:checked + .slider {
    background-color: var(--accent-blue);
}
.toggle-switch input:checked + .slider:before {
    transform: translateX(14px);
}

/* =================================================================
   KNOWLEDGE GRAPH PAGE V2 STYLES (ADDITIONS)
   ================================================================= */

.filter-header button {
    background: none;
    border: none;
    color: var(--accent-blue);
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
}
.filter-header button:hover {
    text-decoration: underline;
}

.filter-tree-item {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 0.25rem 0;
    font-size: 0.875rem;
}
.filter-tree-item.is-parent > .filter-parent-label {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    cursor: pointer;
    font-weight: 600;
    color: var(--text-primary);
}
.filter-tree-item.is-parent > .filter-parent-label .chevron-icon {
    width: 16px;
    height: 16px;
    color: var(--text-muted);
    transition: transform 0.2s ease-in-out;
}
.filter-tree-item.is-parent > .filter-parent-label .chevron-icon.expanded {
    transform: rotate(90deg);
}
.filter-tree-children {
    width: 100%;
    padding-left: 1.25rem;
    margin-top: 0.25rem;
}
.filter-tree-children.collapsed {
    display: none;
}
.filter-tree-children .filter-tree-item > label {
    font-weight: 400;
    color: var(--text-secondary);
}
/* =================================================================
   KNOWLEDGE GRAPH PAGE V2 STYLES (ADDITIONS)
   ================================================================= */

.knowledge-page-layout {
    grid-template-columns: 320px 1fr 320px; /* Widened left panel */
}

.legend-item {
    margin-bottom: 0.25rem; /* Reduced spacing */
}

/* TIGHTER SPACING FOR NODE TYPES FILTER */
#nodetype-filter-container .filter-item {
    padding: 0.3rem 0; 
}

.filter-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.filter-header button {
    background: none;
    border: none;
    color: var(--accent-blue);
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
}
.filter-header button:hover {
    text-decoration: underline;
}

.filter-tree-item {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 0.25rem 0;
    font-size: 0.875rem;
}
.filter-tree-item.is-parent > .filter-parent-label {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    cursor: pointer;
    font-weight: 600;
    color: var(--text-primary);
}
.filter-tree-item.is-parent > .filter-parent-label .chevron-icon {
    width: 16px;
    height: 16px;
    color: var(--text-muted);
    transition: transform 0.2s ease-in-out;
}
.filter-tree-item.is-parent > .filter-parent-label .chevron-icon.expanded {
    transform: rotate(90deg);
}
.filter-tree-children {
    width: 100%;
    padding-left: 1.25rem;
    margin-top: 0.25rem;
}
.filter-tree-children.collapsed {
    display: none;
}
.filter-tree-children .filter-tree-item > label {
    font-weight: 400;
    color: var(--text-secondary);
}

/* NEW: In-Graph Reset Button */
.graph-reset-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 36px;
    height: 36px;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 10; /* Ensure it's above the graph canvas */
}
.graph-reset-btn:hover {
    background-color: var(--bg-hover);
    color: var(--text-primary);
}

.company-strip-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* Align to top in case text wraps */
    margin-bottom: 0.75rem;
}

.company-strip-name {
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.2;
}

.company-strip-stage {
    font-size: 0.75rem; /* 12px */
    color: var(--text-muted);
    font-weight: 500;
    margin: 0;
    line-height: 1.2;
}

.data-table-container {
    overflow-x: auto;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
}

.data-table th, .data-table td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.data-table th {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
}

.data-table td {
    font-size: 0.875rem;
    color: var(--text-secondary);
}
* Tighter main content padding */
#main-content {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem 0.75rem; /* REDUCED: 50% less padding for more screen space */
    width: 100% !important;
    max-width: 100% !important;
}

/* Tighter container gaps */
.portfolio-container, .diligence-hub-container, .workspace-v3-container, .modeling-container {
    gap: 1.5rem; /* REDUCED from 2rem */
}

.knowledge-page-layout {
    gap: 1rem; /* REDUCED from 1.5rem */
}

.tabs-container { 
    border-bottom: 1px solid var(--border-color); 
    margin-bottom: 1.5rem; 
}
.tab-nav { 
    display: flex; 
    gap: 0.25rem; /* Tighter gap */
}
.tab-button {
    padding: 0.25rem 0.5rem; /* Reduced padding for compact size */
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 0.5rem 0.5rem 0 0;
    font-weight: 600;
    color: var(--text-secondary);
    background-color: transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: -1px; /* Overlap the container border */
}
.tab-button:hover {
    background-color: var(--bg-hover);
    color: var(--text-primary);
}
.tab-button.active {
    background-color: var(--bg-card);
    color: var(--accent-blue);
    border-color: var(--border-color);
}

.tab-content-area { 
    display: flex; 
    flex-direction: column; 
    gap: 1rem; 
}
.tabs-container { 
    border-bottom: 1px solid var(--border-color); 
    margin-bottom: 1.5rem; 
}
.tab-nav { 
    display: flex; 
    gap: 0.25rem; /* Tighter gap */
}
.tab-button {
    padding: 0.25rem 0.5rem; /* Reduced padding for compact size */
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 0.5rem 0.5rem 0 0;
    font-weight: 600;
    color: var(--text-secondary);
    background-color: transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: -1px; /* Overlap the container border */
}
.tab-button:hover {
    background-color: var(--bg-hover);
    color: var(--text-primary);
}
.tab-button.active {
    background-color: var(--bg-card);
    color: var(--accent-blue);
    border-color: var(--border-color);
}

.tab-content-area { 
    display: flex; 
    flex-direction: column; 
    gap: 1rem; 
}

.tabs-container { 
    border-bottom: 1px solid var(--border-color); 
    margin-bottom: 1.5rem; 
}
.tab-nav { 
    display: flex; 
    gap: 0.25rem; /* Tighter gap */
}
.tab-button {
    padding: 0.25rem 0.5rem; /* Reduced padding for compact size */
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 0.5rem 0.5rem 0 0;
    font-weight: 600;
    color: var(--text-secondary);
    background-color: transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: -1px; /* Overlap the container border */
}
.tab-button:hover {
    background-color: var(--bg-hover);
    color: var(--text-primary);
}
.tab-button.active {
    background-color: var(--bg-card);
    color: var(--accent-blue);
    border-color: var(--border-color);
}

.tab-content-area { 
    display: flex; 
    flex-direction: column; 
    gap: 1rem; 
}

/* css/styles.css - RATIONALIZED AND CORRECTED */

/* =================================================================
   NEW SIDEBAR MENU STYLES
   ================================================================= */
.nav-parent .nav-link.active {
    background-color: transparent; /* Parent link shouldn't highlight like a child */
    color: var(--text-primary);
    font-weight: 600;
}
.nav-parent .nav-link[data-page-parent]:hover {
    background-color: var(--bg-hover);
}
.nav-children {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
    padding-left: 1rem; /* Indent child items */
}
.nav-children .nav-link {
    color: var(--text-secondary);
}
.nav-children .nav-link:hover {
    color: var(--text-primary);
}
.nav-parent .chevron-icon {
    transition: transform 0.3s ease-in-out;
}
.nav-parent .chevron-icon.expanded {
    transform: rotate(90deg);
}

/* =================================================================
   KNOWLEDGE REFINERY STYLES (CONSOLIDATED & SCROLL-FIXED)
   ================================================================= */

/* --- Main Layout & Panes --- */
.knowledge-refinery-layout {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    width: 100%;
    /* THIS IS THE FIX: Use a calculated height, just like the working modeling page */
    /* It assumes your header is 5rem (80px) tall. Adjust if needed. */
    height: calc(100vh - 8rem); /* 5rem for header + 3rem for main content padding */
}

.refinery-pane {
    display: flex;
    flex-direction: column;
    height: 100%; /* This now works because the parent has a fixed calc() height */
    overflow: hidden;
}

.refinery-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    padding: 1.5rem;
    box-shadow: 0 1px 3px var(--shadow);
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-height: 0; /* Important for flex children */
}

.refinery-title {
    font-size: 1.25rem;
    font-weight: 700;
    padding-bottom: 0.75rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0; /* This is correct, keep it */
}

/* --- SCROLLING FIX & CONTENT AREAS --- */
.refinery-content-area,
.normalization-terminal,
.curation-form {
    flex-grow: 1;
    overflow-y: auto; /* This will now work! */
    min-height: 0;
}

/* --- Dynamic States (Empty/Loading) --- */
.refinery-empty-state, .refinery-loading-state {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--text-muted);
    height: 100%;
}
.refinery-empty-state svg {
    width: 48px;
    height: 48px;
    margin-bottom: 1rem;
    stroke-width: 1;
}

/* --- Interpretation Pane Specifics --- */
.entity-text-box {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    padding: 1rem;
    font-size: 0.875rem;
    line-height: 1.6;
}
mark.entity-strategy { background-color: #dbeafe; padding: 2px 4px; border-radius: 3px; color: #1e40af; }
mark.entity-kpi { background-color: #dcfce7; padding: 2px 4px; border-radius: 3px; color: #166534; }
mark.entity-company { background-color: #f3e8ff; padding: 2px 4px; border-radius: 3px; color: #581c87; }
mark.entity-date { background-color: #fef3c7; padding: 2px 4px; border-radius: 3px; color: #92400e; }
mark.entity-risk { background-color: #fee2e2; padding: 2px 4px; border-radius: 3px; color: #991b1b; }

/* --- Curation Pane Specifics --- */
.form-group { margin-bottom: 1rem; }
.form-group label { display: block; font-weight: 600; font-size: 0.875rem; margin-bottom: 0.25rem; }
.form-group select, .form-group input, .form-group textarea {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid var(--border-color);
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}
.form-group textarea { resize: vertical; }

/* --- Normalization Terminal Specifics --- */
.normalization-terminal {
    background-color: #0d1117; /* GitHub dark */
    color: #c9d1d9; /* GitHub light gray */
    font-family: 'Courier New', Courier, monospace;
    padding: 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
}
.terminal-log { margin-bottom: 0.5rem; }
.terminal-log.success { color: #56d364; /* GitHub green */ }
#normalized-output-code, #norm-main, #norm-meta, #norm-data {
    white-space: pre-wrap;
    word-wrap: break-word;
    color: #79c0ff; /* GitHub blue for JSON */
}
#norm-meta, #norm-data {
    color: #c9d1d9; /* GitHub light gray for CSV */
}
.normalized-files-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.5rem;
}
.normalized-file-chip {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
}
.normalized-file-chip svg {
    width: 20px;
    height: 20px;
}

/* --- Ingestion & Confirmation Modals --- */
.ingestion-modal-content {
    background-color: var(--bg-card);
    padding: 1.5rem;
    border-radius: 0.75rem;
    width: 90%;
    max-width: 700px;
    box-shadow: 0 10px 25px var(--shadow-hover);
    display: flex; /* Set as a flex container */
    flex-direction: column; /* Stack children vertically */
    max-height: 90vh; /* Give the modal a max height */
}

.ingestion-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}
.ingestion-modal-header .close-btn {
    background: none; border: none; font-size: 1.5rem;
    color: var(--text-muted); cursor: pointer;
}
.ingestion-modal-controls {
    display: flex; gap: 0.75rem; padding: 1rem 0; flex-shrink: 0;
}
.ingestion-search-bar {
    flex-grow: 1; padding: 0.5rem 0.75rem; border-radius: 0.5rem;
    border: 1px solid var(--border-color); background-color: var(--bg-secondary);
}
.ingestion-search-bar:focus { outline: none; border-color: var(--accent-blue); }
.ingestion-filter {
    padding: 0.5rem 0.75rem; border-radius: 0.5rem; border: 1px solid var(--border-color);
    background-color: var(--bg-secondary); color: var(--text-secondary);
}
.ingestion-file-list {
    flex-grow: 1; /* Allows the list to fill available space */
    overflow-y: auto; /* Enables scrolling within the list */
    min-height: 0; /* THE KEY: Same reason as above */
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.ingestion-section-title {
    font-size: 0.75rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase;
    margin-top: 0.5rem; margin-bottom: 0.25rem; padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--border-color);
}
.file-list-item {
    display: flex; align-items: center; gap: 1rem; padding: 0.75rem;
    border-radius: 0.5rem; border: 1px solid transparent; cursor: pointer; transition: all 0.2s ease;
}
.file-list-item:hover { border-color: var(--accent-blue); background-color: var(--bg-hover); }
.file-item-icon { flex-shrink: 0; }
.file-item-info { flex-grow: 1; }
.file-item-status { flex-shrink: 0; }
.file-item-metadata { display: flex; gap: 0.75rem; margin-top: 0.25rem; }
.metadata-tag {
    font-size: 0.75rem; color: var(--text-muted); background-color: var(--bg-hover);
    padding: 0.125rem 0.5rem; border-radius: 0.25rem;
}
.confirmation-modal-content {
    background-color: var(--bg-card);
    padding: 2rem;
    border-radius: 0.75rem;
    width: 90%;
    max-width: 450px;
    text-align: center;
    box-shadow: 0 10px 25px var(--shadow-hover);
}
.confirmation-icon {
    width: 48px;
    height: 48px;
    background-color: #D1FAE5;
    color: #065F46;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}
[data-theme="dark"] .confirmation-icon {
    background-color: #064e3b;
    color: #a7f3d0;
}


/* =================================================================
   DATA QUALITY CONTROL CENTER STYLES
   ================================================================= */
.data-quality-layout {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.dq-filter-toolbar {
    display: flex;
    gap: 1rem;
    align-items: center;
    background-color: var(--bg-card);
    padding: 1rem;
    border-radius: 0.75rem;
    border: 1px solid var(--border-color);
}
.dq-filter-toolbar select, .dq-filter-toolbar input {
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid var(--border-color);
    background-color: var(--bg-secondary);
}
.dq-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
}
.dq-synthesis-box {
    background-color: var(--bg-card);
    border-left: 4px solid var(--accent-blue);
    padding: 1.5rem;
    border-radius: 0.75rem;
    border: 1px solid var(--border-color);
}

/* =================================================================
   KNOWLEDGE REFINERY - PANE SCROLLING FIX
   ================================================================= */
.refinery-content-area, 
.normalization-terminal,
.curation-form {
    flex-grow: 1;
    overflow-y: auto;
    min-height: 0; /* This is the key property */
}

/* =================================================================
   KNOWLEDGE REFINERY - INGESTION MODAL (COLLAPSE/EXPAND)
   ================================================================= */

.ingestion-section-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding: 0.5rem 0; /* Add some padding for easier clicking */
}

.ingestion-section-title .chevron-icon {
    transition: transform 0.3s ease-in-out;
}

.ingestion-section-title .chevron-icon.expanded {
    transform: rotate(90deg);
}

.ingestion-file-list-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.3s ease-in-out;
}

.ingestion-file-list-group:not(.collapsed) {
    /* max-height is set by JS, but this ensures space when open */
    margin-bottom: 1rem;
}


body.login-body {
    background-color: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    font-family: 'Inter', sans-serif;
    overflow: auto; /* This overrides the global 'overflow: hidden' */
}

/* =================================================================
   PAGE-SPECIFIC LAYOUT OVERRIDES
   ================================================================= */

/* --- Override for Knowledge Refinery Page --- */
body.page-knowledge-refinery #main-content {
    /* For this page, the main content area must NOT scroll. */
    /* It must be a rigid boundary for the panes inside it. */
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

body.page-knowledge-refinery .knowledge-refinery-layout {
    /* This makes the grid fill the available space inside the non-scrolling #main-content */
    flex: 1;
    min-height: 0; /* Critical for nested flex/grid items to be constrained */
}

/* =================================================================
   SIDEBAR LAYOUT - FINAL, ROBUST OVERRIDE
   ================================================================= */
#sidebar {
    padding: 0 !important;
    max-width: none !important;
}

/* =================================================================
   NEW SIDEBAR COLLAPSE STYLES
   ================================================================= */
#sidebar {
    transition: width 0.3s ease-in-out;
}

#sidebar.collapsed {
    width: 5rem; /* 80px */
}

/* Hide text and chevrons when collapsed */
#sidebar.collapsed .sidebar-text, 
#sidebar.collapsed .chevron-icon {
    opacity: 0;
    width: 0;
    overflow: hidden;
    white-space: nowrap;
    transition: opacity 0.1s ease-out, width 0.1s ease-out;
}

/* Show text and chevrons when expanded */
#sidebar .sidebar-text, 
#sidebar .chevron-icon {
    opacity: 1;
    width: auto;
    transition: opacity 0.2s 0.1s ease-in, width 0.2s ease-in; /* Added a delay for smoother appearance */
}

/* Center items in the link when collapsed */
#sidebar.collapsed .nav-link, 
#sidebar.collapsed .nav-parent > a {
    justify-content: center;
}

#sidebar.collapsed .nav-children {
    display: none; /* Hide sub-menu items when collapsed */
}

/* General icon styling */
.nav-icon {
    width: 1.5rem;  /* 24px */
    height: 1.5rem; /* 24px */
    flex-shrink: 0;
    margin-right: 0.75rem; /* 12px */
    color: var(--text-muted);
    transition: color 0.2s ease;
}

/* Remove margin when collapsed */
#sidebar.collapsed .nav-icon {
    margin-right: 0;
}

.nav-link:hover .nav-icon,
.nav-link.active .nav-icon {
    color: var(--accent-blue);
}

/* Hide the main "Navigator" text when collapsed */
#sidebar.collapsed .sidebar-text {
    display: none;
}

/* =================================================================
   NEW SIDEBAR COLLAPSE STYLES V2
   ================================================================= */
#sidebar {
    transition: width 0.3s ease-in-out;
}

#sidebar.collapsed {
    width: 5rem; /* 80px */
}

/* Correctly hide text elements when collapsed */
#sidebar.collapsed .sidebar-text, 
#sidebar.collapsed .chevron-icon {
    opacity: 0;
    width: 0;
    overflow: hidden;
    white-space: nowrap;
    transition: opacity 0.1s ease-out, width 0.1s ease-out;
}

/* Smoothly show text elements when expanded */
#sidebar .sidebar-text, 
#sidebar .chevron-icon {
    opacity: 1;
    width: auto;
    transition: opacity 0.2s 0.1s ease-in, width 0.2s ease-in; /* Delay for smoother appearance */
}

/* Center items in the link when collapsed */
#sidebar.collapsed .nav-link, 
#sidebar.collapsed .nav-parent > a {
    justify-content: center;
}

#sidebar.collapsed .nav-children {
    display: none;
}

/* General icon styling */
.nav-icon {
    width: 1.5rem;  /* 24px */
    height: 1.5rem; /* 24px */
    flex-shrink: 0;
    margin-right: 0.75rem; /* 12px */
    color: var(--text-muted);
    transition: color 0.2s ease;
}

#sidebar.collapsed .nav-icon {
    margin-right: 0;
}

.nav-link:hover .nav-icon,
.nav-link.active .nav-icon {
    color: var(--accent-blue);
}

/* Logo Swapping Logic */
#sidebar #icon-logo {
    display: none;
}
#sidebar.collapsed #full-logo,
#sidebar.collapsed .sidebar-text {
    display: none;
}
#sidebar.collapsed #icon-logo {
    display: block;
}

/* Correctly hide footer icons when sidebar is collapsed */
#sidebar.collapsed .sidebar-footer {
    justify-content: center; /* Center the theme toggle button */
}

#sidebar.collapsed .sidebar-footer .sidebar-text-wrapper {
    display: none; /* Hide the left-aligned icons */
}
.sidebar-collapsed-preload #sidebar {
    width: 5rem;
}


/* =================================================================
   NEW SIDEBAR COLLAPSE STYLES V3 (Corrected)
   ================================================================= */
#sidebar.collapsed {
    width: 5rem; /* 80px */
}

/* Hide text and chevrons when collapsed */
#sidebar.collapsed .sidebar-text, 
#sidebar.collapsed .chevron-icon {
    opacity: 0;
    width: 0;
    visibility: hidden; /* Use visibility to prevent layout shifts */
    white-space: nowrap;
    transition: opacity 0.1s ease-out, width 0.1s ease-out, visibility 0.1s;
}

/* Show text and chevrons when expanded */
#sidebar .sidebar-text, 
#sidebar .chevron-icon {
    opacity: 1;
    width: auto;
    visibility: visible;
    transition: opacity 0.2s 0.1s ease-in, width 0.2s ease-in; /* Delay for smoother appearance */
}

/* Center items in the link when collapsed */
#sidebar.collapsed .nav-link, 
#sidebar.collapsed .nav-parent > a {
    justify-content: center;
}

#sidebar.collapsed .nav-children {
    display: none;
}

/* General icon styling */
.nav-icon {
    width: 1.5rem;  /* 24px */
    height: 1.5rem; /* 24px */
    flex-shrink: 0;
    margin-right: 0.75rem; /* 12px */
    color: var(--text-muted);
    transition: color 0.2s ease;
}

#sidebar.collapsed .nav-icon {
    margin-right: 0;
}

.nav-link:hover .nav-icon,
.nav-link.active .nav-icon {
    color: var(--accent-blue);
}

/* Logo Swapping Logic */
#sidebar #icon-logo {
    display: none;
}
#sidebar.collapsed #full-logo {
    display: none;
}
#sidebar.collapsed #icon-logo {
    display: block;
}

/* Footer Icon Hiding Logic */
#sidebar.collapsed .sidebar-footer {
    justify-content: center;
}
#sidebar.collapsed .sidebar-footer .sidebar-text-wrapper {
    display: none;
}

/* Add this entire block to the end of styles.css */

/* =================================================================
   DARK MODE CONSISTENCY FIXES (V4)
   ================================================================= */

/* --- FIX 1: Set Global Background and Text Colors --- */
/* This is the most critical fix. It ensures all pages, including the
   one you screenshotted, correctly adopt the dark background and light text. */
html, body { 
    height: 100vh;
    overflow: hidden; 
    background-color: var(--bg-primary); /* Ensures the entire page background changes */
    color: var(--text-primary);           /* Sets the default text color for the whole app */
}

/* --- FIX 2: Add Dark Mode Theme for Entity Highlighting --- */
/* This fixes the black-text-on-dark-background issue for the 
   highlighted entities in the Knowledge Refinery and ARIA responses. */
[data-theme="dark"] mark.entity-strategy { background-color: #1e40af; color: #bfdbfe; }
[data-theme="dark"] mark.entity-kpi { background-color: #064e3b; color: #a7f3d0; }
[data-theme="dark"] mark.entity-company { background-color: #3b0764; color: #e9d5ff; }
[data-theme="dark"] mark.entity-date { background-color: #78350f; color: #fde68a; }
[data-theme="dark"] mark.entity-risk { background-color: #7f1d1d; color: #fecaca; }


/* --- FIX 3: Create Theme Variables for the Normalization Terminal --- */
/* This makes the terminal's colors theme-aware, ensuring it looks
   consistent in both light and dark modes, even though it's a dark component. */
:root {
    --terminal-bg: #0d1117;
    --terminal-text: #c9d1d9;
    --terminal-json-text: #79c0ff;
    --terminal-success-text: #56d364;
}

[data-theme="dark"] {
    --terminal-bg: #0d1117; /* Stays the same in dark mode */
    --terminal-text: #c9d1d9;
    --terminal-json-text: #79c0ff;
    --terminal-success-text: #56d364;
}

/* --- FIX 4: Apply Theme Variables to the Terminal --- */
/* This updates the terminal component to use the new variables,
   making its code cleaner and more maintainable. */
.normalization-terminal {
    background-color: var(--terminal-bg);
    color: var(--terminal-text);
    font-family: 'Courier New', Courier, monospace;
    padding: 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
}
.terminal-log.success { 
    color: var(--terminal-success-text);
}
#normalized-output-code, #norm-main {
    color: var(--terminal-json-text);
}
#norm-meta, #norm-data {
    color: var(--terminal-text);
}

/* =================================================================
   PORTFOLIO PAGE - PRIORITY ALERTS BOX
   ================================================================= */

.priority-alerts-container {
    background-color: var(--alert-bg);
    border-left: 4px solid var(--alert-border);
    border-radius: 0.5rem;
    padding: 1rem 1.5rem;
}

.priority-alerts-title {
    font-weight: 700;
    color: var(--alert-text);
    margin-bottom: 0.75rem;
    font-size: 1rem;
}

.priority-alerts-grid {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Style the alert cards to stand out on the red background */
.priority-alerts-container .suggested-action-card {
    background-color: var(--bg-card); /* e.g., White in light mode */
    border-color: #FEE2E2; /* A light red border */
}

/* Dark mode specific border for the alert cards */
[data-theme="dark"] .priority-alerts-container .suggested-action-card {
    border-color: #7f1d1d; /* A darker red border for dark mode */
}

/* Hover effect for the alert cards */
.priority-alerts-container .suggested-action-card:hover {
    border-color: var(--status-error); /* A stronger red on hover */
    background-color: var(--bg-hover);
}
/* =================================================================
   PORTFOLIO PAGE - PRIORITY ALERTS BOX (V2 - COLLAPSIBLE)
   ================================================================= */

.priority-alerts-container {
    background-color: var(--alert-bg);
    border-left: 4px solid var(--alert-border);
    border-radius: 0.5rem;
    padding: 1rem 1.5rem;
    border: 1px solid var(--alert-border);
}

.priority-alerts-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.priority-alerts-title {
    font-weight: 700;
    color: var(--alert-text);
    font-size: 1rem;
}

.priority-alerts-header .chevron-icon {
    color: var(--alert-text);
    transition: transform 0.3s ease-in-out;
    transform: rotate(90deg); /* Start pointing down (expanded) */
}

.priority-alerts-header .chevron-icon:not(.expanded) {
    transform: rotate(0deg); /* Point right when collapsed */
}

.priority-alerts-grid {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 0.75rem;
    overflow: hidden;
    max-height: 500px; /* Set a high max-height for the transition */
    transition: max-height 0.3s ease-in-out, margin-top 0.3s ease-in-out;
}

.priority-alerts-grid.collapsed {
    max-height: 0;
    margin-top: 0;
}

.priority-alerts-container .suggested-action-card {
    background-color: var(--bg-card);
    border-color: #FEE2E2; /* Light red border */
}

[data-theme="dark"] .priority-alerts-container .suggested-action-card {
    border-color: #7f1d1d; /* Darker red border for dark mode */
}

.priority-alerts-container .suggested-action-card:hover {
    border-color: var(--status-error);
    background-color: var(--bg-hover);
}

/* =================================================================
   NEW PERSONA HUB STYLES
   ================================================================= */
.persona-switcher {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 0.5rem;
    transition: background-color 0.2s ease;
}
.persona-switcher:hover {
    background-color: var(--bg-hover);
}
.persona-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--accent-blue);
    color: var(--bg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1rem;
    flex-shrink: 0;
}
.persona-name {
    font-weight: 600;
    color: var(--text-primary);
}
.persona-role {
    font-size: 0.875rem;
    color: var(--text-secondary);
}
.persona-popup {
    position: absolute;
    top: 110%;
    right: 0;
    width: 280px;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    box-shadow: 0 4px 12px var(--shadow-hover);
    z-index: 100;
    opacity: 0;
    transform: translateY(10px);
    visibility: hidden;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.persona-popup.visible {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}
.persona-popup-header {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-color);
}
.persona-popup-header h6 {
    font-weight: 600;
}
.persona-popup-header p {
    font-size: 0.875rem;
    color: var(--text-secondary);
}
.persona-popup-body {
    padding: 0.5rem;
}
.persona-popup-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.persona-popup-item:hover {
    background-color: var(--bg-hover);
}
.persona-popup-item.active {
    background-color: var(--accent-blue-translucent);
}
.persona-popup-item .persona-avatar.small {
    width: 32px;
    height: 32px;
    font-size: 0.875rem;
}
.persona-popup-item .persona-name.small {
    font-weight: 500;
}
.persona-popup-item .persona-role.small {
    font-size: 0.75rem;
}

/* =================================================================
   NEW PERSONA HUB STYLES
   ================================================================= */
.persona-switcher {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 0.5rem;
    transition: background-color 0.2s ease;
}
.persona-switcher:hover {
    background-color: var(--bg-hover);
}
.persona-name {
    font-weight: 600;
    color: var(--text-primary);
}
.persona-role {
    font-size: 0.875rem;
    color: var(--text-secondary);
}
.persona-popup {
    position: absolute;
    top: 110%;
    right: 0;
    width: 280px;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    box-shadow: 0 4px 12px var(--shadow-hover);
    z-index: 100;
    opacity: 0;
    transform: translateY(10px);
    visibility: hidden;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.persona-popup.visible {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}
.persona-popup-header {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-color);
}
.persona-popup-header h6 {
    font-weight: 600;
}
.persona-popup-header p {
    font-size: 0.875rem;
    color: var(--text-secondary);
}
.persona-popup-body {
    padding: 0.5rem;
}
.persona-popup-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.persona-popup-item:hover {
    background-color: var(--bg-hover);
}
.persona-popup-item.active {
    background-color: var(--accent-blue-translucent);
}
.persona-popup-item .persona-avatar.small {
    width: 32px;
    height: 32px;
    font-size: 0.875rem;
}
.persona-popup-item .persona-name.small {
    font-weight: 500;
}
.persona-popup-item .persona-role.small {
    font-size: 0.75rem;
}

/* =================================================================
   PERSONA-DRIVEN DASHBOARD STYLES (CEO, CRO, AM)
   ================================================================= */

.persona-dashboard-layout {
    display: grid;
    grid-template-columns: 2fr 1fr; /* 2/3 and 1/3 split */
    gap: 1.5rem;
    align-items: start;
}

.persona-main-column {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.persona-sidebar-column {
    position: sticky;
    top: 1.5rem; /* Match main content padding */
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* --- CEO Dashboard Specifics --- */
.department-updates-feed {
    max-height: 600px; /* Give it a max height to be scrollable */
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.update-card {
    background-color: var(--bg-secondary);
    border-radius: 0.5rem;
    padding: 1rem;
    border: 1px solid var(--border-color);
}
.update-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}
.update-card-title {
    font-weight: 600;
}
.update-card-time {
    font-size: 0.75rem;
    color: var(--text-muted);
}
.update-card-body {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.6;
}
.update-card-footer {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
    font-size: 0.75rem;
    color: var(--text-secondary);
}
.update-card-footer span {
    font-weight: 600;
    color: var(--text-primary);
}

/* --- CRO Hub Specifics --- */
.renewal-opportunities-table {
    width: 100%;
    border-collapse: collapse;
}
.renewal-opportunities-table th, .renewal-opportunities-table td {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.875rem;
}
.renewal-opportunities-table th {
    font-weight: 600;
    color: var(--text-muted);
}
.renewal-opportunities-table td {
    color: var(--text-secondary);
}
.renewal-opportunities-table .font-semibold {
    font-weight: 600;
    color: var(--text-primary);
}
.segment-badge {
    display: inline-block;
    padding: 0.125rem 0.625rem;
    border-radius: 99px;
    font-weight: 600;
    font-size: 0.75rem;
}
.segment-badge.gold { background-color: #FEF3C7; color: #92400E; }
.segment-badge.silver { background-color: #E5E7EB; color: #374151; }
.segment-badge.bronze { background-color: #FEE2E2; color: #991B1B; }
[data-theme="dark"] .segment-badge.gold { background-color: #78350F; color: #FDE68A; }
[data-theme="dark"] .segment-badge.silver { background-color: #4B5563; color: #D1D5DB; }
[data-theme="dark"] .segment-badge.bronze { background-color: #7f1d1d; color: #fecaca; }

/* --- AM Action Center Specifics --- */
.am-action-center-layout {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 1.5rem;
    align-items: start;
}
.account-details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.detail-item label {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-muted);
    margin-bottom: 0.125rem;
}
.detail-item p {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}
.renewal-options-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 1.5rem;
}
.option-card {
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    padding: 1rem;
    text-align: center;
}
.option-card.recommended {
    border-width: 2px;
    border-color: var(--status-success);
    position: relative;
}
.option-card.recommended::before {
    content: 'Recommended';
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--status-success);
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.25rem 0.75rem;
    border-radius: 99px;
}
.option-card h5 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}
.option-card .price {
    font-size: 1.75rem;
    font-weight: 800;
    margin-bottom: 0.75rem;
}
.option-card ul {
    list-style: none;
    padding: 0;
    margin: 0.75rem 0;
    font-size: 0.875rem;
    color: var(--text-secondary);
}
.option-card ul li {
    margin-bottom: 0.25rem;
}
.option-card .support-tier {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-top: 0.5rem;
}
.option-card button {
    width: 100%;
    margin-top: 1rem;
}

/* =================================================================
   PERSONA-DRIVEN DASHBOARD STYLES (CEO, CRO, AM)
   ================================================================= */

.persona-dashboard-layout {
    display: grid;
    grid-template-columns: 2fr 1fr; /* 2/3 and 1/3 split */
    gap: 1.5rem;
    align-items: start;
}

.persona-main-column {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.persona-sidebar-column {
    position: sticky;
    top: 1.5rem; /* Match main content padding */
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* --- CEO Dashboard Specifics --- */
.department-updates-feed {
    max-height: 600px; /* Give it a max height to be scrollable */
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.update-card {
    background-color: var(--bg-secondary);
    border-radius: 0.5rem;
    padding: 1rem;
    border: 1px solid var(--border-color);
}
.update-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}
.update-card-title {
    font-weight: 600;
}
.update-card-time {
    font-size: 0.75rem;
    color: var(--text-muted);
}
.update-card-body {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.6;
}
.update-card-footer {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
    font-size: 0.75rem;
    color: var(--text-secondary);
}
.update-card-footer span {
    font-weight: 600;
    color: var(--text-primary);
}

/* --- CRO Hub Specifics --- */
.renewal-opportunities-table {
    width: 100%;
    border-collapse: collapse;
}
.renewal-opportunities-table th, .renewal-opportunities-table td {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.875rem;
}
.renewal-opportunities-table th {
    font-weight: 600;
    color: var(--text-muted);
}
.renewal-opportunities-table td {
    color: var(--text-secondary);
}
.renewal-opportunities-table .font-semibold {
    font-weight: 600;
    color: var(--text-primary);
}
.segment-badge {
    display: inline-block;
    padding: 0.125rem 0.625rem;
    border-radius: 99px;
    font-weight: 600;
    font-size: 0.75rem;
}
.segment-badge.gold { background-color: #FEF3C7; color: #92400E; }
.segment-badge.silver { background-color: #E5E7EB; color: #374151; }
.segment-badge.bronze { background-color: #FEE2E2; color: #991B1B; }
[data-theme="dark"] .segment-badge.gold { background-color: #78350F; color: #FDE68A; }
[data-theme="dark"] .segment-badge.silver { background-color: #4B5563; color: #D1D5DB; }
[data-theme="dark"] .segment-badge.bronze { background-color: #7f1d1d; color: #fecaca; }

/* --- AM Action Center Specifics --- */
.am-action-center-layout {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 1.5rem;
    align-items: start;
}
.account-details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.detail-item label {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-muted);
    margin-bottom: 0.125rem;
}
.detail-item p {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}
.renewal-options-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 1.5rem;
}
.option-card {
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    padding: 1rem;
    text-align: center;
}
.option-card.recommended {
    border-width: 2px;
    border-color: var(--status-success);
    position: relative;
}
.option-card.recommended::before {
    content: 'Recommended';
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--status-success);
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.25rem 0.75rem;
    border-radius: 99px;
}
.option-card .price {
    font-size: 1.75rem;
    font-weight: 800;
    margin-bottom: 0.75rem;
}
.option-card ul {
    list-style: none;
    padding: 0;
    margin: 0.75rem 0;
    font-size: 0.875rem;
    color: var(--text-secondary);
}
.option-card ul li {
    margin-bottom: 0.25rem;
}
.option-card .support-tier {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-top: 0.5rem;
}
.option-card button {
    width: 100%;
    margin-top: 1rem;
}

/* =================================================================
   PERSONA-DRIVEN DASHBOARD STYLES (CEO, CRO, AM)
   ================================================================= */

.persona-dashboard-layout {
    display: grid;
    grid-template-columns: 2fr 1fr; /* 2/3 and 1/3 split */
    gap: 1.5rem;
    align-items: start;
}

.persona-main-column {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.persona-sidebar-column {
    position: sticky;
    top: 1.5rem; /* Match main content padding */
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* --- CEO Dashboard Specifics --- */
.department-updates-feed {
    max-height: 600px; /* Give it a max height to be scrollable */
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.update-card {
    background-color: var(--bg-secondary);
    border-radius: 0.5rem;
    padding: 1rem;
    border: 1px solid var(--border-color);
}
.update-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}
.update-card-title {
    font-weight: 600;
}
.update-card-time {
    font-size: 0.75rem;
    color: var(--text-muted);
}
.update-card-body {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.6;
}
.update-card-footer {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
    font-size: 0.75rem;
    color: var(--text-secondary);
}
.update-card-footer span {
    font-weight: 600;
    color: var(--text-primary);
}

/* --- CRO Hub Specifics --- */
.renewal-opportunities-table {
    width: 100%;
    border-collapse: collapse;
}
.renewal-opportunities-table th, .renewal-opportunities-table td {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.875rem;
}
.renewal-opportunities-table th {
    font-weight: 600;
    color: var(--text-muted);
}
.renewal-opportunities-table td {
    color: var(--text-secondary);
}
.renewal-opportunities-table .font-semibold {
    font-weight: 600;
    color: var(--text-primary);
}
.segment-badge {
    display: inline-block;
    padding: 0.125rem 0.625rem;
    border-radius: 99px;
    font-weight: 600;
    font-size: 0.75rem;
}
.segment-badge.gold { background-color: #FEF3C7; color: #92400E; }
.segment-badge.silver { background-color: #E5E7EB; color: #374151; }
.segment-badge.bronze { background-color: #FEE2E2; color: #991B1B; }
[data-theme="dark"] .segment-badge.gold { background-color: #78350F; color: #FDE68A; }
[data-theme="dark"] .segment-badge.silver { background-color: #4B5563; color: #D1D5DB; }
[data-theme="dark"] .segment-badge.bronze { background-color: #7f1d1d; color: #fecaca; }

/* --- AM Action Center Specifics --- */
.am-action-center-layout {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 1.5rem;
    align-items: start;
}
.account-details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.detail-item label {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-muted);
    margin-bottom: 0.125rem;
}
.detail-item p {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}
.renewal-options-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 1.5rem;
}
.option-card {
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    padding: 1rem;
    text-align: center;
}
.option-card.recommended {
    border-width: 2px;
    border-color: var(--status-success);
    position: relative;
}
.option-card.recommended::before {
    content: 'Recommended';
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--status-success);
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.25rem 0.75rem;
    border-radius: 99px;
}
.option-card h5 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}
.option-card .price {
    font-size: 1.75rem;
    font-weight: 800;
    margin-bottom: 0.75rem;
}
.option-card ul {
    list-style: none;
    padding: 0;
    margin: 0.75rem 0;
    font-size: 0.875rem;
    color: var(--text-secondary);
}
.option-card ul li {
    margin-bottom: 0.25rem;
}
.option-card .support-tier {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-top: 0.5rem;
}
.option-card button {
    width: 100%;
    margin-top: 1rem;
}

/* =================================================================
   PORTFOLIO COMMAND CENTER STYLES (ADRIAN CROFT)
   ================================================================= */
.status-badge.in-progress .status-ping-dot {
    position: relative;
    display: inline-flex;
    width: 8px;
    height: 8px;
    margin-left: 8px;
}
.status-badge.in-progress .status-ping-dot::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: var(--status-info);
    animation: ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
}
.status-badge.in-progress .status-ping-dot::after {
    content: '';
    position: relative;
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--status-info);
}

@keyframes ping {
  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}

.activity-item[data-action] {
    cursor: pointer;
}
.activity-item[data-action]:hover {
    background-color: var(--bg-hover);
}

/* =================================================================
   PORTFOLIO COMMAND CENTER STYLES (ADRIAN CROFT)
   ================================================================= */
.status-badge.in-progress .status-ping-dot {
    position: relative;
    display: inline-flex;
    width: 8px;
    height: 8px;
    margin-left: 8px;
}
.status-badge.in-progress .status-ping-dot::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: var(--status-info);
    animation: ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
}
.status-badge.in-progress .status-ping-dot::after {
    content: '';
    position: relative;
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--status-info);
}

@keyframes ping {
  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}

.activity-item[data-action] {
    cursor: pointer;
}
.activity-item[data-action]:hover {
    background-color: var(--bg-hover);
}

/* =================================================================
   PORTFOLIO COMMAND CENTER STYLES (ADRIAN CROFT)
   ================================================================= */
.status-badge.in-progress .status-ping-dot {
    position: relative;
    display: inline-flex;
    width: 8px;
    height: 8px;
    margin-left: 8px;
}
.status-badge.in-progress .status-ping-dot::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: var(--status-info);
    animation: ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
}
.status-badge.in-progress .status-ping-dot::after {
    content: '';
    position: relative;
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--status-info);
}

@keyframes ping {
  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}

.activity-item[data-action] {
    cursor: pointer;
}
.activity-item[data-action]:hover {
    background-color: var(--bg-hover);
}

/* =================================================================
   PORTFOLIO COMMAND CENTER STYLES (ADRIAN CROFT)
   ================================================================= */
.status-badge.in-progress .status-ping-dot {
    position: relative;
    display: inline-flex;
    width: 8px;
    height: 8px;
    margin-left: 8px;
}
.status-badge.in-progress .status-ping-dot::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: var(--status-info);
    animation: ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
}
.status-badge.in-progress .status-ping-dot::after {
    content: '';
    position: relative;
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--status-info);
}

@keyframes ping {
  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}

.activity-item[data-action] {
    cursor: pointer;
}
.activity-item[data-action]:hover {
    background-color: var(--bg-hover);
}

/* =================================================================
   PERSONA-DRIVEN DASHBOARD STYLES (CEO, CRO, AM)
   ================================================================= */

.persona-dashboard-layout {
    display: grid;
    grid-template-columns: 2fr 1fr; /* 2/3 and 1/3 split */
    gap: 1.5rem;
    align-items: start;
}

.persona-main-column {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.persona-sidebar-column {
    position: sticky;
    top: 1.5rem; /* Match main content padding */
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* --- CEO Dashboard Specifics --- */
.department-updates-feed {
    max-height: 600px; /* Give it a max height to be scrollable */
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.update-card {
    background-color: var(--bg-secondary);
    border-radius: 0.5rem;
    padding: 1rem;
    border: 1px solid var(--border-color);
}
.update-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}
.update-card-title {
    font-weight: 600;
}
.update-card-time {
    font-size: 0.75rem;
    color: var(--text-muted);
}
.update-card-body {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.6;
}
.update-card-footer {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
    font-size: 0.75rem;
    color: var(--text-secondary);
}
.update-card-footer span {
    font-weight: 600;
    color: var(--text-primary);
}

/* --- CRO Hub Specifics --- */
.renewal-opportunities-table {
    width: 100%;
    border-collapse: collapse;
}
.renewal-opportunities-table th, .renewal-opportunities-table td {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.875rem;
}
.renewal-opportunities-table th {
    font-weight: 600;
    color: var(--text-muted);
}
.renewal-opportunities-table td {
    color: var(--text-secondary);
}
.renewal-opportunities-table .font-semibold {
    font-weight: 600;
    color: var(--text-primary);
}
.segment-badge {
    display: inline-block;
    padding: 0.125rem 0.625rem;
    border-radius: 99px;
    font-weight: 600;
    font-size: 0.75rem;
}
.segment-badge.gold { background-color: #FEF3C7; color: #92400E; }
.segment-badge.silver { background-color: #E5E7EB; color: #374151; }
.segment-badge.bronze { background-color: #FEE2E2; color: #991B1B; }
[data-theme="dark"] .segment-badge.gold { background-color: #78350F; color: #FDE68A; }
[data-theme="dark"] .segment-badge.silver { background-color: #4B5563; color: #D1D5DB; }
[data-theme="dark"] .segment-badge.bronze { background-color: #7f1d1d; color: #fecaca; }

/* --- AM Action Center Specifics --- */
.am-action-center-layout {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 1.5rem;
    align-items: start;
}
.account-details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.detail-item label {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-muted);
    margin-bottom: 0.125rem;
}
.detail-item p {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}
.renewal-options-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 1.5rem;
}
.option-card {
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    padding: 1rem;
    text-align: center;
}
.option-card.recommended {
    border-width: 2px;
    border-color: var(--status-success);
    position: relative;
}
.option-card.recommended::before {
    content: 'Recommended';
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--status-success);
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.25rem 0.75rem;
    border-radius: 99px;
}
.option-card h5 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}
.option-card .price {
    font-size: 1.75rem;
    font-weight: 800;
    margin-bottom: 0.75rem;
}
.option-card ul {
    list-style: none;
    padding: 0;
    margin: 0.75rem 0;
    font-size: 0.875rem;
    color: var(--text-secondary);
}
.option-card ul li {
    margin-bottom: 0.25rem;
}
.option-card .support-tier {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-top: 0.5rem;
}
.option-card button {
    width: 100%;
    margin-top: 1rem;
}

/* --- FIX: Styles for Persona-Aware Chat Bubbles --- */
.persona-avatar-bubble {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1rem;
    flex-shrink: 0;
    border: 2px solid var(--border-color);
}

/* --- FIX: New styles for Left/Right Chat Alignment & Width --- */
.user-prompt-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    justify-content: flex-end;
    margin-left: auto;
    max-width: 100% !important;
}

.aria-response-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    justify-content: flex-start;
    margin-right: auto;
    max-width: 100% !important; /* Use full width - removed 85% constraint */
    width: 100%;
}

.user-prompt-bubble {
    background-color: var(--accent-blue-translucent);
    padding: 1rem 1.5rem;
    border-radius: 0.75rem;
    border: 1px solid var(--accent-blue);
}

.aria-response-bubble {
    background-color: var(--bg-secondary);
    padding: 1rem 1.5rem;
    border-radius: 0.75rem;
    border: 1px solid var(--border-color);
    width: 100%;
    transition: padding 0.3s ease-in-out; /* <-- ADD THIS LINE */
}

/* --- FIX: New styles for the Prompt Box Layout --- */
#aria-prompt-container {
    /* This container will be positioned between the avatars */
    padding-left: 52px;  /* 40px avatar + 12px gap */
    padding-right: 52px; /* 40px avatar + 12px gap */
    margin-top: 1.5rem;
}

/* --- FIX: Styles for Left-Aligned Workstream Pills --- */
.prompt-area-large-v4 .actions-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0;
}

.prompt-area-large-v4 .list-header {
    margin-bottom: 0;
    white-space: nowrap;
}


.settings-modal .p-3 > .border-b {
    border-bottom: none !important;
}

/* =================================================================
   PROMPT & SCROLLBARS (FINAL - MATCHING SCREENSHOT)
   ================================================================= */

/* 1. Modern, subtle scrollbar styles for the main conversation. */
#aria-conversation-container::-webkit-scrollbar {
    width: 10px;
}
#aria-conversation-container::-webkit-scrollbar-track {
    background: transparent;
}
#aria-conversation-container::-webkit-scrollbar-thumb {
    background-color: var(--border-color);
    border-radius: 10px;
    border: 2px solid var(--bg-primary); 
}
#aria-conversation-container::-webkit-scrollbar-thumb:hover {
    background-color: var(--accent-blue);
}
[data-theme="dark"] #aria-conversation-container::-webkit-scrollbar-thumb {
    border-color: var(--bg-secondary);
}

/* 2. The main view becomes the positioning anchor. */
#aria-main-view.has-floating-prompt {
    position: relative;
}

/* 3. The prompt wrapper is floated at the bottom. */
#aria-prompt-wrapper.floating-prompt-container {
    position: absolute;
    bottom: 1.5rem; 
    left: 1rem;     
    right: 1rem;    
    z-index: 1001; 
}

/* 4. The inner prompt box gets the card styling and light-mode shadow. */
.floating-prompt-container .prompt-area-large-v4 {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    box-shadow: 0 4px 30px 5px rgba(0,0,0,0.2); /* Shadow for light mode */
    padding: 1rem 1.5rem;
}

/* 5. THE SCROLLING FIX: Add generous padding to the bottom of the conversation container. */
/* This creates the extra space needed to scroll the last message above the prompt box. */
#aria-conversation-container {
    width: 100% !important;
    max-width: 100% !important;
}

#aria-conversation-container {
    padding-bottom: 20rem; /* 256px of extra scrollable space */
}

/* 6. The gradient fade-out effect for a seamless transition. */
#aria-main-view.has-floating-prompt::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 12rem;
    background: linear-gradient(to top, var(--bg-primary) 25%, transparent);
    pointer-events: none;
    z-index: 5;
}

/* 7. Remove default padding on the ARIA page's main content area. */
body.page-aria main#main-content {
    padding: 0.75rem !important;
}

/* 8. Ensure Portfolio page has proper padding to prevent vertical line issues */
body.page-portfolio main#main-content {
    padding: 0.75rem !important;
}

/* 8. THE DARK MODE FIX: Add a subtle top border to the prompt box in dark mode. */
[data-theme="dark"] .floating-prompt-container .prompt-area-large-v4 {
    /* Make the shadow slightly more pronounced on a dark background */
    box-shadow: 0 4px 30px 5px rgba(0, 0, 0, 0.5);
    
    /* Add a light top border to create the "floating" separation effect */
    border-top: 1px solid var(--border-color);
}


/* =================================================================
   ARIA WORKSTREAM RESPONSE STYLES
   ================================================================= */

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
}

.kpi-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    padding: 1rem;
}

.kpi-label {
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
    font-size: 0.875rem;
}

.kpi-value {
    font-size: 1.875rem;
    font-weight: 700;
    color: var(--text-primary);
}

.kpi-value.text-error {
    color: var(--status-error);
}

.kpi-value.text-warning {
    color: var(--status-warning);
}



/* =================================================================
   STYLES FOR THEMED & UNMODELED PROMPTS
   ================================================================= */

/* --- FIX: Themed Synthesis Box --- */
.themed-synthesis-box {
    background-color: var(--bg-card);
    border-radius: 0.75rem;
    padding: 1.5rem;
    /* Uses a CSS variable that will be set dynamically by the JS */
    border-left: 4px solid var(--theme-color, var(--accent-blue));
    border: 1px solid var(--theme-color, var(--border-color));
}

/* --- FIX: Better Padding in ARIA Responses --- */
.aria-response-content {
    gap: 2rem; /* Increased from 1.5rem for better spacing */
}

/* --- FIX: Styling for Unmodeled Suggestion Pills --- */
.suggestion-pill.unmodeled {
    opacity: 0.6;
    font-style: italic;
}

/* =================================================================
   ARIA SYNTHESIS BOX & PROMPT STYLING (FINAL)
   ================================================================= */

/* --- FIX: Themed Synthesis Box with Improved Padding --- */
.themed-synthesis-box {
    background-color: var(--bg-secondary); /* A subtle background color */
    border-radius: 0.75rem;
    padding: 1.5rem;
    /* Uses a CSS variable for the color, set by JS */
    border-left: 4px solid var(--theme-color, var(--accent-blue));
    border: 1px solid var(--border-color);
}

/* --- FIX: Add a wrapper for better internal spacing --- */
.synthesis-content-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1.5rem; /* Adds space between title and text */
}

/* --- FIX: Styling for Unmodeled Suggestion Pills --- */
.suggestion-pill.unmodeled {
    opacity: 0.6;
    font-style: italic;
    background-color: var(--bg-hover);
}
.suggestion-pill.unmodeled:hover {
    opacity: 1;
    font-style: normal;
}


/* =================================================================
   ARIA SYNTHESIS BOX & PROMPT STYLING (FINAL)
   ================================================================= */

/* --- FIX: Themed Synthesis Box with Improved Padding & Full Border Color --- */
.themed-synthesis-box {
    background-color: var(--bg-secondary); /* A subtle background color */
    border-radius: 0.75rem;
    padding: 1.5rem;
    /* Uses a CSS variable for the color, set by JS */
    border: 1px solid var(--theme-color, var(--border-color)); /* Set the main border color */
    border-left-width: 4px; /* Make the left border thicker */
}

/* --- FIX: Add a wrapper for better internal spacing --- */
/* This adds the vertical space between the title and the text INSIDE the synthesis box */
.synthesis-content-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1.5rem; /* Adds space between title and text */
}

/* --- FIX: Better Padding in ARIA Responses --- */
/* This ensures the vertical space BETWEEN the synthesis box, the KPI grid, and the actions */
.aria-response-content {
    gap: 2rem; /* Increased from 1.5rem for better spacing */
}

/* =================================================================
   ARIA SYNTHESIS BOX & PROMPT STYLING (FINAL)
   ================================================================= */

/* --- FIX: Themed Synthesis Box with Improved Padding & Full Border Color --- */
.themed-synthesis-box {
    background-color: var(--bg-secondary); /* A subtle background color */
    border-radius: 0.75rem;
    padding: 1.5rem;
    /* Uses a CSS variable for the color, set by JS */
    border: 1px solid var(--theme-color, var(--border-color)); /* Set the main border color */
    border-left-width: 4px; /* Make the left border thicker */
}

/* --- FIX: Add a wrapper for better internal spacing --- */
/* This adds the vertical space between the title and the text INSIDE the synthesis box */
.synthesis-content-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1.5rem; /* Adds space between title and text */
}

/* --- FIX: Better Padding in ARIA Responses --- */
/* This ensures the vertical space BETWEEN the synthesis box, the KPI grid, and the actions */
.aria-response-content {
    gap: 2rem; /* Increased from 1.5rem for better spacing */
}

/* =================================================================
   ARIA TYPING INDICATOR
   ================================================================= */
.typing-indicator {
    display: flex;
    align-items: center;
    padding: 10px 0; /* Provides some vertical space inside the bubble */
}

.typing-indicator span {
    height: 8px;
    width: 8px;
    background-color: var(--text-muted);
    border-radius: 50%;
    display: inline-block;
    margin: 0 3px;
    /* Animation definition */
    animation: bounce 1.4s infinite ease-in-out both;
}

/* Stagger the animation for the three dots */
.typing-indicator span:nth-child(1) { animation-delay: -0.32s; }
.typing-indicator span:nth-child(2) { animation-delay: -0.16s; }
.typing-indicator span:nth-child(3) { animation-delay: 0s; }

@keyframes bounce {
  0%, 80%, 100% { 
    transform: scale(0);
  } 40% { 
    transform: scale(1.0);
  }
}

/* =================================================================
   ARIA RESPONSE FOOTER (FLAG, FEEDBACK, THUMBS)
   ================================================================= */

/* =================================================================
   ARIA RESPONSE FOOTER (FLAG, FEEDBACK, THUMBS) - CORRECTED
   ================================================================= */

.response-actions-footer {
    display: flex;
    justify-content: space-between; /* THIS IS THE KEY FIX for alignment */
    align-items: center;
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
}

.feedback-controls, .workspace-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.feedback-icon {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 0.25rem;
    transition: all 0.2s ease;
    position: relative; /* For tooltip positioning */
}

.feedback-icon:hover {
    color: var(--text-primary);
    background-color: var(--bg-hover);
}

.feedback-icon .icon-filled {
    display: none;
}

.feedback-icon.filled .icon-unfilled {
    display: none;
}

.feedback-icon.filled .icon-filled {
    display: block;
}

/* Specific filled colors */
.feedback-icon[data-action="thumb-up"].filled,
.feedback-icon[data-action="thumb-down"].filled,
.feedback-icon[data-action="flag-response"].filled {
    color: var(--accent-blue);
}

.feedback-icon[data-action="thumb-up"].filled,
.feedback-icon[data-action="thumb-down"].filled,
.feedback-icon[data-action="flag-response"].filled {
    color: var(--accent-blue);
}

.tooltip-text {
    position: absolute;
    bottom: 150%; /* Position above the icon */
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--text-primary);
    color: var(--bg-primary);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 10;
}

.feedback-icon:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

/* =================================================================
   NEW: FEEDBACK MODAL STYLES
   ================================================================= */

.feedback-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(9, 26, 45, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.feedback-modal-content {
    background-color: var(--bg-card);
    padding: 1.5rem;
    border-radius: 0.75rem;
    width: 90%;
    max-width: 400px;
    box-shadow: 0 10px 25px var(--shadow-hover);
}

.feedback-modal-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.feedback-modal-text {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

.feedback-textarea {
    width: 100%;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    padding: 0.5rem;
    color: var(--text-primary);
    resize: vertical;
}

.feedback-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1rem;
}

/* =================================================================
   ARIA RESPONSE FOOTER & FEEDBACK MODAL (CORRECTED)
   ================================================================= */

.response-actions-footer {
    display: flex;
    justify-content: space-between; /* Pushes flag left, feedback right */
    align-items: center;
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
}

.feedback-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(9, 26, 45, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.feedback-modal-content {
    background-color: var(--bg-card);
    padding: 1.5rem;
    border-radius: 0.75rem;
    width: 90%;
    max-width: 400px;
    box-shadow: 0 10px 25px var(--shadow-hover);
}

.feedback-modal-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.feedback-modal-text {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

.feedback-textarea {
    width: 100%;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    padding: 0.5rem;
    color: var(--text-primary);
    resize: vertical;
}

.feedback-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1rem;
}

.aria-response-bubble.is-building {
    padding: 0 !important;
}

/* =================================================================
   WORKSTREAM-COLORED CATEGORY PILLS
   ================================================================= */
.status-badge.business-strategy {
    background-color: var(--accent-blue-translucent);
    color: var(--accent-blue);
}
.status-badge.commercial-customer {
    background-color: rgba(76, 198, 196, 0.2); /* Translucent accent-teal */
    color: var(--accent-teal);
}
.status-badge.technology-operations {
    background-color: rgba(108, 101, 205, 0.2); /* Translucent purple */
    color: var(--purple);
}
.status-badge.financial-risk {
    background-color: rgba(217, 119, 6, 0.2); /* Translucent status-warning */
    color: var(--status-warning);
}

/* =================================================================
   ARIA RESPONSE FOOTER ANIMATION
   ================================================================= */
.response-actions-footer {
    opacity: 0; /* Start hidden */
    transition: opacity 0.4s ease-in-out;
}

.response-actions-footer.visible {
    opacity: 1; /* Fade to visible */
}

/* =================================================================
   ARIA WORKSTREAM RESPONSE STYLES (TO MATCH SCREENSHOT)
   ================================================================= */

/* Ensures the footer icons are vertically centered */
.response-actions-footer {
    align-items: center;
}

/* Grid container for the Key Metrics */
.aria-kpi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 1.5rem;
}

/* Individual KPI cards (e.g., Gross Margin) */
.aria-kpi-card {
    background-color: var(--bg-secondary);
    padding: 1rem 1.5rem;
    border-radius: 0.5rem;
}

.aria-kpi-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: 0.25rem;
}

.aria-kpi-value {
    font-size: 2.25rem; /* 36px */
    font-weight: 700;
    color: var(--text-primary);
}

/* Container for the list of suggested actions */
.aria-action-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem; /* Small gap between action cards */
    margin-top: 1.5rem;
}

/* Individual clickable action cards */
.aria-action-card {
    background-color: var(--bg-secondary);
    padding: 1rem 1.5rem;
    border-radius: 0.5rem;
    border: 1px solid transparent; /* For the hover effect */
    cursor: pointer;
    transition: all 0.2s ease;
}

.aria-action-card:hover {
    border-color: var(--accent-blue);
    background-color: var(--bg-hover);
}

/* =================================================================
   ARIA RESPONSE VERTICAL SPACING FIX
   ================================================================= */

/* Adds vertical space between a section title and its content grid/list */
.aria-kpi-grid,
.aria-action-list {
    margin-top: 1rem; /* 16px */
}

/* =================================================================
   ARIA GANTT CHART "FULL BLEED" LAYOUT FIX
   ================================================================= */

/* 
   This is the key rule. It targets the Gantt chart container ONLY 
   when it appears inside an ARIA response bubble.
*/
.aria-response-bubble .gantt-container-v7 {
    /* 
       The bubble has 1.5rem of horizontal padding. We use negative
       margins to pull the chart outwards, canceling out the padding.
    */
    margin-left: -1.5rem;
    margin-right: -1.5rem;

    /* 
       This calculates the new width: 100% of the bubble's content area
       PLUS the 3rem of padding we just reclaimed with the negative margins.
    */
    width: calc(100% + 3rem);
    max-width: calc(100% + 3rem); /* Prevents overflow issues */

    /* 
       This ensures the corners of the now-wider chart match the rounded
       corners of the bubble it sits in, creating a seamless look.
    */
    border-radius: 0.75rem;
}

/* =================================================================
   ARIA RESPONSE CARD FONT SIZE INCREASE
   ================================================================= */

/* Target the small, secondary text within all cards in an ARIA response */
.aria-response-content .card-base .text-xs,
.aria-response-content .aria-action-card .text-xs {
    font-size: 0.875rem; /* Equivalent to Tailwind's text-sm */
    line-height: 1.25rem; /* Line height for text-sm */
}

/* =================================================================
   CRO RENEWAL HUB STYLES
   ================================================================= */
.renewal-opportunities-table {
    width: 100%;
    border-collapse: collapse;
}
.renewal-opportunities-table th, .renewal-opportunities-table td {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.875rem;
}
.renewal-opportunities-table th {
    font-weight: 600;
    color: var(--text-muted);
}
.renewal-opportunities-table td {
    color: var(--text-secondary);
}
.renewal-opportunities-table .font-semibold {
    font-weight: 600;
    color: var(--text-primary);
}
.segment-badge {
    display: inline-block;
    padding: 0.125rem 0.625rem;
    border-radius: 99px;
    font-weight: 600;
    font-size: 0.75rem;
}
.segment-badge.gold { background-color: #FEF3C7; color: #92400E; }
.segment-badge.silver { background-color: #E5E7EB; color: #374151; }
.segment-badge.bronze { background-color: #FEE2E2; color: #991B1B; }
[data-theme="dark"] .segment-badge.gold { background-color: #78350F; color: #FDE68A; }
[data-theme="dark"] .segment-badge.silver { background-color: #4B5563; color: #D1D5DB; }
[data-theme="dark"] .segment-badge.bronze { background-color: #7f1d1d; color: #fecaca; }

/* =================================================================
   ARIA GANTT CHART "FULL BLEED" LAYOUT FIX (WITH PADDING)
   ================================================================= */

/* 
   This rule remains the same. It overrides the component's default
   centering behavior when it's inside an ARIA response.
*/
.aria-response-bubble .diligence-hub-container {
    max-width: none;
    margin: 0;
    padding: 0;
}

/*
   This rule is updated. The negative margins are now smaller,
   which leaves a 0.5rem (8px) padding around the chart.
   The width calculation is also adjusted to match.
*/
.aria-response-bubble .gantt-container-v7 {
    /* The bubble has 1rem/1.5rem padding. These smaller negative margins leave 0.5rem of space. */
   margin: -0.5rem -1rem; 
    
    /* Recalculate width to fill the new space (100% + 1rem left + 1rem right) */
    width: calc(100% + 2rem); 
    max-width: calc(100% + 2rem);

    /* The chart keeps its own border, which looks better with padding. */
    border-radius: 0.75rem;
}

.aria-response-bubble [id^="gantt-replan-target-"] .gantt-container-v7 {
    margin: -0.5rem -1rem; 
    width: calc(100% + 2rem); 
    max-width: calc(100% + 2rem);
    border-radius: 0.75rem;
}

/* =================================================================
   STYLE FOR UNMODELED PROMPTS & ACTIONS
   ================================================================= */

/* Applies to any button or pill that has no pre-defined response */
.unmodeled {
    opacity: 0.6;
    font-style: italic;
    transition: all 0.2s ease-in-out;
}

/* On hover, it looks like a normal button so it doesn't feel broken */
.unmodeled:hover {
    opacity: 1;
    font-style: normal;
}

/* =================================================================
   ARIA RECOMMENDED ACTION CARD STYLES
   ================================================================= */

/* Container for the list of action cards */
.aria-action-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem; /* 12px space between cards */
}

/* Individual clickable action card */
.aria-action-card {
    background-color: var(--bg-secondary);
    padding: 1rem 1.5rem;
    border-radius: 0.5rem;
    border: 1px solid transparent; /* For the hover effect */
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
    width: 100%;
}

.aria-action-card:hover {
    border-color: var(--accent-blue);
    background-color: var(--bg-hover);
}

/* =================================================================
   ARIA HISTOGRAM FOR SALES PERFORMANCE (CORRECTED)
   ================================================================= */
.histogram-container {
    display: flex;
    gap: 1.5rem; /* Increased gap for better spacing */
    align-items: flex-end;
    height: 150px;
    border-bottom: 2px solid var(--border-color);
    padding: 0 1rem 0.5rem 1rem; /* Added horizontal padding */
}

.histogram-bar-wrapper {
    flex-grow: 1;
    text-align: center;
    /* --- FIX START: These properties are new or changed --- */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%; /* Makes the wrapper fill the container's height */
    /* --- FIX END --- */
}

.histogram-bar {
    width: 100%;
    border-radius: 4px 4px 0 0; /* Add rounded top corners */
    transition: height 0.5s ease-out;
}

.histogram-bar.over-target { background-color: var(--status-success); }
.histogram-bar.under-target { background-color: var(--status-error); }

.histogram-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-top: 0.5rem;
}

/* =================================================================
   ARIA LIST FORMATTING (GLOBAL FIX)
   ================================================================= */
.aria-list {
    display: flex;
    flex-direction: column;
    gap: 1rem; /* Space between list items */
}

.aria-list-item {
    display: flex;
    align-items: flex-start; /* Aligns icon/number with the top of the text */
    gap: 0.75rem; /* Space between icon/number and text */
}

.aria-list-item > span {
    flex-shrink: 0;
    font-weight: 700;
    margin-top: 0.125rem; /* Fine-tune vertical alignment with text */
    color: var(--text-primary);
}

.aria-list-item h4 {
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.125rem;
}

.aria-list-item p {
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

/* Add this to the end of your css/styles.css file (test model canvas api)*/ 

.tree-node {
    padding: 6px 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.tree-node:hover {
    background-color: var(--bg-hover);
}

.node-children {
    padding-left: 24px;
    border-left: 1px solid var(--border-color);
    margin-left: 12px;
}

.tree-node .chevron {
    width: 20px;
    height: 20px;
    margin-right: 8px;
    color: var(--text-secondary);
    transition: transform 0.2s ease-in-out;
}

.tree-node .chevron.hidden {
    visibility: hidden;
}

.tree-node .chevron.expanded {
    transform: rotate(90deg);
}

/* =================================================================
   COMPASS (MODELING) PAGE - V3 LAYOUT
   ================================================================= */

.compass-container {
    display: grid;
    /* Default (expanded) state */
    grid-template-columns: 3fr 6fr 3fr;
    transition: grid-template-columns 0.3s ease-in-out;
}

.compass-container.vcc-collapsed {
    /* Collapsed state: fixed width for VCC, center pane gets flexible space */
    grid-template-columns: 5.5rem 1fr 3fr;
}

/* --- 2. Collapsible Pane & Alignment Fixes --- */
.vcc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.vcc-title {
    transition: opacity 0.2s ease, width 0.2s ease, visibility 0.2s;
}

.compass-container.vcc-collapsed .vcc-title {
    opacity: 0;
    width: 0;
    visibility: hidden;
}

.vcc-tree-container {
    flex-grow: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
}

.vcc-footer {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
}

.compass-container.vcc-collapsed .vcc-footer {
    justify-content: center;
}

.collapse-toggle-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 0.5rem;
    transition: all 0.2s ease;
}
.collapse-toggle-btn:hover {
    background-color: var(--bg-hover);
    color: var(--text-primary);
}

/* --- 3. Icon Sizing, Alignment & Selection (THE FIX) --- */
.tree-node {
    height: 40px; /* FIX: Consistent height for alignment */
    display: flex;
    align-items: center;
}

.vcc-tree-container.icon-only .tree-node {
    width: 40px;
    height: 40px;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 0.5rem; /* Match sidebar selection style */
}

/* FIX: Active state styling for collapsed view */
.vcc-tree-container.icon-only .tree-node.active {
    background-color: var(--accent-blue-translucent);
}
.vcc-tree-container.icon-only .tree-node.active .discipline-icon-svg {
    color: var(--accent-blue);
}

.discipline-icon-svg {
    width: 24px; /* 1.5rem - MATCHES SIDEBAR */
    height: 24px;
    color: var(--text-secondary);
    transition: color 0.2s ease;
    flex-shrink: 0;
}

.tree-node:hover .discipline-icon-svg {
    color: var(--text-primary);
}

.discipline-icon-svg.expanded-view {
    margin-right: 0.5rem;
}

/* --- 4. Font Weight & Breadcrumb Styling (THE FIX) --- */
.node-label {
    font-weight: 400; /* Modern, un-bolded default */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.node-label.is-discipline {
    font-weight: 600; /* Bolder for top-level items */
}

.compass-breadcrumbs {
    margin-bottom: 0.5rem;
}

.breadcrumb-path {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.breadcrumb-path .breadcrumb-item {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.2s ease;
}
.breadcrumb-path .breadcrumb-item:hover {
    color: var(--accent-blue);
    text-decoration: underline;
}

.breadcrumb-path .breadcrumb-separator {
    font-size: 0.875rem;
    color: var(--text-muted);
}

/* --- 5. Pin Button Icon Sizing --- */
.collapse-toggle-btn svg {
    width: 1.25rem; /* 20px */
    height: 1.25rem;
}

/* =================================================================
   COMPASS (MODELING) PAGE - V5 STYLES (REFINED ANIMATION & UX)
   ================================================================= */

/* --- 1. Main Layout & Elegant Animation --- */
.compass-container {
    display: grid;
    grid-template-columns: 25% 1fr 30%;
    gap: 1.5rem;
    padding: 1.5rem;
    height: 100%;
    /* FIX: Smoother, slower animation */
    transition: grid-template-columns 0.4s ease-in-out;
}

.compass-container.vcc-collapsed {
    grid-template-columns: 5.5rem 1fr 30%;
}

.compass-pane {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    height: 100%;
    overflow: hidden;
}

.compass-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
}

/* --- 2. Collapsible VCC Pane & New Title --- */
.vcc-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* Align to top */
    margin-bottom: 1rem;
    position: relative; /* For positioning the collapsed title */
    height: 2.25rem; /* Fixed height to prevent layout shift */
}

.vcc-title {
    /* FIX: Smoother fade transition */
    transition: opacity 0.3s ease-in-out;
}

.compass-container.vcc-collapsed .vcc-title {
    opacity: 0;
    visibility: hidden;
}

/* NEW: Styles for the collapsed "VCC" title */
.vcc-title-collapsed {
    /* REMOVED writing-mode and transform properties */
    position: absolute;
    /* ADDED styles for horizontal centering */
    left: 0;
    right: 0;
    text-align: center;
    /* --- Unchanged properties below --- */
    opacity: 0;
    visibility: hidden;
    color: var(--text-muted);
    font-size: 1.25rem;
    transition: opacity 0.3s ease-in-out;
    pointer-events: none; /* Prevents it from interfering with clicks */
}

.compass-container.vcc-collapsed .vcc-title-collapsed {
    opacity: 1;
    visibility: visible;
}

.vcc-tree-container {
    flex-grow: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
}

.vcc-footer {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
}

.compass-container.vcc-collapsed .vcc-footer {
    justify-content: center;
}

.collapse-toggle-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 0.5rem;
    transition: all 0.2s ease;
}
.collapse-toggle-btn:hover {
    background-color: var(--bg-hover);
    color: var(--text-primary);
}

/* --- 3. VCC Tree & Icon Styling --- */
.tree-node {
    height: 40px; 
    display: flex;
    align-items: center;
    padding: 6px 8px;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}
.tree-node:hover {
    background-color: var(--bg-hover);
}
.tree-node.active {
    background-color: var(--accent-blue-translucent);
}
.tree-node.active .node-label {
    color: var(--accent-blue);
    font-weight: 600;
}
.tree-node.active .is-discipline {
    font-weight: 700;
}

.vcc-tree-container.icon-only .tree-node {
    width: 40px;
    height: 40px;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 0.5rem;
}

.vcc-tree-container.icon-only .tree-node.active {
    background-color: var(--accent-blue-translucent);
}
.vcc-tree-container.icon-only .tree-node.active .discipline-icon-svg {
    color: var(--accent-blue);
}

.discipline-icon-svg {
    width: 24px;
    height: 24px;
    color: var(--text-secondary);
    transition: color 0.2s ease;
    flex-shrink: 0;
}

.tree-node:hover .discipline-icon-svg {
    color: var(--text-primary);
}

.discipline-icon-svg.expanded-view {
    margin-right: 0.5rem;
}

.node-children {
    padding-left: 24px;
    border-left: 1px solid var(--border-color);
    margin-left: 12px;
}

.tree-node .chevron {
    width: 20px;
    height: 20px;
    margin-right: 8px;
    color: var(--text-secondary);
    transition: transform 0.2s ease-in-out;
}
.tree-node .chevron.hidden { visibility: hidden; }
.tree-node .chevron.expanded { transform: rotate(90deg); }


/* --- 4. Font Weight & Breadcrumb Styling --- */
.node-label {
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.node-label.is-discipline {
    font-weight: 600;
}

.compass-breadcrumbs {
    margin-bottom: 0.5rem;
}

.breadcrumb-path {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.breadcrumb-path .breadcrumb-item {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.2s ease;
}
.breadcrumb-path .breadcrumb-item:hover {
    color: var(--accent-blue);
    text-decoration: underline;
}

.breadcrumb-path .breadcrumb-separator {
    font-size: 0.875rem;
    color: var(--text-muted);
}

/* --- 5. Center Pane & Timeline Styles --- */
.compass-center-content {
    flex-grow: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.timeline-selector-card {
    flex-shrink: 0;
}

/* Timeline Header Layout - 3 Section Horizontal */
.timeline-header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    padding: 0;
    background-color: var(--bg-card);
    gap: 0.5rem;
    height: 67.5px;
    overflow: hidden;
}

.timeline-title-section {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.timeline-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.2;
    margin: 0;
}

.timeline-subtitle {
    font-size: 0.75rem;
    color: var(--text-secondary);
    line-height: 1.2;
    margin: 0;
    margin-top: 0.125rem;
}

.timeline-content-section {
    display: flex;
    justify-content: center;
    align-items: center;
}

.timeline-actions-section {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.timeline-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    align-items: center;
}

/* Custom Modal Styles */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(4px);
}

.modal-content {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 2rem;
    max-width: 500px;
    width: 90%;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    animation: modalSlideIn 0.2s ease-out;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal-header {
    margin-bottom: 1.5rem;
}

.modal-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.modal-body {
    margin-bottom: 2rem;
}

.modal-text {
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

.modal-actions {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
}

.modal-button {
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    font-size: 0.875rem;
}

.modal-button-primary {
    background-color: var(--accent-blue);
    color: white;
}

.modal-button-primary:hover {
    background-color: var(--accent-blue-dark, #1d4ed8);
}

.modal-button-secondary {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.modal-button-secondary:hover {
    background-color: var(--bg-tertiary);
}

.modal-input {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.875rem;
    margin-top: 1rem;
}

.modal-input:focus {
    outline: none;
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Assessment Banner Styling */
.read-only-banner, .edit-mode-banner {
    padding: 0.5rem 1rem;
    margin-bottom: 1rem;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    text-align: center;
    min-height: 2rem;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.read-only-banner {
    background-color: var(--status-success-bg, #f0f9ff);
    color: var(--status-success-text, #0369a1);
    border: 1px solid var(--status-success-border, #bae6fd);
}

.edit-mode-banner {
    background-color: var(--accent-blue-translucent, rgba(59, 130, 246, 0.1));
    color: var(--accent-blue, #3b82f6);
    border: 1px solid var(--accent-blue, #3b82f6);
}

/* Custom Scrollbar Styling */
.card-content-scroller::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.card-content-scroller::-webkit-scrollbar-track {
    background: var(--bg-secondary);
    border-radius: 4px;
}

.card-content-scroller::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

.card-content-scroller::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

/* Firefox scrollbar styling */
.card-content-scroller {
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) var(--bg-secondary);
}

/* Apply custom scrollbar to all scrollable elements */
*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

*::-webkit-scrollbar-track {
    background: var(--bg-secondary);
    border-radius: 4px;
}

*::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

*::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

/* Firefox scrollbar styling for all elements */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) var(--bg-secondary);
}

/* Roadmap Visualizer Styles */
.roadmap-arrow {
    fill: none;
    stroke: var(--text-secondary);
    stroke-width: 3;
    cursor: pointer;
    transition: all 0.2s ease;
}

.roadmap-arrow:hover {
    stroke: var(--accent-blue);
    stroke-width: 4;
}

.roadmap-arrow.active {
    stroke: var(--accent-blue);
    stroke-width: 4;
}

.roadmap-node {
    cursor: pointer;
}

.roadmap-node circle {
    transition: all 0.2s ease;
}

.roadmap-node:hover circle {
    stroke: var(--accent-blue);
    stroke-width: 3;
}

.timeline-container {
    position: relative;
    width: 100%;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.timeline-track {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    background-color: var(--border-color);
    transform: translateY(50%);
}

.timeline-item {
    position: absolute;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    z-index: 1;
}

.timeline-item.label-above {
    flex-direction: column;
}

.timeline-item.label-below {
    flex-direction: column-reverse;
}

.timeline-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
    margin: 0.25rem 0;
    transition: color 0.2s ease;
    background-color: var(--bg-card);
    padding: 0.125rem 0.25rem;
    border-radius: 0.25rem;
    position: relative;
    z-index: 1;
    text-align: center;
}

.timeline-circle {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--bg-card);
    border: 3px solid var(--text-secondary);
    transition: all 0.2s ease;
    position: relative;
    flex-shrink: 0;
}

.timeline-circle.committed {
    width: 16px;
    height: 16px;
    border-width: 4px;
}

.timeline-item:hover .timeline-circle,
.timeline-item:hover .timeline-label {
    color: var(--accent-blue);
}
.timeline-item:hover .timeline-circle {
    border-color: var(--accent-blue);
}

.timeline-circle.selected {
    border-color: var(--accent-blue);
    background-color: var(--accent-blue);
}

.timeline-item.selected {
    z-index: 10;
}

.timeline-item.selected .timeline-label {
    z-index: 11;
    background-color: var(--accent-blue-translucent);
    color: var(--accent-blue);
}

.timeline-scale {
    display: flex;
    justify-content: space-between;
    position: absolute;
    bottom: 0;
    width: 100%;
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* --- 6. Enriched Content Card Styles --- */
.description-benefits-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2rem;
    margin-bottom: 2.5rem;
}

.description-pane, .benefits-pane {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.info-label {
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.info-box {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

.benefits-list {
    list-style-type: none;
    padding: 0.75rem 1rem !important;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.benefits-list li strong {
    color: var(--text-primary);
}

.dual-slider-component-v2 {
    margin-bottom: 2rem;
    padding: 0 0.75rem;
}

.maturity-grid-container {
    display: grid;
    grid-template-columns: 140px 1fr; /* Fixed label column, flexible content */
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    overflow: hidden;
    align-items: stretch; /* Ensure rows stretch to the same height */
}

.maturity-grid-label-cell {
    padding: 1rem;
    font-weight: 700;
    background-color: var(--bg-secondary);
    border-right: 1px solid var(--border-color);
    display: flex;
    align-items: center; /* Vertically center the label text */
    justify-content: flex-start; /* Align text to the left */
}
.maturity-grid-label-cell:not(:last-child) {
    border-bottom: 1px solid var(--border-color);
}

.maturity-grid-content-area {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    background-color: var(--bg-card);
}
.maturity-grid-label-cell + .maturity-grid-content-area {
    border-bottom: 1px solid var(--border-color);
}

.maturity-grid-header {
    padding: 1rem;
    font-weight: 700;
    text-align: center;
    border-right: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
}
.maturity-grid-header:last-child {
    border-right: none;
}

.maturity-grid-cell {
    padding: 1rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
    border-right: 1px solid var(--border-color);
    background-color: var(--bg-secondary);
    display: flex; /* Use flexbox for alignment */
    align-items: center; /* Vertically center content */
    justify-content: flex-start; /* Align text to the left */
}
.maturity-grid-cell:last-child {
    border-right: none;
}

/* Align text for benchmark row */
.maturity-grid-label-cell + .maturity-grid-content-area:last-of-type .maturity-grid-cell {
    justify-content: center; /* Center the benchmark values */
    font-weight: 500;
}

/* =================================================================
   API MODEL VIEWER - SCROLLING FIX
   ================================================================= */

/*
  This rule targets the main content area ONLY on the model-viewer page.
  It turns it into a flexible container that fills all available vertical space,
  which is essential for the child grid's `h-full` class to work correctly.
*/
#main-content_ModelView{
    padding: 1.5rem 1.5rem; /* 24px top/bottom, 32px left/right */
}

body.page-model-viewer #main-content_ModelView {
    flex-grow: 1;
    min-height: 0; /* A crucial property to prevent overflow in flex layouts */
    padding: 1.5rem; /* Give the page some breathing room */
}

/*
  This ensures the grid itself fills the now-defined height of the main content area.
*/
body.page-model-viewer .grid {
    height: 100%;
}

/* =================================================================
   API MODEL VIEWER - TRANSFORMATION ROADMAP STEPPER
   ================================================================= */

.roadmap-stepper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0;
}

.stage-box {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--bg-secondary);
    border: 2px solid var(--border-color);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.25rem;
}

.step-arrow {
    flex-grow: 1;
    height: 2px;
    background-color: var(--border-color);
    margin: 0 -10px; /* Overlap with boxes slightly */
    position: relative;
    color: var(--text-muted);
}

.step-arrow.actionable {
    cursor: pointer;
    background-color: var(--accent-blue);
    color: var(--accent-blue);
}

.step-arrow svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 32px;
    height: 32px;
    background-color: var(--bg-card);
    padding: 4px;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.step-arrow.actionable:hover svg {
    transform: translate(-50%, -50%) scale(1.1);
    color: var(--text-primary);
}

.step-arrow.active svg {
    background-color: var(--accent-blue);
    color: white;
}

/* =================================================================
   DATABASE INVENTORY PAGE STYLES
   ================================================================= */

/* This gives the page consistent padding */
body.page-db-inventory #main-content {
    padding: 1.5rem 2rem;
}

.inventory-container { max-width: 1200px; margin: 0 auto; }
.table-card { background-color: var(--bg-card); border: 1px solid var(--border-color); border-radius: 0.75rem; margin-bottom: 2rem; box-shadow: 0 4px 12px var(--shadow); overflow: hidden; }
.table-header { padding: 1rem 1.5rem; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: baseline; }
.table-title { font-size: 1.5rem; font-weight: 700; margin: 0; }
.record-count { font-size: 1rem; font-weight: 600; color: var(--text-secondary); }
.schema-table { width: 100%; border-collapse: collapse; }
.schema-table th, .schema-table td { padding: 0.75rem 1.5rem; text-align: left; border-bottom: 1px solid var(--border-color); }
.schema-table thead { background-color: var(--bg-secondary); }
.schema-table th { font-weight: 600; color: var(--text-muted); font-size: 0.75rem; text-transform: uppercase; }
.schema-table tbody tr:last-child td { border-bottom: none; }
.loading-state { text-align: center; padding: 4rem; font-size: 1.25rem; color: var(--text-muted); }
.spinner { margin: 0 auto 1rem; border: 4px solid var(--border-color); border-top: 4px solid var(--accent-blue); border-radius: 50%; width: 48px; height: 48px; animation: spin 1s linear infinite; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* =================================================================
   API MODEL VIEWER - TRANSFORMATION ROADMAP STEPPER (V2)
   ================================================================= */

.roadmap-stepper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0;
}

.stage-box {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--bg-secondary);
    border: 2px solid var(--border-color);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.25rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.stage-box:hover {
    border-color: var(--accent-blue);
    color: var(--accent-blue);
}

.stage-box.active {
    background-color: var(--accent-blue);
    border-color: var(--accent-blue);
    color: white;
}

.step-arrow {
    flex-grow: 1;
    height: 2px;
    background-color: var(--border-color);
    margin: 0 0.5rem; /* Add some space between arrows and boxes */
}

/* =================================================================
   API MODEL VIEWER - SVG ROADMAP VISUALIZER (FINAL)
   ================================================================= */

#roadmap-svg-container {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding: 1rem 0;
}

.roadmap-node {
    pointer-events: none;
}

.roadmap-arrow {
    cursor: pointer;
    stroke: var(--text-muted);
    stroke-width: 2;
    fill: none;
    transition: all 0.2s ease;
}

.roadmap-arrow:hover {
    stroke: var(--accent-blue);
    stroke-width: 4;
}

.roadmap-arrow.active {
    stroke: var(--purple); /* NEW: Use purple for selected */
    stroke-width: 5;
}

.roadmap-arrow path {
    fill: var(--text-muted); /* Default arrowhead color */
}

.roadmap-arrow:hover path {
    fill: var(--accent-blue);
}

.roadmap-arrow.active path {
    fill: var(--purple); /* NEW: Purple arrowhead for selected */
}

/* --- Dark Mode Accessibility Fix --- */
[data-theme="dark"] .text-green-800 { color: var(--status-success); }
[data-theme="dark"] .text-green-700 { color: #a7f3d0; } /* Lighter green for list items */
[data-theme="dark"] .text-red-800 { color: var(--status-error); }
[data-theme="dark"] .text-red-700 { color: #fecaca; } /* Lighter red for list items */

/* --- Cumulative Initiatives Styling --- */
.initiatives-container h6 {
    font-weight: bold;
    color: var(--text-primary);
}
.roadmap-phase-group {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px dashed var(--border-color);
}
.roadmap-phase-group:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}
.phase-title {
    font-weight: bold;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

/* =================================================================
   COMPASS PAGE - INFO MODAL & CLICKABLE LABELS
   ================================================================= */

/* Makes the info label and its new icon clickable */
.info-label-clickable {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    width: fit-content; /* Ensures only the text/icon area is clickable */
}

.info-label-clickable:hover .info-label,
.info-label-clickable:hover .info-icon {
    color: var(--accent-blue);
}

.info-icon {
    color: var(--text-muted);
    transition: color 0.2s ease;
}

/* --- Modal Styles --- */
.info-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(9, 26, 45, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.info-modal-overlay.visible {
    opacity: 1;
    visibility: visible;
}

.info-modal-content {
    background-color: var(--bg-card);
    padding: 1.5rem 2rem;
    border-radius: 0.75rem;
    width: 90%;
    max-width: 600px;
    box-shadow: 0 10px 25px var(--shadow-hover);
    transform: scale(0.95);
    transition: transform 0.2s ease;
}

.info-modal-overlay.visible .info-modal-content {
    transform: scale(1);
}

.info-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.info-modal-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
}

.info-modal-close-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.25rem;
}
.info-modal-close-btn:hover {
    color: var(--text-primary);
}

.info-modal-body {
    max-height: 60vh;
    overflow-y: auto;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

.info-modal-body ul {
    list-style-type: disc;
    padding-left: 1.25rem;
    margin-top: 0.5rem;
}

/* =================================================================
   COMPASS PAGE - DYNAMIC EXPANSION BOX (FINAL & SYNCED HEIGHT)
   ================================================================= */

/* The grid wrapper that animates its column sizes */
#description-control-grid-wrapper {
    display: grid;
    grid-template-columns: 4fr 6fr; /* Default 40/60 split */
    gap: 1.5rem;
    align-items: stretch; /* THE KEY CHANGE: Forces both panes to be equal height */
    transition: grid-template-columns 0.5s ease-in-out;
}

#description-control-grid-wrapper.details-expanded {
    grid-template-columns: 8fr 2fr;
}

/* The info-pane now uses flexbox to help the info-box grow */
.info-pane {
    position: relative;
    display: flex;
    flex-direction: column;
}

/* The info-box itself */
.info-box {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--text-secondary);
    transition: all 0.5s ease-in-out;
    flex-grow: 1; /* Allows the box to fill the pane's height */
    overflow-y: auto; /* Show scrollbar ONLY when content overflows */
    /* Stylish scrollbar styles */
    scrollbar-width: thin;
    scrollbar-color: var(--accent-blue) transparent;
}

.info-box::-webkit-scrollbar { width: 8px; }
.info-box::-webkit-scrollbar-track { background: transparent; }
.info-box::-webkit-scrollbar-thumb {
    background-color: var(--border-color);
    border-radius: 10px;
    border: 2px solid var(--bg-card);
}
.info-box::-webkit-scrollbar-thumb:hover { background-color: var(--accent-blue); }


/* Subtle corner expansion icon */
.expand-icon-button {
    position: absolute;
    bottom: 0.5rem;
    right: 0.5rem;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--text-muted);
    transition: all 0.2s ease;
    z-index: 10;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.6;
}

.expand-icon-button:hover {
    color: var(--accent-blue);
    opacity: 1;
    transform: scale(1.1);
}

/* Logic to swap between the two icons (unchanged) */
.expand-icon-button .icon-collapse { display: none; }
.expand-icon-button.expanded .icon-expand { display: none; }
.expand-icon-button.expanded .icon-collapse { display: block; }

/* KPI label cell positioning */
.kpi-label-cell {
    position: relative;
}

.kpi-expand-btn {
    position: absolute;
    bottom: 0.25rem;
    right: 0.25rem;
    margin: 0;
    width: 1.25rem;
    height: 1.25rem;
}

/* Radar chart expansion button positioning */
.radar-chart-container {
    position: relative;
}

.expand-icon-button.bottom-left {
    position: absolute;
    bottom: 0.5rem;
    left: 0.5rem;
    margin: 0;
    width: 1.5rem;
    height: 1.5rem;
}


/* The hidden content container (unchanged) */
.details-content {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-in-out, opacity 0.3s 0.1s ease-in-out, margin-top 0.4s ease-in-out;
    margin-top: 0;
}

.info-pane.is-expanded .details-content {
    max-height: 1000px;
    opacity: 1;
    margin-top: 1rem;
}

/* =================================================================
   COMPASS PAGE - EXPANDABLE CHARACTERISTICS (CORRECTED)
   ================================================================= */

/* The content box itself. No height restrictions. */
/* .stage-characteristics {
    
} */

/* The expand/collapse icon button */
.details-toggle-icon {
    background: none;
    border: none;
    padding: 0.25rem;
    cursor: pointer;
    color: var(--text-muted);
    transition: all 0.2s ease;
}

.details-toggle-icon:hover {
    color: var(--accent-blue);
}

/* The chevron icon inside the button */
.details-toggle-icon svg {
    transition: transform 0.3s ease-in-out;
}

/* Rotate the icon when the SECTION is expanded */
.is-expanded .details-toggle-icon svg {
    transform: rotate(180deg);
}

/* =================================================================
   COMPASS PAGE - COLLAPSIBLE RIGHT PANE
   ================================================================= */

/* Add the right pane to the main grid transition */
.compass-container {
    transition: grid-template-columns 0.4s ease-in-out;
}

/* NEW: Grid state when the right pane is collapsed */
.compass-container.right-pane-collapsed {
    grid-template-columns: 25% 1fr 5.5rem; /* VCC | Center | Right Pane */
}
/* Handle the double-collapsed state */
.compass-container.vcc-collapsed.right-pane-collapsed {
    grid-template-columns: 5.5rem 1fr 5.5rem; /* VCC | Center | Right Pane */
}

/* The right pane itself */
#compass-right-pane {
    transition: all 0.4s ease-in-out;
}

/* Hide all content inside the cards when collapsed */
.right-pane-collapsed #compass-right-pane .compass-card > *:not(.card-icon-preview) {
    opacity: 0;
    height: 0;
    visibility: hidden;
    margin: 0;
    padding: 0;
}

/* The icon preview that is ONLY visible when collapsed */
.card-icon-preview {
    display: none; /* Hidden by default */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text-muted);
}
.right-pane-collapsed #compass-right-pane .card-icon-preview {
    display: flex; /* Visible when collapsed */
}
.card-icon-preview svg {
    width: 32px;
    height: 32px;
    margin-bottom: 0.5rem;
}
.card-icon-preview span {
    font-weight: 600;
    font-size: 0.875rem;
}

/* The footer for the expand/collapse button */
.right-pane-footer {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
    display: flex;
    /* THE FIX: Center the button instead of left-aligning it */
    justify-content: center; 
}

/* =================================================================
   COMPASS PAGE - UNIFIED MATURITY & TRANSFORMATION GRID (V3 - DEFINITIVE)
   ================================================================= */

.unified-maturity-grid {
    display: grid;
    grid-template-columns: 160px 1fr;
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    overflow: hidden;
}

.unified-grid-label {
    padding: 1rem;
    font-weight: 700;
    background-color: var(--bg-card); 
    border-right: 1px solid var(--border-color);
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.4;
    position: relative;
}
.unified-grid-label:first-child { border-top: none; }
.unified-grid-label > span { text-align: right; flex-grow: 1; }

.unified-grid-content {
    border-top: 1px solid var(--border-color);
    position: relative;
}
.unified-grid-content:first-child { border-top: none; }

.content-box-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
    padding: 1rem;
}

.stage-header-box {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text-primary);
    text-align: center;
    padding: 0.75rem 0.5rem;
}

.stage-content-box {
    background-color: var(--bg-secondary);
    border-radius: 0.75rem;
    padding: 1rem;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--accent-blue) transparent;
}
.stage-characteristics { min-height: 150px; max-height: 300px; color: var(--text-secondary); font-size: 0.875rem; transition: height 0.5s ease-in-out; }
.stage-kpi { min-height: 60px; display: flex; align-items: center; justify-content: center; text-align: center; font-weight: 600; color: var(--text-primary); }
.stage-content-box::-webkit-scrollbar { width: 8px; }
.stage-content-box::-webkit-scrollbar-track { background: transparent; }
.stage-content-box::-webkit-scrollbar-thumb { background-color: var(--border-color); border-radius: 10px; border: 2px solid var(--bg-secondary); }
.stage-content-box::-webkit-scrollbar-thumb:hover { background-color: var(--accent-blue); }

/* Styling for the slider and priorities rows */
.slider-row, .priorities-row {
    padding: 0 1rem;
    display: flex;
    align-items: center;
}
.slider-row {
    height: 80px;
}
.priorities-row {
    height: 45px; /* Set to 45px as requested */
    transition: height 0.5s ease-in-out, min-height 0.5s ease-in-out;
}
.priorities-row.expanded {
    min-height: 500px; /* Increased by 2.5x to accommodate larger content */
    height: auto; /* Allow height to grow based on content */
    align-items: flex-start;
}

/* The invisible slider track */
.tv-slider-track {
    -webkit-appearance: none; appearance: none; width: 100%; height: 100%;
    background: transparent; cursor: pointer; position: absolute; top: 0; left: 0; margin: 0; z-index: 20;
}
.tv-slider-track::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; height: 14px; width: 14px; border-radius: 50%;
    background-color: var(--bg-card); box-shadow: 0 0 0 5px var(--border-color); filter: drop-shadow(0 1px 2px var(--shadow-hover));
}
.tv-slider-track.as-is::-webkit-slider-thumb { box-shadow: 0 0 0 5px var(--purple); }
.tv-slider-track.to-be::-webkit-slider-thumb { box-shadow: 0 0 0 5px var(--accent-teal); }

/* The visible colored line behind the slider */
.tv-track-line {
    width: 100%; height: 4px; border-radius: 2px; position: relative;
}
.tv-track-line.as-is { background: linear-gradient(to right, var(--purple), var(--text-muted)); }
.tv-track-line.to-be { background: linear-gradient(to right, var(--accent-teal), var(--text-muted)); }

/* Aria's score icon */
.tv-aria-indicator {
    position: absolute; transform: translateX(-50%); width: 24px; height: 24px; background-color: var(--bg-card);
    border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 4px var(--shadow); z-index: 15;
}
.tv-aria-indicator.as-is { top: 0; border: 2px solid var(--purple); }
.tv-aria-indicator.to-be { bottom: 0; border: 2px solid var(--accent-teal); }
.tv-aria-indicator img { width: 16px; height: 16px; }

/* The "Reactive / 0.8" text */
.tv-value-label {
    position: absolute;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
}
.tv-value-label.as-is { bottom: 10px; }
.tv-value-label.to-be { top: 10px; }
.tv-value-label[data-position="left"] { transform: translateX(0); }
.tv-value-label[data-position="right"] { transform: translateX(-100%); }
.tv-value-label[data-position="center"] { transform: translateX(-50%); }

/* The new Transformation Priorities bar */
.tv-priorities-bar {
    position: relative; width: 66.66%; margin: 0 auto; height: 100%;
    display: flex; flex-direction: column; justify-content: center;
}
.tv-priorities-title {
    width: 100%; height: 40px; background-color: var(--text-secondary); color: var(--bg-primary);
    display: flex; align-items: center; justify-content: center; font-weight: 700;
    cursor: pointer; z-index: 10; border-radius: 0.5rem; transition: border-radius 0.3s ease-in-out;
}
.priorities-row.expanded .tv-priorities-title { border-radius: 0.5rem 0.5rem 0 0; }
.tv-priorities-content {
    flex-grow: 1; background-color: var(--bg-secondary); color: var(--text-primary);
    padding: 1rem; overflow-y: auto; opacity: 0;
    transition: opacity 0.3s 0.1s ease-in-out; border-radius: 0 0 0.5rem 0.5rem;
}
.priorities-row.expanded .tv-priorities-content { opacity: 1; }
.priorities-content-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 1.5rem; text-align: left; }
.priorities-content-grid.full-width { grid-template-columns: 1fr; }
.priorities-content-grid h6 { font-weight: 700; margin-bottom: 0.5rem; }
.priorities-content-grid ul { list-style-type: disc; padding-left: 1.25rem; font-size: 0.875rem; }

/* =================================================================
   COMPASS PAGE - DEFINITIVE STYLES FOR ALL COMPONENTS (V9 - FINAL FIX)
   ================================================================= */

/* --- 1. Scrollable Center Pane --- */
.compass-center-content {
    flex-grow: 1; overflow-y: auto; display: flex; flex-direction: column;
    gap: 1.5rem; scrollbar-width: thin; scrollbar-color: var(--accent-blue) transparent;
}
.compass-center-content::-webkit-scrollbar { width: 8px; }
.compass-center-content::-webkit-scrollbar-track { background: transparent; }
.compass-center-content::-webkit-scrollbar-thumb {
    background-color: var(--border-color); border-radius: 10px; border: 2px solid var(--bg-card);
}
.compass-center-content::-webkit-scrollbar-thumb:hover { background-color: var(--accent-blue); }

/* --- 2. KPI Details Popup (Unchanged) --- */
.kpi-details-popup {
    position: absolute; width: 450px; background-color: var(--bg-card);
    border: 1px solid var(--border-color); border-radius: 0.75rem;
    box-shadow: 0 4px 12px var(--shadow-hover); padding: 0; z-index: 50;
    opacity: 0; visibility: hidden; transform: scale(0.95) translateY(-50%);
    transform-origin: top left; transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.kpi-details-popup.visible { opacity: 1; visibility: visible; transform: scale(1) translateY(-50%); }
.kpi-popup-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 1rem 1.5rem; border-bottom: 1px solid var(--border-color);
}
.kpi-popup-title { font-weight: 700; color: var(--text-primary); margin: 0; }
.kpi-popup-close-btn { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 0.25rem; }
.kpi-popup-close-btn:hover { color: var(--text-primary); }
.kpi-popup-body { font-size: 0.875rem; color: var(--text-secondary); max-height: 50vh; overflow-y: auto; padding: 1rem 1.5rem; }
.kpi-popup-body strong { display: block; margin-top: 0.75rem; color: var(--text-primary); font-weight: 600; }
.kpi-popup-body code { font-family: monospace; background-color: var(--bg-secondary); padding: 0.25rem 0.5rem; border-radius: 4px; font-size: 0.8rem; }
.kpi-popup-body .alternatives-list { list-style-type: none; padding-left: 0; }
.kpi-popup-body .alternatives-list li { padding: 0.125rem 0; }

/* --- 3. Slider Row Structure & Alignment (FIXED) --- */
.slider-row {
    position: relative; /* Anchor for the static label */
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Align track to the bottom */
    padding: 0.25rem 0.5rem; /* Reduced padding for compact size */
    height: 80px;
}
.tv-track-container {
    height: 50%;
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
}

/* --- 4. Slider Track & Static Label Logic (FIXED) --- */
.tv-track-line {
    position: absolute; width: 100%; height: 4px; border-radius: 2px;
    top: 50%; transform: translateY(-50%);
}
.tv-track-line.as-is { background: linear-gradient(to right, var(--purple), var(--text-muted)); }
.tv-track-line.to-be { background: linear-gradient(to right, var(--accent-teal), var(--text-muted)); }
.tv-slider-track {
    position: absolute; top: 0; left: 0; margin: 0; z-index: 20;
}
.static-value-label {
    position: absolute;
    top: 0.5rem; /* Padding from the top of the row */
    right: 1rem;  /* Padding from the left of the row */
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}
.value-level-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}
.value-score {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
}

/* --- 5. ARIA PIN STYLES (FIXED & CONTROLLABLE) --- */
.tv-aria-indicator {
    position: absolute;
    width: 32px;
    height: 32px;
    background-color: var(--bg-card);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px var(--shadow);
    z-index: 15;
    transform: translateX(-50%);
    /* Base positioning is removed from here to be handled by specific rules below */
}
.tv-aria-indicator img { width: 20px; height: 20px; }
.tv-aria-indicator::after {
    content: ''; position: absolute; bottom: -12px; left: 50%;
    transform: translateX(-50%); width: 0; height: 0;
    border-left: 8px solid transparent; border-right: 8px solid transparent;
    border-top-width: 14px; border-top-style: solid;
}

/* THE FIX: Separate positioning for each pin */
.tv-aria-indicator.as-is {
    border: 3px solid var(--purple);
    /* 
      THIS IS THE LINE TO EDIT FOR THE "AS-IS" PIN:
      top: calc(50% - [pin_height] - [desired_gap]);
      e.g., top: calc(50% - 32px - 12px) = top: calc(50% - 44px);
    */
    top: calc(50% - 44px);
}
.tv-aria-indicator.as-is::after {
    border-top-color: var(--purple);
}

.tv-aria-indicator.to-be {
    border: 3px solid var(--accent-teal);
    /* 
      THIS IS THE LINE TO EDIT FOR THE "TO-BE" PIN:
    */
    top: calc(50% - 44px);
}
.tv-aria-indicator.to-be::after {
    border-top-color: var(--accent-teal);
}
.tv-aria-indicator img { width: 20px; height: 20px; }
.tv-aria-indicator::after {
    content: ''; position: absolute; bottom: -12px; left: 50%;
    transform: translateX(-50%); width: 0; height: 0;
    border-left: 8px solid transparent; border-right: 8px solid transparent;
    border-top-width: 14px; border-top-style: solid;
}
.tv-aria-indicator.as-is { border: 3px solid var(--purple); }
.tv-aria-indicator.as-is::after { border-top-color: var(--purple); }
.tv-aria-indicator.to-be { border: 3px solid var(--accent-teal); }
.tv-aria-indicator.to-be::after { border-top-color: var(--accent-teal); }

/* --- 6. Refined Transformation Initiatives Toggle (FIXED) --- */
.priorities-row {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; padding: 0.5rem 1rem;
    min-height: 45px; height: auto; transition: all 0.5s ease-in-out; /* Set to 45px as requested */
}
.transformation-toggle-button {
    background: none; border: none; color: var(--text-secondary); cursor: pointer;
    padding: 0.25rem 0.5rem; border-radius: 0.5rem; /* Reduced padding for compact size */
    transition: all 0.3s ease-in-out;
    display: flex; align-items: center; gap: 0.5rem;
    font-weight: 700; font-size: 0.875rem; /* Slightly smaller font */
}
.transformation-toggle-button:hover {
    background-color: var(--bg-hover); color: var(--accent-blue);
}
.transformation-toggle-button svg {
    width: 20px; height: 20px; transition: transform 0.3s ease-in-out;
}
.transformation-toggle-button.expanded svg { transform: rotate(180deg); }

/* --- 7. Content Expansion (FIXED) --- */
.priorities-row.expanded { 
    justify-content: flex-start; 
}
.priorities-row.expanded .transformation-wrapper {
    justify-content: flex-start; /* Align content to top when expanded */
}
.tv-priorities-content {
    width: 100%; max-height: 0; opacity: 0; overflow: hidden;
    transition: max-height 0.4s ease-in-out, opacity 0.3s 0.1s ease-in-out, margin-top 0.4s ease-in-out;
    margin-top: 0;
}
.priorities-row.expanded .tv-priorities-content {
    max-height: 23.75rem; opacity: 1; margin-top: 1rem; /* Increased by 2.5x from 9.5rem */
}

/* =================================================================
   COMPASS PAGE - MODERN SCROLLBAR FOR CENTER PANE
   ================================================================= */

/* 1. Make the content area scrollable */
.compass-center-content {
    overflow-y: auto;
    /* Modern Scrollbar for Firefox */
    scrollbar-width: thin;
    scrollbar-color: var(--accent-blue) transparent;
}

/* 2. Modern Scrollbar for Webkit browsers (Chrome, Safari, Edge) */
.compass-center-content::-webkit-scrollbar {
    width: 8px;
}

.compass-center-content::-webkit-scrollbar-track {
    background: transparent;
}

.compass-center-content::-webkit-scrollbar-thumb {
    background-color: var(--border-color);
    border-radius: 10px;
    /* Creates a nice padding effect around the scrollbar thumb */
    border: 2px solid var(--bg-card);
}

.compass-center-content::-webkit-scrollbar-thumb:hover {
    background-color: var(--accent-blue);
}

.transformation-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center; /* This ensures the button and content stay centered */
    justify-content: center; /* Center vertically */
    height: 100%; /* Take full height of parent */
}

/* =================================================================
   COMPASS PAGE - DEFINITIVE STYLES (V17 - FINAL LAYOUT & COLORS)
   ================================================================= */

/* --- 1. Color Variable Override for a more vibrant purple --- */
:root {
    --purple: #8B5CF6; /* A harder, more vibrant purple (violet-500) */
}
[data-theme="dark"] {
    --purple: #A78BFA; /* A brighter, more saturated purple for dark mode (violet-400) */
}

/* --- 2. Scrollable Center Pane --- */
.card-content-scroller {
    flex-grow: 1; min-height: 0; overflow-y: auto; padding: 0 1.5rem 1.5rem 1.5rem;
    scrollbar-width: thin; scrollbar-color: var(--accent-blue) transparent;
}
.card-content-scroller::-webkit-scrollbar { width: 8px; }
.card-content-scroller::-webkit-scrollbar-track { background: transparent; }
.card-content-scroller::-webkit-scrollbar-thumb {
    background-color: var(--border-color); border-radius: 10px; border: 2px solid var(--bg-card);
}
.card-content-scroller::-webkit-scrollbar-thumb:hover { background-color: var(--accent-blue); }
.compass-card.description-card {
    padding: 0 !important; flex-grow: 1; min-height: 600px; display: flex; flex-direction: column;
}

/* --- 3. KPI Details Popup --- */
.kpi-details-popup {
    position: absolute; width: 450px; background-color: var(--bg-card);
    border: 1px solid var(--border-color); border-radius: 0.75rem;
    box-shadow: 0 4px 12px var(--shadow-hover); padding: 0; z-index: 50;
    opacity: 0; visibility: hidden; transform: scale(0.95) translateY(-50%);
    transform-origin: top left; transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.kpi-details-popup.visible { opacity: 1; visibility: visible; transform: scale(1) translateY(-50%); }
.kpi-popup-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 1rem 1.5rem; border-bottom: 1px solid var(--border-color);
}
.kpi-popup-title { font-weight: 700; color: var(--text-primary); margin: 0; }
.kpi-popup-close-btn { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 0.25rem; }
.kpi-popup-close-btn:hover { color: var(--text-primary); }
.kpi-popup-body { font-size: 0.875rem; color: var(--text-secondary); max-height: 50vh; overflow-y: auto; padding: 1rem 1.5rem; }
.kpi-popup-body strong { display: block; margin-top: 0.75rem; color: var(--text-primary); font-weight: 600; }
.kpi-popup-body code { font-family: monospace; background-color: var(--bg-secondary); padding: 0.25rem 0.5rem; border-radius: 4px; font-size: 0.8rem; }
.kpi-popup-body .alternatives-list { list-style-type: none; padding-left: 0; }
.kpi-popup-body .alternatives-list li { padding: 0.125rem 0; }

/* --- 4. Slider Row Structure & Alignment --- */
.slider-row {
    position: relative; display: flex; flex-direction: column;
    justify-content: flex-end; padding: 0.5rem 1rem; height: 80px;
}
.tv-track-container {
    height: 50%; position: relative; width: 100%;
    display: flex; align-items: center;
}

/* --- 5. Slider Track, GRADIENTS & Static Label (THE FIX) --- */
.tv-track-line {
    position: absolute; width: 100%; height: 4px; border-radius: 2px;
    top: 50%; transform: translateY(-50%);
}
.tv-track-line.as-is {
    background: linear-gradient(to right, var(--accent-blue), var(--status-success));
}
.tv-track-line.to-be {
    background: linear-gradient(to right, var(--status-warning), var(--purple));
}
.tv-slider-track {
    position: absolute; top: 0; left: 0; margin: 0; z-index: 20;
}
.static-value-label {
    position: absolute; top: 0.5rem; right: 1rem;
    display: flex; align-items: baseline; gap: 0.5rem;
}
.value-level-name {
    font-size: 1rem; font-weight: 700; color: var(--text-primary);
}
.value-score {
    font-size: 0.875rem; font-weight: 600; color: var(--text-secondary);
}

/* --- 6. UNIFIED SLIDER & PIN COLORS (THE FIX) --- */
.tv-slider-track.as-is::-webkit-slider-thumb { box-shadow: 0 0 0 5px var(--accent-blue); }
.tv-slider-track.as-is::-moz-range-thumb { box-shadow: 0 0 0 5px var(--accent-blue); }
.tv-aria-indicator.as-is { border: 3px solid var(--accent-blue); }
.tv-aria-indicator.as-is::after { border-top-color: var(--accent-blue); }

.tv-slider-track.to-be::-webkit-slider-thumb { box-shadow: 0 0 0 5px var(--purple); }
.tv-slider-track.to-be::-moz-range-thumb { box-shadow: 0 0 0 5px var(--purple); }
.tv-aria-indicator.to-be { border: 3px solid var(--purple); }
.tv-aria-indicator.to-be::after { border-top-color: var(--purple); }

/* --- 7. ARIA PIN STYLES (Base) --- */
.tv-aria-indicator {
    position: absolute; width: 32px; height: 32px; background-color: var(--bg-card);
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 4px var(--shadow); z-index: 15; transform: translateX(-50%);
    top: calc(50% - 36px);
}
.tv-aria-indicator img { width: 20px; height: 20px; }
.tv-aria-indicator::after {
    content: ''; position: absolute; bottom: -12px; left: 50%;
    transform: translateX(-50%); width: 0; height: 0;
    border-left: 8px solid transparent; border-right: 8px solid transparent;
    border-top-width: 14px; border-top-style: solid;
}

/* --- 8. Refined Transformation Initiatives Toggle --- */
.priorities-row {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; /* Center the title in collapsed mode */
    padding: 0.25rem 0.5rem; min-height: 45px; height: auto; /* Reduced padding for compact size */
}
.transformation-wrapper {
    width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%;
}
.transformation-toggle-button {
    background: none; border: none; color: var(--text-secondary); cursor: pointer;
    padding: 0.25rem 0.5rem; border-radius: 0.5rem; /* Reduced padding for compact size */
    transition: all 0.3s ease-in-out;
    display: flex; align-items: center; gap: 0.5rem;
    font-weight: 700; font-size: 0.875rem; /* Slightly smaller font */
}
.transformation-toggle-button:hover {
    background-color: var(--bg-hover); color: var(--accent-blue);
}
.transformation-toggle-button svg {
    width: 20px; height: 20px; transition: transform 0.3s ease-in-out;
}
.transformation-toggle-button.expanded svg { transform: rotate(180deg); }

/* --- 9. INITIATIVES CONTENT SCROLLING (THE FIX) --- */
.tv-priorities-content {
    width: 100%;
    max-height: 0; /* Collapsed by default */
    opacity: 0;
    overflow: hidden; /* Hide content and scrollbar when collapsed */
    transition: max-height 0.4s ease-in-out, opacity 0.3s 0.1s ease-in-out, margin-top 0.4s ease-in-out;
    margin-top: 0;
}
.priorities-row.expanded .tv-priorities-content {
    opacity: 1;
    margin-top: 1rem;
    /* Set a max-height to accommodate transformation initiatives */
    max-height: 23.75rem; /* Increased by 2.5x from 9.5rem (380px) */
    overflow-y: auto; /* Show scrollbar ONLY when content exceeds this max-height */
    
    /* Apply modern scrollbar styles */
    scrollbar-width: thin;
    scrollbar-color: var(--accent-blue) transparent;
}
.priorities-row.expanded .tv-priorities-content::-webkit-scrollbar { width: 8px; }
.priorities-row.expanded .tv-priorities-content::-webkit-scrollbar-track { background: transparent; }
.priorities-row.expanded .tv-priorities-content::-webkit-scrollbar-thumb {
    background-color: var(--border-color);
    border-radius: 10px;
    border: 2px solid var(--bg-secondary);
}
.priorities-row.expanded .tv-priorities-content::-webkit-scrollbar-thumb:hover {
    background-color: var(--accent-blue);
}

/* =================================================================
   LEVER DESCRIPTION EXPANSION STYLES
   ================================================================= */
.lever-description-expanded {
    grid-column: 1 / -1; /* Stretch across full width */
}

.lever-description-box {
    /* Match normal info-box height - no special height needed */
    /* Placeholder for future lever-specific styling */
    display: block;
}

.lever-details-expanded {
    display: block !important; /* Always show full details for levers */
    opacity: 1 !important;
    max-height: none !important;
}

/* =================================================================
   COMPASS PAGE - DEFINITIVE STYLES (V21 - FINAL LAYOUT & PADDING)
   ================================================================= */

/* --- 1. Color Variables for Sliders & Chart --- */
:root {
    --as-is-color: #3B82F6;
    --to-be-color: #A855F7;
}
[data-theme="dark"] {
    --as-is-color: #60A5FA;
    --to-be-color: #C084FC;
}

/* --- 2. THE PADDING & ALIGNMENT FIX --- */
.card-header-with-toggle {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1.5rem 1.5rem 0 1.5rem; /* Add padding to the header */
    flex-shrink: 0; /* Prevent header from shrinking */
    min-height: 4rem; /* Increased height 2x to prevent cutoff */
}
.scope-toggle-wrapper {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
    padding-left: 1.rem;
}
.card-content-padding-wrapper {
    padding: 0.5rem 1.5rem 1.5rem 1.5rem; /* Reduced top padding to move content up */
}

/* --- 3. Scrollable Center Pane --- */
.compass-card.description-card {
    padding: 0 !important; /* Remove padding from the outer card */
    flex-grow: 1;
    min-height: 600px; /* Increased from 0 to accommodate transformation initiatives */
    display: flex;
    flex-direction: column;
}
.card-content-scroller {
    flex-grow: 1;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--accent-blue) transparent;
}
.card-content-scroller::-webkit-scrollbar { width: 8px; }
.card-content-scroller::-webkit-scrollbar-track { background: transparent; }
.card-content-scroller::-webkit-scrollbar-thumb {
    background-color: var(--border-color);
    border-radius: 10px;
    border: 2px solid var(--bg-card);
}
.card-content-scroller::-webkit-scrollbar-thumb:hover { background-color: var(--accent-blue); }

/* --- 4. ARIA Insight Box --- */
.aria-insight-box {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--accent-blue);
    border-radius: 0.5rem;
    margin-top: 1rem;
    padding: 1rem 1.5rem;
}
.aria-insight-header {
    display: flex; align-items: center; gap: 0.75rem;
    font-weight: 700; color: var(--text-primary);
    padding-bottom: 0.75rem; margin-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color);
}
.aria-insight-header img { width: 24px; height: 24px; }
.aria-insight-grid {
    display: grid; grid-template-columns: 1fr 2fr; gap: 1rem;
}
.aria-insight-metric label, .aria-insight-rationale label {
    font-size: 0.75rem; font-weight: 600; color: var(--text-muted);
    text-transform: uppercase; display: flex; align-items: center; gap: 0.25rem;
}
.aria-insight-metric p { font-size: 1.5rem; font-weight: 700; color: var(--text-primary); }
.aria-insight-metric .confidence-bar-wrapper { display: flex; align-items: center; gap: 0.5rem; }
.confidence-bar-wrapper .confidence-bar {
    height: 6px; background-color: var(--accent-blue); border-radius: 99px;
}
.confidence-bar-wrapper span { font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); }
.aria-insight-rationale p {
    font-size: 0.875rem; color: var(--text-secondary); line-height: 1.6; margin-top: 0.25rem;
}

/* --- 5. Radar Chart "Focus Mode" Layout (FIXED) --- */
.compass-container {
    --vcc-width: 25%;
    transition: grid-template-columns 0.4s ease-in-out;
}
.compass-container.vcc-collapsed {
    --vcc-width: 5.5rem;
}
.compass-container.radar-expanded .compass-pane#compass-center-pane,
.compass-container.radar-expanded .aria-perspective-card,
.compass-container.radar-expanded .compass-card.flex-grow,
.compass-container.radar-expanded .right-pane-footer {
    visibility: hidden; opacity: 0;
    transition: visibility 0s 0.2s, opacity 0.2s ease-in-out;
}
.compass-card.radar-card {
    transition: all 0.4s ease-in-out;
    display: flex; flex-direction: column;
}
.compass-card.radar-card.expanded {
    position: fixed;
    top: calc(5rem + 1.5rem);left: calc(var(--vcc-width) + 10% + 6rem); /* VCC width + Center Pane width (30%) + (2 * 1.5rem gaps) */ left: calc(var(--vcc-width) + 1.5rem + 1.5rem); /* VCC width + padding + gap */
    right: 1.5rem;
    bottom: 1.5rem;
    width: auto;
    height: auto !important;
    z-index: 100;
}
.radar-chart-container {
    flex-grow: 1; min-height: 0; position: relative;
}

/* --- 6. VCC SEARCH FUNCTIONALITY --- */
.vcc-search-container {
    padding: 0.75rem;
    margin-top: auto;
}

.search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.vcc-search-input {
    width: 100%;
    padding: 0.5rem 2rem 0.5rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.875rem;
    transition: all 0.2s ease-in-out;
    pointer-events: auto;
    z-index: 10;
    position: relative;
    direction: ltr;
    text-align: left;
}

.vcc-search-input:focus {
    outline: none;
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px var(--accent-blue-translucent);
}

.search-clear-btn {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 0.25rem;
    transition: color 0.2s ease-in-out;
}

.search-clear-btn:hover {
    color: var(--text-primary);
}

.search-icon-btn {
    position: absolute;
    bottom: 0.75rem;
    right: 0.75rem;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 0.375rem;
    transition: all 0.2s ease-in-out;
}

.search-icon-btn:hover {
    color: var(--accent-blue);
    background-color: var(--accent-blue-translucent);
}

.search-results-header {
    padding: 0.75rem;
    border-bottom: 1px solid var(--border-color);
    background-color: var(--bg-secondary);
}

.search-result {
    position: relative;
    padding-left: 0.5rem;
}

.search-result .search-parent-info {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-style: italic;
    margin-left: 0.5rem;
}

.search-highlight {
    font-weight: 500;
}

.search-highlight-mark {
    background-color: var(--accent-blue-translucent);
    color: var(--accent-blue);
    padding: 0.125rem 0.25rem;
    border-radius: 0.25rem;
    font-weight: 600;
}

/* --- 7. UNIFIED SLIDER & PIN COLORS --- */
.tv-slider-track.as-is::-webkit-slider-thumb { box-shadow: 0 0 0 5px var(--as-is-color); }
.tv-slider-track.as-is::-moz-range-thumb { box-shadow: 0 0 0 5px var(--as-is-color); }
.tv-aria-indicator.as-is { border: 3px solid var(--as-is-color); }
.tv-aria-indicator.as-is::after { border-top-color: var(--as-is-color); }

.tv-slider-track.to-be::-webkit-slider-thumb { box-shadow: 0 0 0 5px var(--to-be-color); }
.tv-slider-track.to-be::-moz-range-thumb { box-shadow: 0 0 0 5px var(--to-be-color); }
.tv-aria-indicator.to-be { border: 3px solid var(--to-be-color); }
.tv-aria-indicator.to-be::after { border-top-color: var(--to-be-color); }

/* =================================================================
   COMPASS PAGE - DEFINITIVE STYLES (V23 - FINAL UI)
   ================================================================= */

/* --- 1. Color Variables & Padding Wrapper --- */
:root { --as-is-color: #3B82F6; --to-be-color: #A855F7; }
[data-theme="dark"] { --as-is-color: #60A5FA; --to-be-color: #C084FC; }
.card-content-padding-wrapper { padding: 0.5rem 1.5rem 1.5rem 1.5rem; }

/* --- 2. Scrollable Center Pane & Header --- */
.card-header-with-toggle {
    display: flex; justify-content: space-between; align-items: flex-start;
    padding: 1.5rem 1.5rem 0 1.5rem; flex-shrink: 0;
    min-height: 4rem; /* Increased height 2x to prevent cutoff */
}
.scope-toggle-wrapper {
    display: flex; align-items: center; gap: 0.75rem;
    flex-shrink: 0; padding-left: 1rem;
}
.compass-card.description-card {
    padding: 0 !important; flex-grow: 1; min-height: 600px;
    display: flex; flex-direction: column;
}
.card-content-scroller {
    flex-grow: 1; min-height: 0; overflow-y: auto;
    scrollbar-width: thin; scrollbar-color: var(--accent-blue) transparent;
}
.card-content-scroller::-webkit-scrollbar { width: 8px; }
.card-content-scroller::-webkit-scrollbar-track { background: transparent; }
.card-content-scroller::-webkit-scrollbar-thumb {
    background-color: var(--border-color); border-radius: 10px; border: 2px solid var(--bg-card);
}
.card-content-scroller::-webkit-scrollbar-thumb:hover { background-color: var(--accent-blue); }

/* --- 3. NEW: ARIA Insight Box (Dual Column) --- */
.aria-insight-box {
    background-color: var(--bg-secondary); border: 1px solid var(--border-color);
    border-left: 4px solid var(--accent-blue); border-radius: 0.5rem;
    margin-top: 1rem; padding: 0;
}
.aria-insight-header {
    display: flex; align-items: center; gap: 0.75rem;
    font-weight: 700; color: var(--text-primary);
    padding: 1rem 1.5rem; border-bottom: 1px solid var(--border-color);
}
.aria-insight-header img { width: 24px; height: 24px; }
.aria-insight-grid-dual {
    display: grid; grid-template-columns: 1fr 1fr;
}
.aria-insight-column {
    padding: 1rem 1.5rem;
    display: flex; flex-direction: column; gap: 1rem;
}
.aria-insight-column:first-child {
    border-right: 1px solid var(--border-color);
}
.aria-insight-column h5 {
    font-size: 1rem; font-weight: 700; color: var(--text-primary);
}
.aria-insight-metric label, .aria-insight-rationale label {
    font-size: 0.75rem; font-weight: 600; color: var(--text-muted);
    text-transform: uppercase; display: flex; align-items: center; gap: 0.25rem;
}
.aria-insight-metric p { font-size: 1.5rem; font-weight: 700; color: var(--text-primary); }
.aria-insight-metric .confidence-bar-wrapper { display: flex; align-items: center; gap: 0.5rem; }
.confidence-bar-wrapper .confidence-bar {
    height: 6px; background-color: var(--accent-blue); border-radius: 99px;
}
.confidence-bar-wrapper span { font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); }
.aria-insight-rationale p {
    font-size: 0.875rem; color: var(--text-secondary); line-height: 1.6; margin-top: 0.25rem;
}

/* --- 4. Assessment Conversation & Input (FIXED) --- */
.assessment-conversation-section {
    margin-top: 2rem; padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}
.assessment-conversation-container {
    display: flex; flex-direction: column; gap: 1rem;
    max-height: 400px; overflow-y: auto; padding: 1rem;
    margin-bottom: 1rem; background-color: var(--bg-secondary);
    border-radius: 0.5rem;
}
.bubble-wrapper { display: flex; gap: 0.75rem; max-width: 100% !important; }
.bubble-wrapper.user-wrapper { margin-left: auto; flex-direction: row-reverse; }
.persona-avatar-chat {
    width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: 0.875rem; flex-shrink: 0;
}
.chat-bubble { padding: 0.75rem 1rem; border-radius: 0.75rem; }
.aria-bubble {
    background-color: var(--bg-card); border: 1px solid var(--border-color);
    border-top-left-radius: 0;
}
.user-bubble {
    background-color: var(--accent-blue-translucent); border: 1px solid var(--accent-blue);
    border-top-right-radius: 0;
}
.bubble-header {
    font-weight: 700; font-size: 0.875rem;
    margin-bottom: 0.25rem; color: var(--text-primary);
}
.bubble-text {
    font-size: 0.875rem; line-height: 1.6; color: var(--text-secondary);
}
.comment-input-area {
    display: flex; gap: 0.75rem; align-items: flex-end;
    padding: 0.5rem; border: 1px solid var(--border-color);
    border-radius: 0.75rem; background-color: var(--bg-card);
}
.comment-input-area textarea {
    flex-grow: 1; border: none; background: transparent; resize: none;
    font-size: 0.875rem; color: var(--text-primary);
    max-height: 150px; padding: 0.25rem;
}
.comment-input-area textarea:focus { outline: none; }

/* =================================================================
   COMPASS PAGE - VCC TEXT WRAP (DEFINITIVE FIX)
   ================================================================= */

/* --- 1. Base style for all node labels (Single Line) --- */
/* This ensures that by default, and especially in the collapsed icon-only view,
   labels are always on a single line with an ellipsis. */
.node-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%; /* Prevents long text from pushing icons out of place */
}

/* --- 2. THE FIX: Two-line wrapping for the EXPANDED VCC view --- */
/* This rule targets the .node-label ONLY when its parent container
   does NOT have the .icon-only class. */
.vcc-tree-container:not(.icon-only) .node-label {
    /* Allow text to wrap naturally */
    white-space: normal; 
    
    /* The magic for line-clamping */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* Legacy property for current browser support */
    line-clamp: 2;         /* NEW: Standard property for future compatibility */
    overflow: hidden;      /* This is required for line-clamp to work */
}

/* --- 3. Adjust the container height to accommodate two lines --- */
/* This ensures the rows can grow slightly taller when text wraps. */
.vcc-tree-container:not(.icon-only) .tree-node {
    /* Change from a fixed height to a minimum height to allow growth */
    min-height: 40px; 
    height: auto; /* Let the content determine the final height */
    align-items: center; /* Keep icons and text vertically centered */
}

/* =================================================================
   COMPASS PAGE - UNIFIED MODERN SCROLLBAR STYLES (DEFINITIVE)
   ================================================================= */

/* --- 1. Define the list of all scrollable containers on the Compass page --- */
.card-content-scroller,
.aria-perspective-content,
.maturity-table-container,
.tv-priorities-content,
.kpi-popup-body,
.vcc-tree-container,
.info-box {
    /* For Firefox */
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
}

/* --- 2. Style the scrollbar track and size for Webkit browsers --- */
.card-content-scroller::-webkit-scrollbar,
.aria-perspective-content::-webkit-scrollbar,
.maturity-table-container::-webkit-scrollbar,
.tv-priorities-content::-webkit-scrollbar,
.kpi-popup-body::-webkit-scrollbar,
.vcc-tree-container::-webkit-scrollbar,
.info-box::-webkit-scrollbar {
    width: 8px;
}

.card-content-scroller::-webkit-scrollbar-track,
.aria-perspective-content::-webkit-scrollbar-track,
.maturity-table-container::-webkit-scrollbar-track,
.tv-priorities-content::-webkit-scrollbar-track,
.kpi-popup-body::-webkit-scrollbar-track,
.vcc-tree-container::-webkit-scrollbar-track,
.info-box::-webkit-scrollbar-track {
    background: transparent;
}

/* --- 3. Style the scrollbar thumb (the part you drag) --- */
/* This group is for elements with a primary card background */
.card-content-scroller::-webkit-scrollbar-thumb,
.aria-perspective-content::-webkit-scrollbar-thumb,
.maturity-table-container::-webkit-scrollbar-thumb,
.kpi-popup-body::-webkit-scrollbar-thumb,
.vcc-tree-container::-webkit-scrollbar-thumb {
    background-color: var(--border-color);
    border-radius: 10px;
    border: 2px solid var(--bg-card); /* Inset from the card's background */
}

/* This group is for elements with a secondary, slightly darker background */
.tv-priorities-content::-webkit-scrollbar-thumb,
.info-box::-webkit-scrollbar-thumb {
    background-color: var(--border-color);
    border-radius: 10px;
    border: 2px solid var(--bg-secondary); /* Inset from the secondary background */
}

/* --- 4. THE HOVER EFFECT: Make the thumb turn blue for ALL scrollbars --- */
.card-content-scroller::-webkit-scrollbar-thumb:hover,
.aria-perspective-content::-webkit-scrollbar-thumb:hover,
.maturity-table-container::-webkit-scrollbar-thumb:hover,
.tv-priorities-content::-webkit-scrollbar-thumb:hover,
.kpi-popup-body::-webkit-scrollbar-thumb:hover,
.vcc-tree-container::-webkit-scrollbar-thumb:hover,
.info-box::-webkit-scrollbar-thumb:hover {
    background-color: var(--accent-blue);
}

/* =================================================================
   COMPASS PAGE - DEFINITIVE STYLES (V25 - FINAL LAYOUT & SCOPE)
   ================================================================= */

/* --- 1. Color Variables & Padding Wrapper --- */
:root { --as-is-color: #3B82F6; --to-be-color: #A855F7; }
[data-theme="dark"] { --as-is-color: #60A5FA; --to-be-color: #C084FC; }
.card-content-padding-wrapper { padding: 0.5rem 1.5rem 1.5rem 1.5rem; }

/* --- 2. Scrollable Center Pane & Header --- */
.card-header-with-toggle {
    display: flex; justify-content: space-between; align-items: flex-start;
    padding: 1.5rem 1.5rem 0 1.5rem; flex-shrink: 0;
    min-height: 4rem; /* Increased height 2x to prevent cutoff */
}
.scope-toggle-wrapper {
    display: flex; align-items: center; gap: 0.75rem;
    flex-shrink: 0; padding-left: 1rem;
}
.compass-card.description-card {
    padding: 0 !important; flex-grow: 1; min-height: 600px;
    display: flex; flex-direction: column;
}
.card-content-scroller {
    flex-grow: 1; min-height: 0; overflow-y: auto;
    scrollbar-width: thin; scrollbar-color: var(--accent-blue) transparent;
}
.card-content-scroller::-webkit-scrollbar { width: 8px; }
.card-content-scroller::-webkit-scrollbar-track { background: transparent; }
.card-content-scroller::-webkit-scrollbar-thumb {
    background-color: var(--border-color); border-radius: 10px; border: 2px solid var(--bg-card);
}
.card-content-scroller::-webkit-scrollbar-thumb:hover { background-color: var(--accent-blue); }

/* --- 3. THE RIGHT PANE LAYOUT FIX --- */
.compass-pane#compass-right-pane .action-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.aria-perspective-card {
    /* Reduced by 20% from 65.34% to 52.27% */
    flex: 1 1 52.27%; 
    min-height: 0; /* Allow card to shrink */
    display: flex;
    flex-direction: column;
}
.compass-card.flex-grow {
    /* Increased to accommodate smaller ARIA section - from 34.66% to 47.73% */
    flex: 1 1 47.73%;
    min-height: 0; /* Allow card to shrink */
    display: flex;
    flex-direction: column;
}
.aria-perspective-content, .maturity-table-container {
    flex-grow: 1;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--accent-blue) transparent;
}
/* Webkit scrollbar styles for these new containers */
.aria-perspective-content::-webkit-scrollbar,
.maturity-table-container::-webkit-scrollbar { width: 8px; }
.aria-perspective-content::-webkit-scrollbar-track,
.maturity-table-container::-webkit-scrollbar-track { background: transparent; }
.aria-perspective-content::-webkit-scrollbar-thumb,
.maturity-table-container::-webkit-scrollbar-thumb {
    background-color: var(--border-color);
    border-radius: 10px;
    border: 2px solid var(--bg-card);
}
.aria-perspective-content::-webkit-scrollbar-thumb:hover,
.maturity-table-container::-webkit-scrollbar-thumb:hover {
    background-color: var(--accent-blue);
}

/* --- 4. Radar Chart "Focus Mode" Layout --- */
.compass-container {
    --vcc-width: 25%;
    --center-pane-width: 30%; 
    transition: grid-template-columns 0.4s ease-in-out;
}
.compass-container.vcc-collapsed {
    --vcc-width: 5.5rem;
}
.compass-container.radar-expanded .compass-pane#compass-center-pane,
.compass-container.radar-expanded .aria-perspective-card,
.compass-container.radar-expanded .compass-card.flex-grow,
.compass-container.radar-expanded .right-pane-footer {
    visibility: hidden; opacity: 0;
    transition: visibility 0s 0.2s, opacity 0.2s ease-in-out;
}
.compass-card.radar-card {
    transition: all 0.4s ease-in-out;
    display: flex; flex-direction: column;
}
.compass-card.radar-card.expanded {
    position: fixed;
    top: calc(5rem + 1.5rem);
    left: calc(var(--vcc-width) + 1.5rem);
    right: 1.5rem;
    bottom: 1.5rem;
    width: auto;
    height: auto !important;
    z-index: 100;
}
/* Removed duplicate radar-chart-container rule that was overriding the padding fix */

/* =================================================================
   ARIA LIST FORMATTING (GLOBAL FIX)
   ================================================================= */

.aria-list {
    display: flex;
    flex-direction: column;
    gap: 1rem; /* Space between list items */
}

.aria-list-item {
    display: flex;
    align-items: flex-start; /* Aligns icon/number with the top of the text */
    gap: 0.75rem; /* Space between icon/number and text */
}

/* Style for the number or bullet */
.aria-list-item > span {
    flex-shrink: 0; /* Prevents the number from shrinking */
    font-weight: 700;
    margin-top: 0.125rem; /* Fine-tunes vertical alignment with text */
    color: var(--text-primary);
}

/* Style for the text content block */
.aria-list-item h4 {
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.125rem; /* Small space between title and text */
}

.aria-list-item p {
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

/* =================================================================
   COMPASS PAGE - "ALL DISCIPLINES" SUMMARY VIEW (V27 - FINAL FIX)
   ================================================================= */

/* --- 1. Main Container for the Summary View (Layout Fix) --- */
.all-disciplines-summary-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    height: 100%;
}
.all-disciplines-summary-container > .compass-card {
    flex-grow: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 0 !important;
}
.all-disciplines-summary-container .timeline-selector-card {
    flex-grow: 0;
    flex-shrink: 0;
    padding: 0.5rem !important;
}

/* --- 2. Assessment Context Box --- */
.assessment-context-box {
    margin-top: 1.5rem; padding: 1rem; background-color: var(--bg-secondary);
    border: 1px solid var(--border-color); border-left: 4px solid var(--accent-blue);
    border-radius: 0.5rem; font-size: 0.875rem; color: var(--text-secondary);
}
.assessment-context-box strong { color: var(--text-primary); font-weight: 700; }

/* --- 3. High-Level Stage Grid --- */
.summary-stage-grid {
    display: grid; grid-template-columns: repeat(5, 1fr);
    gap: 1rem; margin: 2rem 0;
}
.summary-stage-card {
    background-color: var(--bg-secondary); border-radius: 0.5rem; padding: 1rem;
}

/* --- 4. NEW: Non-Interactive Slider Thumb for Summary View --- */
.tv-slider-thumb {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: var(--bg-card);
    box-shadow: 0 0 0 5px var(--border-color), 0 1px 2px var(--shadow-hover);
    z-index: 18; /* Above the track, below the pin */
}
.tv-slider-thumb.as-is { box-shadow: 0 0 0 5px var(--as-is-color); }
.tv-slider-thumb.to-be { box-shadow: 0 0 0 5px var(--to-be-color); }

/* --- 5. Scored Items Summary List --- */
.scored-items-summary {
    margin-top: 2rem; padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}
.scored-items-summary > ul {
    list-style-type: none; padding-left: 0;
    columns: 2; gap: 2rem;
}
.discipline-summary-item {
    margin-bottom: 1rem; break-inside: avoid-column;
}
.lever-summary-list {
    list-style-type: disc; padding-left: 1.25rem; margin-top: 0.25rem;
    font-size: 0.875rem; color: var(--text-secondary);
}

/* =================================================================
   ARIA LIST FORMATTING (GLOBAL FIX)
   ================================================================= */

.aria-list {
    display: flex;
    flex-direction: column;
    gap: 1rem; /* Space between list items */
}

.aria-list-item {
    display: flex;
    align-items: flex-start; /* Aligns icon/number with the top of the text */
    gap: 0.75rem; /* Space between icon/number and text */
}

/* Style for the number or bullet */
.aria-list-item > span {
    flex-shrink: 0; /* Prevents the number from shrinking */
    font-weight: 700;
    margin-top: 0.125rem; /* Fine-tunes vertical alignment with text */
    color: var(--text-primary);
}

/* Style for the text content block */
.aria-list-item h4 {
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.125rem; /* Small space between title and text */
}

.aria-list-item p {
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

/* =============================================== */
/* === AI-Generated Content Styling (Markdown) === */
/* =============================================== */

/* This targets the container where the AI's HTML response is rendered. */
.aria-response-bubble .response-text {
    /* This creates a bit of space between all direct child elements (p, ul, table, etc.) */
    display: flex;
    flex-direction: column;
    gap: 1rem; /* This is the main spacing control. Adjust as needed. */
}

/* --- Headings & Paragraphs --- */
.aria-response-bubble .response-text h1,
.aria-response-bubble .response-text h2,
.aria-response-bubble .response-text h3,
.aria-response-bubble .response-text h4 {
    font-weight: 600;
}

/* --- Lists --- */
.aria-response-bubble .response-text ul,
.aria-response-bubble .response-text ol {
    padding-left: 1.5rem; /* Indent lists */
}
.aria-response-bubble .response-text li {
    margin-bottom: 0.5rem; /* Space between list items */
}

/* --- Tables --- */
.aria-response-bubble .response-text table {
    width: 100%;
    border-collapse: collapse; /* Clean borders */
}

/* Elegant table styling for ARIA responses - works in both light and dark mode */
.aria-data-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 600px;
    background-color: var(--bg-card);
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    margin: 1.5rem 0;
}

.aria-data-table thead {
    background-color: var(--bg-secondary);
}

.aria-data-table th {
    padding: 0.875rem 1rem;
    text-align: left;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-primary);
    background-color: var(--bg-secondary);
    border-bottom: 2px solid var(--border-color);
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.aria-data-table tbody tr {
    border-bottom: 1px solid var(--border-color);
    transition: background-color 0.15s ease;
}

.aria-data-table tbody tr:hover {
    background-color: var(--bg-hover);
}

.aria-data-table td {
    padding: 0.875rem 1rem;
    color: var(--text-secondary);
    vertical-align: top;
}

.aria-data-table td:first-child {
    font-weight: 500;
    color: var(--text-primary);
}

/* Ensure tables have proper spacing in response bubbles */
.aria-response-bubble table,
.aria-response-bubble .aria-data-table {
    margin: 1.5rem 0;
    width: 100%;
}

.aria-response-bubble .aria-data-table {
    border-radius: 0.5rem;
    overflow: hidden;
}

/* Legacy support for existing table styles */
.aria-response-bubble .response-text th,
.aria-response-bubble .response-text td {
    border: 1px solid var(--border-color);
    padding: 0.875rem 1rem;
    text-align: left;
    vertical-align: top;
}

.aria-response-bubble .response-text th {
    background-color: var(--bg-secondary);
    font-weight: 600;
    color: var(--text-primary);
}

.aria-response-bubble .response-text tbody tr:hover {
    background-color: var(--bg-hover);
}

/* =============================================== */
/* === ARIA Content Box Component System === */
/* =============================================== */

/* Base content box styling - works in both light and dark mode */
.aria-content-box {
    background-color: var(--bg-secondary);
    padding: 1.25rem;
    margin: 1rem 0;
    border-radius: 0.5rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.2s ease, background-color 0.2s ease;
}

/* Boxes with bold left border (actions, suggestions, priorities) */
/* Styled inline, no additional CSS needed */

/* Boxes without border (insights, content) have subtle background */
.aria-content-box:not([style*="border-left"]) {
    /* Use slightly different background for distinction */
    background-color: var(--bg-card);
}

/* Ensure consistent spacing and typography in content boxes */
.aria-content-box h4 {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.875rem 0;
    line-height: 1.4;
}

.aria-content-box > div {
    color: var(--text-secondary);
    line-height: 1.7;
    margin: 0;
}

/* Dark mode adjustments for content boxes */
[data-theme="dark"] .aria-content-box {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .aria-content-box:not([style*="border-left"]) {
    background-color: var(--bg-card);
}

/* Light mode adjustments for content boxes */
[data-theme="light"] .aria-content-box {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .aria-content-box:not([style*="border-left"]) {
    background-color: var(--bg-secondary);
}

/* =============================================== */
/* === RAG Test Page Dark Mode Fix === */
/* =============================================== */

[data-theme="dark"] #company-context {
    color: var(--text-primary);
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
}

/* =============================================== */
/* === Reasoning Simulation Spacing === */
/* =============================================== */

.reasoning-simulation {
    margin-top: 0.75rem; /* 12px */
}

/* =================================================================
   COMPASS PAGE - SMART TIMELINE COLORS & SELECTION (V3)
   ================================================================= */

/* --- 1. Define Theme-Aware Colors for the Timeline --- */
:root {
    --timeline-committed-color: #16a34a; /* Green 600 */
    --timeline-interim-color: #2563eb;   /* Blue 600 */
    --timeline-selected-inner-color: #dc2626; /* Red 600 */
}

[data-theme="dark"] {
    --timeline-committed-color: #4ade80; /* Green 400 */
    --timeline-interim-color: #60a5fa;   /* Blue 400 */
    --timeline-selected-inner-color: #f87171; /* Red 400 */
}

/* --- 2. Base Timeline Item Styling --- */
.timeline-item .timeline-label {
    transition: color 0.2s ease; /* Smooth color transition on hover/selection */
}

.timeline-circle {
    position: relative; /* Required for positioning the inner circle */
    background-color: var(--bg-card); /* Ensure inner area matches background */
}

/* --- 3. THE SMART COLOR LOGIC --- */

/* Default State: Interim (Not Selected) */
.timeline-item:has(.timeline-circle:not(.committed)) .timeline-label {
    color: var(--timeline-interim-color);
}
.timeline-circle:not(.committed) {
    border-color: var(--timeline-interim-color);
}

/* State: Committed (Not Selected) */
.timeline-item:has(.timeline-circle.committed) .timeline-label {
    color: var(--timeline-committed-color);
}
.timeline-circle.committed {
    border-color: var(--timeline-committed-color);
}

/* --- 4. THE SELECTION INDICATOR (FILLED RED CIRCLE) --- */

/* Make the entire circle red when selected */
.timeline-circle.selected {
    background-color: var(--timeline-selected-inner-color) !important;
    border-color: var(--timeline-selected-inner-color) !important;
}

/* --- 5. Hover Effect (Unchanged but still important) --- */
.timeline-item:hover .timeline-label {
    color: var(--accent-blue);
}
.timeline-item:hover .timeline-circle {
    border-color: var(--accent-blue);
}

/* =================================================================
   COMPASS PAGE - VIEWING VS. EDITING MODE STYLES
   ================================================================= */

/* --- 1. Read-Only Banner Styles (Updated) --- */
/* Note: Main banner styles are defined above in "Assessment Banner Styling" section */

.read-only-banner {
    background-color: var(--bg-secondary);
    color: var(--text-secondary);
}

/* Edit mode banner colors are defined in the main "Assessment Banner Styling" section above */

/* --- 2. Disabled State for Sliders & Toggles --- */
/* This makes sliders and toggles appear faded and non-interactive when disabled */
.read-only-mode .tv-slider-track,
.read-only-mode .toggle-switch {
    opacity: 0.5;
    cursor: not-allowed;
}

/* --- 3. Disabled State for Action Icons --- */
/* This targets the buttons in the timeline header */
.control-icon-button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background-color: transparent; /* Ensure no hover effect */
}

/* --- 4. Timeline Dot Color Fixes --- */
/* This ensures the colors for committed/selected dots are consistent */
.timeline-circle.committed {
    border-color: var(--timeline-committed-color);
}

.timeline-circle.selected::after {
    background-color: var(--timeline-selected-inner-color);
}

/* --- 5. General Control Icon Button Style --- */
/* This ensures all the top-right icons have a consistent look and feel */
.control-icon-button {
    background: none;
    border: 1px solid transparent;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.control-icon-button:not(:disabled):hover {
    background-color: var(--bg-hover);
    color: var(--text-primary);
}

.control-icon-button svg {
    width: 20px;
    height: 20px;
}

/* Special color for the "Uncommit" button to indicate a potentially destructive action */
.control-icon-button.uncommit-btn:not(:disabled):hover {
    color: var(--status-error);
}

/* =================================================================
   KNOWLEDGE GRAPH FILTERING SYSTEM
   ================================================================= */

/* Legend Styling */
.legend-body {
    padding: 12px;
}

.legend-item {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    font-size: 13px;
    color: var(--text-secondary);
}

.legend-color {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    margin-right: 8px;
    border: 1px solid var(--border-color);
    flex-shrink: 0;
}

/* =================================================================
   FILTER PANEL STYLES
   ================================================================= */
.filter-panel {
    margin-bottom: 0.25rem;
    padding-top: 0.25rem;
}

.filter-panel .filter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.25rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--border-color);
}

.filter-panel .filter-header h3 {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* Ensure all filter containers have consistent styling */
#workstream-filter-container,
#nodetype-filter-container,
#stage-filter-container,
#legend-container {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    padding: 0.5rem;
    margin-bottom: 0.25rem;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

/* Styles for disabled/grayed out filter items */
.filter-tree-item.no-data {
    opacity: 0.5;
}

.filter-tree-item.no-data label {
    color: var(--text-muted);
}

.filter-tree-item.no-data .toggle-switch input[disabled] {
    opacity: 0.3;
}

.filter-tree-item.no-data .slider.disabled {
    background: var(--text-muted);
    cursor: not-allowed;
}

.filter-tree-item.no-data .slider.disabled:before {
    background: var(--bg-primary);
    border: 1px solid var(--text-muted);
}

/* Radio button styles */
.radio-label {
    display: flex;
    align-items: center;
    padding: 0.5rem;
    cursor: pointer;
    border-radius: 0.375rem;
    transition: background-color 0.2s ease;
}

.radio-label:hover {
    background: var(--bg-hover);
}

.radio-label input[type="radio"] {
    margin-right: 0.5rem;
    width: 1rem;
    height: 1rem;
    cursor: pointer;
    accent-color: var(--accent-primary);
}

.radio-label span {
    color: var(--text-primary);
    font-size: 0.875rem;
}

/* Count badge styling for entity categories */
.count-badge {
    background: var(--accent-blue);
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    min-width: 1.5rem;
    text-align: center;
}

/* Version indicator styling */
.version-indicator {
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 0.75rem;
    color: var(--text-secondary);
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

.version-hash {
    font-weight: 500;
    letter-spacing: 0.025em;
}

.version-hash:hover {
    opacity: 1;
    color: var(--text-primary);
}

/* Dark mode version indicator */
[data-theme="dark"] .version-indicator {
    color: var(--text-secondary);
}

[data-theme="dark"] .version-hash:hover {
    color: var(--text-primary);
}