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

:root {
    --color-primary: #0078d4;
    --color-primary-dark: #005a9e;
    --color-success: #107c10;
    --color-warning: #ffb900;
    --color-error: #d13438;
    
    /* Light mode */
    --bg-primary: #ffffff;
    --bg-secondary: #f3f2f1;
    --bg-tertiary: #efefef;
    --text-primary: #323130;
    --text-secondary: #605e5c;
    --text-tertiary: #a19f9d;
    --border-color: #d2d0ce;
    --shadow: 0 1.6px 3.6px rgba(0, 0, 0, 0.11), 0 3.6px 7.2px rgba(0, 0, 0, 0.13);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);

    /* Wizard / worksheet — light palette */
    --ws-card-bg: #f8f9fa;
    --ws-surface: #f3f2f1;
    --ws-surface-raised: #e8e6e4;
    --ws-border: #d2d0ce;
    --ws-border-subtle: #edebe9;
    --ws-input-bg: #ffffff;
    --ws-input-border: #c8c6c4;
    --ws-select-bg: #ffffff;
    --ws-progress-bg: rgba(0,0,0,0.05);
    --ws-progress-border: rgba(0,0,0,0.1);
    --ws-slider-track: #d2d0ce;
    --ws-placeholder: #a19f9d;
}

body.dark-mode {
    --bg-primary: #1e1e1e;
    --bg-secondary: #2d2d2d;
    --bg-tertiary: #3a3a3a;
    --text-primary: #ffffff;
    --text-secondary: #e0e0e0;
    --text-tertiary: #a0a0a0;
    --border-color: #404040;
    --shadow: 0 1.6px 3.6px rgba(0, 0, 0, 0.3), 0 3.6px 7.2px rgba(0, 0, 0, 0.4);

    /* Wizard / worksheet — dark palette */
    --ws-card-bg: #0f1117;
    --ws-surface: rgba(255,255,255,0.04);
    --ws-surface-raised: rgba(255,255,255,0.08);
    --ws-border: rgba(255,255,255,0.1);
    --ws-border-subtle: rgba(255,255,255,0.07);
    --ws-input-bg: rgba(255,255,255,0.05);
    --ws-input-border: rgba(255,255,255,0.12);
    --ws-select-bg: #1e2433;
    --ws-progress-bg: rgba(0,0,0,0.22);
    --ws-progress-border: rgba(255,255,255,0.08);
    --ws-slider-track: rgba(255,255,255,0.1);
    --ws-placeholder: rgba(255,255,255,0.3);
}

html, body {
    height: 100%;
    width: 100%;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
    overflow: hidden;
}

/* App Layout */
.app-container {
    display: flex;
    height: 100vh;
}

/* Navigation Rail */
.nav-rail {
    width: 60px;
    background-color: var(--bg-secondary);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 0;
    overflow-y: auto;
    flex-shrink: 0;
}

.nav-rail-header {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 24px;
}

.logo {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #0078d4, #107c10);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 14px;
}

.nav-rail-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    width: 100%;
}

.nav-rail-footer {
    width: 100%;
    display: flex;
    justify-content: center;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

.nav-item {
    width: 44px;
    height: 44px;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    transition: all 0.2s ease;
    position: relative;
}

.nav-item:hover {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

.nav-item.active {
    background-color: var(--color-primary);
    color: white;
}

.nav-item .icon {
    font-size: 20px;
    line-height: 1;
}

.nav-item .label {
    font-size: 8px;
    margin-top: 2px;
}

/* Main Content */
.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.app-header {
    background-color: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    padding: 12px 16px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.header-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px 24px;
    flex-wrap: wrap;
}

.header-title {
    flex: 1 1 320px;
    min-width: 280px;
}

.app-header h1 {
    font-size: 28px;
    margin-bottom: 8px;
    line-height: 1.2;
}

.app-header p {
    color: var(--text-secondary);
    font-size: 14px;
}

.header-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    flex: 0 1 auto;
    min-width: 0;
}

.vendor-file-selector {
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 8px 12px;
    white-space: nowrap;
    margin-left: 0 !important;
}

@media (max-width: 1100px) {
    .header-controls {
        width: 100%;
    }
}

.vendor-file-selector label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
}

.vendor-file-selector select {
    border: none;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    padding: 4px 8px;
    font-size: 13px;
    cursor: pointer;
    min-width: 140px;
}

.vendor-file-selector select:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}

/* Schema visibility config popover */
.schema-visibility-popover {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 1000;
    width: 280px;
    max-height: 420px;
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.schema-visibility-popover[hidden] { display: none; }

.schema-visibility-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-color);
    background-color: var(--bg-secondary, #f5f5f5);
    font-size: 13px;
}

.schema-visibility-actions { display: flex; gap: 6px; }

.schema-visibility-actions button {
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 3px;
    padding: 2px 8px;
    font-size: 12px;
    cursor: pointer;
    color: var(--text-primary);
}

.schema-visibility-actions button:hover { background-color: var(--bg-primary); }

.schema-visibility-list {
    overflow-y: auto;
    padding: 6px 4px;
}

.schema-visibility-list label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    font-size: 13px;
    cursor: pointer;
    color: var(--text-primary);
    border-radius: 3px;
}

.schema-visibility-list label:hover { background-color: var(--bg-secondary, #f0f0f0); }
.schema-visibility-list input[type="checkbox"] { margin: 0; cursor: pointer; }

/* View Sections */
.view-container {
    display: none;
    flex: 1;
    overflow: auto;
}

.view-container.active {
    display: flex;
    flex-direction: column;
}

/* Filter Panel */
.filter-panel {
    background-color: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    padding: 8px 16px;
    flex-shrink: 0;
}

.filter-header {
    display: none;
}

.filter-header h2 {
    font-size: 13px;
    flex: 1;
    font-weight: 600;
    color: var(--text-secondary);
}

.header-buttons {
    display: flex;
    gap: 8px;
    align-items: center;
}

.search-box {
    position: relative;
    margin-bottom: 12px;
}

.search-box input {
    width: 100%;
    padding: 12px 12px 12px 40px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-size: 14px;
    transition: border-color 0.2s;
}

.search-box input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(0, 120, 212, 0.1);
}

.search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
}

.filter-groups {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    padding: 12px 0;
}

.filter-dropdown-wrapper {
    display: flex;
    align-items: center;
    gap: 6px;
}

.filter-dropdown-wrapper label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
}

.filter-dropdown {
    padding: 6px 10px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-size: 12px;
    cursor: pointer;
    transition: border-color 0.2s;
}

.filter-dropdown:hover {
    border-color: var(--color-primary);
}

.filter-dropdown:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1);
}

/* Vendor Container */
.vendor-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0 8px 8px 8px;
}

.vendor-header {
    padding: 12px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.vendor-count {
    font-weight: 600;
    color: var(--text-secondary);
}

.view-options {
    display: flex;
    gap: 8px;
}

.btn-icon {
    width: 32px;
    height: 32px;
    border: 1px solid var(--border-color);
    background-color: var(--bg-primary);
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

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

.table-wrapper {
    flex: 1;
    overflow: auto;
    border: 1px solid var(--border-color);
    border-radius: 6px;
}

.vendors-table {
    width: auto;
    border-collapse: collapse;
    font-size: 13px;
    table-layout: auto;
}

.vendors-table thead {
    background-color: var(--bg-secondary);
    position: sticky;
    top: 0;
    z-index: 10;
}

.vendors-table thead tr {
    display: table-row;
}

.vendors-table th {
    padding: 12px;
    text-align: left;
    font-weight: 600;
    border-bottom: 2px solid var(--border-color);
    color: var(--text-primary);
    white-space: nowrap;
    cursor: default;
}

.vendors-table th.base-column {
    width: auto;
    padding: 4px 8px;
    white-space: nowrap;
    font-size: 12px;
}

/* Hard-cap the Vendor Name column (first column) so an overlong vendor name
   can never blow out the table width and push the score columns off-screen. */
.vendors-table th.base-column[data-base-col="vendor"],
.vendors-table tbody tr > td:first-child {
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.vendors-table tbody tr > td:first-child > * {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    vertical-align: bottom;
}

.vendors-table th.pillar-column {
    width: auto;
    min-width: 55px;
    padding: 6px 3px;
    flex-grow: 1;
    border-left: 2px solid var(--border-color);
    border-right: 2px solid var(--border-color);
}

.vendors-table th.pillar-column:first-of-type {
    border-left: 2px solid var(--border-color);
}

.vendors-table th.sub-pillar-header {
    padding: 6px 1px !important;
    font-size: 11px;
    font-weight: 600;
    min-width: 45px;
    background-color: rgba(0, 120, 212, 0.05);
    border-left: 1px solid var(--border-color);
    text-indent: 4px;
    color: var(--color-primary);
}

.vendors-table th .header-text {
    margin-right: 4px;
}

/* Frame sub-pillar groups with borders */
.vendors-table th.sub-pillar-header {
    position: relative;
}\n\n/* First sub-pillar of a group - left border */
.vendors-table th.sub-pillar-header[data-pillar-group] {
    border-left: 1px solid var(--border-color);
}\n\n/* Last sub-pillar before different group - right border */
.vendors-table th.sub-pillar-header[data-pillar-group]:last-of-type {
    border-right: 2px solid var(--border-color);
}

.vendors-table th .info-icon {
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s;
    font-size: 14px;
}

.vendors-table th .info-icon:hover {
    opacity: 1;
}

.vendors-table td.clickable-cell,
.vendors-table td:not(.pillar-column):not(.sub-pillar-column) {
    white-space: nowrap;
    font-size: 12px;
    padding: 4px 8px;
}

.vendors-table td {
    padding: 4px 8px;
    border-bottom: 1px solid var(--border-color);
    word-break: break-word;
}

.vendors-table tbody tr {
    transition: background-color 0.2s;
}

.vendors-table tbody tr:hover {
    background-color: var(--bg-secondary);
    cursor: pointer;
}

.vendors-table td.clickable-cell {
    cursor: pointer;
    color: var(--color-primary);
    user-select: none;
}

.vendors-table td.clickable-cell:hover {
    text-decoration: underline;
}

.pillar-column {
    width: 60px;
    text-align: center;
}

.pillar-group-separator {
    width: 2px;
    background-color: var(--border-color);
    padding: 0;
}

.sub-pillar-column {
    width: 40px;
    text-align: center;
    padding: 6px 1px !important;
    background-color: rgba(0, 120, 212, 0.03);
    font-size: 11px;
    border-left: 1px solid var(--border-color);
}

.sub-pillar-column:first-of-type {
    border-left: 2px solid var(--border-color);
}

.sub-pillar-column:last-of-type {
    border-right: 2px solid var(--border-color);
}

.sub-score {
    display: flex;
    align-items: center;
    justify-content: center;
}

.sub-pillar-header:hover {
    background-color: rgba(0, 120, 212, 0.08);
}

.pillar-toggle {
    background: none;
    border: none;
    color: var(--color-primary);
    font-size: 12px;
    cursor: pointer;
    padding: 2px 4px;
    margin-left: 4px;
    vertical-align: middle;
    transition: opacity 0.2s;
}

.pillar-toggle:hover {
    opacity: 0.7;
}

.pillar-separator {
    width: 2px;
    background-color: var(--border-color);
    padding: 0;
}

.pillar-score {
    display: inline-block;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: white;
    font-size: 12px;
}

.sub-pillar-column .pillar-score {
    width: 24px;
    height: 24px;
    font-size: 10px;
    font-weight: 600;
}

.pillar-score.level-1 {
    background-color: #d13438;
}

.pillar-score.level-2 {
    background-color: #ff8c00;
}

.pillar-score.level-3 {
    background-color: #ffb900;
}

.pillar-score.level-4 {
    background-color: #107c10;
}

.pillar-score.level-5 {
    background-color: #005a9e;
}

.bool-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}

.bool-badge.true {
    background-color: #d7f2d7;
    color: #107c10;
}

.bool-badge.false {
    background-color: #fce4eb;
    color: #d13438;
}

body.dark-mode .bool-badge.true {
    background-color: #1a3a1a;
    color: #90ee90;
}

body.dark-mode .bool-badge.false {
    background-color: #3a1a1a;
    color: #ff6b6b;
}

/* Buttons */
.btn-primary {
    padding: 8px 16px;
    background-color: var(--color-primary);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.2s;
}

.btn-primary:hover {
    background-color: var(--color-primary-dark);
}

.btn-secondary {
    padding: 8px 16px;
    background-color: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
}

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

/* Modal */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    animation: fadeIn 0.3s ease;
}

.modal.show {
    display: flex;
    align-items: center;
    justify-content: center;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-content {
    background-color: var(--bg-primary);
    padding: 24px;
    border-radius: 8px;
    max-width: 600px;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: var(--shadow);
    position: relative;
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.vendor-details-content {
    max-width: 800px;
}

/* Vendor Report Modal */
.vendor-report-content {
    max-width: 1100px;
    width: min(1100px, 96vw);
    max-height: 88vh;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.vendor-report-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 18px 12px 18px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-primary);
}

.vendor-report-title-block h2 {
    margin: 0;
    font-size: 18px;
}

.vendor-report-subtitle {
    margin-top: 4px;
    font-size: 12px;
    color: var(--text-secondary);
}

.vendor-report-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.vendor-report-actions .modal-close {
    position: static;
    font-size: 24px;
    line-height: 1;
    padding: 6px 10px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
}

.vendor-report-tabs {
    display: flex;
    gap: 6px;
    padding: 10px 18px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-primary);
}

.vendor-report-tab {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
}

.vendor-report-tab.active {
    background: rgba(59, 130, 246, 0.14);
    border-color: rgba(59, 130, 246, 0.35);
}

.vendor-report-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 18px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-primary);
}

.vendor-report-search {
    width: min(560px, 70vw);
    padding: 8px 10px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 13px;
}

.vendor-report-body {
    padding: 16px 18px 18px 18px;
    overflow: auto;
    flex: 1;
    background: var(--bg-primary);
}

.vendor-report-panel {
    display: none;
}

.vendor-report-panel.active {
    display: block;
}

.vendor-report-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 14px;
}

@media (max-width: 960px) {
    .vendor-report-grid {
        grid-template-columns: 1fr;
    }
}

.vendor-report-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px;
    min-width: 0;
}

.vendor-report-card h3 {
    margin: 0 0 10px 0;
    font-size: 14px;
}

.vendor-report-kv {
    display: grid;
    grid-template-columns: minmax(120px, 160px) minmax(0, 1fr);
    gap: 6px 10px;
    font-size: 13px;
}

.vendor-report-kv .k {
    color: var(--text-secondary);
}

.vendor-report-kv .v {
    color: var(--text-primary);
    word-break: normal;
    overflow-wrap: anywhere;
    min-width: 0;
}

.vendor-report-overview-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.vendor-report-overview-item {
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-primary);
    min-width: 0;
}

.vendor-report-overview-item .k {
    color: var(--text-secondary);
    font-size: 12px;
    margin-bottom: 4px;
}

.vendor-report-overview-item .v {
    color: var(--text-primary);
    font-size: 13px;
    line-height: 1.3;
    word-break: normal;
    overflow-wrap: anywhere;
}

/* Cross-Section Sheet */
.cross-section-container {
    padding: 18px;
}

.cross-section-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}

.cross-section-header h2 {
    margin: 0;
    font-size: 18px;
}

.cross-section-header p {
    margin: 6px 0 0 0;
    color: var(--text-secondary);
    font-size: 13px;
}

.cross-section-header-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.cross-section-controls {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-secondary);
    margin-bottom: 12px;
}

.cross-control-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 180px;
}

.cross-control-group label {
    font-size: 12px;
    color: var(--text-secondary);
}

.cross-control-group select,
.cross-control-group input {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 8px 10px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 13px;
}

.cross-cohort-controls {
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-secondary);
    margin-bottom: 12px;
}

.cross-cohort-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.cross-filters-summary {
    padding: 10px;
    border: 1px dashed var(--border-color);
    border-radius: 8px;
    background: var(--bg-primary);
    color: var(--text-secondary);
    font-size: 12px;
    min-height: 38px;
}

.cross-section-table {
    border: 1px solid var(--border-color);
    border-radius: 10px;
    overflow: auto;
    background: var(--bg-primary);
    max-height: calc(100vh - 190px);
}

.cross-section-subheader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 10px 0 12px 0;
    color: var(--text-secondary);
    font-size: 13px;
}

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

.cross-filters-inline,
.cross-metric-inline {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cross-config-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.vendors-export-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.vendors-export-row {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 12px;
    align-items: center;
}

.vendors-export-row select {
    width: 100%;
}

.vendors-export-note {
    font-size: 0.9rem;
    opacity: 0.85;
}

.vendors-export-scope {
    border-top: 1px solid rgba(0,0,0,0.08);
    padding-top: 12px;
}

body.dark-mode .vendors-export-scope {
    border-top-color: rgba(255,255,255,0.12);
}

.vendors-export-fields {
    margin-top: 10px;
}

.vendors-export-fields-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.vendors-export-fields-toolbar input {
    flex: 1;
    min-width: 220px;
}

.vendors-export-fields-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.vendors-export-fields-list {
    margin-top: 10px;
    max-height: 260px;
    overflow: auto;
    padding: 10px;
    border: 1px solid rgba(0,0,0,0.12);
    border-radius: 8px;
}

body.dark-mode .vendors-export-fields-list {
    border-color: rgba(255,255,255,0.16);
}

.vendors-export-fields-item {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 4px 2px;
}

.vendors-export-fields-item code {
    font-size: 0.85rem;
}

.vendors-export-fields-count {
    margin-top: 8px;
    font-size: 0.9rem;
    opacity: 0.85;
}

.vendors-export-fields-help {
    margin-top: 8px;
    font-size: 0.85rem;
    opacity: 0.8;
}


.cross-config-block {
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-primary);
    padding: 12px;
}

.cross-config-title {
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 10px;
}

.cross-config-row {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 10px;
    align-items: center;
}

.cross-config-row label {
    color: var(--text-secondary);
    font-size: 13px;
}

.cross-config-row select {
    width: 100%;
}

.cross-config-note {
    margin-top: 8px;
    color: var(--text-secondary);
    font-size: 12px;
}

.cross-axis-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.cross-axis {
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-secondary);
    padding: 10px;
}

.cross-axis-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.cross-axis-type {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cross-axis-type label {
    color: var(--text-secondary);
    font-size: 12px;
}

.cross-axis-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 320px;
    overflow: auto;
    padding-right: 4px;
}

.cross-axis-item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    align-items: center;
}

.cross-axis-item select {
    width: 100%;
}

.cross-axis-item .btn-secondary {
    padding: 6px 10px;
    font-size: 12px;
}

.cross-axis-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
}

@media (max-width: 900px) {
    .cross-axis-grid {
        grid-template-columns: 1fr;
    }
    .cross-config-row {
        grid-template-columns: 1fr;
    }
}

.cross-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.cross-table th,
.cross-table td {
    border-bottom: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    padding: 8px 10px;
    vertical-align: top;
}

.cross-table thead th {
    position: sticky;
    top: 0;
    background: var(--bg-secondary);
    z-index: 2;
}

.cross-table th:first-child,
.cross-table td:first-child {
    position: sticky;
    left: 0;
    background: var(--bg-secondary);
    z-index: 3;
    min-width: 220px;
}

.cross-table td {
    text-align: right;
    font-variant-numeric: tabular-nums;
    min-width: 140px;
}

.cross-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: flex-end;
}

.cross-cell .avg {
    font-weight: 700;
    color: var(--text-primary);
}

.cross-cell .n {
    font-size: 11px;
    color: var(--text-secondary);
}

.cross-table .row-label {
    text-align: left;
    font-weight: 600;
    color: var(--text-primary);
}

.cross-muted {
    color: var(--text-secondary);
    font-style: italic;
    padding: 12px;
}

.vendor-report-score-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.vendor-report-score-tile {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px;
    text-align: center;
}

.vendor-report-score-tile .score {
    font-size: 22px;
    font-weight: 700;
    color: var(--color-primary);
}

.vendor-report-score-tile .label {
    margin-top: 4px;
    font-size: 12px;
    color: var(--text-secondary);
}

.vendor-report-section {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-secondary);
    margin-bottom: 10px;
    overflow: hidden;
}

.vendor-report-section summary {
    cursor: pointer;
    padding: 10px 12px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    font-size: 13px;
}

.vendor-report-section summary .sub-id {
    font-weight: 700;
}

.vendor-report-section summary .sub-name {
    color: var(--text-secondary);
    margin-left: 8px;
    font-weight: 400;
}

.vendor-report-section summary .sub-score {
    font-weight: 700;
    color: var(--text-primary);
}

.vendor-report-section-body {
    border-top: 1px solid var(--border-color);
    padding: 12px;
    background: var(--bg-primary);
}

.vendor-report-text {
    white-space: pre-wrap;
    line-height: 1.45;
    font-size: 13px;
}

.vendor-report-sources {
    margin-top: 10px;
    font-size: 12px;
    color: var(--text-secondary);
    word-break: break-word;
}

.vendor-report-code {
    white-space: pre;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px;
    overflow: auto;
}

.sub-pillars-modal-content {
    max-width: 700px;
    display: flex;
    flex-direction: column;
    padding: 0;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px;
    border-bottom: 1px solid var(--border-color);
    position: relative;
}

.modal-header h2 {
    margin: 0;
    font-size: 18px;
    flex: 1;
}

.modal-body {
    padding: 24px;
    flex: 1;
    overflow-y: auto;
    max-height: 60vh;
}

.modal-description {
    color: var(--text-secondary);
    margin-bottom: 16px;
    font-size: 14px;
}

.modal-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.modal-close {
    position: absolute;
    right: 16px;
    top: 16px;
    font-size: 28px;
    font-weight: bold;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color 0.2s;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
}

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

/* Column Visibility Modal */
.column-visibility-container {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.column-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.column-section h3 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.column-section label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    cursor: pointer;
    padding: 6px 0;
}

.column-section label.disabled-column {
    opacity: 0.6;
    cursor: not-allowed;
    color: var(--text-tertiary);
}

.column-section label.disabled-column input[type="checkbox"] {
    cursor: not-allowed;
}

.column-section input[type="checkbox"] {
    cursor: pointer;
    width: 16px;
    height: 16px;
}

.column-pillar-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 0;
    margin-bottom: 12px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.form-group label {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 13px;
}

.form-group input,
.form-group textarea {
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 13px;
}

.form-group input:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.form-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

.btn-cancel,
.btn-save {
    padding: 8px 16px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.2s;
}

.btn-cancel {
    background-color: transparent;
    color: var(--text-secondary);
}

.btn-cancel:hover {
    background-color: var(--bg-tertiary);
    border-color: var(--border-color);
}

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

.btn-save:hover {
    opacity: 0.9;
}

.column-pillar-group strong {
    font-size: 12px;
    color: var(--color-primary);
    margin-bottom: 4px;
}

.column-pillar-group label {
    margin-left: 12px;
    font-size: 12px;
}

.modal h2 {
    margin-bottom: 12px;
}

.modal p {
    color: var(--text-secondary);
    margin-bottom: 16px;
    line-height: 1.5;
}

.modal-values {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.modal-value {
    background-color: var(--bg-secondary);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.modal-value:hover {
    background-color: var(--color-primary);
    color: white;
}

/* Legend */
.legend-container {
    padding: 24px;
    max-width: 1000px;
}

.legend-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.legend-item {
    background-color: var(--bg-secondary);
    padding: 16px;
    border-radius: 8px;
    border-left: 4px solid var(--color-primary);
}

.legend-score {
    font-size: 24px;
    font-weight: bold;
    color: var(--color-primary);
    margin-bottom: 8px;
}

.legend-description {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.field-descriptions {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}

.field-desc-item {
    background-color: var(--bg-secondary);
    padding: 16px;
    border-radius: 8px;
}

.field-desc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.field-desc-title {
    font-weight: 600;
    color: var(--text-primary);
}

.field-desc-text {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.legend-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.header-with-edit {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.header-with-edit h3 {
    margin: 0;
    flex: 1;
}

.tile-with-edit {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
}

.tile-with-edit > div {
    flex: 1;
}

.edit-btn {
    background: none;
    border: none;
    font-size: 16px;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s;
    padding: 0;
    flex-shrink: 0;
}

.edit-btn:hover {
    opacity: 1;
}

.pillars-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 24px;
    margin-bottom: 24px;
}

.pillar-header {
    margin: 0 0 12px 0;
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 700;
}

.clickable-pillar {
    cursor: pointer;
    transition: all 0.2s;
}

.clickable-pillar:hover {
    color: var(--color-primary);
}

.clickable-pillar:hover h3 {
    text-decoration: underline;
}

.sub-pillars-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.sub-pillar-tile {
    background-color: var(--bg-tertiary);
    padding: 12px;
    border-radius: 6px;
    border-left: 3px solid rgba(0, 120, 212, 0.3);
    cursor: pointer;
    transition: all 0.2s;
}

.sub-pillar-tile:hover {
    background-color: rgba(0, 120, 212, 0.08);
    border-left-color: var(--color-primary);
    transform: translateX(2px);
}

.sub-pillar-id {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 4px;
}

.sub-pillar-name {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.4;
}

.field-desc-section {
    margin-bottom: 24px;
}

.field-desc-section h3 {
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--border-color);
}

.field-desc-section .field-desc-item {
    margin-bottom: 12px;
}

/* Dashboard */
.dashboard-container {
    padding: 24px;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.stat-card {
    background-color: var(--bg-secondary);
    padding: 24px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    text-align: center;
}

.stat-value {
    font-size: 32px;
    font-weight: bold;
    color: var(--color-primary);
    margin-bottom: 8px;
}

.stat-label {
    color: var(--text-secondary);
    font-size: 13px;
}

.chart-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 16px;
}

.chart-container {
    background-color: var(--bg-secondary);
    padding: 16px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.chart-container h3 {
    margin-bottom: 16px;
}

/* ── Overall Vendor Ranking ────────────────────────────────────────── */
.ranking-section {
    margin-top: 24px;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 20px;
}

.ranking-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 8px;
}

.ranking-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.ranking-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

.ranking-controls label {
    color: var(--text-secondary);
}

.ranking-controls select {
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 12px;
}

.btn-sm {
    padding: 4px 10px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    background: var(--bg-tertiary);
    color: var(--text-primary);
    font-size: 12px;
    cursor: pointer;
    transition: background 0.15s;
}

.btn-sm:hover {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

.ranking-legend {
    display: flex;
    gap: 16px;
    margin-bottom: 14px;
    font-size: 11px;
    color: var(--text-secondary);
    flex-wrap: wrap;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.legend-dot-overall {
    background: #0078d4;
}

.legend-dot-evidence {
    background: #107c10;
}

.ranking-table-container {
    overflow-x: auto;
    max-height: 600px;
    overflow-y: auto;
}

.ranking-table {
    width: auto;
    border-collapse: collapse;
    font-size: 12px;
    white-space: nowrap;
}

.ranking-table thead {
    position: sticky;
    top: 0;
    z-index: 2;
}

.ranking-table th {
    background: var(--bg-tertiary);
    padding: 8px 10px;
    text-align: center;
    font-weight: 600;
    border-bottom: 2px solid var(--border-color);
    font-size: 11px;
    color: var(--text-secondary);
}

.ranking-table td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--border-color);
    text-align: center;
}

.ranking-table tbody tr:hover {
    background: rgba(0, 120, 212, 0.06);
}

.ranking-table .rank-col {
    text-align: center;
    font-weight: 600;
    width: 60px;
    min-width: 60px;
}

.ranking-table .vendor-col {
    text-align: left;
    font-weight: 500;
    min-width: 160px;
    max-width: 280px;
    position: sticky;
    left: 0;
    background: var(--bg-secondary);
    z-index: 1;
}

.ranking-table thead .vendor-col {
    background: var(--bg-tertiary);
    z-index: 3;
}

.ranking-table .score-col {
    width: 70px;
    min-width: 60px;
}

.ranking-table .refined-col {
    color: #0078d4;
    font-weight: 600;
}

.ranking-table .evidence-col {
    font-weight: 500;
}

.ranking-table .pillar-detail-col {
    font-size: 11px;
}

.ranking-table .sub-pillar-detail-col {
    font-size: 10px;
    padding: 4px 6px;
    color: #fff;
    border-radius: 2px;
}

.rank-top-1 td { background: rgba(255, 215, 0, 0.08); }
.rank-top-2 td { background: rgba(192, 192, 192, 0.08); }
.rank-top-3 td { background: rgba(205, 127, 50, 0.08); }

.rank-top-1 .vendor-col { background: rgba(255, 215, 0, 0.12) !important; }
.rank-top-2 .vendor-col { background: rgba(192, 192, 192, 0.12) !important; }
.rank-top-3 .vendor-col { background: rgba(205, 127, 50, 0.12) !important; }

.ranking-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    font-size: 11px;
    color: var(--text-secondary);
    padding: 0 4px;
}

/* Sub-Pillar Styles */
.sub-pillars-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pillar-section {
    border: 1px solid var(--border-color);
    border-radius: 6px;
    overflow: hidden;
    background-color: var(--bg-secondary);
}

.pillar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    background-color: var(--bg-tertiary);
    cursor: pointer;
    user-select: none;
    font-weight: 600;
    transition: background-color 0.2s;
}

.pillar-header:hover {
    background-color: var(--border-color);
}

.pillar-toggle {
    transition: transform 0.3s ease;
}

.sub-pillars-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
}

.sub-pillar-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.sub-pillar-item:hover {
    background-color: rgba(0, 120, 212, 0.1);
}

.sub-pillar-item input[type="checkbox"] {
    margin-top: 4px;
    cursor: pointer;
    accent-color: var(--color-primary);
}

.sub-pillar-item label {
    flex: 1;
    cursor: pointer;
    font-size: 14px;
    line-height: 1.4;
}

.sub-pillar-item label strong {
    color: var(--color-primary);
}


.chart {
    min-height: 200px;
}

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-tertiary);
}

/* Responsive */
@media (max-width: 768px) {
    .filter-groups {
        grid-template-columns: 1fr;
    }
    
    .stats-grid {
        grid-template-columns: 1fr 1fr;
    }
    
    .chart-grid {
        grid-template-columns: 1fr;
    }
    
    .vendors-table {
        font-size: 11px;
    }
    
    .vendors-table th,
    .vendors-table td {
        padding: 8px;
    }
}
/* Analysis Tab */
.analysis-container {
    padding: 20px;
    max-width: 1600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}

.analysis-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.analysis-header h2 {
    margin: 0;
}

.customize-btn {
    padding: 8px 16px;
    background-color: var(--color-primary);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s;
}

.customize-btn:hover {
    background-color: var(--color-primary-dark);
    transform: translateY(-2px);
}

/* Widget Customization Modal */
.widget-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.widget-modal.active {
    display: flex;
}

.modal-content {
    background-color: var(--bg-primary);
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    max-width: 500px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
}

.modal-content.modal-large {
    max-width: 1000px;
    display: flex;
    flex-direction: column;
}

/* Legend detail modal - wider for schema content */
#pillar-details-modal .modal-content {
    max-width: 700px;
    width: 92%;
}

.modal-body.modal-two-column {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 24px;
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

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

.modal-header h3 {
    margin: 0;
    font-size: 16px;
}

.modal-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--text-primary);
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-close:hover {
    color: var(--text-secondary);
}

.modal-body {
    padding: 20px;
}

.widget-checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.widget-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-primary);
    padding: 8px;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.widget-toggle:hover {
    background-color: var(--bg-secondary);
}

.widget-toggle input[type="checkbox"] {
    cursor: pointer;
    width: 18px;
    height: 18px;
}

.widget-list-panel {
    border-right: 1px solid var(--border-color);
    padding-right: 20px;
}

.widget-list-panel h4 {
    margin: 0 0 16px 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.widget-preview-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.widget-preview-panel h4 {
    margin: 0 0 8px 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.preview-help {
    margin: 0;
    font-size: 11px;
    color: var(--text-secondary);
    font-style: italic;
}

.widget-preview-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    background-color: var(--bg-secondary);
    padding: 16px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    min-height: 400px;
    grid-auto-rows: 100px;
}

.preview-widget {
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 8px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: var(--text-secondary);
    text-align: center;
    cursor: grab;
    user-select: none;
    transition: all 0.2s;
}

.preview-widget:active {
    cursor: grabbing;
}

.preview-widget:hover {
    border-color: var(--color-primary);
    background-color: var(--bg-primary);
    box-shadow: 0 2px 8px rgba(0, 120, 212, 0.2);
}

.preview-widget.disabled {
    opacity: 0.3;
    pointer-events: none;
    cursor: not-allowed;
}

.preview-widget[draggable="true"] {
    cursor: grab;
}

.preview-widget .preview-resize-handle {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 16px;
    height: 16px;
    background: linear-gradient(135deg, transparent 48%, var(--color-primary) 48%, var(--color-primary) 52%, transparent 52%);
    cursor: nwse-resize;
    opacity: 0;
    transition: opacity 0.2s;
}

.preview-widget:hover .preview-resize-handle {
    opacity: 1;
}

.modal-footer {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding: 20px;
    border-top: 1px solid var(--border-color);
}

.save-btn,
.cancel-btn {
    padding: 8px 16px;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s;
}

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

.save-btn:hover {
    background-color: var(--color-primary-dark);
}

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

.cancel-btn:hover {
    background-color: var(--bg-tertiary);
}

.chart-container.hidden,
.summary-stats.hidden {
    display: none;
}

.analysis-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px;
    padding: 16px;
    background-color: var(--bg-secondary);
    border-radius: 8px;
    align-items: flex-end;
}

.filter-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.filter-section label {
    font-weight: 600;
    font-size: 12px;
    color: var(--text-primary);
}

.filter-section select {
    padding: 8px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-size: 12px;
    cursor: pointer;
    min-width: 150px;
}

.filter-section.checkbox {
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.filter-section.checkbox input {
    cursor: pointer;
}

.filter-section.checkbox label {
    margin: 0;
    font-weight: 500;
}

/* Query Builder Section */
/* Active Filters Panel (Top) */
.active-filters-panel {
    background-color: var(--bg-secondary);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 24px;
    border: 1px solid var(--border-color);
}

.active-filters-panel h3 {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--text-primary);
}

/* Analysis Content Wrapper (Sidebar + Charts) */
.analysis-content-wrapper {
    display: flex;
    gap: 24px;
    margin-bottom: 24px;
}

/* Add Filters Sidebar (Left) */
.add-filters-sidebar {
    flex: 0 0 200px;
    background-color: var(--bg-secondary);
    border-radius: 8px;
    padding: 16px;
    border: 1px solid var(--border-color);
    height: fit-content;
}

.add-filters-sidebar h3 {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--text-primary);
}

.field-selector-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.field-selector-list h4 {
    font-size: 11px;
    font-weight: 700;
    color: var(--color-primary);
    margin-top: 8px;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding-top: 4px;
    border-top: 1px solid var(--border-color);
}

.field-selector-list h4:first-child {
    margin-top: 0;
    border-top: none;
    padding-top: 0;
}

.field-selector-btn {
    padding: 8px 12px;
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-primary);
    font-size: 12px;
    cursor: pointer;
    text-align: left;
    transition: all 0.2s;
    white-space: nowrap;
}

.field-selector-btn.pillar-btn {
    background-color: #1e90ff;
    color: white;
    font-weight: 600;
    border-color: #1570d8;
    margin-top: 8px;
    margin-bottom: 4px;
}

.field-selector-btn.pillar-btn:hover {
    background-color: #0070d0;
    border-color: #005ab3;
    transform: translateX(2px);
}

.field-selector-btn.sub-pillar-btn {
    margin-left: 12px;
    font-size: 11px;
    background-color: var(--bg-primary);
    opacity: 0.9;
}

.field-selector-btn.sub-pillar-btn:hover {
    background-color: var(--bg-tertiary);
    border-color: var(--color-primary);
    transform: translateX(2px);
}

.field-selector-btn:hover {
    background-color: var(--bg-tertiary);
    border-color: var(--color-primary);
    transform: translateX(2px);
}

.query-filters {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 40px;
}

.query-filter-row {
    display: flex;
    gap: 8px;
    align-items: center;
    background-color: var(--bg-primary);
    padding: 8px 12px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    flex-wrap: wrap;
}

.query-filter-row select,
.query-filter-row input {
    padding: 6px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-size: 12px;
}

.query-filter-row .filter-field {
    flex: 0 0 140px;
}

.query-filter-row .filter-logical-op {
    flex: 0 0 70px;
    font-weight: 600;
    color: var(--color-primary);
    background-color: var(--bg-tertiary);
    border-color: var(--color-primary);
}

.query-filter-row .filter-operator {
    flex: 0 0 120px;
}

.query-filter-row .filter-value {
    flex: 1;
    min-width: 150px;
}

.query-filter-row .remove-filter-btn {
    flex: 0 0 auto;
    padding: 4px 8px;
    background-color: var(--color-error);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    transition: opacity 0.2s;
}

.query-filter-row .remove-filter-btn:hover {
    opacity: 0.8;
}

.no-filters-message {
    color: var(--text-secondary);
    font-size: 12px;
    font-style: italic;
    padding: 12px;
}

/* Analytics Grid - 6 Columns on Wide Screens */
.analytics-grid {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
    margin-bottom: 24px;
    grid-auto-rows: 300px;
    grid-auto-flow: dense;
}

.chart-container {
    background-color: var(--bg-secondary);
    padding: 16px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    position: relative;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 300px;
    grid-column: span var(--col-span, 1);
    grid-row: span var(--row-span, 1);
}

/* Subtle scrollbar styling */
.chart-container::-webkit-scrollbar {
    width: 6px;
}

.chart-container::-webkit-scrollbar-track {
    background: transparent;
}

.chart-container::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
}

.chart-container::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

.widget-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.widget-header h3 {
    margin: 0;
    font-size: 14px;
    flex: 1;
}

.resize-handle {
    display: none;
    width: 24px;
    height: 24px;
    background: linear-gradient(135deg, transparent 48%, #0078d4 48%, #0078d4 52%, transparent 52%);
    cursor: nwse-resize;
    flex-shrink: 0;
    opacity: 1;
    transition: all 0.2s;
    border-radius: 2px;
}

.resize-handle:hover {
    opacity: 1;
    transform: scale(1.1);
    box-shadow: 0 0 8px rgba(0, 120, 212, 0.5);
}

.chart-container h3 {
    margin: 0 0 16px 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.widget-config-btn {
    margin-left: auto;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    color: var(--text-secondary);
    width: 28px;
    height: 28px;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.widget-config-btn:hover {
    color: var(--text-primary);
    border-color: var(--text-tertiary);
}

.chart {
    min-height: 200px;
    flex: 1;
    overflow-y: auto;
    scrollbar-color: var(--border-color) transparent;
    scrollbar-width: thin;
}

.comparison-radar-type {
    padding: 6px 8px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    color: var(--text-primary);
}

.comparison-radar-hint {
    font-size: 11px;
    color: var(--text-secondary);
}

.comparison-radar-series {
    display: grid;
    grid-template-columns: repeat(2, minmax(180px, 1fr));
    gap: 8px;
    margin-bottom: 10px;
}

.comparison-radar-series select {
    padding: 6px 8px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 12px;
}

@media (max-width: 700px) {
    .comparison-radar-series {
        grid-template-columns: 1fr;
    }
}

/* Webkit scrollbar for .chart */
.chart::-webkit-scrollbar {
    width: 6px;
}

.chart::-webkit-scrollbar-track {
    background: transparent;
}

.chart::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
}

.chart::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

.summary-stats {
    background-color: var(--bg-secondary);
    padding: 16px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.summary-stats h3 {
    margin: 0 0 16px 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
}

.stat-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    background-color: var(--bg-tertiary);
    border-radius: 6px;
}

.stat-item .stat-label {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 500;
}

.stat-item .stat-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-primary);
}

/* Responsive Analytics Grid */
@media (max-width: 1600px) {
    .analytics-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media (max-width: 1400px) {
    .analytics-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

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

@media (max-width: 768px) {
    .analytics-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .add-filters-sidebar {
        position: relative;
        top: 0;
        width: 100%;
        height: auto;
        max-height: none;
        overflow-y: auto;
        margin-bottom: 20px;
    }
    
    .analysis-content-wrapper {
        flex-direction: column;
    }
}

@media (max-width: 600px) {
    .analytics-grid {
        grid-template-columns: 1fr;
    }
    
    .analysis-filters {
        flex-direction: column;
    }
    
    .filter-section select {
        min-width: 100%;
    }
}

/* Comparison Radar config modal */
.comparison-radar-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 12px;
}

.comparison-radar-form label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12px;
    color: var(--text-secondary);
}

.comparison-radar-axes {
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    color: var(--text-primary);
}

.comparison-radar-form .comparison-radar-series {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(180px, 1fr));
}

.comparison-radar-form-actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 6px;
}

.comparison-radar-form .comparison-radar-hint {
    grid-column: 1 / -1;
    margin-top: 2px;
}

@media (max-width: 700px) {
    .comparison-radar-form {
        grid-template-columns: 1fr;
    }
    .comparison-radar-form .comparison-radar-series {
        grid-template-columns: 1fr;
    }
}

/* Researched vs Validated Comparison Widget */
.validation-comparison-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(200px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.validation-comparison-form label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    color: var(--text-primary);
    font-weight: 500;
}

.validation-comparison-form label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin-right: 6px;
    cursor: pointer;
}

.validation-comparison-form label input[type="checkbox"] + span {
    display: inline;
    margin-left: 0;
}

.validation-comparison-form select {
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 12px;
}

.validation-comparison-form-actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 6px;
}

.validation-comparison-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
    height: 100%;
    width: 100%;
    overflow-y: auto;
    box-sizing: border-box;
}

.validation-comparison-radar-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    align-items: stretch;
    width: 100%;
    flex: 1;
    min-height: 420px;
}

.validation-comparison-radar-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 100%;
    min-height: 420px;
}

.validation-comparison-radar-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    padding: 0 8px;
}

.validation-comparison-radar-chart {
    flex: 1;
    min-height: 420px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.validation-comparison-delta-metrics {
    grid-column: 1 / -1;
    padding: 12px;
    background: var(--bg-secondary);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.validation-comparison-delta-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.validation-comparison-delta-table {
    font-size: 12px;
    width: 100%;
}

.validation-comparison-delta-table thead {
    display: none;
}

.validation-comparison-delta-table tbody tr {
    display: grid;
    grid-template-columns: 80px 80px 80px 80px 80px;
    gap: 8px;
    padding: 4px 0;
    border-bottom: 1px solid var(--border-color);
}

.validation-comparison-delta-table tbody tr:last-child {
    border-bottom: none;
}

.validation-comparison-delta-table td {
    text-align: right;
    padding: 4px 6px;
    color: var(--text-secondary);
}

.validation-comparison-delta-table td:first-child {
    text-align: left;
    font-weight: 500;
    color: var(--text-primary);
}

.validation-comparison-delta-positive {
    color: #107c10;
}

.validation-comparison-delta-negative {
    color: #d83b01;
}

.validation-comparison-delta-neutral {
    color: var(--text-secondary);
}

@media (max-width: 1200px) {
    .validation-comparison-radar-container {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .validation-comparison-form {
        grid-template-columns: 1fr;
    }
}

/* Hide injected debug panels from extensions */
#debug-panel,
[id*="debug"],
[class*="debug-panel"] {
    display: none !important;
}

/* ══════════════════════════════════════════════════════════
   Reports View – browser-style tabs + document layout
   ══════════════════════════════════════════════════════════ */

.reports-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.reports-header {
    padding: 20px 32px 0;
    flex-shrink: 0;
}

.reports-header h2 {
    margin: 0 0 12px;
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
}

/* ── Tab bar (browser-style) ── */
.reports-tabs-bar {
    display: flex;
    align-items: flex-end;
    padding: 0 32px;
    background: var(--bg-secondary);
    border-bottom: 2px solid var(--border-color);
    flex-shrink: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.reports-tabs-scroll {
    display: flex;
    gap: 2px;
    min-width: 0;
}

.reports-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px 8px 12px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    cursor: pointer;
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
    position: relative;
    top: 2px;
    transition: background 0.15s, color 0.15s;
    min-width: 0;
}

.reports-tab:hover {
    background: var(--bg-primary);
    color: var(--text-primary);
}

.reports-tab.active {
    background: var(--bg-primary);
    color: var(--text-primary);
    border-color: var(--border-color);
    border-bottom: 2px solid var(--bg-primary);
    font-weight: 600;
    z-index: 1;
}

.reports-tab-icon {
    font-size: 14px;
    flex-shrink: 0;
}

.reports-tab-label {
    overflow: hidden;
    text-overflow: ellipsis;
}

.reports-tab-close {
    font-size: 14px;
    line-height: 1;
    opacity: 0;
    transition: opacity 0.15s;
    padding: 0 2px;
    border-radius: 3px;
    flex-shrink: 0;
}

.reports-tab:hover .reports-tab-close,
.reports-tab.active .reports-tab-close {
    opacity: 0.5;
}

.reports-tab-close:hover {
    opacity: 1 !important;
    background: rgba(128,128,128,0.25);
}

/* ── Tab content area ── */
.reports-tab-content {
    flex: 1;
    min-height: 0;         /* critical: allows flex child to shrink below content size */
    overflow: hidden;      /* clip absolutely-positioned ASMF panels; non-ASMF panels scroll within .report-panel */
    padding: 0;
    position: relative;    /* containing block for .asmf-panel-full */
}

.report-panel {
    display: none;
    height: 100%;
    overflow-y: auto;
}

.report-panel.active {
    display: block;
}

/* ── Document-style report layout ── */
.report-document {
    max-width: 960px;
    margin: 0 auto;
    padding: 32px 40px 80px;
}

/* Report templates hosted inside the Docs view (see showTemplateInDocs) */
.docs-view-body .report-template-doc {
    padding: 4px 8px 80px;
}
.docs-view-body .report-template-doc .report-doc-header {
    margin-bottom: 24px;
}

.report-doc-header {
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 2px solid var(--color-primary);
}

.report-doc-header h1 {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 8px;
    line-height: 1.3;
}

.report-doc-subtitle {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0;
}

.report-doc-intent {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 8px 0 0;
    line-height: 1.5;
    font-style: italic;
}

.report-empty {
    text-align: center;
    padding: 48px 16px;
    color: var(--text-secondary);
    font-size: 14px;
}

/* ── Pillar sections ── */
.report-pillar-section {
    margin-bottom: 36px;
}

.report-pillar-header {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 16px;
}

.report-pillar-badge {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--color-primary), #107c10);
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.5px;
}

.report-pillar-title-block {
    flex: 1;
    min-width: 0;
}

.report-pillar-name {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 4px;
}

.report-pillar-focus {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}

/* ── Sub-pillar cards ── */
.report-sub-pillars {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding-left: 68px; /* indent past badge */
}

@media (max-width: 820px) {
    .report-sub-pillars {
        grid-template-columns: 1fr;
        padding-left: 0;
    }
}

.report-sub-pillar-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 14px 16px;
    transition: box-shadow 0.15s;
}

.report-sub-pillar-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.report-sp-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.report-sp-id {
    font-size: 11px;
    font-weight: 700;
    color: var(--color-primary);
    background: rgba(0,120,212,0.08);
    padding: 2px 7px;
    border-radius: 4px;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

.report-sp-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.report-sp-definition {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0 0 8px;
    line-height: 1.55;
}

.report-sp-activities {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.report-sp-activities-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-right: 2px;
}

.report-sp-activity-tag {
    font-size: 11px;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    padding: 2px 8px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
}

/* ── Scoring Scale Section ── */
.report-section-block {
    margin-bottom: 36px;
}

.report-section-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 4px;
}

.report-section-subtitle {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0 0 18px;
    line-height: 1.5;
}

.report-scoring-table {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}

.report-score-row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-primary);
}

.report-score-row:last-child {
    border-bottom: none;
}

.report-score-row:nth-child(even) {
    background: var(--bg-secondary);
}

.report-score-badge {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 700;
    background: var(--color-primary);
    color: #fff;
}

.report-score-desc {
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-primary);
    flex: 1;
}

/* ── Pillar-level detail blocks (score rule, signals) ── */
.report-detail-block {
    padding-left: 68px;
    margin-bottom: 14px;
}

.report-detail-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-primary);
    margin: 0 0 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.report-detail-text {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.55;
}

.report-detail-list {
    margin: 0;
    padding-left: 18px;
    list-style: disc;
}

.report-detail-list li {
    font-size: 13px;
    color: var(--text-primary);
    margin-bottom: 5px;
    line-height: 1.5;
}

.report-sp-overview {
    font-size: 13px;
    color: var(--text-secondary);
    padding-left: 68px;
    margin: 4px 0 14px;
}

/* ── Longform sub-pillar cards ── */
.report-sub-pillars-longform {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-left: 68px;
    margin-bottom: 12px;
}

@media (max-width: 820px) {
    .report-sub-pillars-longform {
        padding-left: 0;
    }
    .report-detail-block,
    .report-sp-overview {
        padding-left: 0;
    }
}

.report-sp-longform-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 20px 24px;
    transition: box-shadow 0.15s;
}

.report-sp-longform-card:hover {
    box-shadow: 0 2px 10px rgba(0,0,0,0.07);
}

.report-sp-longform-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 16px;
}

.report-sp-longform-number {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 13px;
    font-weight: 700;
    background: var(--color-primary);
    color: #fff;
}

.report-sp-longform-id {
    font-size: 11px;
    font-weight: 700;
    color: var(--color-primary);
    letter-spacing: 0.5px;
    display: block;
    margin-bottom: 2px;
}

.report-sp-longform-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.report-sp-longform-section {
    margin-bottom: 14px;
    padding-left: 42px;
}

.report-sp-longform-section:last-child {
    margin-bottom: 0;
}

.report-sp-longform-section h4 {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin: 0 0 6px;
}

.report-sp-longform-section p {
    font-size: 13px;
    line-height: 1.65;
    color: var(--text-primary);
    margin: 0;
}

.report-sp-longform-section ul {
    margin: 0;
    padding-left: 18px;
    list-style: disc;
}

.report-sp-longform-section li {
    font-size: 13px;
    color: var(--text-primary);
    margin-bottom: 6px;
    line-height: 1.55;
}

/* ── Report header row with export button ── */
.report-doc-header-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.report-doc-header-row h1 {
    flex: 1;
}

.report-export-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, box-shadow 0.15s;
    flex-shrink: 0;
}

.report-export-btn:hover {
    background: var(--color-primary-dark);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.report-export-btn .icon {
    font-size: 16px;
    line-height: 1;
}

/* ── Guidelines Edit Button (pencil icon) ── */
.guidelines-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.guidelines-header-row h4 {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.guidelines-edit-btn {
    background: none;
    border: 1px solid transparent;
    border-radius: 4px;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.4;
    transition: opacity 0.15s, color 0.15s, border-color 0.15s, background 0.15s;
    flex-shrink: 0;
}

.guidelines-block:hover .guidelines-edit-btn {
    opacity: 1;
}

.guidelines-edit-btn:hover {
    opacity: 1;
    color: var(--color-primary);
    background: rgba(0,120,212,0.08);
    border-color: var(--color-primary);
}

.guidelines-content ul {
    margin: 0;
    padding-left: 18px;
    list-style: disc;
}

.guidelines-content li {
    font-size: 13px;
    color: var(--text-primary);
    margin-bottom: 6px;
    line-height: 1.55;
}

/* ── Guidelines Editor Modal ── */
.guidelines-editor-modal.show {
    display: flex;
    align-items: center;
    justify-content: center;
}

.guidelines-editor-content {
    max-width: min(90vw, 860px) !important;
    width: min(90vw, 860px);
    max-height: 90vh !important;
    display: flex;
    flex-direction: column;
    padding: 0 !important;
    overflow: hidden;
}

.guidelines-editor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.guidelines-editor-header h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.guidelines-editor-close {
    background: none;
    border: none;
    font-size: 22px;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    line-height: 1;
}

.guidelines-editor-close:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

/* Toolbar */
.guidelines-editor-toolbar {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 8px 16px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
    flex-shrink: 0;
    flex-wrap: wrap;
}

.guidelines-editor-toolbar button {
    background: none;
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 6px 8px;
    cursor: pointer;
    color: var(--text-primary);
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    min-height: 32px;
    transition: background 0.1s, border-color 0.1s;
}

.guidelines-editor-toolbar button:hover {
    background: var(--bg-tertiary);
    border-color: var(--border-color);
}

.guidelines-toolbar-sep {
    width: 1px;
    height: 20px;
    background: var(--border-color);
    margin: 0 6px;
    flex-shrink: 0;
}

/* Editor body (contenteditable) */
.guidelines-editor-body {
    flex: 1;
    min-height: 200px;
    max-height: calc(90vh - 180px);
    overflow-y: auto;
    padding: 16px 20px;
    font-size: 14px;
    line-height: 1.65;
    color: var(--text-primary);
    outline: none;
    cursor: text;
}

.guidelines-editor-body:focus {
    box-shadow: inset 0 0 0 2px rgba(0,120,212,0.15);
}

.guidelines-editor-body ul,
.guidelines-editor-body ol {
    padding-left: 24px;
    margin: 4px 0;
}

.guidelines-editor-body li {
    margin-bottom: 4px;
    line-height: 1.6;
}

.guidelines-editor-body p {
    margin: 4px 0;
}

/* Footer */
.guidelines-editor-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    border-top: 1px solid var(--border-color);
    background: var(--bg-secondary);
    flex-shrink: 0;
}

.guidelines-editor-footer-right {
    display: flex;
    gap: 8px;
}

.guidelines-editor-save,
.guidelines-editor-cancel,
.guidelines-editor-reset {
    border: none;
    border-radius: 6px;
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s;
}

.guidelines-editor-save {
    background: var(--color-primary);
    color: #fff;
}

.guidelines-editor-save:hover {
    background: var(--color-primary-dark, #005a9e);
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.guidelines-editor-cancel {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.guidelines-editor-cancel:hover {
    background: var(--border-color);
}

.guidelines-editor-reset {
    background: none;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.guidelines-editor-reset:hover {
    background: rgba(232,17,35,0.06);
    border-color: #e81123;
    color: #e81123;
}

/* Responsive: smaller screens */
@media (max-width: 600px) {
    .guidelines-editor-content {
        max-width: 98vw !important;
        width: 98vw;
        max-height: 95vh !important;
        border-radius: 6px;
    }
    .guidelines-editor-body {
        max-height: calc(95vh - 160px);
        padding: 12px 14px;
    }
    .guidelines-editor-toolbar {
        padding: 6px 10px;
    }
    .guidelines-editor-footer {
        flex-direction: column;
        gap: 8px;
    }
    .guidelines-editor-footer-right {
        width: 100%;
    }
    .guidelines-editor-save,
    .guidelines-editor-cancel {
        flex: 1;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   GANTT CHART — 90-Day Adoption Roadmap
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Container & Header ── */
.roadmap-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 32px;
}
.roadmap-header {
    margin-bottom: 28px;
}
.roadmap-header h2 {
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 6px;
}
.roadmap-subtitle {
    color: var(--text-secondary);
    font-size: 0.92rem;
    line-height: 1.5;
}

/* ── Gantt Wrapper (ruler + chart + SVG arrows) ── */
.gantt-wrapper {
    position: relative;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-primary);
    box-shadow: var(--shadow-sm);
    overflow: visible;
    margin-bottom: 20px;
}

/* ── Week Ruler ── */
.gantt-ruler {
    display: flex;
    position: relative;
    height: 32px;
    border-bottom: 2px solid var(--border-color);
    background: var(--bg-secondary);
    border-radius: 8px 8px 0 0;
    overflow: hidden;
}
.gantt-ruler-cell {
    position: absolute;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-secondary);
    border-right: 1px solid var(--border-color);
    user-select: none;
}
.gantt-ruler-cell:last-child {
    border-right: none;
}

/* ── Chart (swimlane container) ── */
.gantt-chart {
    position: relative;
    min-height: 120px;
}

/* ── Swimlane (one per phase) ── */
.gantt-swimlane {
    display: flex;
    align-items: flex-start;
    border-bottom: 1px solid var(--border-color);
    padding: 14px 0;
    min-height: 72px;
}
.gantt-swimlane:last-child {
    border-bottom: none;
}

/* Phase label (fixed-width left column) */
.gantt-phase-label {
    width: 140px;
    min-width: 140px;
    padding: 8px 14px 8px 16px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.35;
}

/* Track (the remaining width where bars live) */
.gantt-track {
    flex: 1;
    position: relative;
    min-height: 50px;
}

/* ── Gantt Bar ── */
.gantt-bar {
    position: absolute;
    top: 4px;
    height: 30px;
    border-radius: 5px;
    cursor: pointer;
    transition: box-shadow 0.15s ease, opacity 0.15s ease;
    z-index: 2;
    display: flex;
    align-items: center;
    overflow: visible;
}
.gantt-bar:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
    filter: brightness(1.08);
}
.gantt-bar.gantt-bar-dragging {
    opacity: 0.85;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3);
    cursor: col-resize;
    z-index: 10;
}

/* Bar inner content */
.gantt-bar-content {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
}
.gantt-bar-weeks {
    font-size: 0.72rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.gantt-bar-rmf {
    display: flex;
    gap: 3px;
    margin-left: auto;
}
.gantt-rmf-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: 0.62rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
    flex-shrink: 0;
}

/* ── Drag Handles ── */
.gantt-bar-handle {
    position: absolute;
    top: 0;
    width: 8px;
    height: 100%;
    cursor: col-resize;
    z-index: 5;
    opacity: 0;
    transition: opacity 0.15s;
}
.gantt-bar:hover .gantt-bar-handle {
    opacity: 1;
}
.gantt-bar-handle::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 16px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.7);
}
.gantt-bar-handle-left {
    left: 0;
    border-radius: 5px 0 0 5px;
}
.gantt-bar-handle-left::after {
    left: 2px;
}
.gantt-bar-handle-right {
    right: 0;
    border-radius: 0 5px 5px 0;
}
.gantt-bar-handle-right::after {
    right: 2px;
}

/* ── Sub-pillar chips below bar ── */
.gantt-chip-row {
    position: absolute;
    top: 38px;
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    left: 0;
    right: 0;
    padding: 0;
}
.gantt-chip {
    display: inline-block;
    font-size: 0.62rem;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 3px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    white-space: nowrap;
}

/* ── SVG Dependency Arrows Overlay ── */
.gantt-arrows {
    position: absolute;
    top: 0;
    left: 140px; /* matches phase label width */
    pointer-events: none;
    z-index: 1;
    overflow: visible;
}

/* ── Legend ── */
.gantt-legend {
    padding: 16px 20px;
    border-top: 1px solid var(--border-color);
    background: var(--bg-secondary);
    border-radius: 0 0 8px 8px;
}
.gantt-legend h3 {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.gantt-legend-items {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}
.gantt-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    color: var(--text-primary);
}
.gantt-legend-swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ── Phase Details Panel ── */
.gantt-phase-details {
    padding: 14px 20px;
}
.gantt-hint {
    color: var(--text-tertiary);
    font-size: 0.85rem;
    font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════════════════
   GANTT EDIT MODAL
   ═══════════════════════════════════════════════════════════════════════════ */

#gantt-edit-modal.active {
    display: flex;
    align-items: center;
    justify-content: center;
}
.gantt-modal-content {
    max-width: 680px;
    width: 90vw;
    max-height: 85vh;
    overflow-y: auto;
}

/* Edit form layout */
.gantt-edit-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: 12px;
}
.gantt-edit-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.gantt-edit-field label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.gantt-edit-field input[type="text"],
.gantt-edit-field input[type="number"] {
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.92rem;
}
.gantt-edit-field input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.15);
}
.gantt-edit-row {
    display: flex;
    gap: 16px;
}
.gantt-edit-row .gantt-edit-field {
    flex: 1;
}

/* Activity rows */
.gantt-edit-activity-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.gantt-edit-activity-row input {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.88rem;
}
.gantt-remove-btn {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 4px;
    background: var(--color-error);
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: opacity 0.15s;
}
.gantt-remove-btn:hover {
    opacity: 0.85;
}

/* RMF checkboxes */
.gantt-edit-checkboxes {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.gantt-checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    user-select: none;
}
.gantt-checkbox-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--color-primary);
}
.gantt-rmf-badge-lg {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #fff;
}

/* Sub-pillar chip grid */
.gantt-edit-chips-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.gantt-sp-chip-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 5px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}
.gantt-sp-chip-label input[type="checkbox"] {
    display: none;
}
.gantt-sp-chip-label.selected {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}
.gantt-sp-chip-label:hover:not(.selected) {
    background: var(--bg-tertiary);
    border-color: var(--text-tertiary);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ADOPTION PLAN REPORT
   ═══════════════════════════════════════════════════════════════════════════ */

.report-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
    margin-bottom: 24px;
}
.report-table th,
.report-table td {
    padding: 10px 14px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
    vertical-align: top;
}
.report-table th {
    background: var(--bg-secondary);
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.3px;
    position: sticky;
    top: 0;
    z-index: 1;
}
.report-table tr:hover td {
    background: var(--bg-tertiary);
}
.report-chip {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 3px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 600;
    border: 1px solid var(--border-color);
    margin: 1px 2px;
}
.report-rmf-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 600;
    color: #fff;
    margin: 1px 2px;
}
.report-activity-list {
    padding-left: 18px;
    margin: 0;
}
.report-activity-list li {
    margin-bottom: 4px;
    line-height: 1.4;
}
.report-dependency-list {
    padding-left: 18px;
    margin: 8px 0;
}
.report-dependency-list li {
    margin-bottom: 6px;
    line-height: 1.45;
    color: var(--text-secondary);
}
.report-section-intro {
    color: var(--text-secondary);
    font-size: 0.92rem;
    line-height: 1.5;
    margin-bottom: 16px;
}

/* ── Modal Actions alignment ── */
.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
    margin-top: 12px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   EXPORT HTML MODAL
   ═══════════════════════════════════════════════════════════════════════════ */
.export-html-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}
.export-html-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    user-select: none;
    font-size: 0.92rem;
    color: var(--text-primary);
}
.export-html-checkbox:hover {
    background: var(--bg-tertiary);
    border-color: var(--color-primary);
}
.export-html-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--color-primary);
    cursor: pointer;
    flex-shrink: 0;
}
.reports-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* ═══════════════════════════════════════════════════════════════════════════
   GANTT – Ruler Alignment Row
   ═══════════════════════════════════════════════════════════════════════════ */
.gantt-ruler-row {
    display: flex;
    border-bottom: 2px solid var(--border-color);
    background: var(--bg-secondary);
    border-radius: 8px 8px 0 0;
    overflow: hidden;
}
.gantt-ruler-spacer {
    width: 140px;
    min-width: 140px;
    border-right: 1px solid var(--border-color);
}
/* Remove the old ruler border-bottom / border-radius since ruler-row owns it */
.gantt-ruler {
    border-bottom: none;
    border-radius: 0;
    flex: 1;
}

/* ═══════════════════════════════════════════════════════════════════════════
   GANTT – Expandable Sub-Pillar Rows
   ═══════════════════════════════════════════════════════════════════════════ */
.gantt-phase-toggle {
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 6px;
}
.gantt-phase-toggle .toggle-arrow {
    display: inline-block;
    font-size: 0.72rem;
    transition: transform 0.2s ease;
    color: var(--text-tertiary);
    width: 12px;
    text-align: center;
}
.gantt-phase-toggle.expanded .toggle-arrow {
    transform: rotate(90deg);
}

/* Sub-rows container (hidden by default) */
.gantt-sub-rows {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
    border-bottom: 1px solid var(--border-color);
}
.gantt-sub-rows.open {
    max-height: 2000px;
}

/* Pillar group header inside sub-rows */
.gantt-pillar-group {
    border-top: 1px solid var(--border-color);
}
.gantt-pillar-group:first-child {
    border-top: none;
}
.gantt-pillar-group-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.gantt-pillar-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.68rem;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

/* Individual sub-pillar row */
.gantt-sub-row {
    display: flex;
    align-items: center;
    border-top: 1px dashed var(--border-color);
    min-height: 32px;
}
.gantt-sub-row-label {
    width: 140px;
    min-width: 140px;
    padding: 4px 14px 4px 28px;
    font-size: 0.74rem;
    color: var(--text-secondary);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gantt-sub-track {
    flex: 1;
    position: relative;
    height: 22px;
}
.gantt-sub-bar {
    position: absolute;
    top: 3px;
    height: 16px;
    border-radius: 3px;
    opacity: 0.65;
    transition: opacity 0.15s;
}
.gantt-sub-bar:hover {
    opacity: 0.9;
}

/* ═══════════════════════════════════════════════════════════════════════════
   GANTT – Milestone Markers
   ═══════════════════════════════════════════════════════════════════════════ */
.gantt-milestone-layer {
    position: absolute;
    top: 0;
    left: 140px;   /* matches phase label width */
    right: 0;
    height: 100%;
    pointer-events: none;
    z-index: 3;
}
.gantt-milestone-line {
    position: absolute;
    top: 0;
    width: 0;
    height: 100%;
    border-left: 2px dashed var(--text-tertiary);
    opacity: 0.5;
    z-index: 3;
}
.gantt-milestone-line.self-assessment {
    border-color: #e6a817;
    opacity: 0.7;
}
.gantt-milestone-diamond {
    position: absolute;
    top: -8px;
    width: 14px;
    height: 14px;
    transform: translateX(-50%) rotate(45deg);
    border-radius: 2px;
    z-index: 4;
    pointer-events: auto;
    cursor: default;
    border: 2px solid rgba(255,255,255,0.8);
    box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}
.gantt-milestone-diamond.checkpoint {
    background: var(--text-tertiary);
}
.gantt-milestone-diamond.self-assessment {
    background: #e6a817;
}
.gantt-milestone-tooltip {
    position: absolute;
    top: 12px;
    transform: translateX(-50%);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 0.68rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 10;
}
.gantt-milestone-diamond:hover + .gantt-milestone-tooltip,
.gantt-milestone-diamond:hover ~ .gantt-milestone-tooltip {
    opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SELF-ASSESSMENT REPORT
   ═══════════════════════════════════════════════════════════════════════════ */
.sa-product-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.sa-product-bar label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
}
.sa-product-bar select,
.sa-product-bar input[type="text"],
.sa-product-bar input[type="date"] {
    padding: 6px 10px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 0.88rem;
}
.sa-product-bar select {
    min-width: 180px;
}
.sa-product-bar input[type="text"] {
    min-width: 160px;
}
.sa-btn-new {
    padding: 6px 14px;
    border: 1px solid var(--color-primary);
    border-radius: 5px;
    background: var(--color-primary);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
}
.sa-btn-new:hover {
    opacity: 0.85;
}
.sa-btn-delete {
    padding: 6px 14px;
    border: 1px solid var(--color-error, #e53935);
    border-radius: 5px;
    background: transparent;
    color: var(--color-error, #e53935);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}
.sa-btn-delete:hover {
    background: var(--color-error, #e53935);
    color: #fff;
}
.sa-summary {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.sa-summary-card {
    flex: 1;
    min-width: 140px;
    padding: 14px 18px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    text-align: center;
}
.sa-summary-card .sa-score-big {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}
.sa-summary-card .sa-score-label {
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-top: 4px;
}

/* Pillar accordion section */
.sa-pillar-section {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 12px;
    overflow: hidden;
}
.sa-pillar-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--bg-secondary);
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
}
.sa-pillar-header:hover {
    background: var(--bg-tertiary);
}
.sa-pillar-header .toggle-arrow {
    font-size: 0.72rem;
    color: var(--text-tertiary);
    transition: transform 0.2s;
    width: 12px;
    text-align: center;
}
.sa-pillar-header.expanded .toggle-arrow {
    transform: rotate(90deg);
}
.sa-pillar-header .sa-pillar-title {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-primary);
    flex: 1;
}
.sa-pillar-header .sa-pillar-avg {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-secondary);
    padding: 3px 10px;
    background: var(--bg-primary);
    border-radius: 4px;
    border: 1px solid var(--border-color);
}
.sa-pillar-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}
.sa-pillar-body.open {
    max-height: 2000px;
}

/* Sub-pillar score row */
.sa-sp-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px 10px 32px;
    border-top: 1px solid var(--border-color);
}
.sa-sp-name {
    font-size: 0.84rem;
    color: var(--text-primary);
    min-width: 200px;
    flex-shrink: 0;
}
.sa-sp-code {
    font-size: 0.72rem;
    color: var(--text-tertiary);
    font-weight: 600;
    margin-right: 4px;
}
.sa-score-select {
    width: 64px;
    padding: 5px 8px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 0.88rem;
    font-weight: 600;
    text-align: center;
}
.sa-score-select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.15);
}
.sa-notes-input {
    flex: 1;
    padding: 5px 10px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 0.84rem;
    min-width: 0;
}
.sa-notes-input::placeholder {
    color: var(--text-tertiary);
}
.sa-notes-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.15);
}

/* Auto-save indicator */
.sa-autosave {
    font-size: 0.76rem;
    color: var(--text-tertiary);
    margin-left: auto;
    padding: 3px 10px;
    transition: color 0.3s;
}
.sa-autosave.saving {
    color: var(--color-primary);
}
.sa-autosave.saved {
    color: #4caf50;
}

/* ═══════════════════════════════════════════════════════════════════════════
   GANTT RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .roadmap-container {
        padding: 16px;
    }
    .gantt-phase-label {
        width: 90px;
        min-width: 90px;
        font-size: 0.72rem;
        padding: 6px 8px;
    }
    .gantt-ruler-spacer {
        width: 90px;
        min-width: 90px;
    }
    .gantt-arrows {
        left: 90px;
    }
    .gantt-milestone-layer {
        left: 90px;
    }
    .gantt-sub-row-label {
        width: 90px;
        min-width: 90px;
        padding-left: 12px;
    }
    .gantt-bar-content {
        padding: 0 6px;
    }
    .gantt-modal-content {
        width: 98vw;
    }
    .sa-sp-row {
        flex-wrap: wrap;
    }
    .sa-sp-name {
        min-width: 100%;
    }
}

/* ================================================================
   Vendor Analysis Report
   ================================================================ */

.va-vendor-selector {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color, #e0e0e0);
    margin-bottom: 8px;
}
.va-vendor-selector label {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary, #1a1a1a);
    white-space: nowrap;
}
.va-vendor-selector select {
    flex: 1;
    max-width: 400px;
    padding: 8px 12px;
    border: 1px solid var(--border-color, #d0d0d0);
    border-radius: 6px;
    font-size: 14px;
    background: var(--bg-primary, #fff);
    color: var(--text-primary, #1a1a1a);
}

/* Inner tabs */
.va-inner-tabs {
    display: flex;
    gap: 4px;
    padding: 8px 0 0 0;
    border-bottom: 2px solid var(--border-color, #e0e0e0);
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.va-inner-tab {
    padding: 8px 16px;
    border: none;
    background: none;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary, #666);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.15s;
    white-space: nowrap;
}
.va-inner-tab:hover {
    color: var(--text-primary, #1a1a1a);
    background: var(--bg-hover, rgba(0,0,0,0.03));
}
.va-inner-tab.active {
    color: #005a9e;
    border-bottom-color: #005a9e;
    font-weight: 600;
}
.va-inner-panel { display: none; }
.va-inner-panel.active { display: block; }

/* Executive Summary */
.va-exec-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}
.va-exec-card {
    background: var(--bg-secondary, #f8f9fa);
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 8px;
    padding: 16px;
}
.va-exec-card h3 {
    margin: 0 0 10px 0;
    font-size: 14px;
    color: var(--text-secondary, #666);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.va-exec-card .va-big-score {
    font-size: 36px;
    font-weight: 700;
    line-height: 1;
}
.va-exec-card .va-meta-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--text-secondary, #666);
    margin-top: 6px;
}
.va-exec-card .va-meta-row span { white-space: nowrap; }
.va-exec-card .va-meta-label {
    font-weight: 600;
    color: var(--text-primary, #1a1a1a);
}

.va-radar-container {
    display: flex;
    justify-content: center;
    padding: 12px 0;
}
.va-radar-container canvas {
    max-width: 460px;
    max-height: 460px;
}
.va-radar-legend {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-top: 8px;
    font-size: 12px;
    color: var(--text-secondary, #666);
}
.va-radar-legend span {
    display: flex;
    align-items: center;
    gap: 6px;
}
.va-radar-legend .swatch {
    display: inline-block;
    width: 16px;
    height: 3px;
    border-radius: 2px;
}

.va-quick-callout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 16px;
}
.va-callout-box {
    padding: 14px;
    border-radius: 8px;
    border: 1px solid;
}
.va-callout-box.strengths {
    background: rgba(16, 124, 16, 0.06);
    border-color: rgba(16, 124, 16, 0.2);
}
.va-callout-box.weaknesses {
    background: rgba(209, 52, 56, 0.06);
    border-color: rgba(209, 52, 56, 0.2);
}
.va-callout-box h4 {
    margin: 0 0 8px 0;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.va-callout-box.strengths h4 { color: #107c10; }
.va-callout-box.weaknesses h4 { color: #d13438; }
.va-callout-box ul {
    margin: 0;
    padding-left: 18px;
    font-size: 13px;
    line-height: 1.6;
}

/* Pillar Scorecard */
.va-pillar-card {
    margin-bottom: 20px;
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 8px;
    overflow: hidden;
}
.va-pillar-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--bg-secondary, #f8f9fa);
    border-bottom: 1px solid var(--border-color, #e0e0e0);
    cursor: pointer;
}
.va-pillar-card-header:hover {
    background: var(--bg-hover, rgba(0,0,0,0.04));
}
.va-pillar-title {
    display: flex;
    align-items: center;
    gap: 10px;
}
.va-pillar-code {
    font-size: 12px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
    color: #fff;
    background: #005a9e;
}
.va-pillar-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary, #1a1a1a);
}
.va-pillar-scores {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 13px;
}
.va-pillar-score-badge {
    font-size: 18px;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 6px;
    color: #fff;
}
.va-pillar-benchmark {
    color: var(--text-secondary, #666);
}
.va-pillar-body {
    padding: 12px 16px;
}
.va-sp-row {
    display: grid;
    grid-template-columns: 120px 1fr 60px 60px 60px 60px;
    gap: 8px;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-color, #f0f0f0);
    font-size: 13px;
}
.va-sp-row:last-child { border-bottom: none; }
.va-sp-id {
    font-weight: 600;
    font-size: 12px;
    color: var(--text-secondary, #666);
}
.va-sp-name {
    color: var(--text-primary, #1a1a1a);
}
.va-sp-score {
    font-weight: 700;
    text-align: center;
    padding: 2px 6px;
    border-radius: 4px;
    color: #fff;
    font-size: 12px;
}
.va-sp-benchmark-val {
    text-align: center;
    font-size: 12px;
    color: var(--text-secondary, #666);
}
.va-sp-grade {
    text-align: center;
    font-weight: 600;
    font-size: 12px;
}
.va-grade-A { color: #005a9e; }
.va-grade-B { color: #107c10; }
.va-grade-C { color: #c19c00; }
.va-grade-D { color: #ff8c00; }
.va-grade-F { color: #d13438; }

/* Score bar with benchmark */
.va-score-bar-wrap {
    position: relative;
    height: 8px;
    background: var(--bg-tertiary, #e8e8e8);
    border-radius: 4px;
    overflow: visible;
}
.va-score-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s;
}
.va-benchmark-marker {
    position: absolute;
    top: -3px;
    width: 2px;
    height: 14px;
    border-radius: 1px;
}
.va-benchmark-marker.avg { background: rgba(0,0,0,0.35); }
.va-benchmark-marker.top10 { background: #005a9e; }

/* Strengths & Weaknesses */
.va-sw-section { margin-bottom: 24px; }
.va-sw-section h3 {
    font-size: 16px;
    margin: 0 0 12px 0;
    padding-bottom: 6px;
    border-bottom: 2px solid;
}
.va-sw-section.strengths h3 { color: #107c10; border-color: #107c10; }
.va-sw-section.weaknesses h3 { color: #d13438; border-color: #d13438; }

.va-sw-card {
    padding: 12px 16px;
    margin-bottom: 10px;
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 8px;
    border-left: 4px solid;
}
.va-sw-card.strength { border-left-color: #107c10; }
.va-sw-card.weakness { border-left-color: #d13438; }
.va-sw-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}
.va-sw-card-title {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary, #1a1a1a);
}
.va-sw-card-scores {
    font-size: 12px;
    color: var(--text-secondary, #666);
    display: flex;
    gap: 10px;
}
.va-sw-card-body {
    font-size: 13px;
    color: var(--text-secondary, #555);
    line-height: 1.5;
}
.va-sw-card-body ul {
    margin: 4px 0 0 0;
    padding-left: 18px;
}
.va-sw-card-body .va-evidence-tag {
    display: inline-block;
    padding: 1px 6px;
    background: var(--bg-tertiary, #eee);
    border-radius: 3px;
    font-size: 11px;
    margin: 2px 2px 2px 0;
}

/* Gap Analysis */
.va-gap-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.va-gap-table th {
    background: var(--bg-secondary, #f8f9fa);
    padding: 8px 10px;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--text-secondary, #666);
    border-bottom: 2px solid var(--border-color, #e0e0e0);
}
.va-gap-table td {
    padding: 7px 10px;
    border-bottom: 1px solid var(--border-color, #f0f0f0);
}
.va-gap-table tr:hover td {
    background: var(--bg-hover, rgba(0,0,0,0.02));
}
.va-gap-table .va-gap-cell {
    text-align: center;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
}
.va-gap-above-top10 { background: rgba(0, 90, 158, 0.1); color: #005a9e; }
.va-gap-above-avg { background: rgba(16, 124, 16, 0.1); color: #107c10; }
.va-gap-at-avg { background: rgba(193, 156, 0, 0.1); color: #c19c00; }
.va-gap-below-avg { background: rgba(209, 52, 56, 0.1); color: #d13438; }

/* Roadmap */
.va-roadmap-phase {
    margin-bottom: 24px;
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 8px;
    overflow: hidden;
}
.va-phase-header {
    padding: 12px 16px;
    font-weight: 700;
    font-size: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.va-phase-header.phase1 { background: #e6f2e6; color: #107c10; }
.va-phase-header.phase2 { background: #fff8e1; color: #c19c00; }
.va-phase-header.phase3 { background: #e8f0fe; color: #005a9e; }
.va-phase-items { padding: 8px 16px; }

.va-roadmap-item {
    display: grid;
    grid-template-columns: 100px 1fr 60px 60px 60px;
    gap: 8px;
    align-items: start;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color, #f0f0f0);
    font-size: 13px;
}
.va-roadmap-item:last-child { border-bottom: none; }
.va-roadmap-sp-id {
    font-weight: 600;
    font-size: 12px;
    color: var(--text-secondary, #666);
}
.va-roadmap-detail { line-height: 1.5; }
.va-roadmap-detail .va-action-label {
    font-weight: 600;
    color: var(--text-primary, #1a1a1a);
}
.va-roadmap-detail .va-actions {
    margin: 2px 0 0 0;
    padding-left: 16px;
    color: var(--text-secondary, #555);
    font-size: 12px;
}
.va-roadmap-score-cell {
    text-align: center;
    font-weight: 600;
    font-size: 12px;
}
.va-priority-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}
.va-priority-high { background: rgba(209, 52, 56, 0.12); color: #d13438; }
.va-priority-medium { background: rgba(193, 156, 0, 0.12); color: #c19c00; }
.va-priority-low { background: rgba(16, 124, 16, 0.12); color: #107c10; }

/* Summary stats row */
.va-summary-stats {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin: 12px 0;
}
.va-stat {
    background: var(--bg-secondary, #f8f9fa);
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 8px;
    padding: 10px 16px;
    text-align: center;
    min-width: 120px;
}
.va-stat-value {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
}
.va-stat-label {
    font-size: 11px;
    color: var(--text-secondary, #666);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-top: 2px;
}

@media (max-width: 900px) {
    .va-exec-grid { grid-template-columns: 1fr; }
    .va-quick-callout { grid-template-columns: 1fr; }
    .va-sp-row { grid-template-columns: 80px 1fr 50px 50px 50px; }
    .va-roadmap-item { grid-template-columns: 80px 1fr 50px 50px 50px; }
}

/* Capability Legend (inside Vendor Analysis) */
.va-legend-pillar {
    margin-bottom: 12px;
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 8px;
    overflow: hidden;
}
.va-legend-pillar-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--bg-secondary, #f8f9fa);
    border-bottom: 1px solid var(--border-color, #e0e0e0);
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
}
.va-legend-pillar-header:hover {
    background: var(--bg-hover, rgba(0,0,0,0.04));
}
.va-legend-pillar-header .va-chevron {
    font-size: 12px;
    transition: transform 0.2s;
    color: var(--text-secondary, #666);
    flex-shrink: 0;
}
.va-legend-pillar-header.expanded .va-chevron {
    transform: rotate(90deg);
}
.va-legend-pillar-body {
    display: none;
    padding: 12px 16px;
}
.va-legend-pillar-body.expanded {
    display: block;
}
.va-legend-sp-card {
    margin-bottom: 14px;
    padding: 12px;
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-color, #f0f0f0);
    border-radius: 6px;
    border-left: 3px solid #005a9e;
}
.va-legend-sp-card:last-child { margin-bottom: 0; }
.va-legend-sp-header {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 6px;
}
.va-legend-sp-id {
    font-size: 11px;
    font-weight: 700;
    color: #005a9e;
    background: rgba(0,90,158,0.08);
    padding: 2px 6px;
    border-radius: 3px;
}
.va-legend-sp-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary, #1a1a1a);
}
.va-legend-sp-def {
    font-size: 13px;
    color: var(--text-secondary, #555);
    margin-bottom: 8px;
    line-height: 1.5;
}
.va-legend-section-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--text-secondary, #888);
    margin: 8px 0 4px 0;
}
.va-legend-criteria-list {
    margin: 0;
    padding-left: 18px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-secondary, #555);
}
.va-legend-focus {
    font-size: 13px;
    color: var(--text-secondary, #666);
    font-style: italic;
    margin-bottom: 6px;
}
.va-legend-signals {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}
.va-legend-signal-tag {
    display: inline-block;
    padding: 2px 8px;
    background: rgba(0,90,158,0.06);
    border: 1px solid rgba(0,90,158,0.15);
    border-radius: 3px;
    font-size: 11px;
    color: #005a9e;
}

/* ================================================================
   PRICING ANALYSIS REPORT
   ================================================================ */

/* Inner tabs (matching vendor analysis pattern) */
.pa-inner-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 2px solid var(--border-color, #e0e0e0);
    margin-bottom: 16px;
    padding-bottom: 0;
}
.pa-inner-tab {
    padding: 8px 16px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary, #666);
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 0.15s, border-color 0.15s;
}
.pa-inner-tab:hover { color: var(--text-primary, #1a1a1a); }
.pa-inner-tab.active {
    color: #005a9e;
    border-bottom-color: #005a9e;
    font-weight: 600;
}
.pa-inner-panel { display: none; }
.pa-inner-panel.active { display: block; }

.pa-empty {
    text-align: center;
    color: var(--text-secondary, #666);
    padding: 40px 20px;
    font-size: 14px;
}

/* KPI row */
.pa-kpi-row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}
.pa-kpi {
    text-align: center;
    padding: 16px 12px;
    background: var(--bg-secondary, #f8f9fa);
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 8px;
}
.pa-kpi-value {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
}
.pa-kpi-label {
    font-size: 11px;
    color: var(--text-secondary, #666);
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Section blocks */
.pa-section {
    margin-bottom: 24px;
}
.pa-section h3 {
    font-size: 16px;
    color: #005a9e;
    margin: 0 0 8px 0;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border-color, #e0e0e0);
}
.pa-section p {
    font-size: 13px;
    line-height: 1.65;
    color: var(--text-primary, #1a1a1a);
    margin: 0 0 10px 0;
}

/* Badge */
.pa-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

/* Dimension bar chart */
.pa-dim-bars {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pa-dim-bar-row {
    display: grid;
    grid-template-columns: 200px 1fr 50px;
    align-items: center;
    gap: 12px;
}
.pa-dim-bar-label {
    font-size: 13px;
    font-weight: 500;
    text-align: right;
}
.pa-dim-bar-track {
    height: 24px;
    background: var(--bg-secondary, #f0f0f0);
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}
.pa-dim-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
}
.pa-dim-bar-value {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary, #1a1a1a);
}
.pa-dim-bar-range {
    font-size: 11px;
    color: var(--text-secondary, #666);
    text-align: center;
}

/* Model distribution grid */
.pa-model-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
    margin-top: 8px;
}
.pa-model-card {
    background: var(--bg-secondary, #f8f9fa);
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 8px;
    padding: 14px;
    text-align: center;
}
.pa-model-card-header { margin-bottom: 8px; }
.pa-model-card-count {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
}
.pa-model-card-count small {
    font-size: 12px;
    font-weight: 400;
    color: var(--text-secondary, #666);
}
.pa-model-card-score {
    font-size: 13px;
    margin-top: 4px;
}

/* Cohort table */
.pa-cohort-table {
    overflow-x: auto;
    margin-top: 8px;
}
.pa-cohort-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.pa-cohort-table th, .pa-cohort-table td {
    border: 1px solid var(--border-color, #e0e0e0);
    padding: 6px 10px;
    text-align: left;
}
.pa-cohort-table th {
    background: var(--bg-secondary, #f4f4f4);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Dimension deep dive cards */
.pa-dim-card {
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 8px;
    margin-bottom: 20px;
    overflow: hidden;
}
.pa-dim-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 16px;
    background: var(--bg-secondary, #f8f9fa);
    border-bottom: 1px solid var(--border-color, #e0e0e0);
}
.pa-dim-card-header h4 {
    margin: 0;
    font-size: 15px;
    color: #005a9e;
}
.pa-dim-description {
    font-size: 12px;
    color: var(--text-secondary, #666);
    margin: 4px 0 0 0;
    line-height: 1.5;
    max-width: 600px;
}
.pa-dim-card-score {
    text-align: center;
    min-width: 80px;
    flex-shrink: 0;
}
.pa-big-num {
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
}
.pa-dim-sub {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary, #666);
    margin-top: 4px;
}
.pa-dim-card-body {
    padding: 16px;
}
.pa-dim-stats-row {
    display: flex;
    gap: 24px;
    font-size: 13px;
    color: var(--text-secondary, #666);
    margin-bottom: 14px;
}

/* Score distribution bars */
.pa-distribution {
    margin-top: 8px;
}
.pa-distribution-label {
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--text-secondary, #666);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.pa-distribution-bars {
    display: flex;
    gap: 8px;
    height: 100px;
    align-items: flex-end;
}
.pa-dist-bar-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.pa-dist-bar-wrapper {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: flex-end;
    height: 80px;
}
.pa-dist-bar {
    width: 100%;
    border-radius: 3px 3px 0 0;
    min-height: 2px;
    transition: height 0.4s ease;
}
.pa-dist-bar-score {
    font-size: 12px;
    font-weight: 700;
    margin-top: 4px;
}
.pa-dist-bar-count {
    font-size: 10px;
    color: var(--text-secondary, #666);
}

/* Leaders columns */
.pa-dim-leaders {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 14px;
}
.pa-dim-leaders-col h5 {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--text-secondary, #666);
    margin: 0 0 6px 0;
}
.pa-dim-leaders-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 13px;
}
.pa-dim-leaders-col li {
    padding: 3px 0;
    border-bottom: 1px solid var(--border-color-light, #f0f0f0);
}
.pa-dim-leaders-col li span {
    float: right;
    font-weight: 600;
}

/* Vendor comparison table */
.pa-filter-bar {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 8px;
    font-size: 13px;
}
.pa-filter-bar label {
    display: flex;
    align-items: center;
    gap: 6px;
}
.pa-filter-bar select, .pa-filter-bar input {
    padding: 4px 8px;
    border: 1px solid var(--border-color, #ccc);
    border-radius: 4px;
    font-size: 13px;
}
.pa-comp-table-wrap {
    overflow-x: auto;
    max-height: 600px;
    overflow-y: auto;
    margin-top: 12px;
}
.pa-comp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.pa-comp-table th {
    position: sticky;
    top: 0;
    background: var(--bg-secondary, #f4f4f4);
    border: 1px solid var(--border-color, #e0e0e0);
    padding: 8px 6px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    z-index: 1;
    user-select: none;
}
.pa-comp-table th:hover { background: #e8e8e8; }
.pa-comp-table td {
    border: 1px solid var(--border-color, #e0e0e0);
    padding: 6px 8px;
    white-space: nowrap;
}
.pa-comp-table tbody tr:hover {
    background: rgba(0,90,158,0.04);
}

/* Vendor detail */
.pa-vendor-selector {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}
.pa-vendor-selector select {
    padding: 6px 12px;
    font-size: 14px;
    border: 1px solid var(--border-color, #ccc);
    border-radius: 6px;
    min-width: 300px;
}
.pa-exec-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}
.pa-exec-card {
    background: var(--bg-secondary, #f8f9fa);
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 8px;
    padding: 16px;
}
.pa-exec-card h3 {
    margin: 0 0 10px 0;
    font-size: 16px;
    color: var(--text-primary, #1a1a1a);
    border: none;
    padding: 0;
}

/* Vendor dimension comparison bars */
.pa-vendor-dim-bars {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pa-vdim-row {
    display: grid;
    grid-template-columns: 220px 1fr;
    align-items: center;
    gap: 12px;
}
.pa-vdim-label {
    font-size: 12px;
    font-weight: 500;
    text-align: right;
}
.pa-vdim-bars {
    display: flex;
    align-items: center;
    gap: 10px;
}
.pa-vdim-bar-track {
    flex: 1;
    height: 20px;
    background: var(--bg-secondary, #f0f0f0);
    border-radius: 4px;
    position: relative;
    overflow: visible;
}
.pa-vdim-bar-fill.vendor {
    height: 100%;
    border-radius: 4px;
}
.pa-vdim-bar-marker {
    position: absolute;
    top: -4px;
    bottom: -4px;
    width: 3px;
    background: #333;
    border-radius: 2px;
    transform: translateX(-50%);
}
.pa-vdim-score {
    font-size: 14px;
    font-weight: 700;
    min-width: 24px;
    text-align: center;
}
.pa-vdim-legend {
    display: flex;
    gap: 20px;
    margin-top: 10px;
    font-size: 12px;
    color: var(--text-secondary, #666);
    justify-content: center;
}
.pa-vdim-legend span { display: flex; align-items: center; gap: 6px; }
.pa-vdim-legend .swatch { display: inline-block; width: 16px; height: 4px; border-radius: 2px; }
.pa-vdim-legend .swatch-line { display: inline-block; width: 16px; height: 3px; background: #333; border-radius: 2px; }

/* Details grid */
.pa-details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 24px;
    font-size: 13px;
}
.pa-detail-item {
    padding: 4px 0;
    border-bottom: 1px solid var(--border-color-light, #f0f0f0);
}

/* Rationale blocks */
.pa-rationale-block {
    margin-bottom: 14px;
    padding: 12px;
    background: var(--bg-secondary, #f9f9f9);
    border-radius: 6px;
    border-left: 3px solid #005a9e;
}
.pa-rationale-block h4 {
    margin: 0 0 6px 0;
    font-size: 13px;
    color: #005a9e;
}
.pa-rationale-block p {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
}

/* Evidence blocks */
.pa-evidence-block {
    margin-bottom: 10px;
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 6px;
    overflow: hidden;
}
.pa-evidence-block summary {
    padding: 10px 14px;
    cursor: pointer;
    background: var(--bg-secondary, #f8f9fa);
    font-size: 13px;
}
.pa-evidence-block summary:hover { background: #eef2f7; }
.pa-evidence-notes {
    padding: 8px 14px;
    font-size: 12px;
    color: var(--text-secondary, #666);
    border-bottom: 1px solid var(--border-color-light, #f0f0f0);
    margin: 0;
}
.pa-evidence-urls {
    padding: 8px 14px;
    font-size: 12px;
}
.pa-evidence-urls a {
    color: #005a9e;
    text-decoration: none;
}
.pa-evidence-urls a:hover { text-decoration: underline; }
.pa-evidence-excerpts {
    padding: 8px 14px;
}
.pa-excerpt {
    margin: 6px 0;
    padding: 8px 12px;
    background: var(--bg-secondary, #f5f5f5);
    border-left: 3px solid #ccc;
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-secondary, #555);
}
.pa-more-excerpts {
    font-size: 11px;
    color: var(--text-secondary, #888);
    margin: 4px 0 0 0;
}

/* ── AI & Pricing Tab Styles ── */
.pa-ai-tab {
    background: linear-gradient(135deg, #0078d411, #107c1011);
    border-bottom: 2px solid #0078d4;
}
.pa-ai-tab.active {
    background: linear-gradient(135deg, #0078d422, #107c1022);
}
.pa-ai-section {
    background: var(--bg-secondary);
    border: 1px solid var(--color-primary, #0078d4);
    border-radius: 10px;
    padding: 20px;
}
.pa-ai-thesis {
    font-size: 13px;
    color: var(--text-secondary, #666);
    line-height: 1.6;
    margin: 8px 0 16px;
    font-style: italic;
}
.pa-ai-thesis-section .pa-ai-thesis-box {
    background: var(--bg-tertiary);
    border-left: 4px solid var(--color-primary, #0078d4);
    padding: 16px 20px;
    border-radius: 0 8px 8px 0;
    margin: 12px 0;
    color: var(--text-primary);
}
.pa-ai-thesis-section .pa-ai-thesis-box p {
    margin: 8px 0;
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--text-primary);
}
.pa-ai-dist-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 12px;
}
.pa-ai-dist-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 2px solid;
    border-radius: 8px;
    background: var(--bg-tertiary);
}
.pa-ai-dist-count {
    font-size: 22px;
    font-weight: 700;
}
.pa-ai-dist-label {
    font-size: 12px;
    color: var(--text-secondary);
}
.pa-ai-insight {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 4px 0 12px;
    line-height: 1.5;
}

/* AI Influence in Vendor Detail */
.pa-ai-vendor-section {
    background: var(--bg-secondary);
    border: 1px solid var(--color-primary, #0078d4);
    border-radius: 10px;
    padding: 20px;
}
.pa-ai-header-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 12px 0;
}
.pa-ai-meter {
    flex: 1;
    height: 28px;
    background: var(--bg-tertiary);
    border-radius: 14px;
    position: relative;
    overflow: hidden;
}
.pa-ai-meter-fill {
    height: 100%;
    border-radius: 14px;
    transition: width 0.6s ease;
}
.pa-ai-meter-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    text-shadow: 0 0 4px var(--bg-primary);
}
.pa-ai-influence-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.pa-ai-cap-grid {
    display: flex;
    gap: 16px;
    margin: 12px 0;
    flex-wrap: wrap;
}
.pa-ai-cap-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: var(--bg-tertiary);
    border-radius: 6px;
    border: 1px solid var(--border-color);
}
.pa-ai-cap-label {
    font-size: 12px;
    color: var(--text-secondary);
}
.pa-ai-cap-val {
    font-size: 16px;
    font-weight: 700;
}
.pa-ai-narrative {
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--text-primary);
    margin: 12px 0 4px;
}

/* Strengths & Weaknesses */
.pa-sw-section { margin-top: 4px; }
.pa-sw-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 12px;
}
.pa-sw-heading {
    font-size: 15px;
    margin: 0 0 10px;
    padding-bottom: 6px;
    border-bottom: 2px solid;
}
.pa-sw-heading.pa-sw-str { border-color: #107c10; color: #107c10; }
.pa-sw-heading.pa-sw-weak { border-color: #a80000; color: #a80000; }
.pa-sw-card {
    padding: 12px 14px;
    border-radius: 8px;
    margin-bottom: 10px;
    border-left: 4px solid;
}
.pa-sw-str-card {
    background: var(--bg-tertiary);
    border-left-color: #107c10;
}
.pa-sw-weak-card {
    background: var(--bg-tertiary);
    border-left-color: #a80000;
}
.pa-sw-card-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
.pa-sw-dim-name {
    font-weight: 600;
    font-size: 14px;
}
.pa-sw-score {
    font-size: 20px;
    font-weight: 700;
}
.pa-sw-card-meta {
    display: flex;
    gap: 14px;
    font-size: 12px;
    color: var(--text-secondary);
    margin: 6px 0;
}
.pa-sw-card-detail {
    margin-top: 6px;
}
.pa-sw-criteria-count {
    font-size: 11px;
    color: var(--text-secondary);
}
.pa-sw-criteria-list {
    margin: 4px 0 0 16px;
    padding: 0;
    font-size: 12px;
    line-height: 1.6;
}
.pa-sw-criteria-list li { margin: 2px 0; }
.pa-sw-met { color: #107c10; }
.pa-sw-unmet { color: #a80000; }
.pa-sw-partial { color: #ca5010; }
.pa-sw-none {
    font-size: 13px;
    color: var(--text-secondary);
    font-style: italic;
    padding: 8px 0;
}

/* Roadmap */
.pa-roadmap-section { margin-top: 4px; }
.pa-roadmap-phase {
    border-left: 4px solid;
    padding: 12px 16px;
    margin-bottom: 16px;
    border-radius: 0 8px 8px 0;
    background: var(--bg-tertiary);
}
.pa-roadmap-phase-title {
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 10px;
}
.pa-roadmap-item {
    padding: 8px 0;
    border-top: 1px solid var(--border-color);
}
.pa-roadmap-item:first-of-type { border-top: none; }
.pa-roadmap-item-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
.pa-roadmap-dim {
    font-weight: 600;
    font-size: 13px;
}
.pa-roadmap-priority {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}
.pa-roadmap-scores {
    display: flex;
    gap: 16px;
    font-size: 12px;
    margin: 4px 0;
}
.pa-roadmap-actions {
    margin: 4px 0 0 16px;
    padding: 0;
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* Recommendations */
.pa-rec-section { margin-top: 4px; }
.pa-rec-card {
    padding: 12px 16px;
    margin-bottom: 10px;
    border-radius: 8px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
}
.pa-rec-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}
.pa-rec-priority {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}
.pa-rec-category {
    font-weight: 600;
    font-size: 13px;
    color: var(--text-primary);
}
.pa-rec-text {
    font-size: 13px;
    line-height: 1.6;
    margin: 4px 0;
    color: var(--text-secondary);
}

/* AI Histogram */
.pa-ai-histogram {
    margin: 12px 0;
}
.pa-ai-hist-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 6px 0;
}
.pa-ai-hist-label {
    width: 200px;
    font-size: 12px;
    text-align: right;
    color: var(--text-secondary);
}
.pa-ai-hist-bar-track {
    flex: 1;
    height: 24px;
    background: var(--bg-tertiary);
    border-radius: 4px;
    overflow: hidden;
}
.pa-ai-hist-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.4s ease;
}
.pa-ai-hist-count {
    width: 32px;
    font-size: 14px;
    font-weight: 700;
    text-align: right;
}

/* Scatter grid */
.pa-scatter-grid {
    overflow-x: auto;
    margin: 12px 0;
}
.pa-scatter-table table {
    border-collapse: collapse;
    font-size: 12px;
    width: 100%;
}
.pa-scatter-table th,
.pa-scatter-table td {
    border: 1px solid var(--border-color);
    padding: 6px 8px;
    text-align: center;
    min-width: 80px;
    vertical-align: top;
    color: var(--text-primary);
}
.pa-scatter-table th {
    background: var(--bg-secondary);
    font-weight: 600;
    color: var(--text-primary);
}
.pa-scatter-corner {
    font-size: 11px;
    white-space: nowrap;
}
.pa-scatter-dot {
    display: inline-block;
    padding: 1px 5px;
    margin: 1px;
    border-radius: 4px;
    font-size: 10px;
    color: #fff;
    white-space: nowrap;
}
.pa-scatter-count {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-secondary);
}

/* AI integration across tabs */
.pa-model-card-ai {
    font-size: 12px;
    font-style: italic;
    color: var(--text-secondary);
    margin-top: 4px;
}
.pa-ai-correl-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0 6px;
    flex-wrap: wrap;
}
.pa-ai-correl-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    letter-spacing: 0.3px;
}
.pa-ai-correl-detail {
    font-size: 11px;
    color: var(--text-secondary);
    font-style: italic;
}
.pa-ai-inline-score {
    font-size: 11px;
    color: var(--text-secondary);
    font-style: italic;
    margin-left: 4px;
}
.pa-ai-label-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 600;
    color: #fff;
    margin-left: 4px;
    vertical-align: middle;
}
.pa-ai-label-transformative { background: #107c10; }
.pa-ai-label-significant { background: #0078d4; }
.pa-ai-label-emerging { background: #ca5010; }
.pa-ai-label-minimal { background: #a80000; }

/* ===================================================================
   Market Insight Report Styles
   =================================================================== */
.mi-report { max-width: 960px; margin: 0 auto; }
.mi-header { padding: 24px 0 16px; border-bottom: 2px solid var(--border-color); margin-bottom: 20px; }
.mi-header-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.mi-header-controls { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex-shrink: 0; }
.mi-perspective-select {
    padding: 6px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    min-width: 200px;
    max-width: 300px;
    appearance: auto;
}
.mi-perspective-select:focus { outline: 2px solid #0078d4; outline-offset: -1px; }
.mi-content-type {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    background: #0078d4;
    color: #fff;
    margin-bottom: 8px;
}
.mi-header h1 {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.3;
    margin: 0;
}
.mi-summary {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 12px 0 0;
    font-style: italic;
}

/* Inner tabs */
.mi-inner-tabs {
    display: flex;
    gap: 2px;
    border-bottom: 2px solid var(--border-color);
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.mi-inner-tab {
    padding: 10px 18px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: all 0.2s;
}
.mi-inner-tab:hover { color: var(--text-primary); background: var(--bg-tertiary); }
.mi-inner-tab.active {
    color: #0078d4;
    border-bottom-color: #0078d4;
    background: var(--bg-secondary);
}
.mi-inner-panel { display: none; padding: 0 4px; }
.mi-inner-panel.active { display: block; }

/* KPI bar */
.mi-kpi-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 12px;
    margin-bottom: 24px;
}
.mi-kpi {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 14px 12px;
    text-align: center;
}
.mi-kpi-val {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
}
.mi-kpi-lbl {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 4px;
}

/* PreCyber edit mode */
.pci-editable {
    outline: 2px dashed #0078d4;
    outline-offset: 2px;
    padding: 4px;
    border-radius: 4px;
    min-height: 1.5em;
    background: rgba(0, 120, 212, 0.03);
}
.pci-editable:focus {
    outline: 2px solid #0078d4;
    background: rgba(0, 120, 212, 0.06);
}

/* SPA callout */
.mi-spa-box {
    background: var(--bg-secondary);
    border-left: 4px solid #0078d4;
    border-radius: 0 10px 10px 0;
    padding: 16px 20px;
    margin-bottom: 24px;
}
.mi-spa-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #0078d4;
    margin-bottom: 6px;
}
.mi-spa-box p {
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-primary);
    margin: 0;
}

/* Findings */
.mi-findings, .mi-recs { margin-bottom: 28px; }
.mi-findings h3, .mi-recs h3, .mi-matrix h3 {
    font-size: 16px;
    color: var(--text-primary);
    margin: 0 0 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
}
.mi-finding-item, .mi-rec-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color);
}
.mi-finding-item:last-child, .mi-rec-item:last-child { border-bottom: none; }
.mi-finding-num, .mi-rec-num {
    min-width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}
.mi-finding-num {
    background: #ca501022;
    color: #ca5010;
    border: 1px solid #ca501044;
}
.mi-rec-num {
    background: #0078d422;
    color: #0078d4;
    border: 1px solid #0078d444;
    border-radius: 6px;
    font-size: 11px;
}
.mi-finding-body, .mi-rec-body {
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--text-primary);
}
.mi-finding-body strong, .mi-rec-body strong {
    color: var(--text-primary);
}

/* Pricing Framework Matrix */
.pa-fw-matrix { margin-bottom: 32px; }
.pa-fw-matrix h3 {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 4px 0;
}
.pa-fw-subtitle {
    font-size: 12px;
    color: var(--text-secondary);
    margin: 0 0 14px 0;
    line-height: 1.5;
}
.pa-fw-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-secondary);
}
.pa-fw-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11.5px;
    line-height: 1.45;
    table-layout: fixed;
}
.pa-fw-table thead th {
    position: sticky;
    top: 0;
    background: var(--bg-tertiary, var(--bg-secondary));
    padding: 10px 8px;
    text-align: center;
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-secondary);
    border-bottom: 2px solid var(--border-color);
}
.pa-fw-dim-hdr {
    text-align: left !important;
    width: 210px;
    min-width: 180px;
}
.pa-fw-crit-hdr { width: auto; }
.pa-fw-avg-hdr { width: 70px; min-width: 60px; }
.pa-fw-table th,
.pa-fw-table td {
    border-right: 1px solid var(--border-color);
}
.pa-fw-table th:last-child,
.pa-fw-table td:last-child {
    border-right: none;
}
.pa-fw-table tbody tr {
    border-bottom: 1px solid var(--border-color);
    transition: background 0.15s;
}
.pa-fw-table tbody tr:last-child { border-bottom: none; }
.pa-fw-table tbody tr:hover { background: var(--bg-hover, rgba(0,120,212,0.04)); }
.pa-fw-dim-cell {
    padding: 10px 10px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    white-space: normal;
    word-wrap: break-word;
}
.pa-fw-dim-badge {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 5px;
    font-size: 10px;
    font-weight: 700;
    border: 1px solid;
    flex-shrink: 0;
    margin-top: 2px;
}
.pa-fw-dim-name {
    font-weight: 700;
    color: #0078d4;
    font-size: 13px;
    line-height: 1.35;
}
.pa-fw-crit-cell {
    padding: 10px 10px;
    color: var(--text-secondary);
    vertical-align: top;
    font-size: 11.5px;
    line-height: 1.5;
}
.pa-fw-avg-cell {
    padding: 10px 8px;
    text-align: center;
    font-weight: 700;
    font-size: 13px;
}

/* Correlation matrix */
.mi-matrix { margin-bottom: 28px; }
.mi-matrix-grid { display: flex; flex-direction: column; gap: 8px; }
.mi-matrix-row {
    display: grid;
    grid-template-columns: 1fr 30px 1fr;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: var(--bg-secondary);
    border-radius: 8px;
    border: 1px solid var(--border-color);
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text-primary);
}
.mi-matrix-arrow { text-align: center; font-size: 18px; color: var(--text-secondary); }
.mi-matrix-tag {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    background: #ca501022;
    color: #ca5010;
    margin-right: 4px;
}
.mi-matrix-tag-rec {
    background: #0078d422;
    color: #0078d4;
}

/* Analysis sections */
.mi-analysis-section {
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border-color);
}
.mi-analysis-section:last-child { border-bottom: none; }
.mi-analysis-section h3 {
    font-size: 18px;
    color: var(--text-primary);
    margin: 0 0 16px;
}
.mi-para {
    font-size: 14px;
    line-height: 1.8;
    color: var(--text-primary);
    margin: 0 0 14px;
}
.mi-list {
    margin: 0 0 14px 20px;
    padding: 0;
}
.mi-list li {
    font-size: 14px;
    line-height: 1.8;
    color: var(--text-primary);
    margin-bottom: 8px;
}

/* Visualization boxes */
.mi-viz-box {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 20px;
}
.mi-viz-box h4 {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0 0 12px;
    font-weight: 600;
}

/* Dimension comparison bars */
.mi-dim-compare, .mi-model-compare { display: flex; flex-direction: column; gap: 8px; }
.mi-dim-row {
    display: grid;
    grid-template-columns: 200px 1fr 50px;
    align-items: center;
    gap: 10px;
}
.mi-dim-highlight { background: #a8000010; padding: 6px 8px; border-radius: 6px; border: 1px solid #a8000033; }
.mi-dim-highlight-good { background: #107c1010; padding: 6px 8px; border-radius: 6px; border: 1px solid #107c1033; }
.mi-dim-label { font-size: 12px; color: var(--text-primary); font-weight: 500; }
.mi-dim-track { height: 20px; background: var(--bg-tertiary); border-radius: 10px; overflow: hidden; }
.mi-dim-fill { height: 100%; border-radius: 10px; transition: width 0.5s ease; }
.mi-dim-val { font-size: 13px; font-weight: 700; text-align: right; }

/* Tier cards */
.mi-tier-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 12px; }
.mi-tier-card {
    border-radius: 10px;
    padding: 14px;
    text-align: center;
    border: 2px solid;
}
.mi-tier-sig { background: #0078d410; border-color: #0078d444; }
.mi-tier-emg { background: #ca501010; border-color: #ca501044; }
.mi-tier-min { background: #a8000010; border-color: #a8000044; }
.mi-tier-title { font-size: 14px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
.mi-tier-stat { font-size: 12px; color: var(--text-secondary); margin-bottom: 8px; }
.mi-tier-metric { font-size: 12px; color: var(--text-primary); margin: 2px 0; }
.mi-tier-gap { font-size: 13px; color: var(--text-secondary); text-align: center; }

/* Service type cards */
.mi-svc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.mi-svc-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 14px;
    text-align: center;
}
.mi-svc-title { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.mi-svc-count { font-size: 11px; color: var(--text-secondary); margin: 4px 0 8px; }
.mi-svc-metric { font-size: 12px; color: var(--text-primary); margin: 2px 0; }

/* Snapshot grid */
.mi-snapshot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 10px;
}
.mi-snap-item {
    text-align: center;
    padding: 10px 8px;
    background: var(--bg-tertiary);
    border-radius: 8px;
}
.mi-snap-val { font-size: 20px; font-weight: 700; color: var(--text-primary); }
.mi-snap-lbl { font-size: 10px; color: var(--text-secondary); margin-top: 2px; }

/* Conclusion investment cards */
.mi-callout-box {
    background: var(--bg-secondary);
    border: 2px solid #0078d444;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 24px;
}
.mi-callout-box h4 { font-size: 15px; color: #0078d4; margin: 0 0 14px; }
.mi-invest-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.mi-invest-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 16px;
    text-align: center;
}
.mi-invest-icon { font-size: 28px; margin-bottom: 8px; }
.mi-invest-title { font-size: 14px; font-weight: 700; color: var(--text-primary); margin-bottom: 6px; }
.mi-invest-desc { font-size: 12px; color: var(--text-secondary); line-height: 1.5; }

/* Glossary */
.mi-glossary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 8px;
}
.mi-glossary-item {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px 12px;
}
.mi-glossary-term {
    font-size: 13px;
    font-weight: 700;
    color: #0078d4;
    margin-bottom: 2px;
}
.mi-glossary-def {
    font-size: 12px;
    color: var(--text-primary);
    line-height: 1.5;
}
.mi-evidence-list {
    margin: 0 0 0 20px;
    padding: 0;
}
.mi-evidence-list li {
    font-size: 13px;
    color: var(--text-primary);
    line-height: 1.7;
    margin-bottom: 8px;
}
/* Graphics tab visualizations */
.dfi-graphic-section {
    margin-bottom: 48px;
    page-break-inside: avoid;
}
.dfi-graphic-section h2 {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 6px;
}
.dfi-graphic-subtitle {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0 0 20px;
    line-height: 1.5;
}
.dfi-graphic-box {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 24px;
}
/* Heatmap table */
.dfi-heatmap { width: 100%; border-collapse: separate; border-spacing: 4px; }
.dfi-heatmap th {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 8px 6px;
    text-align: center;
    background: transparent;
}
.dfi-heatmap th:first-child { text-align: left; width: 160px; }
.dfi-heatmap td {
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    padding: 14px 8px;
    border-radius: 8px;
    transition: transform 0.2s;
}
.dfi-heatmap td:first-child {
    text-align: left;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    background: transparent;
    padding-left: 0;
}
.dfi-heatmap td:hover:not(:first-child) { transform: scale(1.06); }
.dfi-hm-high { background: #107c1018; color: #107c10; border: 1.5px solid #107c1044; }
.dfi-hm-mid  { background: #0078d418; color: #0078d4; border: 1.5px solid #0078d444; }
.dfi-hm-low  { background: #ca501018; color: #ca5010; border: 1.5px solid #ca501044; }
.dfi-hm-crit { background: #a8000018; color: #a80000; border: 1.5px solid #a8000044; }
.dfi-heatmap-legend {
    display: flex;
    gap: 16px;
    margin-top: 12px;
    font-size: 11px;
    color: var(--text-secondary);
    justify-content: flex-end;
}
.dfi-heatmap-legend span::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    margin-right: 4px;
    vertical-align: middle;
}
/* Convergence roadmap */
.dfi-roadmap { display: flex; flex-direction: column; gap: 24px; }
.dfi-roadmap-row {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 16px;
    align-items: start;
}
.dfi-roadmap-category {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    padding-top: 4px;
}
.dfi-roadmap-category small { display: block; font-size: 11px; font-weight: 400; color: var(--text-secondary); margin-top: 2px; }
.dfi-roadmap-track {
    position: relative;
    height: 48px;
    background: var(--bg-tertiary);
    border-radius: 10px;
    overflow: visible;
}
.dfi-roadmap-fill {
    height: 100%;
    border-radius: 10px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    position: relative;
}
.dfi-roadmap-target {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 3px;
    background: var(--text-primary);
    border-radius: 2px;
}
.dfi-roadmap-target-label {
    position: absolute;
    right: -4px;
    top: -18px;
    font-size: 10px;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
}
.dfi-roadmap-gaps {
    display: flex;
    gap: 8px;
    margin-top: 6px;
    flex-wrap: wrap;
}
.dfi-roadmap-gap {
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 4px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}
.dfi-roadmap-gap.gap-critical { background: #a8000012; border-color: #a8000044; color: #a80000; }
.dfi-roadmap-gap.gap-strength { background: #107c1012; border-color: #107c1044; color: #107c10; }
/* Investment mismatch */
.dfi-mismatch-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.dfi-mismatch-col h4 {
    font-size: 13px;
    font-weight: 700;
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid;
}
.dfi-mismatch-item {
    display: grid;
    grid-template-columns: 1fr 40px 1fr;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
}
.dfi-mismatch-bar {
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    padding: 0 8px;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
}
.dfi-mismatch-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    text-align: center;
}
.dfi-mismatch-arrow {
    font-size: 16px;
    text-align: center;
    color: var(--text-secondary);
}

/* ── NotebookLM-style infographic panels ── */
.dfi-infographic {
    background: var(--bg-primary);
    border: 2px solid var(--border-color);
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 48px;
    page-break-inside: avoid;
}
.dfi-ig-header {
    padding: 32px 36px 24px;
    position: relative;
    overflow: hidden;
}
.dfi-ig-header::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.06;
    background: repeating-linear-gradient(45deg, transparent, transparent 20px, currentColor 20px, currentColor 21px);
}
.dfi-ig-header-tag {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 4px;
    margin-bottom: 12px;
    position: relative;
}
.dfi-ig-header h2 {
    font-size: 26px;
    font-weight: 800;
    line-height: 1.2;
    margin: 0 0 8px;
    position: relative;
    color: var(--text-primary);
}
.dfi-ig-header p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-secondary);
    margin: 0;
    max-width: 680px;
    position: relative;
}
.dfi-ig-body {
    padding: 0 36px 36px;
}
/* Stat row — big numbers */
.dfi-ig-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 1px;
    background: var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 28px;
}
.dfi-ig-stat {
    background: var(--bg-secondary);
    padding: 20px 16px;
    text-align: center;
}
.dfi-ig-stat-val {
    font-size: 32px;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 4px;
}
.dfi-ig-stat-lbl {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
}
/* Section blocks */
.dfi-ig-section {
    margin-bottom: 24px;
}
.dfi-ig-section-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--border-color);
}
/* Icon + text rows */
.dfi-ig-rows { display: flex; flex-direction: column; gap: 12px; }
.dfi-ig-row {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 12px;
    align-items: start;
}
.dfi-ig-row-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}
.dfi-ig-row-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 2px;
}
.dfi-ig-row-text {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.55;
}
/* Two-column layout */
.dfi-ig-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
/* Callout strip */
.dfi-ig-callout {
    padding: 16px 20px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    margin-top: 20px;
}
/* Timeline / flow */
.dfi-ig-flow {
    display: flex;
    align-items: stretch;
    gap: 0;
    margin-bottom: 20px;
}
.dfi-ig-flow-step {
    flex: 1;
    padding: 16px 14px;
    text-align: center;
    position: relative;
    border-radius: 10px;
    margin: 0 2px;
}
.dfi-ig-flow-step-num {
    font-size: 26px;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 4px;
}
.dfi-ig-flow-step-title {
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 4px;
}
.dfi-ig-flow-step-text {
    font-size: 11px;
    line-height: 1.4;
}
.dfi-ig-flow-arrow {
    display: flex;
    align-items: center;
    font-size: 22px;
    color: var(--text-secondary);
    padding: 0 2px;
}
/* Versus split */
.dfi-ig-vs {
    display: grid;
    grid-template-columns: 1fr 48px 1fr;
    gap: 0;
    margin-bottom: 20px;
}
.dfi-ig-vs-side {
    padding: 20px;
    border-radius: 12px;
}
.dfi-ig-vs-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 800;
    color: var(--text-secondary);
}
.dfi-ig-vs-title {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 10px;
}
.dfi-ig-vs-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.dfi-ig-vs-list li {
    font-size: 12px;
    line-height: 1.6;
    padding: 4px 0;
    border-bottom: 1px solid rgba(128,128,128,0.15);
    color: var(--text-primary);
}
.dfi-ig-vs-list li:last-child { border-bottom: none; }
/* Donut ring (CSS only) */
.dfi-ig-donut-row {
    display: flex;
    gap: 28px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.dfi-ig-donut {
    text-align: center;
    width: 120px;
}
.dfi-ig-donut-ring {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 8px;
    position: relative;
}
.dfi-ig-donut-inner {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--bg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 800;
    z-index: 1;
}
.dfi-ig-donut-lbl {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
}
/* Badge list */
.dfi-ig-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.dfi-ig-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
    border: 1.5px solid;
}
/* Hand-drawn sketch infographic container */
.dfi-sketch-container {
    width: 100%;
    overflow-x: auto;
    padding: 8px 0;
}
.dfi-sketch-container svg {
    display: block;
    margin: 0 auto;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.06));
}

.mi-empty {
    font-size: 14px;
    color: var(--text-secondary);
    padding: 40px 20px;
    text-align: center;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .pa-kpi-row { grid-template-columns: repeat(3, 1fr); }
    .pa-exec-grid { grid-template-columns: 1fr; }
    .pa-dim-bar-row { grid-template-columns: 1fr; }
    .pa-dim-bar-label { text-align: left; }
    .pa-dim-leaders { grid-template-columns: 1fr; }
    .pa-sw-grid { grid-template-columns: 1fr; }
    .pa-ai-hist-label { width: 140px; }
}

/* ── Dark Mode: Market Insight Report & Graphics Contrast Fixes ── */

/* Scope: both .dfi-graphic-section and .mi-viz-box containers */
body.dark-mode .dfi-graphic-section table th[style*="background:#1a3a5c"],
body.dark-mode .dfi-graphic-section table th[style*="background: #1a3a5c"],
body.dark-mode .mi-viz-box table th[style*="background:#1a3a5c"],
body.dark-mode .mi-viz-box table th[style*="background: #1a3a5c"] {
    background: #2a4a6c !important;
}

/* Fix light pastel card backgrounds */
body.dark-mode .dfi-graphic-section div[style*="background:#f8f8f5"],
body.dark-mode .dfi-graphic-section div[style*="background: #f8f8f5"],
body.dark-mode .mi-viz-box div[style*="background:#f8f8f5"] {
    background: var(--bg-secondary) !important;
}
body.dark-mode .dfi-graphic-section div[style*="background:#f0fff0"],
body.dark-mode .dfi-graphic-section div[style*="background: #f0fff0"] {
    background: #1a2e1a !important;
}
body.dark-mode .dfi-graphic-section div[style*="background:#fff0f0"],
body.dark-mode .dfi-graphic-section div[style*="background: #fff0f0"] {
    background: #2e1a1a !important;
}
body.dark-mode .dfi-graphic-section div[style*="background:#f8f0ff"],
body.dark-mode .dfi-graphic-section div[style*="background: #f8f0ff"] {
    background: #241a2e !important;
}
body.dark-mode .dfi-graphic-section div[style*="background:#e0f0ff"],
body.dark-mode .dfi-graphic-section div[style*="background: #e0f0ff"] {
    background: #1a2638 !important;
}
body.dark-mode .dfi-graphic-section div[style*="background:#fff3e0"],
body.dark-mode .dfi-graphic-section div[style*="background: #fff3e0"] {
    background: #2e2215 !important;
}
body.dark-mode .dfi-graphic-section div[style*="background:#fffef8"],
body.dark-mode .mi-viz-box div[style*="background:#fffef8"] {
    background: var(--bg-secondary) !important;
}
body.dark-mode .dfi-graphic-section div[style*="background:#e6f4e6"],
body.dark-mode .dfi-graphic-section div[style*="background: #e6f4e6"] {
    background: #1a2e1a !important;
}
/* Additional pastel backgrounds used in shift-left graphics */
body.dark-mode .dfi-graphic-section div[style*="background:#f0fff4"],
body.dark-mode .dfi-graphic-section div[style*="background: #f0fff4"] {
    background: #1a2e1a !important;
}
body.dark-mode .dfi-graphic-section div[style*="background:#fff5f5"],
body.dark-mode .dfi-graphic-section div[style*="background: #fff5f5"] {
    background: #2e1a1a !important;
}
body.dark-mode .dfi-graphic-section div[style*="background:#fff8f0"],
body.dark-mode .dfi-graphic-section div[style*="background: #fff8f0"] {
    background: #2e2215 !important;
}
body.dark-mode .dfi-graphic-section div[style*="background:#f0faff"],
body.dark-mode .dfi-graphic-section div[style*="background: #f0faff"] {
    background: #1a2638 !important;
}
body.dark-mode .dfi-graphic-section div[style*="background:#f5f0ff"],
body.dark-mode .dfi-graphic-section div[style*="background: #f5f0ff"] {
    background: #241a2e !important;
}
body.dark-mode .dfi-graphic-section div[style*="background:#fafafa"],
body.dark-mode .dfi-graphic-section div[style*="background: #fafafa"] {
    background: var(--bg-secondary) !important;
}
body.dark-mode .dfi-graphic-section div[style*="background:#e0e0e0"] {
    background: var(--bg-tertiary) !important;
}
body.dark-mode .dfi-graphic-section div[style*="background:#ffe0e0"],
body.dark-mode .dfi-graphic-section div[style*="background: #ffe0e0"] {
    background: #3a1a1a !important;
}
body.dark-mode .dfi-graphic-section div[style*="background:#ffe6e6"],
body.dark-mode .dfi-graphic-section div[style*="background: #ffe6e6"] {
    background: #3a1a1a !important;
}
body.dark-mode .dfi-graphic-section div[style*="background:#f0fff0;border:1px solid"],
body.dark-mode .dfi-graphic-section div[style*="background:#f0faff;border:1px solid"],
body.dark-mode .dfi-graphic-section div[style*="background:#fff8f0;border:1px solid"] {
    background: var(--bg-secondary) !important;
}
/* Table row zone backgrounds */
body.dark-mode .dfi-graphic-section tr[style*="background:#f0fff4"],
body.dark-mode .dfi-graphic-section tr[style*="background: #f0fff4"] {
    background: #1a2e1a !important;
}
body.dark-mode .dfi-graphic-section tr[style*="background:#fff8f0"],
body.dark-mode .dfi-graphic-section tr[style*="background: #fff8f0"] {
    background: #2e2215 !important;
}
body.dark-mode .dfi-graphic-section tr[style*="background:#fff5f5"],
body.dark-mode .dfi-graphic-section tr[style*="background: #fff5f5"] {
    background: #2e1a1a !important;
}
/* Bar track backgrounds */
body.dark-mode .dfi-graphic-section div[style*="background:#e8e8e5"] {
    background: var(--bg-tertiary) !important;
}
/* Metric badges */
body.dark-mode .dfi-graphic-section div[style*="background:#f8f8f5;border-radius:8px;border:1px solid #e0ddd5"] {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

/* Fix dark text colors invisible on dark backgrounds */
body.dark-mode .dfi-graphic-section [style*="color:#555"],
body.dark-mode .dfi-graphic-section [style*="color: #555"],
body.dark-mode .dfi-graphic-section [style*="color:#555555"],
body.dark-mode .dfi-graphic-section [style*="color: #555555"],
body.dark-mode .mi-viz-box [style*="color:#555"],
body.dark-mode .mi-viz-box [style*="color: #555"] {
    color: var(--text-secondary) !important;
}
body.dark-mode .dfi-graphic-section [style*="color:#888"],
body.dark-mode .dfi-graphic-section [style*="color: #888"],
body.dark-mode .dfi-graphic-section [style*="color:#888888"],
body.dark-mode .dfi-graphic-section [style*="color: #888888"],
body.dark-mode .mi-viz-box [style*="color:#888"],
body.dark-mode .mi-viz-box [style*="color: #888"] {
    color: var(--text-tertiary) !important;
}
body.dark-mode .dfi-graphic-section [style*="color:#333"],
body.dark-mode .dfi-graphic-section [style*="color: #333"],
body.dark-mode .dfi-graphic-section [style*="color:#333333"],
body.dark-mode .dfi-graphic-section [style*="color: #333333"] {
    color: var(--text-primary) !important;
}
body.dark-mode .dfi-graphic-section [style*="color:#666"],
body.dark-mode .dfi-graphic-section [style*="color: #666"] {
    color: var(--text-secondary) !important;
}
body.dark-mode .dfi-graphic-section [style*="color:#777"],
body.dark-mode .dfi-graphic-section [style*="color: #777"] {
    color: var(--text-tertiary) !important;
}
body.dark-mode .dfi-graphic-section [style*="color:#1a3a5c"],
body.dark-mode .dfi-graphic-section [style*="color: #1a3a5c"] {
    color: #6baed6 !important;
}
body.dark-mode .dfi-graphic-section [style*="color:#600000"],
body.dark-mode .dfi-graphic-section [style*="color: #600000"],
body.dark-mode .mi-viz-box [style*="color:#600000"] {
    color: #e08080 !important;
}

/* Fix light borders on dark backgrounds */
body.dark-mode .dfi-graphic-section [style*="border:2px solid #e0ddd5"],
body.dark-mode .dfi-graphic-section [style*="border: 2px solid #e0ddd5"],
body.dark-mode .dfi-graphic-section [style*="border:1px solid #e0ddd5"],
body.dark-mode .dfi-graphic-section [style*="border: 1px solid #e0ddd5"],
body.dark-mode .dfi-graphic-section [style*="border-bottom:1px solid #e0e0e0"] {
    border-color: var(--border-color) !important;
}
body.dark-mode .dfi-graphic-section [style*="border-bottom:1px solid #d0e8d0"] {
    border-color: #2a4a2a !important;
}
body.dark-mode .dfi-graphic-section [style*="border-bottom:1px solid #e8d0d0"] {
    border-color: #4a2a2a !important;
}
/* White backgrounds in cards */
body.dark-mode .dfi-graphic-section div[style*="background:#fff;"],
body.dark-mode .dfi-graphic-section div[style*="background: #fff;"],
body.dark-mode .dfi-graphic-section div[style*="background:#ffffff"] {
    background: var(--bg-secondary) !important;
}

/* Fix gradient backgrounds (exec summary poster) */
body.dark-mode .dfi-graphic-section div[style*="linear-gradient(135deg,#1a3a5c"] {
    background: linear-gradient(135deg, #2a4a6c, #1a3a5c) !important;
}
body.dark-mode .dfi-graphic-section div[style*="linear-gradient(135deg,#f0faff"] {
    background: linear-gradient(135deg, var(--bg-secondary), var(--bg-tertiary)) !important;
}

/* Fix report text section colors */
body.dark-mode .report-section-block [style*="color:#605e5c"],
body.dark-mode .report-section-block [style*="color: #605e5c"],
body.dark-mode [style*="color:#605e5c"] {
    color: var(--text-secondary) !important;
}

/* Heatmap cells - boost visibility in dark mode */
body.dark-mode .dfi-hm-high { background: #107c1028; color: #4caf50; border-color: #107c1066; }
body.dark-mode .dfi-hm-mid  { background: #0078d428; color: #64b5f6; border-color: #0078d466; }
body.dark-mode .dfi-hm-low  { background: #ca501028; color: #ffab70; border-color: #ca501066; }
body.dark-mode .dfi-hm-crit { background: #a8000028; color: #ef5350; border-color: #a8000066; }

/* Boost pillar indicator colors for dark mode readability */
body.dark-mode .dfi-graphic-section [style*="color:#a80000"],
body.dark-mode .dfi-graphic-section [style*="color: #a80000"],
body.dark-mode .mi-viz-box [style*="color:#a80000"] {
    color: #ef5350 !important;
}
body.dark-mode .dfi-graphic-section [style*="color:#107c10"],
body.dark-mode .dfi-graphic-section [style*="color: #107c10"],
body.dark-mode .mi-viz-box [style*="color:#107c10"] {
    color: #66bb6a !important;
}
body.dark-mode .dfi-graphic-section [style*="color:#0078d4"],
body.dark-mode .dfi-graphic-section [style*="color: #0078d4"],
body.dark-mode .mi-viz-box [style*="color:#0078d4"] {
    color: #64b5f6 !important;
}
body.dark-mode .dfi-graphic-section [style*="color:#ca5010"],
body.dark-mode .dfi-graphic-section [style*="color: #ca5010"],
body.dark-mode .mi-viz-box [style*="color:#ca5010"] {
    color: #ffab70 !important;
}

/* Report content area: findings, recommendations, glossary cards */
body.dark-mode .report-section-block {
    border-color: var(--border-color);
}
body.dark-mode .report-section-block div[style*="background:#f9f9f9"],
body.dark-mode .report-section-block div[style*="background: #f9f9f9"],
body.dark-mode .report-section-block div[style*="background:#fafafa"],
body.dark-mode .report-section-block div[style*="background: #fafafa"],
body.dark-mode div[style*="background:#f9f9f9"],
body.dark-mode div[style*="background:#fafafa"] {
    background: var(--bg-secondary) !important;
}

/* Report export button */
body.dark-mode .report-export-btn {
    color: var(--text-secondary);
    border-color: var(--border-color);
}
body.dark-mode .report-export-btn:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

/* Fix roadmap gap badges in dark mode */
body.dark-mode .dfi-roadmap-gap.gap-critical { background: #a8000020; color: #ef5350; border-color: #a8000055; }
body.dark-mode .dfi-roadmap-gap.gap-strength { background: #107c1020; color: #66bb6a; border-color: #107c1055; }

/* Analysis section viz boxes - ensure readability */
body.dark-mode .mi-viz-box h4 {
    color: var(--text-primary) !important;
}
body.dark-mode .mi-dim-row {
    border-color: var(--border-color) !important;
}
body.dark-mode .mi-dim-label {
    color: var(--text-secondary) !important;
}
body.dark-mode .mi-dim-row .mi-dim-label strong {
    color: inherit !important;
}

/* ── Analyst Take ───────────────────────────────────────────────── */
.at-checklist {
    list-style: none;
    padding: 0;
    margin: 0;
}
.at-checklist li {
    padding: 6px 0 6px 28px;
    position: relative;
    line-height: 1.45;
    border-bottom: 1px solid var(--border-color);
}
.at-checklist li::before {
    content: '✓';
    position: absolute;
    left: 4px;
    color: #107c10;
    font-weight: 700;
}
.at-checklist li[style*="color:#a80000"]::before {
    content: '✗';
    color: #a80000;
}
.at-workflow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    padding: 12px 0;
}
.at-workflow-step {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
}
.at-workflow-arrow {
    font-size: 16px;
    color: var(--text-muted);
}
.at-ideation-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
}
.at-ideation-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 14px;
}
.at-ideation-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 6px;
}
.at-ideation-prompt {
    font-size: 13px;
    line-height: 1.45;
    color: var(--text-primary);
}

/* ── ASMF Matrix panel — full-width, no max-width cap ── */
#report-panel-asmf-matrix .report-document {
    max-width: none;
    padding: 24px 32px 60px;
}

/* ── ASMF inner-tab system ── */
.asmf-panel-full {
    display: none;
    height: 100%;
    min-width: 0;
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
}
.asmf-panel-full.active {
    display: flex;
}

.asmf-inner-tabbar {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 6px 16px 0;
    background: var(--bg-secondary);
    border-bottom: 2px solid var(--border-color);
    flex-shrink: 0;
    overflow-x: auto;
}

.asmf-inner-tab {
    padding: 7px 16px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    background: transparent;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    cursor: pointer;
    white-space: nowrap;
    position: relative;
    top: 2px;
    transition: color 0.15s, background 0.15s;
}
.asmf-inner-tab:hover { color: var(--text-primary); background: var(--bg-tertiary); }
.asmf-inner-tab.active {
    color: var(--text-primary);
    background: var(--bg-primary);
    border-color: var(--border-color);
    border-bottom: 2px solid var(--bg-primary);
}

.asmf-inner-panels {
    flex: 1;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    position: relative;
}

.asmf-inner-pane {
    display: none;
    position: absolute;
    inset: 0;
    min-width: 0;
    min-height: 0;
    overflow: auto;
}
.asmf-inner-pane.active { display: block; }

.asmf-pane-full {
    overflow: hidden;
}
.asmf-pane-full.active { display: flex; flex-direction: column; overflow: hidden; }

#asmf-content {
    width: 100%;
    max-width: none;
    min-width: 0;
    overflow-x: auto;
    padding: clamp(16px, 2.4vw, 32px) !important;
}

#asmf-content table { max-width: 100%; }
#asmf-content details,
#asmf-content summary,
#asmf-content div { min-width: 0; }

.asmf-visual-doc {
    width: 100%;
    max-width: none !important;
    margin: 0;
    padding: clamp(18px, 2.2vw, 32px) clamp(18px, 2.6vw, 36px) 60px !important;
    box-sizing: border-box;
}

.asmf-visual-doc > div[id^="asmf-"] { min-width: 0; }

.asmf-graph-layout {
    display: flex;
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.asmf-graph-canvas {
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    height: 100%;
}

.asmf-detail-panel {
    flex: 0 0 clamp(280px, 28vw, 420px);
    width: clamp(280px, 28vw, 420px);
    min-width: 260px;
    max-width: min(420px, 42vw);
    background: var(--bg-secondary);
    border-left: 1px solid var(--border-color);
    overflow-y: auto;
    padding: 20px 18px;
    box-sizing: border-box;
}

.asmf-orbital-host {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
}

.asmf-responsive-svg-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
}

.asmf-radar-layout,
.asmf-timeline-grid { min-width: 0; }

@media (max-width: 900px) {
    .asmf-graph-layout { flex-direction: column; }

    #asmf-orbital-content {
        flex-direction: column;
    }

    .asmf-detail-panel {
        flex: 0 0 min(42%, 360px);
        width: 100%;
        max-width: none;
        min-width: 0;
        border-left: 0;
        border-top: 1px solid var(--border-color);
    }

    #asmf-orbital-detail {
        flex: 0 0 min(42%, 360px) !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        border-left: 0 !important;
        border-top: 1px solid #334155 !important;
    }
}

@media (max-width: 700px) {
    .asmf-inner-tabbar {
        overflow-x: auto;
        flex-wrap: nowrap;
    }

    .asmf-visual-doc { padding: 16px 14px 48px !important; }
}

/* ── APEF Report inner tabs (mirror .asmf-inner-tab styling) ───────────── */
.apef-inner-tab {
    padding: 7px 14px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    background: transparent;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    cursor: pointer;
    white-space: nowrap;
    position: relative;
    top: 1px;
    transition: color 0.15s, background 0.15s;
}
.apef-inner-tab:hover { color: var(--text-primary); background: var(--bg-tertiary); }
.apef-inner-tab.active {
    color: var(--text-primary);
    background: var(--bg-primary);
    border-color: var(--border-color);
    border-bottom: 2px solid var(--bg-primary);
}
#apef-report-view.active { display: flex; flex-direction: column; }
/* The APEF/AICR report is authored entirely in a fixed dark palette (light text,
   dark cards) with colours hardcoded inline across many render functions and the
   D3/WebGL graphs — so it cannot be recoloured to a light theme via CSS without
   breaking contrast or interactivity. Render it as a self-contained dark canvas in
   BOTH app themes so every tab (Executive Overview, Dimensions Overview, Deep-Dives,
   Legend, …) keeps proper contrast, including in the app's light mode. This also
   matches the always-dark HTML export. */
#apef-report-view {
    --bg-primary: #0a0f1e;
    --bg-secondary: #0f172a;
    --bg-tertiary: #1e293b;
    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --text-tertiary: #64748b;
    --text-muted: #64748b;
    --border-color: #1e293b;
    --color-primary: #3b82f6;
    background: #0a0f1e;
    color: #f1f5f9;
}
#apef-report-view .apef-tabbar { background: #0a0f1e; }
#apef-report-view .apef-inner-pane { background: #0a0f1e; }
.apef-card {
    background: var(--bg-secondary, #0f172a);
    border: 1px solid var(--border-color, #1e293b);
    border-radius: 8px;
    padding: 16px 18px;
    margin-bottom: 14px;
}
.apef-card h3 { margin-top: 0; font-size: 15px; color: var(--text-primary, #f1f5f9); }
.apef-matrix-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.apef-matrix-table th, .apef-matrix-table td {
    border: 1px solid var(--border-color, #1e293b);
    padding: 10px 12px;
    vertical-align: top;
    text-align: left;
}
.apef-matrix-table th {
    background: var(--bg-tertiary, #1e293b);
    color: var(--text-primary, #f1f5f9);
    font-weight: 700;
    position: sticky; top: 0; z-index: 1;
}
.apef-matrix-table td { color: var(--text-secondary, #94a3b8); line-height: 1.5; }
.apef-matrix-table td.apef-vendor-col {
    background: var(--bg-secondary, #0f172a);
    color: var(--text-primary, #f1f5f9);
    font-weight: 700;
    position: sticky; left: 0; z-index: 1;
    min-width: 120px;
}
.apef-chip {
    display: inline-block;
    padding: 2px 9px;
    font-size: 11px;
    font-weight: 600;
    background: var(--bg-tertiary, #1e293b);
    color: var(--text-secondary, #94a3b8);
    border-radius: 999px;
    margin: 2px 4px 2px 0;
}
.apef-chip.layer { background: #1e3a5f; color: #93c5fd; }
.apef-fit-strong   { color: #34d399; font-weight: 700; }
.apef-fit-moderate { color: #fbbf24; font-weight: 700; }
.apef-fit-weak     { color: #f87171; font-weight: 700; }
/* PMO deep-links in docs (Build -> PMO references) */
.docs-link { color: #2f6aa8; text-decoration: underline; text-underline-offset: 2px; }
.docs-link:hover { color: #1f4e79; }
:root[data-theme="dark"] .docs-link, .dark-mode .docs-link { color: #79aadf; }
:root[data-theme="dark"] .docs-link:hover { color: #a9cdf0; }