:root {
    --bg-main: #0a0f18;
    --sidebar-bg: #111827;
    --card-bg: rgba(17, 24, 39, 0.7);
    --glass-border: rgba(255, 255, 255, 0.05);
    
    /* New Enterprise Tokens */
    --surface-primary: #0a0f18;
    --surface-secondary: #111827;
    --surface-tertiary: #1f2937;
    --surface-card: rgba(17, 24, 39, 0.7);
    --border-subtle: rgba(255, 255, 255, 0.05);
    --border-strong: rgba(255, 255, 255, 0.15);
    --table-header-bg: #111827;
    --table-row-hover: rgba(75, 137, 220, 0.05);

    --accent-blue: #4b89dc;
    --accent-indigo: #3572b2;
    --accent-glow: rgba(75, 137, 220, 0.15);
    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
    --sidebar-width: 280px;
    --sidebar-collapsed-width: 80px;
    --transition-speed: 0.3s;
    --radius-premium: 24px;
    --radius-standard: 12px;
    --radius-small: 8px;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    --font-outfit: 'Outfit', sans-serif;
    --font-inter: 'Inter', sans-serif;
    color-scheme: dark;

    /* Key Metrics Dashboard — 3D depth tokens */
    --km-perspective: 1400px;
    --km-tilt-rest: 0.55deg;
    --km-tilt-hover: 1.15deg;
    --km-lift-hover: 10px;
    --km-depth-shadow: 0 22px 48px -14px rgba(0, 0, 0, 0.55), 0 8px 20px rgba(0, 0, 0, 0.35);

    /* Global UI depth (subtle 3D across the app) */
    --shadow-premium:
        0 1px 0 rgba(255, 255, 255, 0.07) inset,
        0 -1px 0 rgba(0, 0, 0, 0.32) inset,
        0 22px 50px -14px rgba(0, 0, 0, 0.52);
    --ui-depth-tilt: 0.42deg;
    --ui-depth-tilt-hover: 0.95deg;
    --ui-depth-lift: 5px;
    --ui-depth-lift-strong: 9px;
    --ui-depth-z-hover: 11px;
    --ui-depth-perspective: 1500px;
}

body.light-theme {
    --bg-main: #f8fafc;
    --sidebar-bg: #ffffff;
    --card-bg: rgba(255, 255, 255, 0.85);
    --glass-border: rgba(15, 23, 42, 0.08);

    /* New Enterprise Tokens (Light) */
    --surface-primary: #f8fafc;
    --surface-secondary: #ffffff;
    --surface-tertiary: #f1f5f9;
    --surface-card: rgba(255, 255, 255, 0.85);
    --border-subtle: rgba(15, 23, 42, 0.08);
    --border-strong: rgba(15, 23, 42, 0.15);
    --table-header-bg: #f8fafc;
    --table-row-hover: rgba(75, 137, 220, 0.03);

    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #94a3b8;
    --accent-glow: rgba(75, 137, 220, 0.08);
    --shadow-lg: 0 12px 30px -10px rgba(0, 0, 0, 0.08);
    --km-depth-shadow: 0 18px 40px -12px rgba(15, 23, 42, 0.12), 0 6px 16px rgba(15, 23, 42, 0.06);
    --shadow-premium:
        0 1px 0 rgba(255, 255, 255, 0.78) inset,
        0 -1px 0 rgba(15, 23, 42, 0.06) inset,
        0 18px 44px -12px rgba(15, 23, 42, 0.1);
    color-scheme: light;
}


body.light-theme {
    background-image:
        radial-gradient(circle at 10% 20%, rgba(75, 137, 220, 0.03) 0%, transparent 40%),
        radial-gradient(circle at 90% 80%, rgba(53, 114, 178, 0.03) 0%, transparent 40%);
}

body.light-theme .glass {
    box-shadow: var(--shadow-premium);
}

body.light-theme .glass::before {
    background: linear-gradient(
        152deg,
        rgba(255, 255, 255, 0.55) 0%,
        rgba(255, 255, 255, 0.12) 35%,
        transparent 50%,
        rgba(15, 23, 42, 0.04) 100%
    );
    mix-blend-mode: multiply;
}

body.light-theme .glass::after {
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.02), transparent);
}

body.light-theme .glass:hover {
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.85) inset,
        0 -1px 0 rgba(15, 23, 42, 0.05) inset,
        0 22px 48px -12px rgba(15, 23, 42, 0.12),
        0 0 0 1px rgba(59, 130, 246, 0.12);
}

body.light-theme .spreadsheet-grid th {
    background: #f1f5f9;
    color: #475569;
    border-bottom: 1px solid #e2e8f0;
}

body.light-theme .spreadsheet-grid tr:hover td {
    background: #f1f5f9 !important;
}

body.light-theme .spreadsheet-grid td {
    border-bottom: 1px solid #f1f5f9;
}

body.light-theme .sidebar-logo-wrapper {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    border: 1px solid #f1f5f9;
}

body.light-theme .brand-text {
    background: linear-gradient(135deg, #1e293b 0%, var(--accent-blue) 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

body.light-theme .insights-panel {
    background: #ffffff;
    border-left: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.05);
}

body.light-theme .insights-gmail-table th {
    border-bottom-color: rgba(15, 23, 42, 0.1);
}

body.light-theme .insights-gmail-table td {
    border-bottom-color: rgba(15, 23, 42, 0.06);
}

body.light-theme .panel-header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

body.light-theme .p-metric-card {
    background: #f8fafc;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

body.light-theme .ai-search-bar-container {
    background: #ffffff;
    border: 1px solid var(--glass-border);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
}

body.light-theme .ai-search-bar-container input {
    color: #0f172a;
}

body.light-theme .skeleton-pulse {
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 200% 100%;
}

body.light-theme .breadcrumb-bar,
body.light-theme .utility-bar {
    background: rgba(255, 255, 255, 0.85);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.92) inset,
        0 12px 30px -10px rgba(15, 23, 42, 0.07);
}

body.light-theme .waterfall-metrics-bar {
    background: rgba(255, 255, 255, 0.6) !important;
    border: 1px solid var(--glass-border) !important;
}

body.light-theme .waterfall-metric {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02) !important;
}

body.light-theme .waterfall-metric label {
    color: var(--text-secondary) !important;
}

body.light-theme .waterfall-metric .wf-value {
    color: var(--text-primary) !important;
}

body.light-theme .intelligence-tag {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

body.light-theme .filter-chip select {
    border-color: rgba(0, 0, 0, 0.15);
    background-color: #ffffff;
}

body.light-theme .highlight-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(59, 130, 246, 0.08) 100%);
    border: 1px solid rgba(59, 130, 246, 0.3);
}

body.light-theme .empty-state-content h2 {
    color: var(--text-primary);
}

body.light-theme .empty-state-content p {
    color: var(--text-secondary);
}

body.light-theme .spreadsheet-grid tbody tr {
    background: #ffffff;
}

body.light-theme .spreadsheet-grid td {
    color: #0f172a;
}

body.light-theme .user-profile-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(241, 245, 249, 0.8) 100%);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
}

body.light-theme .user-profile-card .metric-label {
    color: var(--text-secondary);
}

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

/* Stable typographic baseline: keeps rem-based UI consistent across hosts/browsers. */
html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

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

::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    border: 2px solid transparent;
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
    background-clip: content-box;
}

/* For Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}

body {
    font-family: var(--font-inter);
    background-color: var(--bg-main);
    color: var(--text-primary);
    display: flex;
    height: 100vh;
    overflow: hidden;
    position: relative;
    background-image:
        radial-gradient(circle at 10% 20%, rgba(75, 137, 220, 0.05) 0%, transparent 40%),
        radial-gradient(circle at 90% 80%, rgba(53, 114, 178, 0.05) 0%, transparent 40%);
}

body::before {
    content: '';
    position: fixed;
    top: -100px;
    right: -100px;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.08) 0%, transparent 70%);
    filter: blur(80px);
    z-index: -1;
    pointer-events: none;
}

body::after {
    content: '';
    position: fixed;
    bottom: -100px;
    left: -100px;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.08) 0%, transparent 70%);
    filter: blur(80px);
    z-index: -1;
    pointer-events: none;
}

/* Glassmorphism Effect */
.glass {
    background: var(--card-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-premium);
    box-shadow: var(--shadow-premium);
    transition:
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.35s ease;
    position: relative;
    overflow: hidden;
    transform-style: preserve-3d;
    transform: translateZ(0) rotateX(var(--ui-depth-tilt));
}

.glass::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
        155deg,
        rgba(255, 255, 255, 0.1) 0%,
        rgba(255, 255, 255, 0.03) 38%,
        transparent 52%,
        rgba(0, 0, 0, 0.16) 100%
    );
    pointer-events: none;
    z-index: 0;
    mix-blend-mode: soft-light;
}

.glass::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
    z-index: 2;
    pointer-events: none;
}

.glass:hover {
    border-color: rgba(59, 130, 246, 0.22);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.09) inset,
        0 -1px 0 rgba(0, 0, 0, 0.28) inset,
        0 32px 64px -14px rgba(0, 0, 0, 0.62),
        0 0 28px rgba(59, 130, 246, 0.12);
    transform: translateY(calc(-1 * var(--ui-depth-lift-strong))) translateZ(var(--ui-depth-z-hover))
        rotateX(var(--ui-depth-tilt-hover));
}

/* Sidebar Styling */
.sidebar {
    width: var(--sidebar-width);
    background: var(--sidebar-bg);
    border-right: 1px solid var(--glass-border);
    display: flex;
    flex-direction: column;
    position: fixed;
    height: 100vh;
    z-index: 1000;
    transition: width var(--transition-speed) cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar.collapsed {
    width: var(--sidebar-collapsed-width);
}

.sidebar-header {
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    min-height: 65px;
    position: relative;
}

.sidebar.collapsed .sidebar-header {
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    padding: 0.5rem 0.35rem 0.6rem;
    gap: 0.45rem;
    min-height: auto;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    flex: 1 1 auto;
}

/* Leave room for the absolute-positioned collapse control */
.sidebar:not(.collapsed) .sidebar-brand {
    max-width: calc(100% - 44px);
}

.sidebar.collapsed .sidebar-brand {
    flex: 0 0 auto;
    justify-content: center;
    width: 100%;
}

.sidebar-logo-wrapper {
    background: white;
    padding: 4px 8px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 32px;
    max-width: 100%;
    flex-shrink: 0;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.sidebar-logo-img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.brand-text {
    font-family: var(--font-outfit);
    font-weight: 700;
    font-size: 0.95rem;
    background: linear-gradient(135deg, #fff 0%, var(--accent-blue) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: normal;
    margin-top: -2px;
    /* Visual balance with logo box */
}

.sidebar.collapsed .brand-text {
    display: none;
}

.sidebar.collapsed .sidebar-logo-wrapper {
    width: 44px;
    height: 44px;
    padding: 7px;
    border-radius: 10px;
    margin: 0 auto;
}

.sidebar-toggle-btn {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    background: var(--glass-surface);
    border: 1px solid var(--glass-border);
    color: var(--text-muted);
    width: 30px;
    height: 30px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 10;
    font-size: 0.72rem;
}

.sidebar-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    border-color: rgba(75, 137, 220, 0.45);
}

/* When collapsed, keep toggle visible and obvious (expand affordance) */
.sidebar.collapsed .sidebar-toggle-btn {
    position: static;
    transform: none;
    width: calc(100% - 6px);
    max-width: 44px;
    margin: 0 auto;
    flex-shrink: 0;
}

.sidebar.collapsed .toggle-icon {
    transform: none;
}

.sidebar-toggle-btn .toggle-icon i {
    pointer-events: none;
}

.mobile-close-btn {
    display: none;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.5rem;
}

.sidebar-nav {
    flex: 1;
    padding: 0 0.75rem;
    overflow-y: auto;
    scrollbar-width: none;
    /* Hide scrollbar for Chrome/Safari */
}

.sidebar-nav::-webkit-scrollbar {
    display: none;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 0.75rem 1.25rem;
    color: var(--text-secondary);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    margin-bottom: 0.25rem;
    white-space: nowrap;
    position: relative;
    font-weight: 500;
}

.nav-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 0;
    background: var(--accent-blue);
    border-radius: 0 4px 4px 0;
    transition: height 0.3s ease;
    box-shadow: 0 0 10px var(--accent-blue);
}

.nav-item.active::before {
    height: 50%;
}

.nav-item.active {
    background: rgba(59, 130, 246, 0.1);
    color: var(--text-primary);
}

.nav-item .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    min-width: 18px;
}

.nav-item .icon i {
    font-size: 0.92rem;
    opacity: 0.95;
}

.nav-item:hover {
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-primary);
    transform: translateX(4px);
}

.sidebar.collapsed .nav-item:hover {
    transform: none;
}

.sidebar.collapsed .nav-item {
    padding: 0.8rem;
    justify-content: center;
}

.nav-item .icon {
    font-size: 1.2rem;
    min-width: 24px;
    display: flex;
    justify-content: center;
}

.nav-item .label {
    transition: opacity var(--transition-speed);
}

.nav-parent .dropdown-caret {
    margin-left: auto;
    opacity: 0.6;
    font-size: 14px;
    transition: transform 0.15s ease;
}

.nav-parent[aria-expanded="true"] .dropdown-caret {
    transform: rotate(90deg);
}

.nav-submenu {
    display: none;
    margin: 0.25rem 0 0.5rem 0;
    padding-left: 2.6rem;
}

.nav-submenu.open {
    display: grid;
    gap: 0.25rem;
}

.nav-submenu-item {
    padding: 0.6rem 0.75rem;
    border-radius: 10px;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
    transition: background 0.15s ease, color 0.15s ease;
}

.nav-submenu-item:hover {
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-primary);
}

.nav-submenu-item.active {
    background: rgba(59, 130, 246, 0.12);
    color: var(--text-primary);
}

.settings-checklist {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    max-height: 520px;
    overflow: auto;
    padding-right: 6px;
}

.settings-checklist .check-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid var(--border-subtle);
    background: rgba(255,255,255,0.02);
}

.settings-checklist .check-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
}

.settings-checklist .check-item .key {
    font-family: var(--font-inter);
    color: var(--text-primary);
    font-size: 0.9rem;
}

.settings-checklist .check-item .meta {
    margin-left: auto;
    color: var(--text-muted);
    font-size: 0.75rem;
}

.views-filters-bar {
    align-items: flex-end;
    gap: 14px;
    flex-wrap: wrap;
}

#views-view .views-filters-left {
    flex: 1 1 320px;
    min-width: 280px;
}

#views-view .views-filter-grid {
    flex: 3 1 560px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    align-items: end;
    grid-auto-flow: dense;
}

#views-view .filter-group {
    margin: 0;
}

#views-view .filter-group label {
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 6px;
    display: block;
}

#views-view select.mini-select,
#views-view input.mini-select {
    width: 100%;
    height: 38px;
    border-radius: 999px;
    padding: 0 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
    outline: none;
}

#views-view .custom-select-wrapper {
    width: 100%;
    display: flex;
}

#views-view .custom-select-wrapper select.mini-select {
    min-width: 140px;
}

#views-view input[type="date"].mini-select {
    min-width: 160px;
}

#views-view input.mini-select::placeholder {
    color: var(--text-muted);
}

#views-view .views-date-range {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* Make custom date range sit nicely (span) */
#views-view #custom-date-range {
    grid-column: span 2;
}

#views-view .views-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

#views-view .ai-search-bar-wrapper {
    margin-bottom: 0;
}

@media (max-width: 980px) {
    #views-view .views-actions {
        width: 100%;
        justify-content: flex-end;
    }
    #views-view .views-date-range {
        grid-template-columns: 1fr;
    }
}

.sidebar.collapsed .nav-submenu {
    display: none !important;
}

.sidebar.collapsed .nav-item .label {
    opacity: 0;
    display: none;
}

.nav-item:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
    transform: translateX(4px);
}

.sidebar.collapsed .nav-item:hover {
    transform: none;
}

.nav-item.active {
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.15) 0%, rgba(59, 130, 246, 0) 100%);
    color: var(--accent-blue);
    border-left: 3px solid var(--accent-blue);
    border-radius: 4px 12px 12px 4px;
}

.sidebar-footer {
    padding: 0.75rem 0.75rem 1.5rem 0.75rem;
    border-top: 1px solid var(--glass-border);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background: var(--sidebar-bg);
}

.role-simulator {
    padding: 0.75rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
}

.role-simulator label {
    display: block;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

.role-simulator select {
    width: 100%;
    background: transparent;
    border: none;
    color: var(--accent-blue);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    outline: none;
    font-family: var(--font-outfit);
}

.system-status {
    font-size: 0.75rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.status-dot {
    width: 6px;
    height: 6px;
    background: var(--success);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--success);
}

/* Main Content Area */
.app-main {
    margin-left: var(--sidebar-width);
    flex: 0 0 auto;
    width: calc(100vw - var(--sidebar-width));
    max-width: calc(100vw - var(--sidebar-width));
    min-width: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    transition: margin-left var(--transition-speed) cubic-bezier(0.4, 0, 0.2, 1);
    perspective: var(--ui-depth-perspective);
    perspective-origin: 50% 8%;
    transform-style: preserve-3d;
}

.sidebar.collapsed+.app-main {
    margin-left: var(--sidebar-collapsed-width);
    width: calc(100vw - var(--sidebar-collapsed-width));
    max-width: calc(100vw - var(--sidebar-collapsed-width));
}

.utility-bar {
    min-height: 80px;
    padding: 0.5rem 2rem;
    background: rgba(3, 7, 18, 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--glass-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 50;
}

.navigation-group {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.view-section {
    display: none;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    transform-style: preserve-3d;
    /* Restore scrollbar for all pages */
}

.view-section.active {
    display: flex;
}

.view-section.active .metric-card:nth-child(1) {
    animation: slideInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.view-section.active .metric-card:nth-child(2) {
    animation: slideInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}

.view-section.active .metric-card:nth-child(3) {
    animation: slideInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}

.view-section.active .data-section {
    animation: slideInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
}

.view-section.active .chart-section {
    animation: slideInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both;
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.view-title {
    font-family: var(--font-outfit);
    font-size: 1.5rem;
    font-weight: 700;
}

.filter-container {
    display: flex;
    gap: 2rem;
    align-items: center;
}

.filter-chip {
    display: flex;
    flex-direction: column;
}

.filter-chip label {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.custom-select-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 24px;
    padding: 0;
    overflow: hidden;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.custom-select-wrapper::after {
    content: '';
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394a3b8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    pointer-events: none;
    z-index: 10;
}

.custom-select-wrapper:hover {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.3);
}

.custom-select-wrapper select.mini-select {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 20;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    color: var(--text-primary) !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    font-family: var(--font-outfit) !important;
    padding: 0.6rem 2.8rem 0.6rem 1.25rem !important;
    box-shadow: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    outline: none !important;
    margin: 0 !important;
}

.custom-select-wrapper select:hover {
    background-color: transparent !important;
    border-color: transparent !important;
}

.custom-select-wrapper select option {
    background-color: #0f172a;
    color: #f8fafc;
    padding: 12px;
}

/* Global Select/Option Contrast Fix & Native Style Override */
select {
    color-scheme: dark;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

select option {
    background-color: #0f172a !important;
    color: #f8fafc !important;
}

.action-section {
    display: flex;
    gap: 1rem;
}

/* Dashboard Content */
.dashboard-content {
    padding: 2.5rem 2rem;
    max-width: 1600px;
    width: 100%;
    margin: 0 auto;
}

/* Hero Section */
.hero-section {
    margin-bottom: 2.5rem;
}

.user-profile-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2rem 2.5rem;
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.4) 0%, rgba(15, 23, 42, 0.6) 100%);
    box-shadow: var(--shadow-premium);
    border-radius: 20px;
}

.user-meta {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.avatar-large {
    width: 72px;
    height: 72px;
    background: linear-gradient(135deg, var(--accent-blue), var(--accent-indigo));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 700;
    font-family: var(--font-outfit);
}

.user-details h1,
.h1-select {
    font-family: var(--font-outfit);
    font-size: 1.8rem;
    /* Slightly reduced for better fit */
    font-weight: 700;
    background: transparent;
    border: none;
    color: var(--text-primary);
    outline: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    padding-right: 2.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%233b82f6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 1.5rem;
    line-height: 1.2;
}

.h1-select option {
    background-color: #0f172a;
    color: #f8fafc;
    font-size: 1.1rem;
}

.user-details p {
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.roi-highlight {
    text-align: right;
}

.metric-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    letter-spacing: 0.1em;
}

.metric-value-container {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

#x-factor {
    font-family: var(--font-outfit);
    font-size: 4.5rem;
    line-height: 1;
    background: linear-gradient(180deg, #fff 30%, var(--accent-blue) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0.5rem 0;
    font-weight: 800;
    letter-spacing: -0.02em;
    filter: drop-shadow(0 0 20px rgba(59, 130, 246, 0.3));
}

.year-select {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--glass-border);
    color: var(--text-secondary);
    padding: 0.3rem 0.6rem;
    border-radius: 4px;
    font-size: 0.8rem;
    cursor: pointer;
}

/* Metrics Grid */
.metrics-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-bottom: 2.5rem;
}

.metric-card {
    padding: 2.25rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 180px;
}

.metric-card h3 {
    font-size: 0.9rem;
    color: var(--text-secondary);
    font-weight: 500;
    letter-spacing: 0.02em;
}

.card-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.card-header h3 {
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.trend-pos {
    color: var(--success);
    font-size: 0.8rem;
}

.trend-neu {
    color: var(--text-muted);
    font-size: 0.8rem;
}

.card-value {
    font-family: var(--font-outfit);
    font-size: 2.2rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.card-footer {
    font-size: 0.7rem;
    color: var(--accent-blue);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.highlight-card {
    border: 1px solid rgba(59, 130, 246, 0.3);
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.4) 0%, rgba(59, 130, 246, 0.05) 100%);
}

/* Content Grid */
.content-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 2rem;
}

.content-grid.second-row {
    margin-top: 2rem;
    grid-template-columns: 1fr;
}

.full-width {
    grid-column: 1 / -1;
}

.data-section,
.chart-section {
    padding: 1.5rem;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
}

.section-header h2 {
    font-family: var(--font-outfit);
    font-size: 1.25rem;
    font-weight: 600;
}

.governance-meta {
    text-align: right;
}

.governance-meta p {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* --- UNIFIED COMPONENTS --- */

/* Tables */
table, .table-enterprise, .spreadsheet-grid {
    width: 100%;
    border-collapse: collapse;
    background: transparent;
}

th, .table-enterprise th, .spreadsheet-grid th {
    text-align: left;
    padding: 1rem;
    color: var(--text-muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-bottom: 2px solid var(--border-subtle);
    background: var(--table-header-bg);
}

td, .table-enterprise td, .spreadsheet-grid td {
    padding: 1rem;
    border-bottom: 1px solid var(--border-subtle);
    font-size: 0.9rem;
    color: var(--text-secondary);
    transition: background 0.2s;
}

tr:hover td, .table-enterprise tr:hover td, .spreadsheet-grid tr:hover td {
    background: var(--table-row-hover);
}

/* Cards */
.card-premium, .glass, .metric-card, .p-metric-card, .user-profile-card, .nav-card {
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-standard);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 2rem;
    box-shadow: var(--shadow-md);
    transition: border-color 0.3s, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
    transform-style: preserve-3d;
}

.card-premium:not(.glass),
.metric-card:not(.glass),
.nav-card:not(.glass),
.p-metric-card,
.user-profile-card:not(.glass) {
    transform: translateZ(0) rotateX(var(--ui-depth-tilt));
}

.card-premium:hover:not(.glass),
.metric-card:hover:not(.glass),
.nav-card:hover:not(.glass) {
    border-color: var(--border-strong);
    transform: translateY(calc(-1 * var(--ui-depth-lift))) translateZ(var(--ui-depth-z-hover))
        rotateX(var(--ui-depth-tilt-hover));
    box-shadow: var(--shadow-lg);
}

/* Buttons */
.primary-btn, .btn-primary {
    background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-indigo) 100%);
    color: white !important;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-standard);
    font-weight: 600;
    font-family: var(--font-inter);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.22) inset,
        0 -1px 0 rgba(0, 0, 0, 0.22) inset,
        var(--shadow-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-decoration: none;
    transform-style: preserve-3d;
    transform: translateZ(0);
}

.primary-btn:hover, .btn-primary:hover {
    transform: translateY(-2px) translateZ(8px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.28) inset,
        0 -1px 0 rgba(0, 0, 0, 0.18) inset,
        var(--shadow-lg);
    filter: brightness(1.1);
}

.primary-btn:active, .btn-primary:active {
    transform: translateY(0) translateZ(0) scale(0.96);
}

.secondary-btn, .btn-secondary, .ghost-btn, .mini-tag-btn {
    background: var(--surface-tertiary);
    color: var(--text-primary) !important;
    border: 1px solid var(--border-subtle);
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-standard);
    font-weight: 500;
    font-family: var(--font-inter);
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-decoration: none;
}

.secondary-btn:hover, .btn-secondary:hover, .ghost-btn:hover, .mini-tag-btn:hover {
    background: var(--table-row-hover);
    border-color: var(--border-strong);
    transform: translateY(-1px);
}


.secondary-btn {
    background: transparent;
    border: 1px solid var(--glass-border);
    color: var(--text-primary);
    padding: 0.7rem 1.5rem;
    border-radius: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.secondary-btn:hover:not(.disabled) {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--accent-blue);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

body.light-theme .secondary-btn {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.08);
}

body.light-theme .secondary-btn:hover:not(.disabled) {
    background: rgba(0, 0, 0, 0.08);
    border-color: var(--accent-blue);
}

.primary-btn.disabled,
.secondary-btn.disabled,
.ghost-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    filter: grayscale(0.5);
    pointer-events: all;
    background: var(--glass-surface);
    border-color: var(--glass-border);
    box-shadow: none;
    transform: none !important;
}

.ghost-btn {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--glass-border);
    color: var(--text-primary);
    padding: 0.7rem 1.5rem;
    border-radius: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.ghost-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--accent-blue);
    color: var(--text-primary);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.ghost-btn:active {
    transform: translateY(0) scale(0.96);
}

/* Chart Area */
.chart-wrapper {
    height: 350px;
    position: relative;
    padding-top: 1rem;
}

/* Field Selector Chips */
.field-chips-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 5px;
    padding: 1.25rem;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 24px;
    border: 1px solid var(--glass-border);
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.1);
    min-height: 100px;
}

body.light-theme .field-chips-container {
    background: rgba(0, 0, 0, 0.02);
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.02);
}

.field-chip {
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
}

body.light-theme .field-chip {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.08);
}

.field-chip:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
    color: var(--text-primary);
}

body.light-theme .field-chip:hover {
    background: rgba(0, 0, 0, 0.08);
    border-color: rgba(0, 0, 0, 0.15);
}

.field-chip.selected {
    background: var(--accent-blue);
    color: white;
    border-color: var(--accent-blue);
    box-shadow: 0 4px 15px rgba(75, 137, 220, 0.4);
    transform: translateY(-2px);
}

.active-pill {
    background: var(--accent-primary);
    color: white !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
}

.active-pill span {
    cursor: pointer;
    font-weight: bold;
}

/* Footer Tag */
.app-footer {
    margin-top: 3rem;
    display: flex;
    justify-content: center;
}

.intelligence-tag {
    background: rgba(255, 255, 255, 0.05);
    padding: 0.6rem 1.2rem;
    border-radius: 50px;
    font-size: 0.8rem;
    color: var(--text-muted);
    border: 1px solid var(--glass-border);
}

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

/* Tooling & Utility Extras */
.badge {
    background: rgba(59, 130, 246, 0.1);
    color: var(--accent-blue);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}

.category-chip {
    background: rgba(255, 255, 255, 0.05);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.status-badge {
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    font-weight: 700;
}

.status-badge.active {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success);
}

.status-badge.deprovisioned,
.status-badge.inactive {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
}

.semi-bold {
    font-weight: 600;
    color: var(--text-primary);
}

.text-right {
    text-align: right;
}

.amount-cell {
    font-family: var(--font-outfit);
    font-weight: 600;
}

/* Modals */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(4, 7, 12, 0.85);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 200;
    animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

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

.modal-content {
    width: 100%;
    max-width: 500px;
    padding: 3rem;
    position: relative;
    background: linear-gradient(165deg, rgba(30, 41, 59, 0.95) 0%, rgba(15, 23, 42, 0.98) 100%);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 32px;
    overflow: hidden;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.08) inset,
        0 -1px 0 rgba(0, 0, 0, 0.35) inset,
        0 28px 56px -14px rgba(0, 0, 0, 0.72),
        0 0 40px rgba(59, 130, 246, 0.1);
    transform: translateZ(0) rotateX(var(--ui-depth-tilt));
    transform-style: preserve-3d;
    animation: modalSlideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes modalSlideUp {
    from {
        opacity: 0;
        transform: translateY(20px) translateZ(-12px) scale(0.98) rotateX(2.2deg);
    }

    to {
        opacity: 1;
        transform: translateY(0) translateZ(0) scale(1) rotateX(var(--ui-depth-tilt));
    }
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: -3rem -3rem 2rem -3rem;
    padding: 3rem 3rem 2rem 3rem;
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.modal-header h2 {
    font-family: var(--font-outfit);
    font-size: 1.75rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, #fff 0%, #cbd5e1 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.modal-header .close-modal {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-muted);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.modal-header .close-modal:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    transform: rotate(90deg);
}

.modal-form {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-group label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.form-group input,
.form-group select,
.form-group .custom-select-wrapper {
    height: 52px !important;
    /* Standardize height */
    box-sizing: border-box !important;
}

.form-group input,
.form-group .custom-select-wrapper {
    background: rgba(0, 0, 0, 0.25) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: var(--text-primary) !important;
    padding: 0 1.5rem !important;
    border-radius: 99px !important;
    font-family: var(--font-inter) !important;
    font-size: 0.95rem !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    outline: none !important;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.3) !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    margin: 0 !important;
    display: flex;
    align-items: center;
    width: 100% !important;
    line-height: normal !important;
    /* Ensure text isn't cut off */
}

/* Ensure inputs behave correctly with height */
.form-group input {
    height: 52px !important;
    padding: 0 1.5rem !important;
    display: block !important;
    line-height: normal !important;
}

/* Specific fix for select inside wrapper in modals */
.form-group .custom-select-wrapper select.mini-select {
    height: 100% !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    display: flex;
    align-items: center;
}

.form-group input:focus,
.form-group select:focus {
    background: rgba(15, 23, 42, 0.4) !important;
    border-color: var(--accent-blue) !important;
    box-shadow: 0 0 0 4px rgba(75, 137, 220, 0.15), inset 0 2px 8px rgba(0, 0, 0, 0.4) !important;
    transform: translateY(-1px) !important;
}

.form-group input::placeholder,
.form-group select::placeholder {
    color: rgba(255, 255, 255, 0.3) !important;
    font-weight: 400 !important;
}

body.light-theme .form-group input,
body.light-theme .form-group select {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.08);
    color: var(--text-primary);
}

body.light-theme .form-group input:focus,
body.light-theme .form-group select:focus {
    background: #ffffff;
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1), inset 0 2px 4px rgba(0, 0, 0, 0.02);
}

body.light-theme .modal-content {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.95) inset,
        0 -1px 0 rgba(15, 23, 42, 0.04) inset,
        0 28px 56px -14px rgba(15, 23, 42, 0.12);
}

body.light-theme .modal-header h2 {
    background: linear-gradient(135deg, #0f172a 0%, #334155 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

body.light-theme .modal-actions .ghost-btn {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.1);
    color: var(--text-secondary);
}

body.light-theme .modal-actions .ghost-btn:hover {
    background: rgba(0, 0, 0, 0.06);
    color: var(--text-primary);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.2rem;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 1.2rem;
    margin: 2.5rem -3rem -1rem -3rem;
    padding: 2rem 3rem 1rem 3rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.modal-actions .ghost-btn {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
    padding: 0 1.8rem;
    height: 44px;
    border-radius: 99px;
    font-weight: 500;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    width: auto !important;
    /* Reset any circular overrides */
}

.modal-actions .ghost-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    transform: translateY(-1px);
}

.modal-actions .primary-btn {
    background: linear-gradient(135deg, var(--accent-blue) 0%, #6366f1 100%);
    border: none;
    box-shadow: 0 8px 20px -6px rgba(59, 130, 246, 0.5);
    padding: 0 2rem;
    height: 44px;
    border-radius: 99px;
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
}

.modal-actions .primary-btn:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 12px 25px -8px rgba(59, 130, 246, 0.6);
    filter: brightness(1.1);
}

.modal-actions .primary-btn:active {
    transform: translateY(0) scale(0.98);
}

.modal-helper {
    font-size: 0.85rem;
    color: var(--text-secondary);
    background: rgba(59, 130, 246, 0.1);
    padding: 0.8rem;
    border-radius: 8px;
    border-left: 3px solid var(--accent-blue);
}

/* Footer & Intelligence Tag */
.app-footer {
    display: flex;
    justify-content: center;
    padding: 3rem 0;
    width: 100%;
}

.intelligence-tag {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: rgba(15, 23, 42, 0.6);
    padding: 0.75rem 1.5rem;
    border-radius: 99px;
    border: 1px solid var(--glass-border);
    font-size: 0.8rem;
    color: var(--text-secondary);
    box-shadow: var(--shadow-premium);
}

.sparkle {
    font-size: 1.1rem;
}

/* Ensure Metrics Grid is visible */
.hero-section {
    margin-bottom: 2rem;
}

.metrics-grid {
    margin-bottom: 2.5rem;
}

.dashboard-content {
    padding-bottom: 5rem;
    /* Space for footer */
}

/* Mobile Toggle Button */
.mobile-only-btn {
    display: none;
    background: transparent;
    border: 1px solid var(--glass-border);
    color: var(--text-primary);
    width: 40px;
    height: 40px;
    border-radius: 8px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

/* Premium Card Interactions */
.metric-card,
.data-section,
.chart-section {
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.metric-card:hover:not(.glass),
.data-section:hover,
.chart-section:hover {
    transform: translateY(calc(-1 * var(--ui-depth-lift-strong))) translateZ(var(--ui-depth-z-hover))
        rotateX(var(--ui-depth-tilt-hover));
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.06) inset,
        0 -1px 0 rgba(0, 0, 0, 0.25) inset,
        0 18px 40px -12px rgba(0, 0, 0, 0.55);
    border-color: rgba(59, 130, 246, 0.4);
}

.metric-card.glass:hover {
    border-color: rgba(59, 130, 246, 0.35);
}

/* Responsive Media Queries */
@media (max-width: 1024px) {
    .metrics-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .content-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    :root {
        --sidebar-width: 0px;
        /* Hide by default on mobile */
    }

    .app-main {
        margin-left: 0;
        width: 100vw;
        max-width: 100vw;
    }

    .sidebar {
        left: -280px;
        width: 280px !important;
        transition: left var(--transition-speed) ease;
    }

    .sidebar.mobile-active {
        left: 0;
    }

    .sidebar.mobile-active+.app-main {
        margin-left: 0;
        /* Keep main content covered or pushed? Covered is more common for drawers */
    }

    .mobile-only-btn {
        display: flex;
    }

    .mobile-close-btn {
        display: block;
    }

    .metrics-grid {
        grid-template-columns: 1fr;
    }

    .sidebar-toggle-btn {
        display: none;
        /* Hide collapse btn on mobile drawer */
    }

    .utility-bar {
        padding: 0 1rem;
    }

    .filter-container {
        gap: 1rem;
    }

    .user-profile-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
    }

    .roi-highlight {
        text-align: left;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
    }

    .action-section {
        display: none;
        /* Hide secondary actions on mobile for now or move to menu */
    }

    .dashboard-content {
        padding: 1.5rem 1rem;
    }
}

@media (max-width: 480px) {
    .view-title {
        font-size: 1.25rem;
    }

    .avatar-large {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }

    .h1-select {
        font-size: 1.5rem;
    }

    #x-factor {
        font-size: 2.5rem;
    }
}

/* Mobile Backdrop */
.mobile-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 999;
}

.mobile-backdrop.active {
    display: block;
}

/* Refresh Button Styles */
.refresh-group {
    display: flex;
    align-items: center;
}

#last-refreshed,
#refresh-limit-msg {
    margin: 0;
    line-height: 1;
    font-weight: 500;
}

#last-refreshed {
    font-size: 0.65rem;
    color: var(--text-muted);
}

#refresh-limit-msg {
    font-size: 0.6rem;
    color: var(--warning);
}

.primary-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--glass-surface);
    border-color: var(--glass-border);
    color: var(--text-muted);
}

/* Welcome Screen */
.welcome-screen {
    padding-top: 5rem;
}

.welcome-header {
    margin-bottom: 3rem;
    text-align: center;
}

.welcome-header h1 {
    font-family: var(--font-outfit);
    font-size: 3rem;
    margin-bottom: 0.5rem;
}

.profile-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 3rem;
    align-items: start;
    max-width: 1400px;
    margin: 0 auto;
}

.profile-main-card {
    padding: 3.5rem;
    display: flex;
    flex-direction: column;
    gap: 3.5rem;
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.6) 0%, rgba(15, 23, 42, 0.8) 100%);
    border: 1px solid var(--glass-border);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    position: relative;
    overflow: hidden;
}

.profile-main-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent-blue), transparent);
    opacity: 0.5;
}

.profile-hero {
    display: flex;
    align-items: center;
    gap: 3rem;
}

.company-logo-container {
    width: 130px;
    height: 130px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.profile-logo {
    width: 100%;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.2));
}

.avatar-huge {
    width: 120px;
    height: 120px;
    background: linear-gradient(135deg, var(--sidebar-bg), var(--bg-main));
    border-radius: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-premium);
}

.profile-info h2 {
    font-family: var(--font-outfit);
    font-size: 2rem;
}

.profile-quick-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
}

.stat-pill {
    background: rgba(255, 255, 255, 0.02);
    padding: 1.5rem 2rem;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: all 0.3s ease;
}

.stat-pill:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(59, 130, 246, 0.3);
    transform: translateY(-4px);
}

.stat-pill label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.75rem;
}

.stat-pill .val {
    font-family: var(--font-outfit);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}

.quick-nav-cards {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.nav-card {
    padding: 1.5rem 2rem;
    cursor: pointer;
    position: relative;
    transition: all 0.4s ease;
}

.nav-card:hover {
    transform: translateX(8px);
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--accent-blue);
}

.nav-card h3 {
    font-family: var(--font-outfit);
    font-size: 1.25rem;
    margin-bottom: 0.25rem;
}

.nav-card p {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.nav-arrow {
    position: absolute;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5rem;
    color: var(--accent-blue);
    opacity: 0.5;
}

.nav-card.highlight {
    background: linear-gradient(135deg, rgba(75, 137, 220, 0.1) 0%, transparent 100%);
    border-color: rgba(75, 137, 220, 0.3);
}

.nav-card.disabled {
    opacity: 0.6;
    cursor: not-allowed;
    filter: grayscale(0.8);
    pointer-events: all;
    /* Keep pointer events so tooltip (title) shows up */
}

.nav-card.disabled:hover {
    transform: none;
    background: var(--glass-surface);
    border-color: var(--glass-border);
}

/* Tool Detail View */
.vendor-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    margin-top: 1rem;
}

.detail-item label {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.detail-item span {
    font-family: var(--font-outfit);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
}

#back-to-tools {
    font-size: 0.9rem;
    font-weight: 600;
}

/* Active Row in Tables */
.clickable-row {
    cursor: pointer;
}

/* Lifecycle Tags & Admin UI */
.lifecycle-dates-row {
    margin-top: 0.5rem;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.lifecycle-tag {
    padding: 0.25rem 0.75rem;
    background: rgba(59, 130, 246, 0.15);
    border: 1px solid rgba(59, 130, 246, 0.3);
    color: #60a5fa;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
}

.mini-tag-btn {
    padding: 0.2rem 0.6rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-dim);
    border-radius: 6px;
    font-size: 0.7rem;
    cursor: pointer;
    transition: all 0.2s;
    margin-left: 0.5rem;
}

.mini-tag-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--accent);
    color: var(--text-main);
}

.id-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.modal-helper {
    background: rgba(255, 255, 255, 0.05);
    padding: 0.75rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
    border-left: 3px solid var(--accent);
}

.input-hint {
    font-size: 0.75rem;
    color: var(--text-dim);
    margin-top: 0.4rem;
}

.input-with-icon {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    padding: 0 0.8rem;
}

.input-with-icon .currency-tag {
    color: var(--text-muted);
    font-family: var(--font-outfit);
    font-weight: 600;
}

.input-with-icon input {
    border: none !important;
    background: transparent !important;
    width: 100%;
}

.clickable-row:hover td {
    background: rgba(59, 130, 246, 0.05);
}

/* =========================================
   PHASE 39: UI/UX ENHANCEMENTS
   ========================================= */

/* Skeleton Loading States */
.skeleton {
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0.05) 0%,
            rgba(255, 255, 255, 0.1) 50%,
            rgba(255, 255, 255, 0.05) 100%);
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
    border-radius: 8px;
    height: 20px;
    margin: 4px 0;
}

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

.skeleton-row {
    display: table-row;
}

.skeleton-row td {
    padding: 1rem;
}

.skeleton-text {
    height: 16px;
    border-radius: 4px;
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0.05) 0%,
            rgba(255, 255, 255, 0.1) 50%,
            rgba(255, 255, 255, 0.05) 100%);
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
}

/* Sortable Table Headers */
th.sortable {
    cursor: pointer;
    user-select: none;
    position: relative;
    transition: all 0.2s ease;
}

th.sortable:hover {
    color: var(--accent-blue);
    background: rgba(255, 255, 255, 0.02);
}

th.sortable::after {
    content: '⇅';
    margin-left: 0.5rem;
    opacity: 0.3;
    font-size: 0.8rem;
}

th.sortable.sort-asc::after {
    content: '↑';
    opacity: 1;
    color: var(--accent-blue);
}

th.sortable.sort-desc::after {
    content: '↓';
    opacity: 1;
    color: var(--accent-blue);
}

/* Status Pills */
.status-pill {
    display: inline-block;
    padding: 0.35rem 0.85rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.status-pill.active {
    background: rgba(16, 185, 129, 0.15);
    color: var(--success);
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.status-pill.inactive {
    background: rgba(100, 116, 139, 0.15);
    color: var(--text-muted);
    border: 1px solid rgba(100, 116, 139, 0.3);
}

/* Empty States */
.empty-state {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--text-muted);
}

.empty-state-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
    opacity: 0.3;
}

.empty-state h3 {
    font-size: 1.25rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.empty-state p {
    font-size: 0.9rem;
    color: var(--text-muted);
    max-width: 400px;
    margin: 0 auto;
}

/* Interactive Chart Cursor */
/* Interactive Chart Cursor */
.chart-wrapper canvas {
    cursor: pointer;
}



/* Empty Dashboard State */
.empty-dashboard-state {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60vh;
    text-align: center;
    animation: fadeIn 0.5s ease-out;
}

.empty-state-content {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 3rem;
    border-radius: 16px;
    backdrop-filter: blur(10px);
    max-width: 400px;
}

.empty-state-content .icon-large {
    font-size: 4rem;
    margin-bottom: 1.5rem;
    opacity: 0.8;
}

.empty-state-content h2 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.empty-state-content p {
    color: var(--text-secondary);
    line-height: 1.6;
}

/* ========================================
   PHASE 52: LAZY LOADING & SKELETONS
   ======================================== */

/* Global Progress Bar */
#global-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent), var(--accent-secondary));
    z-index: 9999;
    width: 0%;
    transition: width 0.2s ease, opacity 0.3s ease;
    opacity: 0;
    box-shadow: 0 0 10px var(--accent);
}

#global-progress-bar.active {
    opacity: 1;
}

/* Skeleton Utilities */
.skeleton-pulse {
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0.03) 0%,
            rgba(255, 255, 255, 0.08) 50%,
            rgba(255, 255, 255, 0.03) 100%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 8px;
    color: transparent !important;
    pointer-events: none;
    user-select: none;
}

.skeleton-text {
    height: 1em;
    width: 80%;
    margin-bottom: 0.5rem;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.05);
}

.skeleton-circle {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
}

@keyframes shimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* Specific Component Skeletons */
.metric-card.loading .card-value {
    width: 60%;
    height: 2.5rem;
    margin-top: 0.5rem;
}

.waterfall-metric.loading .wf-value,
.p-metric-card.loading .p-val {
    width: 80%;
    height: 1.5rem;
    margin-top: 5px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}

.waterfall-metric.loading .wf-value::after,
.p-metric-card.loading .p-val::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
    animation: shimmer 1.5s infinite;
}

.metric-card.loading .trend-neu {
    width: 40px;
    height: 20px;
    display: inline-block;
}

.user-profile-card.loading .avatar-large {
    background: rgba(255, 255, 255, 0.05);
    color: transparent;
}

/* ========================================
   PHASE 40: ENTERPRISE NAVIGATION
   ======================================== */

/* Hierarchical Sidebar */
.nav-group {
    margin-top: 1rem;
    padding-bottom: 0.25rem;
}

.nav-group-label {
    display: block;
    padding: 0 1.25rem;
    margin-bottom: 0.5rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.sidebar.collapsed .nav-group-label {
    display: none;
    height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

/* Breadcrumb Bar */
.breadcrumb-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 48px;
    padding: 0 2rem;
    background: rgba(10, 15, 24, 0.65);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--glass-border);
    position: sticky;
    top: 0;
    z-index: 900;
}

.breadcrumb-right {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.sync-info-tag {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.03);
    padding: 4px 12px;
    border-radius: 50px;
    border: 1px solid var(--glass-border);
}

.sync-info-tag .dot {
    width: 6px;
    height: 6px;
    background: var(--success);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--success);
}

.sync-info-tag .warning-text {
    color: var(--warning);
    margin-left: 0.5rem;
}

.breadcrumb-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.breadcrumb-item {
    font-size: 0.85rem;
    color: var(--text-muted);
    transition: color 0.3s ease;
}

.breadcrumb-item:last-child {
    color: var(--text-primary);
    font-weight: 500;
}

.breadcrumb-separator {
    color: var(--text-muted);
    opacity: 0.5;
    font-size: 0.7rem;
}

/* Global Search Trigger Hint */
.search-trigger-hint {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.4rem 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.search-trigger-hint:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.1);
}

.search-trigger-hint .text {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.search-trigger-hint .kbd {
    font-family: var(--font-inter);
    font-size: 0.7rem;
    padding: 2px 5px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    color: var(--text-muted);
    border: 1px solid var(--glass-border);
}

/* Command Palette Premium Modal */
.command-palette-content {
    max-width: 650px !important;
    padding: 0 !important;
    background: rgba(17, 24, 39, 0.95) !important;
    backdrop-filter: blur(30px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.8), 0 0 1px 1px rgba(255, 255, 255, 0.05) !important;
    overflow: hidden !important;
    /* Center it vertically */
    position: fixed;
    top: 20% !important;
    left: 50%;
    transform: translateX(-50%);
}

.command-palette-header {
    display: flex;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--glass-border);
    gap: 1rem;
}

.command-palette-header .search-icon {
    font-size: 1.25rem;
    opacity: 0.5;
}

#command-search-input {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 1.1rem;
    outline: none;
    font-family: var(--font-inter);
}

.esc-hint {
    font-size: 0.75rem;
    color: var(--text-muted);
    padding: 4px 8px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

.command-palette-body {
    max-height: 400px;
    overflow-y: auto;
    padding: 0.5rem 0;
}

.command-section {
    padding: 0.5rem 0;
}

.command-section label {
    display: block;
    padding: 0.5rem 1.5rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 0.05em;
}

.command-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--text-secondary);
}

.command-item:hover,
.command-item.active {
    background: rgba(59, 130, 246, 0.1);
    color: var(--text-primary);
}

.command-item .icon {
    font-size: 1.1rem;
    width: 24px;
    display: flex;
    justify-content: center;
}

.command-item .label {
    flex: 1;
    font-size: 0.95rem;
}

.command-item .shortcut {
    font-size: 0.8rem;
    opacity: 0.3;
}

/* Sidebar Simulation Shortcut Hint */
.sim-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.kbd-shortcut {
    font-size: 0.65rem;
    padding: 2px 4px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    border: 1px solid var(--glass-border);
    color: var(--text-muted);
}

/* Export Dropdown Styles */
.export-dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.5rem;
    background: rgba(17, 24, 39, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 0.5rem;
    min-width: 180px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    display: none;
    z-index: 1000;
    flex-direction: column;
    gap: 0.25rem;
    animation: fadeInScale 0.2s ease-out;
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-5px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.export-dropdown.active .dropdown-menu {
    display: flex;
}

.dropdown-item {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    padding: 0.75rem 1rem;
    text-align: left;
    border-radius: 8px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%;
    font-family: var(--font-inter);
}

.dropdown-item:hover {
    background: rgba(59, 130, 246, 0.1);
    color: var(--text-primary);
    padding-left: 1.25rem;
}

.dropdown-trigger .icon {
    font-size: 0.8rem;
    margin-left: 0.5rem;
    transition: transform 0.2s ease;
}

.export-dropdown.active .dropdown-trigger .icon {
    transform: rotate(180deg);
}

/* OPPORTUNITIES VIEW STYLES */
.view-header-main {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.glass-select {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    padding: 0.6rem 1rem;
    border-radius: 8px;
    font-size: 1rem;
    min-width: 250px;
    outline: none;
    transition: all 0.3s ease;
}

.glass-select:focus {
    border-color: var(--accent-primary);
    background: rgba(255, 255, 255, 0.1);
}

.view-filters-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(15, 23, 42, 0.4);
    padding: 0.8rem 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.quick-filters {
    display: flex;
    gap: 1.5rem;
}

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

.filter-group label {
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ======================================================= */
/* OPPORTUNITIES VIEW LAYOUT REFINEMENT                     */
/* ======================================================= */

.view-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 30px;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.4) 0%, transparent 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.header-main h1 {
    font-size: 1.8rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: 8px;
    background: linear-gradient(135deg, #fff 0%, #94a3b8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.view-switcher-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(59, 130, 246, 0.3);
    padding: 6px 16px;
    border-radius: 99px;
    backdrop-filter: blur(12px);
}

.view-switcher-pill select {
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.9rem;
    outline: none;
    cursor: pointer;
}

.view-layout.centered-layout {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 40px 40px 40px;
    height: auto;
    min-height: calc(100vh - 350px);
}

.view-grid-container.main-highlight {
    width: 100%;
    max-width: 1600px;
    background: rgba(15, 23, 42, 0.2);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 24px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Horizontal Grouping Toolbar */
.grouping-toolbar {
    display: flex;
    align-items: stretch;
    background: rgba(30, 41, 59, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 12px 20px;
    gap: 24px;
    backdrop-filter: blur(8px);
}

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

.toolbar-section.flex-grow {
    flex: 1;
}

.toolbar-section h3 {
    font-size: 0.65rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.toolbar-divider {
    width: 1px;
    background: rgba(255, 255, 255, 0.05);
    margin: 4px 0;
}

.horizontal-fields {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    flex-wrap: wrap;
}

.horizontal-fields .field-item {
    margin: 0 !important;
    padding: 6px 12px !important;
    font-size: 11px !important;
    background: rgba(255, 255, 255, 0.03) !important;
}

.horizontal-drop {
    min-height: 40px !important;
    padding: 4px 8px !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    align-items: center !important;
    background: rgba(15, 23, 42, 0.4) !important;
}

.horizontal-drop .active-pill {
    margin: 0 !important;
}

.horizontal-drop .placeholder {
    font-size: 11px;
    opacity: 0.5;
    margin: 0;
}

.view-layout {
    display: flex;
    gap: 24px;
    padding: 24px;
    height: calc(100vh - 350px);
}

.view-sidebar {
    width: 280px;
    background: rgba(15, 23, 42, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    overflow-y: auto;
}

.sidebar-section h3 {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.sidebar-section h3 i {
    opacity: 0.5;
}

.drop-zone {
    min-height: 80px;
    background: rgba(15, 23, 42, 0.5);
    border: 2px dashed rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    transition: all 0.3s;
}

.drop-zone.drag-over {
    border-color: var(--accent-blue);
    background: rgba(59, 130, 246, 0.05);
}

.drop-zone.drag-over::after {
    content: 'Drop to Group';
    color: var(--accent-blue);
    font-size: 11px;
    width: 100%;
    text-align: center;
    margin-top: 4px;
}

.active-pill {
    background: var(--accent-blue) !important;
    border-color: transparent !important;
    color: white !important;
    padding: 6px 12px !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}

.active-pill span {
    margin-left: 8px;
    opacity: 0.7;
    cursor: pointer;
}

.active-pill span:hover {
    opacity: 1;
}

/* Action Buttons Refresh */
.global-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mini-icon-btn {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.mini-icon-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    transform: rotate(15deg);
}

.mini-btn.outline {
    background: rgba(59, 130, 246, 0.05);
    border: 1px solid rgba(59, 130, 246, 0.2);
    color: var(--accent-blue);
}

.mini-btn.outline:hover {
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.4);
}

#grid-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.grid-scroll-wrapper {
    flex: 1;
    overflow: auto;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.6);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
}

.spreadsheet-grid {
    width: 100%;
    border-collapse: separate;
    /* Use separate to show borders better */
    border-spacing: 0;
    font-size: 0.95rem;
    /* Slightly larger font */
}

.spreadsheet-grid th {
    position: sticky;
    top: 0;
    background: #1e293b;
    padding: 1.25rem 1rem;
    /* More vertical breathing room */
    text-align: left;
    font-weight: 600;
    color: var(--text-primary);
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
    white-space: nowrap;
    z-index: 10;
}

.spreadsheet-grid td {
    padding: 1rem 1.25rem;
    /* More generous cell spacing */
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    border-right: 1px solid rgba(255, 255, 255, 0.02);
    /* Subtle vertical borders */
    white-space: nowrap;
    transition: background 0.1s ease;
}

.spreadsheet-grid tr:hover td {
    background: rgba(255, 255, 255, 0.04);
}

.grid-footer {
    background: rgba(15, 23, 42, 0.6);
    padding: 1rem 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 1rem 2rem;
}

.footer-stat {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.footer-stat span {
    color: var(--accent-primary);
    font-weight: 600;
    margin-left: 0.5rem;
}

.grid-pagination {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.pager-meta {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-right: 4px;
}

.pager-page {
    min-width: 52px;
    text-align: center;
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.pager-btn {
    height: 30px;
    min-width: 56px;
    border-radius: 8px;
    border: 1px solid rgba(148, 163, 184, 0.3);
    background: rgba(30, 41, 59, 0.75);
    color: var(--text-primary);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0 10px;
}

.pager-btn:hover:not(:disabled) {
    border-color: rgba(59, 130, 246, 0.6);
    background: rgba(59, 130, 246, 0.18);
}

.pager-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.group-row {
    background: rgba(var(--accent-primary-rgb, 99, 102, 241), 0.1) !important;
    font-weight: 700;
}

.group-row td {
    color: var(--accent-primary);
    border-top: 1px solid rgba(var(--accent-primary-rgb, 99, 102, 241), 0.3);
}

.mini-refresh-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 1.2rem;
    padding: 0.4rem;
    border-radius: 50%;
    transition: background 0.2s;
}

.mini-refresh-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* Auth / Login View */
.login-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: radial-gradient(circle at 50% 50%, #1a202c 0%, #0b0f19 100%);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: opacity 0.5s ease, visibility 0.5s;
    visibility: hidden;
    opacity: 0;
}

.login-overlay.show-auth {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}

.login-card {
    width: 100%;
    max-width: 420px;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(40px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.08) inset,
        0 -1px 0 rgba(0, 0, 0, 0.35) inset,
        0 28px 56px -14px rgba(0, 0, 0, 0.55);
    border-radius: 24px;
    padding: 3rem;
    text-align: center;
    transform-style: preserve-3d;
    transform: translateZ(0) rotateX(var(--ui-depth-tilt));
    animation: slideUpFade 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes slideUpFade {
    from {
        opacity: 0;
        transform: translateY(20px) translateZ(-8px) rotateX(1.8deg);
    }

    to {
        opacity: 1;
        transform: translateY(0) translateZ(0) rotateX(var(--ui-depth-tilt));
    }
}

.login-brand {
    margin-bottom: 2.5rem;
}

.login-brand img {
    height: 32px;
    margin-bottom: 1rem;
}

.login-brand h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: -0.02em;
}

.login-brand p {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-top: 0.5rem;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.input-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    text-align: left;
}

.input-group label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding-left: 0.5rem;
}

.auth-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.auth-input-wrapper i {
    position: absolute;
    left: 1.25rem;
    color: var(--text-muted);
    font-size: 1rem;
    pointer-events: none;
    transition: color 0.3s ease;
}

.auth-input-wrapper input {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1rem 1rem 1rem 3rem;
    color: var(--text-primary);
    font-family: var(--font-inter);
    font-size: 1rem;
    transition: all 0.3s ease;
}

.auth-input-wrapper input:focus {
    outline: none;
    border-color: var(--accent);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 4px rgba(75, 137, 220, 0.1);
}

.auth-input-wrapper input:focus+i,
.auth-input-wrapper input:not(:placeholder-shown)+i {
    color: var(--accent);
}

.btn-login {
    margin-top: 1rem;
    background: var(--accent);
    color: white;
    border: none;
    padding: 1rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.2) inset,
        0 -1px 0 rgba(0, 0, 0, 0.2) inset,
        0 8px 20px rgba(0, 0, 0, 0.25);
    transform-style: preserve-3d;
    transform: translateZ(0);
}

.btn-login:hover {
    background: #3a79cc;
    transform: translateY(-2px) translateZ(8px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.26) inset,
        0 -1px 0 rgba(0, 0, 0, 0.15) inset,
        0 14px 28px rgba(0, 0, 0, 0.32);
}

.btn-login:active {
    transform: translateY(0) translateZ(0);
}

.btn-login.loading {
    opacity: 0.7;
    cursor: not-allowed;
    pointer-events: none;
}

.login-error {
    margin-top: 1.5rem;
    padding: 0.75rem;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 8px;
    color: #fca5a5;
    font-size: 0.85rem;
    display: none;
    animation: shake 0.4s ease-in-out;
}

@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-5px);
    }

    75% {
        transform: translateX(5px);
    }
}

.login-footer {
    margin-top: 2rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* Remove simulation footer from sidebar if it exists */
.role-sim-trigger {
    display: none !important;
}

.logout-item {
    margin-top: auto;
    border-top: 1px solid var(--glass-border);
    padding-top: 1rem;
}

/* Editable Grid Phase 2 */
.editable-cell {
    position: relative;
    cursor: text;
    transition: all 0.2s;
}

.editable-cell::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 8px;
    right: 8px;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.2);
}

.editable-cell:focus {
    outline: 2px solid var(--accent-primary);
    background: rgba(14, 165, 233, 0.1);
    box-shadow: 0 0 10px rgba(14, 165, 233, 0.3);
}

.dirty-cell {
    background: rgba(245, 158, 11, 0.1) !important;
    border: 1px solid #f59e0b !important;
    color: #f59e0b !important;
}

.dirty-cell::after {
    border-bottom: 1px solid #f59e0b;
}

.syncing-row {
    opacity: 0.6;
    background: linear-gradient(90deg, transparent, rgba(14, 165, 233, 0.1), transparent);
    background-size: 200% 100%;
    animation: syncing-shimmer 1.5s infinite linear;
}

@keyframes syncing-shimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

.mini-btn.primary {
    background: var(--accent-primary);
    color: white;
    border: none;
    padding: 0.4rem 1rem;
    border-radius: 4px;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: all 0.2s;
}

/* ======================================================= */
/* PHASE 2: Change Tracking (cleaned re-add)               */
/* ======================================================= */
.positive-change {
    background-color: rgba(34, 197, 94, 0.1) !important;
    color: #4ade80 !important;
    position: relative;
    cursor: help;
}

.negative-change {
    background-color: rgba(239, 68, 68, 0.1) !important;
    color: #f87171 !important;
    position: relative;
    cursor: help;
}

.change-indicator {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.7;
}

.change-tooltip {
    position: fixed;
    z-index: 9999;
    background: rgba(15, 23, 42, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 0.8rem;
    color: #e2e8f0;
    pointer-events: none;
    display: none;
    max-width: 260px;
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.change-tooltip strong {
    display: block;
    margin-bottom: 6px;
    color: #f8fafc;
    font-size: 0.85rem;
}

.change-tooltip .timestamp {
    display: block;
    margin-top: 8px;
    color: var(--text-muted);
    font-size: 0.7rem;
    font-style: italic;
}

.change-tooltip .old-val {
    color: #f87171;
}

.change-tooltip .new-val {
    color: #4ade80;
}

/* ======================================================= */
/* PHASE 3: AI SEARCH BAR                                  */
/* ======================================================= */
.ai-search-bar-wrapper {
    padding: 8px 16px;
    border-bottom: 1px solid var(--glass-border);
}

.ai-search-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 6px 12px;
    transition: border-color 0.2s;
}

.ai-search-bar:focus-within {
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 2px var(--accent-glow);
}

.ai-search-bar .ai-icon {
    font-size: 1rem;
}

.ai-search-bar input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-size: 0.85rem;
    font-family: var(--font-inter);
    min-width: 0;
}

.ai-search-bar input::placeholder {
    color: var(--text-muted);
}

.ai-filter-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    padding: 4px 10px;
    background: linear-gradient(90deg, rgba(75, 137, 220, 0.2), rgba(99, 102, 241, 0.2));
    border: 1px solid rgba(75, 137, 220, 0.3);
    border-radius: 20px;
    font-size: 0.75rem;
    color: #93c5fd;
    width: fit-content;
}

.ai-filter-chip button {
    background: none;
    border: none;
    color: #93c5fd;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 0 2px;
}

.ai-filter-chip button:hover {
    color: #f8fafc;
}

/* ======================================================= */
/* PHASE 3: GRID / CHART TOGGLE                            */
/* ======================================================= */
.view-mode-toggle {
    display: flex;
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    overflow: hidden;
}

.toggle-btn {
    background: none;
    border: none;
    padding: 6px 10px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.85rem;
}

.toggle-btn:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
}

.toggle-btn.active {
    background: var(--accent-blue);
    color: #fff;
}

/* ======================================================= */
/* PHASE 3: HEALTH BADGES                                  */
/* ======================================================= */
.health-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.65rem;
    padding: 1px 6px;
    border-radius: 4px;
    font-weight: 600;
    margin-right: 6px;
    vertical-align: middle;
    white-space: nowrap;
}

.health-badge.danger {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.25);
}

.health-badge.warning {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.25);
}

/* ======================================================= */
/* PHASE 3: INSIGHTS SIDE PANEL                            */
/* ======================================================= */
.insights-panel {
    position: fixed;
    top: 0;
    right: -420px;
    width: 400px;
    height: 100%;
    background: #0d1520;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.4);
}

.insights-panel.open {
    right: 0;
}

.insights-panel-header {
    padding: 20px 16px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.insights-panel-header h3 {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.close-panel-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    font-size: 1rem;
    transition: color 0.2s;
    flex-shrink: 0;
}

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

.stage-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    background: rgba(75, 137, 220, 0.15);
    color: #93c5fd;
}

.stage-badge.status-closed-won {
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
}

.stage-badge.status-closed-lost {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
}

.insights-tabs {
    display: flex;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding: 0 12px;
}

.tab-btn {
    background: none;
    border: none;
    padding: 10px 12px;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.8rem;
    font-family: var(--font-inter);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: all 0.2s;
}

.tab-btn:hover {
    color: var(--text-primary);
}

.tab-btn.active {
    color: var(--accent-blue);
    border-bottom-color: var(--accent-blue);
}

.insights-tab-content {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

.details-grid {
    display: flex;
    flex-direction: column;
}

.detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    gap: 12px;
}

.detail-row:hover {
    background: rgba(255, 255, 255, 0.02);
}

.detail-label {
    color: var(--text-muted);
    font-size: 0.78rem;
    flex-shrink: 0;
}

.detail-value {
    color: var(--text-primary);
    font-size: 0.82rem;
    font-weight: 500;
    text-align: right;
    word-break: break-all;
}

.activity-section {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.activity-metric {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 14px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.activity-metric label {
    color: var(--text-muted);
    font-size: 0.82rem;
}

.activity-metric span {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-primary);
}

.changelog-list {
    display: flex;
    flex-direction: column;
}

.log-entry {
    padding: 10px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.log-entry:hover {
    background: rgba(255, 255, 255, 0.02);
}

.log-field {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.log-change {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.82rem;
    flex-wrap: wrap;
}

.log-change .old-val {
    color: #f87171;
    text-decoration: line-through;
}

.log-change .new-val {
    color: #4ade80;
    font-weight: 600;
}

.log-time {
    display: block;
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 4px;
    font-style: italic;
}

.panel-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}

.panel-backdrop.visible {
    opacity: 1;
    pointer-events: all;
}

/* ========================================
   PHASE 3: INSIGHTS PANEL (SIDE DRAWER)
   ======================================== */

.panel-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.panel-backdrop.visible {
    opacity: 1;
    visibility: visible;
}

.insights-panel {
    position: fixed;
    top: 0;
    right: -520px;
    width: 500px;
    height: 100vh;
    background: #111827;
    /* Dark but solid background for contrast */
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: -15px 0 45px rgba(0, 0, 0, 0.9);
    z-index: 1001;
    display: flex;
    flex-direction: column;
    transition: right 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.insights-panel.open {
    right: 0;
}

.panel-header {
    padding: 2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    background: rgba(255, 255, 255, 0.02);
}

.header-main h2 {
    font-size: 1.4rem;
    margin-bottom: 0.75rem;
    color: #f3f4f6;
    font-weight: 700;
}

.close-panel-btn {
    background: rgba(255, 255, 255, 0.05);
    border: none;
    color: var(--text-muted);
    font-size: 1.25rem;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s;
}

.close-panel-btn:hover {
    background: rgba(248, 113, 113, 0.2);
    color: #f87171;
}

.panel-tabs {
    display: flex;
    padding: 0 2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    gap: 2rem;
    /* Ensure spacing between tabs */
    background: rgba(255, 255, 255, 0.01);
}

.tab-btn {
    background: transparent;
    border: none;
    padding: 1.25rem 0;
    color: #9ca3af;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    position: relative;
    transition: all 0.2s;
    letter-spacing: 0.02em;
}

.tab-btn:hover {
    color: #f3f4f6;
}

.tab-btn.active {
    color: var(--accent);
}

.tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--accent);
    box-shadow: 0 0 10px var(--accent);
}

.panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 2.5rem 2rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}

.insights-tab-content {
    display: none;
    animation: fadeIn 0.3s ease-out;
}

.insights-tab-content.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.panel-metric-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 0 2rem 2rem 2rem;
    background: rgba(255, 255, 255, 0.02);
}

.p-metric-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    padding: 1rem;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.p-metric-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--accent-blue);
    transform: translateY(-2px);
}

.p-metric-card.score-card {
    grid-column: span 2;
    padding: 1.5rem;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(30, 41, 59, 0.4) 100%);
    border-color: rgba(59, 130, 246, 0.2);
}

.p-metric-card label {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

.p-metric-card label i {
    font-size: 0.75rem;
    opacity: 0.8;
}

.p-metric-card .p-val {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text-primary);
    font-family: var(--font-outfit);
}

.p-metric-card.score-card .p-val {
    font-size: 2.5rem;
}

.panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem 2rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}

.detail-section-header {
    font-family: var(--font-outfit);
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 1.5rem 0 0.75rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.detail-label {
    color: #94a3b8;
    font-size: 0.85rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}

.detail-label i {
    width: 14px;
    text-align: center;
    opacity: 0.6;
}

.detail-value {
    color: #f1f5f9;
    font-weight: 600;
    font-size: 0.9rem;
}

.insights-gmail-wrap {
    overflow-x: auto;
    margin-bottom: 0.5rem;
}

.insights-gmail-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
}

.insights-gmail-table th {
    text-align: left;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 6px 8px 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.insights-gmail-table td {
    padding: 8px 10px 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    vertical-align: top;
    color: var(--text-primary);
}

.insights-gmail-dir {
    white-space: nowrap;
    text-transform: capitalize;
    color: #94a3b8;
    width: 4.5rem;
}

.insights-gmail-when {
    white-space: nowrap;
    color: #94a3b8;
    width: 7.5rem;
}

.insight-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

.insight-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
    padding: 1.75rem;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: transform 0.2s;
}

.insight-card:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.15);
}

.insight-card label {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #64748b;
    margin-bottom: 0.75rem;
    letter-spacing: 0.05em;
}

.score-value {
    font-size: 3rem;
    font-weight: 800;
    font-family: 'Outfit', sans-serif;
    color: var(--accent);
}

.insight-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: #f1f5f9;
}

.changelog-list {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.log-entry {
    background: rgba(255, 255, 255, 0.02);
    padding: 1.25rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.log-field {
    font-weight: 700;
    font-size: 0.75rem;
    color: var(--accent);
    text-transform: uppercase;
    display: block;
    margin-bottom: 0.75rem;
    letter-spacing: 0.05em;
}

.log-change {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.95rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.old-val {
    color: #64748b;
    text-decoration: line-through;
    font-size: 0.85rem;
}

.new-val {
    color: #f1f5f9;
    font-weight: 600;
}

.log-time {
    font-size: 0.75rem;
    color: #475569;
}

/* ======================================================= */
/* PHASE 3: GRID GROUPING ENHANCEMENTS                      */
/* ======================================================= */

.group-header {
    background: rgba(255, 255, 255, 0.03);
    cursor: default;
}

.group-header td {
    padding: 12px 16px !important;
    font-family: var(--font-outfit);
}

.group-header.l1 {
    background: rgba(59, 130, 246, 0.12) !important;
    font-weight: 700 !important;
    border-left: 4px solid var(--accent-blue) !important;
}

.group-header.l2 {
    background: rgba(59, 130, 246, 0.06) !important;
    font-weight: 600 !important;
    border-left: 4px solid var(--accent-indigo) !important;
}

.group-count {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-left: 8px;
    font-weight: 400;
}

.group-total {
    float: right;
    color: var(--accent-blue);
    font-family: var(--font-outfit);
}

.group-header.l2 .group-total {
    color: var(--text-secondary);
}

.change-indicator {
    display: inline-block;
    width: 6px;
    height: 6px;
    background: var(--accent-blue);
    border-radius: 50%;
    margin-left: 4px;
    vertical-align: middle;
    box-shadow: 0 0 5px var(--accent-blue);
}

/* ======================================================= */
/* PHASE 4: UI AESTHETICS REFRESH (PREMIUM OVERHAUL)       */
/* ======================================================= */

.waterfall-metrics-bar {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
    padding: 20px;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0) 0%, rgba(15, 23, 42, 0.5) 100%);
}

.waterfall-metric {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 24px;
    padding: 16px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
}

.waterfall-metric::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
}

.waterfall-metric:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(59, 130, 246, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.waterfall-metric label {
    display: block;
    font-size: 0.65rem;
    color: var(--text-muted);
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 8px;
    letter-spacing: 0.08em;
}

.wf-value {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--text-primary);
    font-family: var(--font-outfit);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

#wf-open .wf-value {
    color: #60a5fa;
}

#wf-won .wf-value {
    color: #4ade80;
}

#wf-lost .wf-value {
    color: #f87171;
}

#wf-new .wf-value {
    color: #a78bfa;
}

/* Filter Bar Refinement */
.opportunities-view-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 12px 20px;
    gap: 16px;
}

/* Scoped to Views/Opportunities shell only — global .view-header broke Forecast/ROI headers */
.opportunities-view-container .view-header,
.waterfall-metrics-bar,
.view-filters-bar,
.view-layout {
    width: 100% !important;
    max-width: 1800px !important;
    margin: 0 auto !important;
}

.opportunities-view-container .view-header {
    background: transparent !important;
    padding: 0 0 4px 0 !important;
    border-bottom: none !important;
}

.opportunities-view-container .view-header .header-main h1 {
    font-size: 1.4rem !important;
    margin-bottom: 4px !important;
}

.waterfall-metrics-bar {
    background: rgba(15, 23, 42, 0.3) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 12px;
    padding: 12px 20px !important;
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 8px !important;
}

.waterfall-metric {
    padding: 10px 14px !important;
}

.waterfall-metric label {
    font-size: 0.55rem !important;
    margin-bottom: 4px !important;
}

.wf-value {
    font-size: 1.1rem !important;
}

.view-filters-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    background: rgba(30, 41, 59, 0.3) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 10px;
    padding: 10px 16px !important;
    backdrop-filter: blur(8px);
    width: 100%;
}

.ai-search-bar-container {
    display: flex;
    align-items: center;
    gap: 10px !important;
    padding: 6px 6px 6px 20px !important;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(59, 130, 246, 0.35);
    border-radius: 99px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    min-height: 48px;
    transition: all 0.3s;
}

.ai-search-bar-container:hover {
    border-color: var(--accent-blue);
    box-shadow: 0 4px 20px rgba(59, 130, 246, 0.2);
}

.ai-search-bar-container i {
    color: var(--accent-blue);
    font-size: 0.9rem;
}

.ai-search-bar-container input {
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 0.9rem !important;
    flex: 1;
    outline: none;
    padding: 8px 0;
}

.ai-search-bar-container button {
    background: transparent;
    border: none;
    color: var(--accent-blue);
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    padding: 4px 12px;
    border-radius: 99px;
    transition: all 0.2s;
    background: rgba(59, 130, 246, 0.1);
    margin-left: 8px;
}

.ai-search-bar-container button:hover {
    color: white;
}

/* Centered Layout Adjustments */
.view-layout.centered-layout {
    padding: 0 !important;
    min-height: auto !important;
}

.view-grid-container.main-highlight {
    max-width: 100% !important;
    padding: 20px !important;
    background: rgba(15, 23, 42, 0.4) !important;
    border-color: rgba(59, 130, 246, 0.2) !important;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4) !important;
    gap: 12px !important;
    border-radius: 16px !important;
}

/* Grouping Toolbar Compact */
.grouping-toolbar {
    padding: 8px 16px !important;
    gap: 16px !important;
}

.toolbar-section h3 {
    font-size: 0.6rem !important;
    gap: 4px !important;
}

.horizontal-drop {
    min-height: 32px !important;
}

/* Grid Breathability with Vertical Efficiency */
.grid-context-line {
    font-size: 0.7rem !important;
    padding: 6px 12px !important;
    margin-bottom: 8px !important;
}

/* Scrollbar and Table Breathability */
.grid-scroll-wrapper {
    margin-top: 10px;
    border-radius: 8px;
    overflow: auto;
}

.spreadsheet-grid {
    border-collapse: separate;
    border-spacing: 0;
}

.spreadsheet-grid td,
.spreadsheet-grid th {
    padding: 10px 16px !important;
    font-size: 12px !important;
}

/* Obsolete p-metric replaced by p-metric-card */

/* Score Pills */
.score-pill {
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.score-high {
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.score-med {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.4);
}

.score-low {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

/* ======================================================= */
/* VIEWS UI POLISH PASS (SCOPED)                           */
/* ======================================================= */
#views-view .opportunities-view-container {
    gap: 18px;
    padding: 16px 24px 22px;
}

#views-view .view-header {
    padding: 2px 0 8px 0 !important;
}

#views-view .view-header .header-main h1 {
    font-size: 1.55rem !important;
    margin-bottom: 8px !important;
    letter-spacing: -0.01em;
}

#views-view .view-switcher-pill {
    border-radius: 999px;
    padding: 7px 14px;
    border: 1px solid rgba(59, 130, 246, 0.25);
    background: rgba(15, 23, 42, 0.45);
}

#views-view .waterfall-metrics-bar {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important;
    gap: 12px !important;
    padding: 14px !important;
    border-radius: 14px;
}

#views-view .waterfall-metric {
    min-height: 84px;
    border-radius: 14px !important;
    padding: 12px 14px !important;
}

#views-view .waterfall-metric label {
    font-size: 0.62rem !important;
    margin-bottom: 6px !important;
}

#views-view .wf-value {
    font-size: 1.18rem !important;
}

#views-view .views-filters-bar {
    align-items: flex-start !important;
    gap: 14px;
    padding: 14px !important;
    border-radius: 14px;
}

#views-view .views-filters-left {
    flex: 1 1 360px;
    min-width: 320px;
}

#views-view .ai-search-bar-container {
    min-height: 44px;
    padding: 4px 6px 4px 14px !important;
    border-radius: 999px !important;
}

#views-view .ai-search-bar-container input {
    font-size: 0.88rem !important;
}

#views-view .views-filter-grid {
    flex: 3 1 680px;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px 12px;
    align-items: start;
}

#views-view .filter-group label {
    font-size: 0.64rem;
    margin-bottom: 5px;
    letter-spacing: 0.09em;
}

#views-view select.mini-select,
#views-view input.mini-select {
    height: 40px;
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

#views-view select.mini-select:focus,
#views-view input.mini-select:focus {
    border-color: rgba(59, 130, 246, 0.55);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.14);
}

#views-view #custom-date-range {
    grid-column: span 2;
}

#views-view .views-actions {
    margin-left: 0;
    align-self: center;
    gap: 8px;
}

#views-view .views-actions .toggle-btn,
#views-view .views-actions .mini-btn,
#views-view .views-actions .mini-icon-btn {
    height: 38px;
}

#views-view .views-actions .mini-btn {
    border-radius: 10px;
    padding: 0 12px;
}

@media (max-width: 1200px) {
    #views-view .views-actions {
        width: 100%;
        justify-content: flex-end;
    }
}

@media (max-width: 980px) {
    #views-view .opportunities-view-container {
        padding: 12px 14px 16px;
        gap: 12px;
    }

    #views-view .views-filters-left {
        min-width: 100%;
    }

    #views-view .views-filter-grid {
        min-width: 100%;
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    }

    #views-view #custom-date-range {
        grid-column: span 1;
    }
}

/* ======================================================= */
/* VIEWS FILTERS REDESIGN (ORGANIZED)                      */
/* ======================================================= */
#views-view .views-filters-bar {
    display: grid !important;
    grid-template-columns: minmax(320px, 1.1fr) minmax(560px, 2fr) auto;
    gap: 14px 16px !important;
    align-items: start !important;
    background: rgba(14, 22, 38, 0.82) !important;
    border: 1px solid rgba(71, 85, 105, 0.35) !important;
    border-radius: 14px !important;
    padding: 14px 14px 12px !important;
}

#views-view .views-filters-left {
    min-width: 0 !important;
    width: 100%;
}

#views-view .ai-search-bar-wrapper {
    width: 100%;
}

#views-view .ai-search-bar-container {
    min-height: 42px !important;
    border: 1px solid rgba(59, 130, 246, 0.28) !important;
    box-shadow: none !important;
}

#views-view .ai-search-bar-container input {
    min-width: 0;
}

#views-view .views-filter-grid {
    width: 100%;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(150px, 1fr));
    gap: 10px 10px !important;
    align-items: start !important;
}

#views-view .filter-group {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 5px !important;
    margin: 0 !important;
}

#views-view .filter-group label {
    font-size: 0.66rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: #94a3b8 !important;
    margin: 0 !important;
    min-height: 1.1rem;
}

#views-view select.mini-select,
#views-view input.mini-select {
    height: 38px !important;
    border-radius: 10px !important;
    padding: 0 10px !important;
    font-size: 0.84rem !important;
    border: 1px solid rgba(100, 116, 139, 0.35) !important;
    background: rgba(2, 6, 23, 0.55) !important;
}

#views-view .custom-select-wrapper {
    width: 100%;
}

#views-view .custom-select-wrapper select.mini-select {
    min-width: 100% !important;
}

#views-view .views-date-range {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
}

#views-view #custom-date-range {
    grid-column: span 2 !important;
}

#views-view .views-actions {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    margin: 0 !important;
    padding-top: 1.25rem;
}

#views-view .views-actions .view-mode-toggle {
    display: inline-flex;
    background: rgba(15, 23, 42, 0.65);
    border: 1px solid rgba(100, 116, 139, 0.35);
    border-radius: 10px;
    padding: 2px;
}

#views-view .views-actions .toggle-btn,
#views-view .views-actions .mini-btn,
#views-view .views-actions .mini-icon-btn {
    height: 36px !important;
    border-radius: 8px !important;
}

#views-view .views-actions .mini-btn {
    padding: 0 11px !important;
}

@media (max-width: 1400px) {
    #views-view .views-filters-bar {
        grid-template-columns: minmax(300px, 1fr) minmax(520px, 1.8fr);
    }

    #views-view .views-actions {
        grid-column: 1 / -1;
        justify-content: flex-end !important;
        padding-top: 0.15rem;
    }
}

@media (max-width: 1080px) {
    #views-view .views-filters-bar {
        grid-template-columns: 1fr !important;
    }

    #views-view .views-filter-grid {
        grid-template-columns: repeat(2, minmax(150px, 1fr));
    }

    #views-view .views-actions {
        grid-column: auto;
        justify-content: flex-start !important;
        padding-top: 0.1rem;
    }
}

@media (max-width: 720px) {
    #views-view .views-filter-grid {
        grid-template-columns: 1fr;
    }

    #views-view #custom-date-range {
        grid-column: span 1 !important;
    }

    #views-view .views-date-range {
        grid-template-columns: 1fr !important;
    }
}

/* ======================================================= */
/* SETTINGS ACTION BUTTON POLISH                           */
/* ======================================================= */
#layout-manager-view .view-filters-bar {
    align-items: center !important;
}

#layout-manager-view .global-actions {
    gap: 10px;
}

#layout-manager-view .global-actions .mini-btn {
    height: 38px;
    border-radius: 10px;
    padding: 0 14px;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    border: 1px solid rgba(100, 116, 139, 0.38);
    background: rgba(15, 23, 42, 0.72);
    color: var(--text-primary);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    transition: all 0.2s ease;
}

#layout-manager-view .global-actions .mini-btn i {
    font-size: 0.78rem;
    opacity: 0.9;
}

#layout-manager-view .global-actions .mini-btn:hover {
    transform: translateY(-1px);
    border-color: rgba(59, 130, 246, 0.55);
    box-shadow: 0 8px 18px rgba(2, 6, 23, 0.35);
}

#layout-manager-view .global-actions .mini-btn:active {
    transform: translateY(0);
}

#layout-manager-view .global-actions .mini-btn.outline {
    background: rgba(30, 41, 59, 0.55);
    color: #cbd5e1;
    border-color: rgba(100, 116, 139, 0.35);
}

#layout-manager-view .global-actions .mini-btn.outline:hover {
    background: rgba(51, 65, 85, 0.66);
    color: var(--text-primary);
}

#layout-manager-view .global-actions #views-settings-save {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: #fff;
    border-color: rgba(59, 130, 246, 0.72);
}

#layout-manager-view .global-actions #views-settings-save:hover {
    filter: brightness(1.06);
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.35);
}

/* =========================================================
   PHASE 1 UI REFRESH (non-breaking visual uplift)
   ========================================================= */
:root {
    --ui-bg: radial-gradient(1200px 700px at -10% -10%, rgba(75, 137, 220, 0.22), transparent 40%),
             radial-gradient(900px 600px at 110% 110%, rgba(16, 185, 129, 0.12), transparent 45%),
             linear-gradient(165deg, #080d16 0%, #0a1020 55%, #090f1a 100%);
    --ui-border: rgba(148, 163, 184, 0.18);
    --ui-border-strong: rgba(148, 163, 184, 0.28);
    --ui-surface: rgba(15, 23, 42, 0.72);
    --ui-surface-2: rgba(15, 23, 42, 0.9);
    --ui-surface-3: rgba(30, 41, 59, 0.86);
    --ui-shadow: 0 14px 42px rgba(0, 0, 0, 0.35);
    --ui-shadow-soft: 0 8px 24px rgba(2, 6, 23, 0.35);
    --ui-ring: 0 0 0 3px rgba(75, 137, 220, 0.24);
}

body {
    background: var(--ui-bg);
}

body.light-theme {
    --ui-border: rgba(51, 65, 85, 0.16);
    --ui-border-strong: rgba(51, 65, 85, 0.24);
    --ui-surface: rgba(255, 255, 255, 0.88);
    --ui-surface-2: rgba(255, 255, 255, 0.96);
    --ui-surface-3: rgba(241, 245, 249, 0.95);
    --ui-shadow: 0 18px 48px rgba(15, 23, 42, 0.08);
    --ui-shadow-soft: 0 8px 18px rgba(15, 23, 42, 0.08);
}

.sidebar {
    background: linear-gradient(180deg, rgba(8, 13, 24, 0.96) 0%, rgba(10, 16, 32, 0.96) 100%);
    border-right: 1px solid var(--ui-border);
    box-shadow:
        4px 0 0 rgba(255, 255, 255, 0.03) inset,
        var(--ui-shadow-soft),
        12px 0 48px rgba(0, 0, 0, 0.35);
    transform: translateZ(0);
    transform-style: preserve-3d;
}

body.light-theme .sidebar {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 250, 252, 0.96) 100%);
    box-shadow:
        4px 0 0 rgba(255, 255, 255, 0.65) inset,
        var(--ui-shadow-soft),
        10px 0 36px rgba(15, 23, 42, 0.06);
}

.sidebar-header {
    border-bottom: 1px solid var(--ui-border);
}

.nav-group-label {
    letter-spacing: 0.08em;
    font-size: 0.67rem;
    font-weight: 700;
    opacity: 0.92;
}

.nav-item {
    border: 1px solid transparent;
    border-radius: 12px;
    margin: 2px 8px;
    transition: transform 0.16s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.nav-item:hover {
    transform: translateX(2px) translateZ(4px);
    border-color: var(--ui-border);
    background: rgba(75, 137, 220, 0.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

.nav-item.active {
    background: linear-gradient(135deg, rgba(75, 137, 220, 0.22), rgba(53, 114, 178, 0.16));
    border-color: rgba(75, 137, 220, 0.45);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        inset 0 0 0 1px rgba(255, 255, 255, 0.04),
        0 8px 18px rgba(37, 99, 235, 0.22);
    transform: translateZ(2px);
}

.nav-submenu {
    margin: 2px 8px 8px 16px;
    padding: 6px;
    border: 1px solid var(--ui-border);
    border-radius: 12px;
    background: rgba(2, 6, 23, 0.28);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.04) inset,
        0 10px 22px rgba(0, 0, 0, 0.22);
}

body.light-theme .nav-submenu {
    background: rgba(255, 255, 255, 0.6);
}

.nav-submenu-item {
    border-radius: 10px;
}

.nav-submenu-item:hover {
    background: rgba(75, 137, 220, 0.12);
}

.nav-submenu-item.active {
    background: rgba(75, 137, 220, 0.22);
    border: 1px solid rgba(75, 137, 220, 0.35);
}

/* Views/Settings submenu redesign (visual-only) */
#views-nav-item.parent-open .label,
#settings-nav-item.parent-open .label {
    color: #c9d1d9;
}

#views-nav-item.parent-open .icon,
#settings-nav-item.parent-open .icon {
    color: #8b949e;
}

#views-nav-item .dropdown-caret,
#settings-nav-item .dropdown-caret {
    margin-left: auto;
    color: #7d8590;
    opacity: 1;
    font-size: 0;
    line-height: 0;
    transition: transform 0.2s ease;
    transform: rotate(0deg);
}

#views-nav-item .dropdown-caret svg,
#settings-nav-item .dropdown-caret svg {
    display: block;
    width: 12px;
    height: 12px;
}

#views-nav-item.parent-open .dropdown-caret,
#settings-nav-item.parent-open .dropdown-caret,
#views-nav-item[aria-expanded="true"] .dropdown-caret,
#settings-nav-item[aria-expanded="true"] .dropdown-caret {
    transform: rotate(90deg);
}

#views-submenu,
#settings-submenu,
#forecast-submenu {
    margin: 0 8px 4px 22px;
    padding: 0 0 0 0;
    border: 0;
    border-left: 0.5px solid #21262d;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

#views-submenu .nav-submenu-item,
#settings-submenu .nav-submenu-item,
#forecast-submenu .nav-submenu-item {
    margin-left: -0.5px;
    padding: 6px 10px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #7d8590;
    border-left: 1.5px solid transparent;
    border: 0;
    background: transparent;
}

#views-submenu .nav-submenu-item:hover,
#settings-submenu .nav-submenu-item:hover,
#forecast-submenu .nav-submenu-item:hover {
    background: #161b22;
    color: #c9d1d9;
}

#views-submenu .nav-submenu-item.active,
#settings-submenu .nav-submenu-item.active,
#forecast-submenu .nav-submenu-item.active {
    background: #161b22;
    border-left-color: #58a6ff;
    color: #e6edf3;
    font-weight: 500;
}

#views-submenu .submenu-dot,
#settings-submenu .submenu-dot,
#forecast-submenu .submenu-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #30363d;
    margin-left: 2px;
    flex-shrink: 0;
}

#views-submenu .nav-submenu-item.active .submenu-dot,
#settings-submenu .nav-submenu-item.active .submenu-dot,
#forecast-submenu .nav-submenu-item.active .submenu-dot {
    background: #58a6ff;
}

#views-submenu .submenu-label,
#settings-submenu .submenu-label,
#forecast-submenu .submenu-label {
    font-size: 12px;
    color: inherit;
}

#views-submenu .submenu-badge,
#settings-submenu .submenu-badge {
    margin-left: auto;
    font-size: 9px;
    padding: 1px 6px;
    border-radius: 20px;
    border: 0.5px solid transparent;
    font-weight: 500;
    line-height: 1.2;
}

#views-submenu .submenu-count-badge {
    background: #1f6feb22;
    color: #58a6ff;
    border-color: #1f6feb33;
}

#settings-submenu .submenu-beta-badge {
    background: #3fb95022;
    color: #3fb950;
    border-color: #3fb95033;
}

#settings-submenu .submenu-divider {
    height: 0;
    border-top: 0.5px solid #21262d;
    margin: 4px 0;
}

.breadcrumb-bar,
.utility-bar {
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    background: var(--ui-surface);
    border-bottom: 1px solid var(--ui-border);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.05) inset,
        0 14px 32px -10px rgba(0, 0, 0, 0.42);
    transform: translateZ(0);
}

.search-trigger-hint {
    border: 1px solid var(--ui-border);
    background: var(--ui-surface-2);
    border-radius: 12px;
    box-shadow: var(--ui-shadow-soft);
}

.search-trigger-hint:hover {
    border-color: rgba(75, 137, 220, 0.45);
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.2);
}

.mini-icon-btn {
    border: 1px solid var(--ui-border);
    border-radius: 10px;
    background: var(--ui-surface-2);
}

.mini-icon-btn:hover {
    border-color: rgba(75, 137, 220, 0.42);
    box-shadow: var(--ui-ring);
}

.glass,
.profile-main-card,
.nav-card,
.metric-card,
.highlight-card,
.user-profile-card,
.ai-search-bar-container,
.waterfall-metric {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.06) inset,
        0 -1px 0 rgba(0, 0, 0, 0.22) inset,
        var(--ui-shadow);
    border-radius: 16px;
    transform-style: preserve-3d;
}

.profile-main-card:not(.glass),
.nav-card:not(.glass),
.metric-card:not(.glass),
.highlight-card:not(.glass),
.user-profile-card:not(.glass),
.ai-search-bar-container,
.waterfall-metric {
    transform: translateZ(0) rotateX(var(--ui-depth-tilt));
}

.nav-card:hover:not(.glass),
.metric-card:hover:not(.glass),
.highlight-card:hover:not(.glass) {
    border-color: rgba(75, 137, 220, 0.42);
    transform: translateY(calc(-1 * var(--ui-depth-lift))) translateZ(var(--ui-depth-z-hover))
        rotateX(var(--ui-depth-tilt-hover));
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.08) inset,
        0 -1px 0 rgba(0, 0, 0, 0.2) inset,
        0 22px 44px -12px rgba(2, 6, 23, 0.5);
}

.nav-card.glass:hover,
.metric-card.glass:hover,
.highlight-card.glass:hover {
    border-color: rgba(75, 137, 220, 0.38);
}

.metric-card .card-value,
.wf-value {
    letter-spacing: -0.015em;
}

.tour-badge {
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(75, 137, 220, 0.35), rgba(16, 185, 129, 0.3));
    border: 1px solid rgba(255, 255, 255, 0.16);
}

input,
select,
textarea,
.premium-select,
.mini-select {
    border-radius: 12px !important;
    border: 1px solid var(--ui-border) !important;
    background: var(--ui-surface-2) !important;
}

input:focus,
select:focus,
textarea:focus,
.premium-select:focus,
.mini-select:focus {
    outline: none;
    border-color: rgba(75, 137, 220, 0.58) !important;
    box-shadow: var(--ui-ring);
}

.primary-btn,
.secondary-btn,
.btn-login,
button.primary,
button.secondary {
    border-radius: 12px !important;
    border: 1px solid transparent;
    transition: transform 0.16s ease, box-shadow 0.2s ease, border-color 0.2s ease, filter 0.2s ease;
}

.primary-btn,
.btn-login,
button.primary {
    background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.22) inset,
        0 -1px 0 rgba(0, 0, 0, 0.18) inset,
        0 10px 22px rgba(37, 99, 235, 0.35);
    transform-style: preserve-3d;
    transform: translateZ(0);
}

.primary-btn:hover,
.btn-login:hover,
button.primary:hover {
    transform: translateY(-1px) translateZ(8px);
    filter: brightness(1.03);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.26) inset,
        0 -1px 0 rgba(0, 0, 0, 0.12) inset,
        0 14px 28px rgba(37, 99, 235, 0.42);
}

.secondary-btn,
button.secondary {
    background: var(--ui-surface-2) !important;
    border-color: var(--ui-border) !important;
}

.secondary-btn:hover,
button.secondary:hover {
    border-color: var(--ui-border-strong) !important;
    box-shadow: var(--ui-shadow-soft);
}

table,
.spreadsheet-grid,
.data-table {
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--ui-border);
}

thead th,
.spreadsheet-grid th {
    background: var(--ui-surface-3) !important;
    border-bottom: 1px solid var(--ui-border);
    color: var(--text-primary);
    font-weight: 600;
}

tbody tr,
.spreadsheet-grid tbody tr {
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}

tbody tr:hover,
.spreadsheet-grid tbody tr:hover {
    background: rgba(75, 137, 220, 0.08) !important;
}

td,
.spreadsheet-grid td {
    color: var(--text-primary);
}

.status-pill,
.stat-pill,
.source-badge,
.lifecycle-tag,
.user-role-badge {
    border-radius: 999px !important;
    border: 1px solid var(--ui-border) !important;
    background: rgba(2, 6, 23, 0.26);
}

body.light-theme .status-pill,
body.light-theme .stat-pill,
body.light-theme .source-badge,
body.light-theme .lifecycle-tag,
body.light-theme .user-role-badge {
    background: rgba(241, 245, 249, 0.8);
}

.modal-content,
.command-palette-modal-content,
.drawer-panel,
.quartz-detail-panel {
    background: var(--ui-surface-2);
    border: 1px solid var(--ui-border);
    box-shadow: var(--ui-shadow);
    border-radius: 16px;
}

.empty-state,
.empty-state-content {
    border: 1px dashed var(--ui-border-strong);
    border-radius: 14px;
    background: rgba(2, 6, 23, 0.18);
}

body.light-theme .empty-state,
body.light-theme .empty-state-content {
    background: rgba(241, 245, 249, 0.7);
}

.skeleton-pulse {
    border-radius: 10px;
}

/* =========================================================
   PHASE 2 ROI LAYOUT MODERNIZATION
   ========================================================= */
.roi-modern-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 18px;
    align-items: start;
}

.roi-layout-main {
    min-width: 0;
}

.roi-insights-rail {
    position: sticky;
    top: 86px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.roi-insights-rail .rail-section {
    border: 1px solid var(--ui-border);
    border-radius: 14px;
    background: rgba(2, 6, 23, 0.22);
    padding: 12px;
}

body.light-theme .roi-insights-rail .rail-section {
    background: rgba(241, 245, 249, 0.72);
}

.rail-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.badge.subtle {
    background: rgba(59, 130, 246, 0.12);
    border: 1px solid rgba(59, 130, 246, 0.35);
}

.rail-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rail-item {
    display: grid;
    grid-template-columns: 10px 1fr;
    gap: 10px;
    align-items: start;
}

.rail-item strong {
    display: block;
    font-size: 0.84rem;
    margin-bottom: 2px;
}

.rail-item p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.75rem;
    line-height: 1.35;
}

.rail-item .dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    margin-top: 6px;
    display: inline-block;
}

.rail-item .dot.success { background: var(--success); }
.rail-item .dot.info { background: var(--accent-blue); }
.rail-item .dot.warn { background: var(--warning); }

.rail-actions {
    display: grid;
    gap: 8px;
}

.rail-actions .secondary-btn {
    width: 100%;
    justify-content: center;
}

.rail-stats {
    display: grid;
    gap: 8px;
}

.rail-stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid var(--ui-border);
    border-radius: 10px;
    padding: 8px 10px;
    font-size: 0.8rem;
}

.rail-stat label {
    color: var(--text-secondary);
}

.rail-stat span {
    font-weight: 700;
}

@media (max-width: 1220px) {
    .roi-modern-layout {
        grid-template-columns: 1fr;
    }

    .roi-insights-rail {
        position: static;
        top: auto;
    }
}

/* =========================================================
   PHASE 3 - Forecast + Views modern shell
   ========================================================= */
#forecast-view .view-header,
#views-view .view-header {
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 14px;
    margin-bottom: 12px;
    box-shadow: var(--ui-shadow-soft);
}

#forecast-view .header-chip,
#views-view .view-switcher-pill {
    border: 1px solid var(--ui-border);
    border-radius: 12px;
    background: var(--ui-surface-2);
}

#forecast-view .quartz-panel,
#forecast-view .q-metric-card,
#views-view .waterfall-metric,
#views-view .view-grid-container {
    border: 1px solid var(--ui-border);
    box-shadow: var(--ui-shadow-soft);
}

#forecast-view .quartz-table-container,
#views-view .grid-scroll-wrapper {
    border-radius: 12px;
}

.views-modern-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 310px;
    gap: 16px;
    align-items: start;
}

.views-layout-main {
    min-width: 0;
}

.views-insights-rail {
    position: sticky;
    top: 86px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.views-insights-rail .rail-section {
    border: 1px solid var(--ui-border);
    border-radius: 14px;
    padding: 12px;
    background: rgba(2, 6, 23, 0.22);
}

/* Shared right-rail system (ROI / Views / Forecast detail) */
.right-rail-shell {
    border: 1px solid var(--ui-border);
    border-radius: 16px;
    background: var(--ui-surface);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.06) inset,
        0 -1px 0 rgba(0, 0, 0, 0.2) inset,
        var(--ui-shadow);
    transform: translateZ(0) rotateX(var(--ui-depth-tilt));
    transform-style: preserve-3d;
}

.right-rail-shell .rail-section {
    border: 1px solid var(--ui-border);
    border-radius: 14px;
    padding: 12px;
    background: rgba(2, 6, 23, 0.22);
}

body.light-theme .right-rail-shell .rail-section {
    background: rgba(241, 245, 249, 0.72);
}

/* Tightened global rhythm/typography */
.view-section .dashboard-content,
.view-section .opportunities-view-container,
.view-section .quartz-content-wrapper {
    gap: 14px;
}

.view-section h1 {
    font-size: clamp(1.35rem, 1.9vw, 1.8rem);
    line-height: 1.18;
    letter-spacing: -0.01em;
}

.view-section h2 {
    font-size: clamp(1.03rem, 1.3vw, 1.2rem);
    line-height: 1.24;
}

.view-section h3 {
    font-size: 0.95rem;
    line-height: 1.3;
}

.view-header {
    padding: 12px 16px;
}

.section-header,
.panel-header {
    padding-bottom: 8px;
    margin-bottom: 8px;
}

.metrics-grid,
.content-grid,
.quartz-insights-grid,
.quartz-metric-grid {
    gap: 14px;
}

/* Forecast detail panel: hidden until user clicks Edit on a row */
#forecast-view .quartz-detail-panel {
    display: none !important;
    flex: 0 0 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    border: none !important;
    position: relative;
    top: auto;
    align-self: flex-start;
    background: var(--ui-surface);
}

#forecast-view .quartz-detail-panel.open,
#sdr-forecast-view .quartz-detail-panel.open {
    display: flex !important;
    flex-direction: column;
    flex: 0 0 min(360px, 34vw) !important;
    width: min(360px, 34vw) !important;
    min-width: 280px !important;
    max-width: 400px !important;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    padding: 12px;
    margin: 0;
    border: 1px solid var(--ui-border);
    border-radius: 16px;
    box-shadow: var(--ui-shadow-soft);
}

.sdr-forecast-table .drill-link-btn,
#sdr-forecast-view .drill-link-btn {
    background: none;
    border: none;
    color: var(--accent-blue, #3b82f6);
    cursor: pointer;
    font: inherit;
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.sdr-forecast-table .drill-link-btn:hover,
#sdr-forecast-view .drill-link-btn:hover {
    color: var(--accent-blue-hover, #60a5fa);
}

.sdr-forecast-table .inline-edit-btn {
    background: none;
    border: none;
    color: var(--text-primary);
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    padding: 0;
}

.sdr-forecast-table .inline-edit-btn:hover {
    color: var(--accent-blue, #3b82f6);
}

#forecast-view .quartz-detail-panel #quartz-panel-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#forecast-view .detail-placeholder {
    border: 1px dashed var(--ui-border-strong);
    border-radius: 12px;
    padding: 18px 12px;
}

#forecast-view .quartz-detail-header,
#forecast-view .quartz-detail-stats,
#forecast-view .quartz-detail-forecast,
#forecast-view .quartz-detail-notes,
#forecast-view .quartz-detail-actions {
    border: 1px solid var(--ui-border);
    border-radius: 12px;
    padding: 10px;
    background: rgba(2, 6, 23, 0.2);
}

body.light-theme #forecast-view .quartz-detail-header,
body.light-theme #forecast-view .quartz-detail-stats,
body.light-theme #forecast-view .quartz-detail-forecast,
body.light-theme #forecast-view .quartz-detail-notes,
body.light-theme #forecast-view .quartz-detail-actions {
    background: rgba(241, 245, 249, 0.72);
}

body.light-theme .views-insights-rail .rail-section {
    background: rgba(241, 245, 249, 0.72);
}

@media (max-width: 1320px) {
    .views-modern-layout {
        grid-template-columns: 1fr;
    }

    .views-insights-rail {
        position: static;
        top: auto;
    }
}

/* =========================================================
   DECLUTTER PASS - Views density reduction
   ========================================================= */
#views-view .view-filters-bar {
    display: grid;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--ui-border);
    border-radius: 14px;
    background: rgba(2, 6, 23, 0.18);
}

body.light-theme #views-view .view-filters-bar {
    background: rgba(241, 245, 249, 0.65);
}

#views-view .views-filters-left {
    width: 100%;
}

#views-view .ai-search-bar-wrapper {
    max-width: 480px;
}

#views-view .views-filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 10px 12px;
}

#views-view .waterfall-metrics-bar {
    padding: 10px;
}

#views-view .waterfall-metric {
    min-height: 76px;
}

#views-view .grouping-toolbar {
    padding: 10px;
    border: 1px solid var(--ui-border);
    border-radius: 12px;
    background: rgba(2, 6, 23, 0.14);
}

body.light-theme #views-view .grouping-toolbar {
    background: rgba(241, 245, 249, 0.62);
}

/* Keep right rail only on truly wide layouts to avoid crowding. */
@media (max-width: 1680px) {
    .views-modern-layout {
        grid-template-columns: 1fr;
    }

    .views-insights-rail {
        display: none;
    }
}

/* =========================================================
   MAJOR SCREENS POLISH PASS
   ========================================================= */
/* Shared container rhythm */
.dashboard-content {
    max-width: 1500px;
    padding: 1.6rem 1.4rem;
}

.view-section .dashboard-content,
.view-section .opportunities-view-container,
.view-section .quartz-content-wrapper {
    gap: 12px;
}

.utility-bar .action-section,
.view-header .header-actions {
    gap: 0.6rem;
    flex-wrap: wrap;
}

/* Home screen declutter */
#welcome-view .welcome-screen {
    min-height: calc(100vh - 92px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

#welcome-view .dashboard-content {
    max-width: 1480px;
    margin: 0 auto;
}

#welcome-view .welcome-header {
    margin-bottom: 0.9rem;
}

#welcome-view .profile-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.95fr);
    gap: 14px;
    align-items: stretch;
    max-width: 100%;
    margin: 0 auto;
}

#welcome-view .profile-main-card,
#welcome-view .quick-nav-cards .nav-card {
    padding: 1.1rem 1.2rem;
}

#welcome-view .quick-nav-cards {
    gap: 9px;
}

#welcome-view .stat-pill {
    min-height: 78px;
    padding: 10px 12px;
}

@media (max-width: 1200px) {
    #welcome-view .welcome-screen {
        justify-content: flex-start;
        min-height: auto;
        padding-top: 1.1rem;
    }
}

/* ROI + tools card/table density */
#roi-dashboard-view .metrics-grid,
#tools-master-view .metrics-grid {
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 12px;
    margin-bottom: 12px;
}

/* ROI top-area compact mode: reduce above-the-fold height */
#roi-dashboard-view .utility-bar {
    min-height: 64px;
    padding: 0.45rem 1.1rem;
}

#roi-dashboard-view .filter-container {
    gap: 0.85rem;
}

#roi-dashboard-view .filter-chip label {
    font-size: 0.56rem;
    margin-bottom: 2px;
}

#roi-dashboard-view .custom-select-wrapper select.mini-select {
    padding: 0.48rem 2.5rem 0.48rem 0.95rem !important;
    font-size: 0.84rem !important;
}

#roi-dashboard-view .hero-section {
    margin-bottom: 0.9rem;
}

#roi-dashboard-view .user-profile-card {
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: stretch;
}

#roi-dashboard-view .user-meta {
    background: rgba(9, 15, 32, 0.72);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    padding: 0.8rem 0.95rem;
    gap: 1rem;
}

#roi-dashboard-view .avatar-large {
    width: 56px;
    height: 56px;
    font-size: 1.4rem;
}

#roi-dashboard-view .h1-select {
    font-size: 1.3rem;
    padding-right: 2rem;
    line-height: 1.1;
}

#roi-dashboard-view .user-details p {
    font-size: 0.84rem;
}

#roi-dashboard-view .id-row {
    gap: 0.45rem;
}

#roi-dashboard-view #manage-lifecycle-btn {
    padding: 0.2rem 0.5rem;
    font-size: 0.68rem;
}

#roi-dashboard-view #x-factor {
    font-size: 3.4rem;
    margin: 0.2rem 0;
}

#roi-dashboard-view .metric-label {
    font-size: 0.68rem;
}

#roi-dashboard-view .roi-highlight {
    background: rgba(9, 15, 32, 0.72);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    padding: 0.7rem 0.9rem;
    min-width: 220px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#roi-dashboard-view .metric-value-container {
    align-items: flex-end;
}

@media (max-width: 1024px) {
    #roi-dashboard-view .user-profile-card {
        grid-template-columns: 1fr;
    }

    #roi-dashboard-view .roi-highlight {
        min-width: 0;
        text-align: left;
    }

    #roi-dashboard-view .metric-value-container {
        align-items: flex-start;
    }
}

/* =========================================================
   GLOBAL COMPACT PASS
   Reduce oversized cards/spacing across major pages.
   ========================================================= */
.view-section .dashboard-content {
    padding: 1rem 1rem 1.15rem;
    max-width: 1460px;
}

.view-section .utility-bar {
    min-height: 64px;
    padding: 0.45rem 1rem;
}

.view-section .filter-container {
    gap: 0.75rem;
    flex-wrap: wrap;
}

.view-section .filter-chip label {
    font-size: 0.56rem;
    margin-bottom: 2px;
}

.view-section .custom-select-wrapper select.mini-select {
    font-size: 0.84rem !important;
    padding: 0.48rem 2.45rem 0.48rem 0.92rem !important;
}

.view-section .metrics-grid {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 10px;
    margin-bottom: 10px;
}

.view-section .metric-card {
    min-height: 124px;
    padding: 0.9rem 1rem;
}

.view-section .card-header {
    margin-bottom: 0.55rem;
}

.view-section .card-value {
    font-size: clamp(1.55rem, 2.15vw, 2.2rem);
    margin-bottom: 0.2rem;
}

.view-section .card-footer {
    font-size: 0.66rem;
}

.view-section .content-grid {
    gap: 12px;
}

.view-section .content-grid.second-row {
    margin-top: 12px;
}

.view-section .data-section,
.view-section .chart-section {
    padding: 0.9rem;
}

.view-section .section-header {
    margin-bottom: 0.8rem;
}

.view-section .section-header h2 {
    font-size: 1.03rem;
}

.view-section table th,
.view-section table td {
    padding: 0.56rem 0.62rem;
}

/* Keep command-center home cards compact and neat. */
#welcome-view .home-v3-overview,
#welcome-view .home-v3-footer {
    padding: 0.95rem 1rem;
}

#welcome-view .home-v3-action-row {
    gap: 10px;
}

#welcome-view .home-v3-tile {
    min-height: 108px;
    padding: 0.82rem 0.92rem;
}

#welcome-view .home-v3-tour-cta {
    min-width: 185px;
    padding: 10px 14px 12px;
}

@media (max-width: 1200px) {
    .view-section .utility-bar {
        min-height: auto;
    }

    .view-section .dashboard-content {
        padding: 0.9rem 0.85rem 1rem;
    }
}

/* =========================================================
   DATA-DENSE MODE: Views + Forecasting
   ========================================================= */
#views-view .opportunities-view-container {
    padding: 0.85rem 0.9rem;
}

#views-view .view-header {
    padding: 8px 10px;
}

#views-view .waterfall-metrics-bar {
    padding: 8px;
    gap: 8px;
}

#views-view .waterfall-metric {
    min-height: 64px;
    padding: 8px 10px;
}

#views-view .wf-value {
    font-size: clamp(1rem, 1.6vw, 1.35rem);
}

#views-view .views-filters-bar,
#views-view .view-filters-bar {
    padding: 8px 10px;
    gap: 8px;
}

#views-view .views-filter-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px 10px;
}

#views-view .grouping-toolbar {
    padding: 8px 10px;
}

#views-view .spreadsheet-grid th,
#views-view .spreadsheet-grid td {
    padding: 0.48rem 0.56rem;
}

#views-view .spreadsheet-grid th {
    font-size: 0.74rem;
}

#views-view .spreadsheet-grid td {
    font-size: 0.83rem;
}

#views-view .views-actions .toggle-btn,
#views-view .views-actions .mini-btn,
#views-view .views-actions .mini-icon-btn {
    min-height: 32px;
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
}

#views-view #grid-pagination.grid-pagination {
    gap: 6px;
}

#views-view #grid-pagination .pager-btn {
    height: 28px;
    min-width: 50px;
}

#forecast-view .view-header {
    padding: 8px 10px;
}

#forecast-view .quartz-content-wrapper {
    padding: 0.8rem 0.9rem;
}

#forecast-view .quartz-kpis {
    gap: 8px;
}

#forecast-view .quartz-metric-grid {
    gap: 8px;
}

#forecast-view .q-metric-card {
    min-height: 96px;
    padding: 0.72rem 0.82rem;
}

#forecast-view .q-metric-card .value,
#forecast-view .q-metric-card .wf-value {
    font-size: clamp(1rem, 1.55vw, 1.3rem);
}

#forecast-view .quartz-table-container {
    padding: 0.65rem;
}

#forecast-view .quartz-table th,
#forecast-view .quartz-table td {
    padding: 0.48rem 0.55rem;
    font-size: 0.83rem;
}

#forecast-view .quartz-toolbar {
    padding: 8px 10px;
    gap: 8px;
}

#forecast-view .quartz-table-title {
    margin-bottom: 0.45rem;
}

#roi-dashboard-view .metric-card,
#tools-master-view .metric-card {
    min-height: 140px;
    padding: 1rem 1.1rem;
}

#roi-dashboard-view .content-grid {
    gap: 12px;
}

#roi-dashboard-view .data-section,
#roi-dashboard-view .chart-section,
#tools-master-view .data-section {
    padding: 1rem;
}

#roi-dashboard-view table th,
#roi-dashboard-view table td,
#tools-master-view table th,
#tools-master-view table td {
    padding: 0.75rem 0.8rem;
}

/* Forecast shell: flex so the detail column does not reserve width when closed */
#forecast-view .quartz-layout {
    display: flex;
    flex-direction: row;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    position: relative;
    align-items: stretch;
    gap: 14px;
}

#forecast-view .quartz-main {
    flex: 1 1 auto;
    min-width: 0;
}

#forecast-view .quartz-metric-grid {
    gap: 12px;
}

#forecast-view .q-metric-card {
    min-height: 112px;
    padding: 0.85rem 1rem;
}

#forecast-view .quartz-table th,
#forecast-view .quartz-table td {
    padding: 0.65rem 0.75rem;
}

/* Settings layout manager: less stretched, easier scan */
#layout-manager-view .view-filters-bar {
    padding: 12px 14px;
    border: 1px solid var(--ui-border);
    border-radius: 14px;
    background: rgba(2, 6, 23, 0.2);
}

body.light-theme #layout-manager-view .view-filters-bar {
    background: rgba(241, 245, 249, 0.7);
}

#layout-manager-view .view-grid-container.main-highlight > div {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 12px !important;
}

#layout-manager-view .glass {
    padding: 12px !important;
}

#layout-manager-view .settings-checklist .check-item {
    padding: 8px 10px;
}

/* Responsiveness + right rail control for all major pages */
@media (max-width: 1700px) {
    .roi-modern-layout {
        grid-template-columns: 1fr;
    }

    .roi-insights-rail {
        display: none;
    }

    #forecast-view .quartz-layout {
        flex-direction: column;
    }

    #forecast-view .quartz-detail-panel.open {
        position: fixed;
        top: 64px;
        right: 12px;
        bottom: 12px;
        left: auto;
        width: min(380px, calc(100vw - 24px)) !important;
        max-width: none !important;
        flex: none !important;
        min-width: 0 !important;
        max-height: none !important;
        z-index: 2000;
        box-shadow: var(--ui-shadow);
    }
}

@media (max-width: 1200px) {
    #welcome-view .profile-grid {
        grid-template-columns: 1fr;
    }

    #roi-dashboard-view .content-grid {
        grid-template-columns: 1fr;
    }

    #layout-manager-view .view-grid-container.main-highlight > div {
        grid-template-columns: 1fr !important;
    }
}

/* =========================================================
   HOME REDESIGN (v2)
   ========================================================= */
#welcome-view .welcome-screen {
    min-height: calc(100vh - 84px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem 1.4rem;
}

#welcome-view .home-shell {
    width: min(1380px, 100%);
    display: grid;
    gap: 14px;
}

#welcome-view .home-hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding: 1.25rem 1.4rem;
    border-radius: 16px;
}

#welcome-view .home-kicker {
    margin: 0 0 6px;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

#welcome-view .home-hero h1 {
    margin: 0;
    font-size: clamp(1.6rem, 2.1vw, 2.2rem);
}

#welcome-view .home-hero #welcome-user-subtitle {
    margin: 4px 0 0;
    color: var(--text-secondary);
}

#welcome-view .home-identity {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 320px;
    justify-content: flex-end;
}

#welcome-view .home-identity .company-logo-container {
    width: 70px;
    height: 70px;
    border-radius: 14px;
    padding: 12px;
}

#welcome-view .home-identity .profile-info h2 {
    margin: 0;
    font-size: 1.1rem;
}

#welcome-view .home-identity .profile-info p {
    margin: 2px 0 0;
    color: var(--text-secondary);
}

#welcome-view .home-metrics-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

#welcome-view .home-stat {
    min-height: 94px;
    padding: 0.9rem 1rem;
    border-radius: 14px;
}

#welcome-view .home-stat .val {
    font-size: 2rem;
}

#welcome-view .home-actions-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 12px;
}

#welcome-view .home-actions-grid .nav-card {
    min-height: 112px;
    padding: 1rem 1.1rem;
    border-radius: 14px;
}

#welcome-view .home-actions-grid .nav-card h3 {
    margin: 0 0 4px;
    font-size: 1.02rem;
}

#welcome-view .home-actions-grid .nav-card p {
    margin: 0;
    font-size: 0.84rem;
    line-height: 1.4;
}

#welcome-view .home-actions-grid .nav-card:nth-child(1),
#welcome-view .home-actions-grid .nav-card:nth-child(2),
#welcome-view .home-actions-grid .nav-card:nth-child(3),
#welcome-view .home-actions-grid .nav-card:nth-child(4) {
    grid-column: span 3;
}

#welcome-view .home-actions-grid .nav-card.highlight {
    grid-column: span 12;
    min-height: 92px;
}

@media (max-width: 1200px) {
    #welcome-view .welcome-screen {
        align-items: flex-start;
        min-height: auto;
    }

    #welcome-view .home-hero {
        flex-direction: column;
        align-items: flex-start;
    }

    #welcome-view .home-identity {
        justify-content: flex-start;
        min-width: 0;
    }

    #welcome-view .home-metrics-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #welcome-view .home-actions-grid .nav-card:nth-child(1),
    #welcome-view .home-actions-grid .nav-card:nth-child(2),
    #welcome-view .home-actions-grid .nav-card:nth-child(3),
    #welcome-view .home-actions-grid .nav-card:nth-child(4) {
        grid-column: span 6;
    }
}

@media (max-width: 760px) {
    #welcome-view .home-metrics-row {
        grid-template-columns: 1fr;
    }

    #welcome-view .home-actions-grid .nav-card:nth-child(1),
    #welcome-view .home-actions-grid .nav-card:nth-child(2),
    #welcome-view .home-actions-grid .nav-card:nth-child(3),
    #welcome-view .home-actions-grid .nav-card:nth-child(4),
    #welcome-view .home-actions-grid .nav-card.highlight {
        grid-column: span 12;
    }
}

/* =========================================================
   HOME REDESIGN (v3 - command center)
   ========================================================= */
#welcome-view .welcome-screen {
    min-height: calc(100vh - 96px);
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 1rem 1.35rem 1.4rem;
    background:
        radial-gradient(1200px 420px at 24% -12%, rgba(31, 111, 235, 0.16), transparent 58%),
        radial-gradient(1100px 420px at 88% -8%, rgba(63, 185, 80, 0.12), transparent 60%);
}

#welcome-view .home-v3-shell {
    width: min(1380px, 100%);
    display: grid;
    grid-template-rows: auto auto auto;
    gap: 16px;
    margin: 0 auto;
}

#welcome-view .home-v3-overview {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(320px, 1fr);
    gap: 16px;
    padding: 1.3rem 1.35rem;
    border-radius: 14px;
    border: 1px solid rgba(48, 54, 61, 0.8);
    background: linear-gradient(145deg, rgba(13, 18, 30, 0.96), rgba(10, 15, 26, 0.92));
    box-shadow: 0 16px 34px rgba(2, 6, 23, 0.4);
}

#welcome-view .home-v3-intro h1 {
    margin: 3px 0 6px;
    font-size: clamp(1.55rem, 2.05vw, 2rem);
    letter-spacing: -0.02em;
    color: #e6edf3;
}

#welcome-view .home-v3-eyebrow {
    margin: 0;
    font-size: 0.69rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #7d8590;
    font-weight: 600;
}

#welcome-view #welcome-user-subtitle {
    margin: 0;
    color: #9da7b3;
    font-size: 0.9rem;
}

#welcome-view .home-v3-identity {
    margin-top: 13px;
    display: inline-flex;
    align-items: center;
    gap: 11px;
    padding: 8px 12px;
    border: 1px solid rgba(48, 54, 61, 0.85);
    border-radius: 10px;
    background: rgba(22, 27, 34, 0.9);
}

#welcome-view .home-v3-identity .company-logo-container {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    padding: 8px;
    background: #111827;
}

#welcome-view .home-v3-identity .profile-info h2 {
    margin: 0;
    font-size: 0.96rem;
    color: #e6edf3;
}

#welcome-view .home-v3-identity .profile-info p {
    margin: 2px 0 0;
    font-size: 0.8rem;
    color: #8b949e;
}

#welcome-view .home-v3-stat-stack {
    display: grid;
    gap: 8px;
}

#welcome-view .home-v3-stat {
    border: 1px solid rgba(48, 54, 61, 0.85);
    border-radius: 10px;
    background: rgba(13, 18, 28, 0.94);
    padding: 9px 11px;
    min-height: 74px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#welcome-view .home-v3-stat label {
    font-size: 0.63rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #7d8590;
    font-weight: 600;
}

#welcome-view .home-v3-stat .val {
    font-size: 1.65rem;
    font-weight: 700;
    line-height: 1.1;
    color: #e6edf3;
}

#welcome-view .home-v3-actions {
    display: grid;
    gap: 10px;
}

#welcome-view .home-v3-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 0 2px;
}

#welcome-view .home-v3-section-head h2 {
    margin: 0;
    font-size: 0.84rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8b949e;
    font-weight: 600;
}

#welcome-view .home-v3-section-head span {
    font-size: 0.74rem;
    color: #58a6ff;
}

#welcome-view .home-v3-action-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

#welcome-view .home-v3-tile {
    padding: 0.95rem 1rem;
    border-radius: 10px;
    min-height: 120px;
    border: 1px solid rgba(48, 54, 61, 0.9);
    background: linear-gradient(180deg, rgba(17, 24, 39, 0.94), rgba(13, 18, 30, 0.94));
    box-shadow: 0 8px 20px rgba(2, 6, 23, 0.34);
    transition: transform 0.16s ease, border-color 0.18s ease, background 0.18s ease;
}

#welcome-view .home-v3-tile:hover {
    transform: translateY(-1px);
    border-color: rgba(88, 166, 255, 0.42);
    background: linear-gradient(180deg, rgba(20, 30, 48, 0.96), rgba(13, 19, 33, 0.96));
}

#welcome-view .home-v3-tile-kicker {
    display: inline-block;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: #7d8590;
    margin-bottom: 5px;
    font-weight: 600;
}

#welcome-view .home-v3-tile h3 {
    margin: 0 0 5px;
    font-size: 1rem;
    color: #e6edf3;
}

#welcome-view .home-v3-tile p {
    margin: 0;
    color: #98a2af;
    font-size: 0.79rem;
    line-height: 1.36;
    max-width: 48ch;
}

#welcome-view .home-v3-footer {
    padding: 0.92rem 1rem;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid rgba(48, 54, 61, 0.8);
    background: linear-gradient(145deg, rgba(13, 18, 30, 0.96), rgba(10, 15, 26, 0.92));
}

#welcome-view .home-v3-footer-copy h3 {
    margin: 0 0 2px;
    font-size: 0.95rem;
    color: #e6edf3;
}

#welcome-view .home-v3-footer-copy p {
    margin: 0;
    color: #8b949e;
    font-size: 0.79rem;
}

#welcome-view .home-v3-tour-cta {
    position: relative;
    min-width: 190px;
    border: 1px solid rgba(88, 166, 255, 0.5);
    border-radius: 10px;
    padding: 12px 16px 13px;
    background: linear-gradient(135deg, rgba(31, 111, 235, 0.24), rgba(31, 111, 235, 0.1));
    color: #e6edf3;
    font-weight: 700;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
}

/* tour.css uses position:absolute on .tour-badge; stack badge above label so it never covers text */
#welcome-view .home-v3-tour-cta .tour-badge {
    position: static;
    top: auto;
    right: auto;
    animation: none;
    order: -1;
}

#welcome-view .home-v3-tour-label {
    display: block;
    font-size: 1rem;
    line-height: 1.35;
    text-align: center;
}

@media (max-width: 1180px) {
    #welcome-view .welcome-screen {
        min-height: auto;
        align-items: flex-start;
    }

    #welcome-view .home-v3-overview {
        grid-template-columns: 1fr;
    }

    #welcome-view .home-v3-action-row {
        grid-template-columns: 1fr;
    }

    #welcome-view .home-v3-footer {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* =========================================================
   PRODUCTION LAYOUT HOTFIX (Views + Forecast)
   Prevent overlap/cramped content on laptop widths.
   ========================================================= */
#views-view .views-filters-bar {
    grid-template-columns: minmax(260px, 0.95fr) minmax(420px, 1.7fr) auto;
    align-items: start;
}

#views-view .views-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 220px;
}

#views-view .views-actions .mini-btn,
#views-view .views-actions .mini-icon-btn,
#views-view .views-actions .toggle-btn {
    flex: 0 0 auto;
}

/* Keep views content readable by collapsing right rail sooner. */
@media (max-width: 1860px) {
    .views-modern-layout {
        grid-template-columns: 1fr !important;
    }

    .views-insights-rail {
        display: none !important;
    }
}

/* =========================================================
   SIDEBAR COLLAPSED — icon rail polish (centered, no stray carets)
   Overrides duplicate .nav-item rules above + Phase 1 block.
   ========================================================= */
.sidebar.collapsed .sidebar-nav {
    padding: 0 0.35rem;
}

.sidebar.collapsed .nav-group {
    margin-top: 0.35rem;
}

.sidebar.collapsed .nav-group:first-of-type {
    margin-top: 0;
}

.sidebar.collapsed .nav-item {
    margin: 2px 4px !important;
    padding: 0.55rem 0.2rem !important;
    justify-content: center !important;
    gap: 0 !important;
    border-left: none !important;
}

.sidebar.collapsed .nav-parent .dropdown-caret {
    display: none !important;
}

.sidebar.collapsed .nav-item::before {
    display: none !important;
}

.sidebar.collapsed .nav-item:hover {
    transform: none !important;
}

.sidebar.collapsed .nav-item.active {
    border-left: none !important;
    border-radius: 10px !important;
    background: rgba(59, 130, 246, 0.22) !important;
    box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.45) !important;
}

.sidebar.collapsed .nav-item .icon {
    width: 1.35rem !important;
    min-width: 1.35rem !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.sidebar.collapsed .nav-item .icon i {
    font-size: 1.05rem !important;
    line-height: 1 !important;
}

.sidebar.collapsed .logout-item {
    justify-content: center !important;
}

.sidebar.collapsed .system-status {
    justify-content: center;
    padding: 0.15rem 0;
}

.sidebar.collapsed .system-status-text {
    display: none;
}

/* =========================================================
   Key Metrics Dashboard — subtle 3D depth (attractive, not gimmicky)
   Usage:
     <div class="key-metrics-deck">
       <div class="key-metrics-grid">
         <div class="glass key-metrics-card-3d">… chart …</div>
       </div>
     </div>
   ========================================================= */

.key-metrics-deck {
    perspective: var(--km-perspective);
    perspective-origin: 50% 35%;
    transform-style: preserve-3d;
    width: 100%;
}

.key-metrics-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
    transform-style: preserve-3d;
}

.key-metrics-card-3d {
    position: relative;
    transform-style: preserve-3d;
    transform: translateZ(0) rotateX(var(--km-tilt-rest));
    transition:
        transform 0.38s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.38s ease,
        border-color 0.3s ease;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.07) inset,
        0 -1px 0 rgba(0, 0, 0, 0.45) inset,
        var(--km-depth-shadow);
    border-color: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.key-metrics-card-3d::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
        155deg,
        rgba(255, 255, 255, 0.09) 0%,
        rgba(255, 255, 255, 0.02) 38%,
        transparent 52%,
        rgba(0, 0, 0, 0.18) 100%
    );
    pointer-events: none;
    z-index: 0;
    mix-blend-mode: soft-light;
}

.key-metrics-card-3d::after {
    content: "";
    position: absolute;
    inset: auto 8% -40% 8%;
    height: 55%;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(75, 137, 220, 0.22), transparent 70%);
    pointer-events: none;
    z-index: 0;
    transform: translateZ(-8px) rotateX(78deg);
    opacity: 0.52;
    filter: blur(1px);
}

.key-metrics-card-3d:hover {
    transform: translateY(calc(-1 * var(--km-lift-hover))) translateZ(14px) rotateX(var(--km-tilt-hover));
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.08) inset,
        0 -1px 0 rgba(0, 0, 0, 0.28) inset,
        0 22px 46px -16px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(75, 137, 220, 0.12);
    border-color: rgba(75, 137, 220, 0.2);
}

.key-metrics-card-3d .chart-wrapper,
.key-metrics-card-3d .chart-container,
.key-metrics-card-3d canvas {
    position: relative;
    z-index: 1;
    transform: translateZ(6px);
}

.key-metrics-kpi-row {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.85rem;
    margin-bottom: 1.2rem;
    transform-style: preserve-3d;
}

.key-metrics-kpi-3d {
    position: relative;
    padding: 0.9rem 1rem;
    border-radius: var(--radius-standard);
    background: linear-gradient(165deg, rgba(31, 41, 55, 0.95), rgba(17, 24, 39, 0.75));
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.06) inset,
        0 10px 24px -8px rgba(0, 0, 0, 0.5);
    transform: translateZ(2px) rotateX(0.35deg);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.key-metrics-kpi-3d label {
    display: block;
    color: var(--text-muted);
    font-size: 0.73rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-bottom: 0.45rem;
    font-weight: 600;
}

.key-metrics-kpi-3d .card-value {
    font-size: clamp(1.02rem, 1.6vw, 1.35rem);
    font-weight: 700;
    letter-spacing: -0.01em;
}

.km-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid var(--ui-border);
    border-radius: 999px;
    padding: 0.34rem 0.68rem;
    font-size: 0.75rem;
    font-weight: 600;
    background: rgba(15, 23, 42, 0.4);
}

.km-pill.is-up {
    color: #34d399;
    border-color: rgba(16, 185, 129, 0.28);
    background: rgba(16, 185, 129, 0.08);
}

.km-pill.is-down {
    color: #fecaca;
    border-color: rgba(239, 68, 68, 0.22);
    background: rgba(239, 68, 68, 0.06);
}

.km-pill.is-flat {
    color: var(--text-secondary);
}

.km-demo-note {
    margin-bottom: 10px;
    border: 1px dashed rgba(59, 130, 246, 0.35);
    border-radius: 10px;
    padding: 0.45rem 0.65rem;
    font-size: 0.78rem;
    color: #93c5fd;
    background: rgba(59, 130, 246, 0.08);
}

#key-metrics-view .view-grid-container {
    width: 100%;
    max-width: 1460px;
}

#key-metrics-view .view-header .header-main h1 {
    letter-spacing: -0.02em;
}

#key-metrics-view .section-header {
    margin-bottom: 0.75rem;
}

#key-metrics-view .section-header h2 {
    font-size: 0.94rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    font-weight: 700;
}

#key-metrics-view .key-metrics-card-3d .chart-wrapper {
    min-height: 260px;
    position: relative;
}

.km-owner-list {
    display: grid;
    gap: 0.62rem;
}

.km-chart-empty {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.83rem;
    padding: 1rem;
    background: linear-gradient(180deg, rgba(10, 15, 24, 0.18), rgba(10, 15, 24, 0.28));
    border-radius: 10px;
    z-index: 3;
}

.km-chart-empty.show {
    display: flex;
}

.key-metrics-card-3d.km-card-empty {
    border-color: rgba(148, 163, 184, 0.16);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.04) inset,
        0 -1px 0 rgba(0, 0, 0, 0.18) inset,
        0 12px 24px -14px rgba(0, 0, 0, 0.45);
}

.key-metrics-card-3d.km-card-empty .badge.subtle {
    opacity: 0.7;
}

.key-metrics-card-3d.km-card-empty .chart-wrapper {
    min-height: 150px !important;
    height: 150px !important;
}

.km-card-aging.km-card-empty .chart-wrapper {
    min-height: 120px !important;
    height: 120px !important;
}

.km-card-aging {
    grid-column: 1 / -1;
}

.km-card-advanced-empty {
    grid-column: 1 / -1;
}

.km-owner-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.32);
}

.km-owner-rank {
    width: 1.55rem;
    min-width: 1.55rem;
    height: 1.55rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 700;
    color: #dbeafe;
    background: rgba(59, 130, 246, 0.28);
    border: 1px solid rgba(59, 130, 246, 0.42);
}

.km-owner-main {
    flex: 1;
    min-width: 0;
}

.km-owner-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.8rem;
}

.km-owner-name {
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.km-owner-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.km-owner-deals {
    color: var(--text-muted);
}

.km-owner-amount {
    font-weight: 650;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.km-owner-bar-track {
    margin-top: 0.45rem;
    width: 100%;
    height: 6px;
    border-radius: 99px;
    background: rgba(148, 163, 184, 0.18);
    overflow: hidden;
}

.km-owner-bar-fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.9), rgba(16, 185, 129, 0.82));
}

.km-owner-empty {
    color: var(--text-muted);
    text-align: center;
    padding: 0.9rem;
    border: 1px dashed rgba(148, 163, 184, 0.24);
    border-radius: 10px;
}

@media (max-width: 1320px) {
    .key-metrics-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .key-metrics-kpi-row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 860px) {
    .key-metrics-grid {
        grid-template-columns: 1fr;
    }
    .key-metrics-kpi-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.key-metrics-kpi-3d:hover {
    transform: translateY(-3px) translateZ(8px) rotateX(0.8deg);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.08) inset,
        0 16px 32px -10px rgba(0, 0, 0, 0.55);
}

body.light-theme .key-metrics-card-3d {
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.65) inset,
        0 -1px 0 rgba(15, 23, 42, 0.06) inset,
        0 18px 40px -12px rgba(15, 23, 42, 0.12),
        0 4px 14px rgba(15, 23, 42, 0.08);
    border-color: rgba(15, 23, 42, 0.08);
}

body.light-theme .key-metrics-card-3d::before {
    background: linear-gradient(
        155deg,
        rgba(255, 255, 255, 0.55) 0%,
        rgba(255, 255, 255, 0.1) 40%,
        transparent 55%,
        rgba(15, 23, 42, 0.04) 100%
    );
    mix-blend-mode: multiply;
}

body.light-theme .key-metrics-card-3d::after {
    background: radial-gradient(ellipse at center, rgba(75, 137, 220, 0.12), transparent 72%);
}

body.light-theme .key-metrics-kpi-3d {
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.95), rgba(241, 245, 249, 0.88));
    border-color: rgba(15, 23, 42, 0.08);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 10px 24px -8px rgba(15, 23, 42, 0.1);
}

body.light-theme .km-owner-item {
    background: rgba(255, 255, 255, 0.76);
    border-color: rgba(15, 23, 42, 0.1);
}

body.light-theme .km-owner-rank {
    background: rgba(59, 130, 246, 0.14);
    color: #1e40af;
}

body.light-theme .km-owner-bar-track {
    background: rgba(148, 163, 184, 0.28);
}

body.light-theme .km-pill {
    background: rgba(255, 255, 255, 0.86);
    border-color: rgba(15, 23, 42, 0.12);
}

@media (prefers-reduced-motion: reduce) {
    .app-main {
        perspective: none;
    }

    .glass,
    .modal-content,
    .login-card,
    .right-rail-shell,
    .profile-main-card:not(.glass),
    .nav-card:not(.glass),
    .metric-card:not(.glass),
    .highlight-card:not(.glass),
    .user-profile-card:not(.glass),
    .ai-search-bar-container,
    .waterfall-metric,
    .p-metric-card,
    .primary-btn,
    .btn-primary,
    .btn-login {
        transform: none;
    }

    .glass:hover,
    .card-premium:hover:not(.glass),
    .metric-card:hover:not(.glass),
    .nav-card:hover:not(.glass),
    .data-section:hover,
    .chart-section:hover,
    .primary-btn:hover,
    .btn-primary:hover,
    .btn-login:hover,
    .nav-item:hover,
    .nav-item.active {
        transform: none;
    }

    .modal-content {
        animation: none;
    }

    .login-card {
        animation: none;
    }

    .glass {
        transition: border-color 0.25s ease, box-shadow 0.25s ease;
    }

    .key-metrics-card-3d,
    .key-metrics-kpi-3d {
        transition: none;
    }

    .key-metrics-card-3d:hover,
    .key-metrics-kpi-3d:hover {
        transform: none;
    }
}

/* =========================================================
   Employee ROI — enterprise spec (GitHub-style dark)
   ========================================================= */
.is-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    border: 0 !important;
}

.roi-spec-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.app-main:has(#roi-dashboard-view.active) > .breadcrumb-bar {
    display: none !important;
}

/* ROI-only: top dismissible error banner (not inside hero) */
.roi-view-toast-host {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10050;
    max-width: min(520px, calc(100vw - 32px));
    pointer-events: none;
}

.roi-view-toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 8px;
    border: 0.5px solid #f8514988;
    background: #21262d;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
    color: #e6edf3;
    font-size: 13px;
    font-weight: 500;
}

.roi-view-toast-msg {
    flex: 1;
    line-height: 1.45;
    color: #c9d1d9;
}

.roi-view-toast-dismiss {
    flex-shrink: 0;
    border: none;
    background: transparent;
    color: #7d8590;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
    margin: -4px 0 0;
}

.roi-view-toast-dismiss:hover {
    color: #e6edf3;
}

/* Global sidebar — glass highlight for Employee ROI when on that view */
.app-main:has(#roi-dashboard-view.active) #sidebar .nav-item[data-view="roi-dashboard"].active {
    background: rgba(88, 166, 255, 0.14);
    border: 1px solid rgba(88, 166, 255, 0.38);
    box-shadow:
        0 0 0 1px rgba(88, 166, 255, 0.1),
        0 12px 36px rgba(0, 0, 0, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transform: translateX(0) !important;
}

#roi-dashboard-view.roi-spec-dashboard,
#roi-dashboard-view .roi-spec-dashboard {
    background: #0d1117;
    min-height: calc(100vh - 24px);
}

#roi-dashboard-view .dashboard-content.roi-spec-dashboard {
    padding: 0;
    max-width: none;
}

.roi-spec-page {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 32px);
    background: #0d1117;
    color: #e6edf3;
    font-weight: 400;
}

.roi-spec-topbar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 16px;
    border-bottom: 0.5px solid #30363d;
    background: #161b22;
    flex-shrink: 0;
}

.roi-spec-topbar-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.roi-spec-topbar-logo {
    border-radius: 6px;
    display: none;
}

.roi-spec-topbar-brand {
    font-size: 14px;
    font-weight: 500;
    color: #e6edf3;
    letter-spacing: -0.02em;
}

.roi-spec-mobile-btn {
    background: #21262d;
    border: 0.5px solid #30363d;
    color: #e6edf3;
    border-radius: 6px;
    padding: 6px 10px;
    cursor: pointer;
}

.roi-spec-breadcrumb {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 13px;
    color: #7d8590;
    min-width: 0;
}

.roi-spec-breadcrumb .breadcrumb-item {
    color: #7d8590;
    cursor: default;
}

.roi-spec-breadcrumb .breadcrumb-item[data-nav] {
    cursor: pointer;
    color: #58a6ff;
}

.roi-spec-breadcrumb .breadcrumb-sep {
    color: #484f58;
    font-size: 11px;
    user-select: none;
}

.roi-spec-topbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.roi-spec-sync {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #7d8590;
}

.roi-spec-sync-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #3fb950;
    box-shadow: 0 0 0 3px rgba(63, 185, 80, 0.2);
}

.roi-spec-btn-secondary {
    background: #21262d;
    border: 0.5px solid #30363d;
    color: #c9d1d9;
    border-radius: 6px;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.roi-spec-btn-secondary:hover {
    background: #30363d;
    color: #e6edf3;
}

.roi-spec-btn-primary {
    background: #1f6feb;
    border: 0.5px solid rgba(240, 246, 252, 0.1);
    color: #fff;
    border-radius: 6px;
    padding: 7px 16px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

.roi-spec-btn-primary:hover:not(:disabled) {
    background: #388bfd;
}

.roi-spec-btn-primary:disabled,
.roi-spec-btn-primary.disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.roi-spec-export-wrap {
    position: relative;
}

.roi-spec-export-wrap .dropdown-menu {
    right: 0;
    left: auto;
    background: #21262d;
    border: 0.5px solid #30363d;
}

.roi-spec-content-row {
    display: flex;
    flex: 1;
    min-height: 0;
    align-items: stretch;
}

.roi-bc-brand {
    font-size: 13px;
    font-weight: 500;
    color: #e6edf3;
    letter-spacing: -0.02em;
}

.roi-spec-scope-bar {
    margin: 0 0 12px;
    padding: 12px 14px;
    background: #161b22;
    border: 0.5px solid #30363d;
    border-radius: 8px;
}

.roi-spec-scope-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 20px;
    align-items: flex-end;
}

.roi-spec-filter-field label {
    display: block;
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #7d8590;
    margin-bottom: 4px;
}

.roi-spec-select {
    width: 100%;
    background: #21262d !important;
    border: 0.5px solid #30363d !important;
    color: #e6edf3 !important;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
}

.roi-spec-main-col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: #0d1117;
}

.roi-spec-main-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 18px 20px 28px;
}

.roi-spec-empty {
    margin: 24px;
    border-radius: 8px;
    border: 0.5px solid #30363d;
    background: #161b22;
}

.roi-spec-main-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.roi-spec-page-title {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    color: #e6edf3;
}

.roi-spec-page-sub {
    margin: 6px 0 0;
    font-size: 13px;
    color: #7d8590;
    font-weight: 400;
}

.roi-spec-header-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.roi-spec-header-select {
    min-width: 140px;
}

.roi-spec-hero-card {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 20px;
    background: #1c2333;
    border: 0.5px solid #30363d;
    border-radius: 8px;
    margin-bottom: 14px;
}

.roi-spec-hero-left {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    min-width: 0;
    flex: 1;
}

#roi-dashboard-view .roi-spec-hero-avatar {
    width: 48px;
    height: 48px;
    min-width: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(31, 111, 235, 0.133);
    border: 2px solid rgba(31, 111, 235, 0.267);
    color: #58a6ff;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    box-sizing: border-box;
}

#roi-dashboard-view .roi-spec-hero-identity {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.roi-spec-hero-name {
    font-size: 16px;
    font-weight: 500;
    color: #e6edf3;
}

#roi-dashboard-view .roi-spec-hero-role {
    margin: 0;
    font-size: 12px;
    color: #7d8590;
    font-weight: 400;
    line-height: 1.35;
}

#roi-dashboard-view .roi-spec-live-pill-hero {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 4px 10px;
    border-radius: 20px;
    background: rgba(63, 185, 80, 0.133);
    border: 0.5px solid rgba(63, 185, 80, 0.267);
    font-size: 10px;
    font-weight: 500;
    color: #3fb950;
    letter-spacing: 0.01em;
}

.roi-spec-hero-actions {
    margin-top: 12px;
}

.roi-spec-lifecycle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    border: 0.5px solid #30363d;
    background: #21262d;
    color: #c9d1d9;
    cursor: pointer;
}

.roi-spec-lifecycle-btn:hover {
    background: #30363d;
    color: #e6edf3;
    border-color: #58a6ff;
}

.roi-spec-hero-right {
    text-align: right;
    min-width: 160px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
}

.roi-spec-hero-xlabel {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #7d8590;
}

.roi-spec-hero-xvalue {
    font-size: 44px;
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -2px;
    color: #58a6ff;
    margin: 4px 0 6px;
}

.roi-spec-hero-delta {
    font-size: 13px;
    font-weight: 500;
    margin: 0;
}

#roi-dashboard-view .roi-spec-hero-delta-line {
    margin-top: 4px;
    font-size: 12px;
    font-weight: 500;
}

.roi-spec-hero-delta.is-pos {
    color: #3fb950;
}

.roi-spec-hero-delta.is-neg {
    color: #f85149;
}

.roi-spec-hero-delta.is-neutral {
    color: #7d8590;
}

.roi-spec-kpi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 14px;
}

.roi-spec-kpi-card {
    background: #161b22;
    border: 0.5px solid #30363d;
    border-radius: 8px;
    padding: 14px 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.roi-spec-kpi-label {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #7d8590;
}

.roi-spec-kpi-value {
    font-size: 22px;
    font-weight: 500;
    color: #e6edf3;
}

.roi-spec-kpi-delta {
    font-size: 13px;
    font-weight: 500;
}

.roi-spec-kpi-delta.trend-pos {
    color: #3fb950;
}

.roi-spec-kpi-delta.trend-neg {
    color: #f85149;
}

.roi-spec-kpi-delta.trend-neu {
    color: #7d8590;
}

.roi-spec-kpi-detail {
    font-size: 13px;
    font-weight: 500;
    color: #c9d1d9;
}

.roi-spec-kpi-meta {
    font-size: 11px;
    font-weight: 500;
    color: #7d8590;
}

.roi-spec-kpi-source {
    font-size: 10px;
    font-weight: 400;
    color: #7d8590;
    margin-top: 4px;
}

.roi-spec-charts-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 14px;
}

.roi-spec-chart-card {
    background: #161b22;
    border: 0.5px solid #30363d;
    border-radius: 8px;
    padding: 14px 14px 12px;
}

.roi-spec-chart-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.roi-spec-chart-title {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    color: #e6edf3;
}

.roi-spec-chart-pill {
    font-size: 11px;
    font-weight: 500;
    padding: 3px 10px;
    border-radius: 20px;
    background: #21262d;
    border: 0.5px solid #30363d;
    color: #7d8590;
}

.roi-spec-chart-pill.subtle {
    text-transform: lowercase;
}

.roi-sparkline-wrap {
    position: relative;
    padding-bottom: 18px;
}

.roi-revenue-sparkline {
    width: 100%;
    max-width: 280px;
    height: auto;
    display: block;
    cursor: pointer;
}

.roi-sparkline-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    max-width: 280px;
    font-size: 10px;
    font-weight: 500;
    color: #7d8590;
}

.roi-sparkline-labels span {
    flex: 1;
    text-align: center;
}

.roi-cost-bars {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.roi-cost-bar-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    font-weight: 500;
    color: #c9d1d9;
}

.roi-cost-bar-label {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.roi-cost-bar-track {
    flex: 2;
    height: 6px;
    border-radius: 3px;
    background: #21262d;
    position: relative;
    overflow: hidden;
}

.roi-cost-bar-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    border-radius: 3px;
    max-width: 100%;
}

.roi-cost-bar-amt {
    width: 72px;
    text-align: right;
    font-size: 11px;
    font-weight: 500;
    color: #e6edf3;
}

#roi-dashboard-view .roi-spec-insights-shell {
    width: 100%;
    margin-top: 10px;
    box-sizing: border-box;
}

#roi-dashboard-view .roi-spec-insights-card {
    background: #161b22;
    border: 0.5px solid #30363d;
    border-radius: 8px;
    padding: 14px 16px;
    box-sizing: border-box;
}

#roi-dashboard-view .roi-spec-insights-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

#roi-dashboard-view .roi-spec-insights-title {
    margin: 0;
    font-size: 12px;
    font-weight: 500;
    color: #c9d1d9;
}

#roi-dashboard-view .roi-spec-insights-chip {
    font-size: 10px;
    font-weight: 500;
    text-transform: lowercase;
    padding: 3px 10px;
    border-radius: 20px;
    background: #21262d;
    border: 0.5px solid #30363d;
    color: #7d8590;
    flex-shrink: 0;
}

#roi-dashboard-view .roi-spec-insights-rows {
    display: block;
}

#roi-dashboard-view .roi-insight-line {
    background: #21262d;
    border-radius: 6px;
    padding: 8px 10px;
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.45;
    color: #c9d1d9;
    border-left: 2px solid #3fb950;
    box-sizing: border-box;
}

#roi-dashboard-view .roi-insight-line:last-child {
    margin-bottom: 0;
}

#roi-dashboard-view .roi-insight-line--warn {
    border-left-color: #d29922;
}

.roi-spec-tools-block {
    background: #161b22;
    border: 0.5px solid #30363d;
    border-radius: 8px;
    padding: 14px;
    margin-bottom: 12px;
}

.roi-spec-tools-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.roi-spec-footer {
    margin-top: 8px;
}

.roi-spec-rail {
    width: 200px;
    flex-shrink: 0;
    background: #161b22;
    border-left: 0.5px solid #30363d;
    padding: 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
}

.roi-spec-rail-section {
    border: 0.5px solid #30363d;
    border-radius: 8px;
    background: #161b22;
    padding: 12px 10px;
}

.roi-spec-rail-title-row {
    margin-bottom: 8px;
}

.roi-spec-rail-title-row h3 {
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    color: #e6edf3;
}

.roi-spec-live-pill {
    font-size: 10px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 20px;
    background: rgba(63, 185, 80, 0.15);
    color: #3fb950;
    border: 0.5px solid rgba(63, 185, 80, 0.35);
}

.roi-spec-rail-stats .rail-stat {
    border: 0.5px solid #30363d;
    background: #21262d;
    font-size: 12px;
}

.roi-spec-rail-stats .rail-stat label {
    color: #7d8590;
    font-weight: 400;
}

.roi-spec-rail-stats .rail-stat span {
    font-weight: 500;
    color: #e6edf3;
}

.roi-rail-xfactor-val {
    color: #58a6ff !important;
}

#roi-rail-refresh-status.is-locked-warn {
    color: #d29922;
}

.roi-spec-rail-h {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 500;
    color: #e6edf3;
}

.roi-spec-rail-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.roi-spec-rail-btn {
    width: 100%;
    padding: 8px 10px;
    border-radius: 6px;
    border: 0.5px solid #30363d;
    background: #21262d;
    color: #c9d1d9;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    text-align: center;
}

.roi-spec-rail-btn:hover:not(:disabled) {
    background: #30363d;
    color: #e6edf3;
}

.roi-spec-rail-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

@media (max-width: 1100px) {
    .roi-spec-content-row {
        flex-direction: column;
    }

    .roi-spec-rail {
        width: 100%;
        border-right: none;
        border-left: none;
        border-bottom: 0.5px solid #30363d;
    }

    .roi-spec-kpi-grid {
        grid-template-columns: 1fr;
    }

    .roi-spec-charts-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .roi-spec-topbar-logo {
        display: block;
    }

    .roi-spec-topbar {
        flex-wrap: wrap;
    }

    .roi-spec-breadcrumb {
        order: 3;
        width: 100%;
    }
}

body.light-theme #roi-dashboard-view .roi-spec-page {
    background: #f6f8fa;
    color: #1f2328;
}

body.light-theme #roi-dashboard-view .roi-spec-topbar,
body.light-theme #roi-dashboard-view .roi-spec-rail,
body.light-theme #roi-dashboard-view .roi-spec-kpi-card,
body.light-theme #roi-dashboard-view .roi-spec-chart-card,
body.light-theme #roi-dashboard-view .roi-spec-tools-block {
    background: #ffffff;
    border-color: #d0d7de;
    color: #1f2328;
}

/* =========================================================
   SIDEBAR MINIMAL RESTYLE (visual only)
   ========================================================= */
:root {
    --sidebar-width: 200px;
    --sidebar-collapsed-width: 64px;
}

#sidebar.sidebar {
    width: 200px !important;
    background: #0b0f14 !important;
    border-right: 0.5px solid #1a1f26 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

#sidebar.sidebar.collapsed {
    width: var(--sidebar-collapsed-width) !important;
}

#sidebar.sidebar.collapsed + .app-main {
    margin-left: var(--sidebar-collapsed-width) !important;
    width: calc(100vw - var(--sidebar-collapsed-width)) !important;
    max-width: calc(100vw - var(--sidebar-collapsed-width)) !important;
}

#sidebar .sidebar-header {
    min-height: 52px !important;
    padding: 10px 8px !important;
    border-bottom: none !important;
}

#sidebar .sidebar-brand {
    gap: 0 !important;
}

#sidebar .sidebar-logo-wrapper,
#sidebar .sidebar-logo-img {
    display: none !important;
}

#sidebar .brand-text {
    display: inline-flex !important;
    align-items: center;
    font-family: var(--font-primary), -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #c9d1d9 !important;
    background: none !important;
    -webkit-text-fill-color: initial !important;
    line-height: 1 !important;
    margin: 0 !important;
}

#sidebar.sidebar.collapsed .brand-text {
    display: none !important;
}

#sidebar.sidebar.collapsed .sidebar-header {
    justify-content: center !important;
    padding: 8px 4px !important;
}

#sidebar.sidebar.collapsed .sidebar-toggle-btn {
    position: static !important;
    transform: none !important;
    margin: 0 auto !important;
}

#sidebar .brand-text .brand-rev,
#sidebar .brand-text .brand-ly {
    color: #c9d1d9;
}

#sidebar .brand-text .brand-ops {
    color: #4493f8;
}

#sidebar .sidebar-toggle-btn {
    width: 22px !important;
    height: 22px !important;
    border-radius: 5px !important;
    border: 0.5px solid #1e242c !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #484f58 !important;
}

#sidebar .sidebar-toggle-btn:hover {
    background: #0f1419 !important;
    color: #484f58 !important;
    border-color: #1e242c !important;
}

#sidebar .sidebar-toggle-btn .toggle-icon i {
    font-size: 10px !important;
    color: #484f58 !important;
}

#sidebar .sidebar-nav {
    padding: 4px 6px !important;
}

#sidebar .nav-group {
    margin-top: 5px !important;
}

#sidebar .nav-group + .nav-group {
    border-top: 0.5px solid #141920;
    margin: 5px 4px 0;
    padding-top: 5px;
}

#sidebar .nav-group-label {
    padding: 10px 6px 3px !important;
    margin: 0 !important;
    font-size: 9.5px !important;
    letter-spacing: 0.9px !important;
    text-transform: uppercase !important;
    color: #4a515c !important;
    font-weight: 500 !important;
    opacity: 1 !important;
}

#sidebar .nav-item {
    padding: 5px 6px !important;
    margin: 0 0 1px !important;
    border-radius: 5px !important;
    gap: 8px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    transform: none !important;
}

#sidebar .nav-item:hover,
#sidebar .nav-item.active,
#sidebar .nav-item.parent-open {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    transform: none !important;
}

#sidebar .nav-item::before {
    left: -8px !important;
    top: 5px !important;
    bottom: 5px !important;
    width: 1.5px !important;
    height: auto !important;
    border-radius: 1px !important;
    background: #4493f8 !important;
    box-shadow: none !important;
    opacity: 0;
    transform: none !important;
}

#sidebar .nav-item.active::before {
    opacity: 1;
}

#sidebar .nav-item .icon {
    width: 13px !important;
    min-width: 13px !important;
    font-size: 13px !important;
    color: #9aa4af !important;
    opacity: 0.45;
}

#sidebar .nav-item:hover .icon {
    opacity: 0.82;
}

#sidebar .nav-item.active .icon {
    opacity: 1;
}

#sidebar .nav-item .label {
    font-size: 12px !important;
    color: #646d78 !important;
    font-weight: 400 !important;
}

#sidebar .nav-item:hover .label {
    color: #9aa4af !important;
}

#sidebar .nav-item.active .label {
    color: #c9d1d9 !important;
    font-weight: 500 !important;
}

#sidebar #views-nav-item.parent-open .label,
#sidebar #settings-nav-item.parent-open .label {
    color: #9aa4af !important;
}

#sidebar #views-nav-item.parent-open .icon,
#sidebar #settings-nav-item.parent-open .icon {
    opacity: 0.82 !important;
}

#sidebar #views-nav-item .dropdown-caret,
#sidebar #settings-nav-item .dropdown-caret {
    color: #2a3038 !important;
    transition: transform 0.15s ease !important;
}

#sidebar #views-nav-item:hover .dropdown-caret,
#sidebar #settings-nav-item:hover .dropdown-caret {
    color: #484f58 !important;
}

#sidebar #views-nav-item .dropdown-caret svg,
#sidebar #settings-nav-item .dropdown-caret svg {
    width: 10px !important;
    height: 10px !important;
}

#sidebar #views-submenu,
#sidebar #settings-submenu,
#sidebar #forecast-submenu {
    margin: 0 0 4px 22px !important;
    border-left: 0.5px solid #1a1f26 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

#sidebar #views-submenu .nav-submenu-item,
#sidebar #settings-submenu .nav-submenu-item,
#sidebar #forecast-submenu .nav-submenu-item {
    padding: 4px 8px !important;
    border-radius: 5px !important;
    border-left: 1px solid transparent !important;
    background: transparent !important;
}

#sidebar #views-submenu .nav-submenu-item:hover,
#sidebar #settings-submenu .nav-submenu-item:hover,
#sidebar #forecast-submenu .nav-submenu-item:hover,
#sidebar #views-submenu .nav-submenu-item.active,
#sidebar #settings-submenu .nav-submenu-item.active,
#sidebar #forecast-submenu .nav-submenu-item.active {
    background: transparent !important;
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

#sidebar #views-submenu .nav-submenu-item.active,
#sidebar #settings-submenu .nav-submenu-item.active,
#sidebar #forecast-submenu .nav-submenu-item.active {
    border-left-color: #4493f8 !important;
}

#sidebar #views-submenu .submenu-dot,
#sidebar #settings-submenu .submenu-dot,
#sidebar #forecast-submenu .submenu-dot {
    width: 4px !important;
    height: 4px !important;
    background: #1e242c !important;
}

#sidebar #views-submenu .nav-submenu-item.active .submenu-dot,
#sidebar #settings-submenu .nav-submenu-item.active .submenu-dot,
#sidebar #forecast-submenu .nav-submenu-item.active .submenu-dot {
    background: #4493f8 !important;
}

#sidebar #views-submenu .submenu-label,
#sidebar #settings-submenu .submenu-label,
#sidebar #forecast-submenu .submenu-label {
    font-size: 11.5px !important;
    color: #505863 !important;
    font-weight: 400 !important;
}

#sidebar #views-submenu .nav-submenu-item:hover .submenu-label,
#sidebar #settings-submenu .nav-submenu-item:hover .submenu-label,
#sidebar #forecast-submenu .nav-submenu-item:hover .submenu-label {
    color: #9aa4af !important;
}

#sidebar #views-submenu .nav-submenu-item.active .submenu-label,
#sidebar #settings-submenu .nav-submenu-item.active .submenu-label,
#sidebar #forecast-submenu .nav-submenu-item.active .submenu-label {
    color: #c9d1d9 !important;
    font-weight: 500 !important;
}

#sidebar #views-submenu .submenu-count-badge {
    background: #132032 !important;
    color: #4493f8 !important;
    border: none !important;
    font-size: 9px !important;
    padding: 1px 5px !important;
}

#sidebar #settings-submenu .submenu-beta-badge {
    background: #0d2119 !important;
    color: #238636 !important;
    border: none !important;
    font-size: 9px !important;
    padding: 1px 5px !important;
}

#sidebar #settings-submenu .submenu-divider {
    border-top: 0.5px solid #141920 !important;
}

#sidebar .sidebar-footer {
    border-top: 0.5px solid #141920 !important;
    background: transparent !important;
}

#sidebar .status-dot {
    width: 5px !important;
    height: 5px !important;
    background: #238636 !important;
}

#sidebar .system-status-text {
    font-size: 10px !important;
    color: #4b5561 !important;
}

#sidebar .logout-item .icon,
#sidebar .logout-item .label {
    color: #4a525d !important;
}

#sidebar .logout-item:hover .icon,
#sidebar .logout-item:hover .label {
    color: #484f58 !important;
}

#sidebar.sidebar.collapsed .nav-item.active {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.prod-coming-soon-modal {
    border: 0.5px solid #30363d;
    border-radius: 10px;
    background: #161b22;
}

/* Key Metrics v2 */
#key-metrics-view .view-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

#key-metrics-view .view-header .header-main {
    min-width: 180px;
}

#key-metrics-view .view-header .header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    overflow-x: visible;
    padding-bottom: 0;
}

#key-metrics-view .view-header .header-actions .header-chip,
#key-metrics-view .view-header .header-actions .custom-select-wrapper {
    flex: 1 1 150px;
    min-width: 130px;
    max-width: 220px;
}

#key-metrics-view .view-header .header-actions #kmv2-filter-forecast {
    min-width: 150px;
    max-width: 240px;
}

#key-metrics-view .view-header .header-actions #kmv2-filter-lead-source {
    min-width: 140px;
    max-width: 240px;
}

#key-metrics-view .view-header .header-actions #kmv2-role-selector {
    min-width: 180px;
}

#key-metrics-view #key-metrics-refresh-btn {
    flex: 0 0 110px;
    white-space: nowrap;
    min-height: 32px;
    padding: 0 12px;
}

#key-metrics-view .kmv2-deck {
    width: 100%;
}

.kmv2-shell {
    padding: 14px 14px 12px !important;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #0b1220 !important;
    border: 1px solid #1b2a45 !important;
}

.kmv2-header-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    color: #8ea0bd;
    font-size: 12px;
}

.kmv2-period-line {
    color: #a8b8d4;
    font-weight: 500;
}

.kmv2-sync-strip {
    font-size: 11px;
    color: #7d91b5;
    line-height: 1.35;
    max-width: 100%;
}

.kmv2-advanced-filters {
    border: 1px solid #1f304d;
    border-radius: 8px;
    padding: 8px 10px;
    background: #0d1728;
}

.kmv2-advanced-filters > summary {
    cursor: pointer;
    color: #9fb1ce;
    font-size: 12px;
    font-weight: 600;
}

.kmv2-card-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}

/* Key Metrics v2 ghost / skeleton loaders */
@keyframes kmv2-ghost-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.kmv2-ghost-line {
    display: block;
    border-radius: 6px;
    min-height: 8px;
    background: linear-gradient(
        90deg,
        #121c2e 0%,
        #1a2840 35%,
        #243556 50%,
        #1a2840 65%,
        #121c2e 100%
    );
    background-size: 200% 100%;
    animation: kmv2-ghost-shimmer 1.25s ease-in-out infinite;
}

.kmv2-ghost-inline {
    display: inline-block;
    vertical-align: middle;
}

.kmv2-ghost-w-25 { width: 25%; max-width: 100%; }
.kmv2-ghost-w-35 { width: 35%; max-width: 100%; }
.kmv2-ghost-w-40 { width: 40%; max-width: 100%; }
.kmv2-ghost-w-55 { width: 55%; max-width: 100%; }
.kmv2-ghost-w-70 { width: 70%; max-width: 100%; }
.kmv2-ghost-w-80 { width: 80%; max-width: 100%; }
.kmv2-ghost-w-90 { width: 90%; max-width: 100%; }
.kmv2-ghost-w-95 { width: 95%; max-width: 100%; }

.kmv2-ghost-card {
    pointer-events: none;
    cursor: default;
    border-color: #1a2840 !important;
}

.kmv2-ghost-insight {
    border-left-color: #243556 !important;
    background: #0f1c31 !important;
}

.kmv2-ghost-chart-block {
    height: 150px;
    border-radius: 8px;
    background: linear-gradient(
        90deg,
        #121c2e 0%,
        #1a2840 35%,
        #243556 50%,
        #1a2840 65%,
        #121c2e 100%
    );
    background-size: 200% 100%;
    animation: kmv2-ghost-shimmer 1.25s ease-in-out infinite;
}

.kmv2-ghost-gauge {
    width: 140px;
    height: 72px;
    margin: 24px auto;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        #121c2e 0%,
        #1a2840 35%,
        #243556 50%,
        #1a2840 65%,
        #121c2e 100%
    );
    background-size: 200% 100%;
    animation: kmv2-ghost-shimmer 1.25s ease-in-out infinite;
}

.kmv2-drilldown-table .kmv2-ghost-cell {
    padding: 10px 8px;
    vertical-align: middle;
}

.kmv2-drilldown-table .kmv2-ghost-cell .kmv2-ghost-line {
    height: 10px;
}

.kmv2-card {
    background: linear-gradient(180deg, #0f192b 0%, #0d1626 100%);
    border: 1px solid #20304d;
    border-radius: 10px;
    padding: 10px;
    cursor: pointer;
}

.kmv2-card.active {
    border-color: #5da8ff;
    box-shadow: 0 0 0 1px rgba(93, 168, 255, 0.18) inset;
}

.kmv2-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.kmv2-card-name {
    color: #d4e0f2;
    font-size: 12px;
    font-weight: 500;
}

.kmv2-card-value {
    margin-top: 8px;
    font-size: 33px;
    line-height: 1.1;
    font-weight: 600;
    color: #f5f8ff;
}

.kmv2-card-meta {
    margin-top: 4px;
    font-size: 11px;
    color: #9cafcb;
}

.kmv2-card-index {
    width: 18px;
    height: 18px;
    border-radius: 999px;
    border: 1px solid #2b3f62;
    color: #9fb4d6;
    font-size: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 6px;
}

.kmv2-card-delta {
    margin-top: 4px;
    font-size: 12px;
    font-weight: 600;
}

.kmv2-card-delta.up { color: #31d17e; }
.kmv2-card-delta.down { color: #f05d7b; }
.kmv2-card-delta.flat { color: #8ea0bd; }

.kmv2-card-sub {
    display: inline-block;
    color: #8fa4c7;
    font-size: 11px;
    margin-top: 2px;
}

.kmv2-card-desc {
    margin-top: 6px;
    font-size: 10px;
    line-height: 1.35;
    color: #7f93b8;
    max-height: 2.8em;
    overflow: hidden;
}

.kmv2-card-actions {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.kmv2-card-actions .kmv2-mini-btn {
    flex: 1 1 calc(33% - 4px);
    min-width: 76px;
}

.kmv2-ai-bot-btn {
    border-color: rgba(122, 167, 255, 0.35) !important;
    color: #dbe9ff !important;
}

.kmv2-mini-btn {
    flex: 1;
    background: #0f1b2e;
    border: 1px solid #223457;
    border-radius: 6px;
    color: #c5d4eb;
    font-size: 11px;
    padding: 5px 8px;
    font-weight: 500;
}

.kmv2-status {
    padding: 2px 7px;
    border-radius: 5px;
    font-size: 10px;
    border: 1px solid #284066;
    text-transform: capitalize;
}

.kmv2-status.on_track { color: #31d17e; background: rgba(49, 209, 126, 0.14); border-color: rgba(49, 209, 126, 0.35); }
.kmv2-status.needs_attention { color: #f2c34a; background: rgba(242, 195, 74, 0.14); border-color: rgba(242, 195, 74, 0.35); }
.kmv2-status.at_risk { color: #f05d7b; background: rgba(240, 93, 123, 0.14); border-color: rgba(240, 93, 123, 0.35); }
.kmv2-status.no_target_set, .kmv2-status.no_data_available { color: #8b9ebd; background: rgba(139, 158, 189, 0.12); }

.kmv2-analytics-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.55fr) minmax(260px, 0.8fr);
    gap: 8px;
}

.kmv2-insights-shell,
.kmv2-chart-shell,
.kmv2-gauge-shell,
.kmv2-drilldown-shell,
.kmv2-admin-shell {
    background: #0d1728;
    border: 1px solid #1f304d;
    border-radius: 10px;
    padding: 12px;
}

.kmv2-insights-list {
    display: grid;
    gap: 8px;
}

.kmv2-insight {
    background: #0f1c31;
    border-left: 2px solid #31d17e;
    border-radius: 6px;
    padding: 8px 10px;
    color: #c9d7ee;
    font-size: 11px;
}

.kmv2-insight.medium { border-left-color: #f2c34a; }
.kmv2-insight.high { border-left-color: #f05d7b; }

.kmv2-link-btn {
    border: none;
    background: transparent;
    color: #6f89b6;
    font-size: 11px;
    cursor: pointer;
}

.kmv2-trend-chart {
    min-height: 170px;
    border: 1px solid #1c2d49;
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(24, 41, 67, 0.4), rgba(14, 24, 40, 0.3));
    padding: 8px;
}

.kmv2-trend-chart svg {
    width: 100%;
    height: 150px;
    display: block;
}

.kmv2-gauge-wrap {
    display: grid;
    justify-items: center;
    gap: 8px;
}

.kmv2-gauge-value {
    font-size: 36px;
    line-height: 1;
    color: #f1f6ff;
    font-weight: 700;
}

.kmv2-gauge-sub {
    color: #9fb1ce;
    font-size: 12px;
    text-align: center;
}

.kmv2-drill-toolbar {
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.kmv2-drill-toolbar-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.kmv2-drill-toolbar .mini-select {
    min-width: 120px;
}

.kmv2-ai-shell pre {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    color: #c9d7ee;
    font-size: 12px;
    line-height: 1.45;
}

.kmv2-ai-text {
    margin: 0;
    white-space: normal;
    word-break: break-word;
    color: #dbe8fb;
    font-size: 14px;
    line-height: 1.65;
    font-weight: 500;
    letter-spacing: 0.01em;
}

.kmv2-empty {
    color: #90a4c5;
    font-size: 12px;
    padding: 10px;
}

.kmv2-admin-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 10px;
}

.kmv2-admin-metric-list {
    margin-top: 12px;
    display: grid;
    gap: 8px;
}

.kmv2-admin-row {
    display: grid;
    grid-template-columns: 22px 1fr 72px;
    align-items: center;
    gap: 8px;
    padding: 8px;
    background: #0f1c31;
    border: 1px solid #1f304d;
    border-radius: 6px;
    color: #c9d1d9;
    font-size: 12px;
}

.kmv2-admin-order {
    width: 100%;
    background: #0b1425;
    border: 1px solid #22365a;
    border-radius: 6px;
    color: #c9d1d9;
    padding: 4px 6px;
}

@media (max-width: 1400px) {
    .kmv2-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .kmv2-analytics-grid { grid-template-columns: 1fr; }
    #key-metrics-view .view-header {
        align-items: flex-start;
    }
    #key-metrics-view .view-header .header-actions {
        flex-wrap: wrap;
        overflow-x: visible;
    }
    #key-metrics-view .view-header .header-actions .header-chip,
    #key-metrics-view .view-header .header-actions .custom-select-wrapper {
        flex: 1 1 180px;
        min-width: 140px;
        max-width: 100%;
    }
}

@media (max-width: 980px) {
    #key-metrics-view .view-header .header-actions .header-chip,
    #key-metrics-view .view-header .header-actions .custom-select-wrapper,
    #key-metrics-view #key-metrics-refresh-btn {
        flex: 1 1 calc(50% - 8px);
        max-width: none;
    }
}

@media (max-width: 680px) {
    #key-metrics-view .view-header .header-actions .header-chip,
    #key-metrics-view .view-header .header-actions .custom-select-wrapper,
    #key-metrics-view #key-metrics-refresh-btn {
        flex: 1 1 100%;
    }
}

@media (max-width: 980px) {
    .kmv2-card-grid,
    .kmv2-admin-controls {
        grid-template-columns: 1fr;
    }
    .kmv2-drill-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
}

/* Platform-wide Home/ROI parity layer */
:root {
    --sidebar-width: 200px;
    --sidebar-collapsed-width: 64px;
    --surface-primary: #0d1117;
    --surface-secondary: #161b22;
    --surface-tertiary: #21262d;
    --surface-card: #161b22;
    --border-subtle: #30363d;
    --text-primary: #e6edf3;
    --text-secondary: #c9d1d9;
    --text-muted: #7d8590;
    --accent-blue: #58a6ff;
    --accent-indigo: #1f6feb;
}

body {
    background: #0d1117;
    color: var(--text-primary);
}

.app-main {
    background: #0d1117;
}

.glass,
.metric-card,
.p-metric-card,
.highlight-card,
.data-section,
.view-grid-container.main-highlight,
.quartz-panel,
.waterfall-metric,
.right-rail-shell {
    background: #161b22 !important;
    border: 0.5px solid #30363d !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

.view-header,
.utility-bar,
.breadcrumb-bar {
    background: #0d1117 !important;
    border-bottom: 0.5px solid #30363d !important;
    box-shadow: none !important;
}

.view-header,
.utility-bar {
    min-height: 64px;
    padding: 12px 20px !important;
}

.view-header h1,
.utility-bar .view-title {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: #e6edf3;
}

.view-header .header-main p,
.settings-subcopy,
.settings-status-line {
    color: #7d8590 !important;
    font-size: 12px !important;
}

.primary-btn,
.btn-primary {
    background: #1f6feb !important;
    border: 0.5px solid #388bfd !important;
    color: #e6edf3 !important;
    border-radius: 6px !important;
    min-height: 32px;
    padding: 6px 12px !important;
    box-shadow: none !important;
}

.secondary-btn,
.btn-secondary,
.ghost-btn,
.mini-btn,
.mini-icon-btn,
.toggle-btn {
    background: #21262d !important;
    border: 0.5px solid #30363d !important;
    color: #c9d1d9 !important;
    border-radius: 6px !important;
    min-height: 32px;
    box-shadow: none !important;
}

.primary-btn:hover,
.secondary-btn:hover,
.ghost-btn:hover,
.mini-btn:hover,
.mini-icon-btn:hover,
.toggle-btn:hover {
    filter: brightness(1.08);
}

.custom-select-wrapper select.mini-select,
select.mini-select,
input.mini-select,
.premium-select,
.form-group input,
.form-group select {
    background: #0d1117 !important;
    border: 0.5px solid #30363d !important;
    color: #c9d1d9 !important;
    border-radius: 6px !important;
    min-height: 32px !important;
}

table,
.premium-table,
.quartz-table,
.spreadsheet-grid {
    border-collapse: separate;
    border-spacing: 0;
}

th,
.premium-table th,
.quartz-table th,
.spreadsheet-grid th {
    background: #0d1117 !important;
    color: #7d8590 !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    border-bottom: 0.5px solid #30363d !important;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

td,
.premium-table td,
.quartz-table td,
.spreadsheet-grid td {
    background: #161b22 !important;
    color: #c9d1d9 !important;
    border-bottom: 0.5px solid #30363d !important;
    font-size: 12px !important;
}

tr:hover td,
.spreadsheet-grid tr:hover td,
.quartz-table tr:hover td {
    background: #1c2128 !important;
}

.waterfall-metrics-bar,
.quartz-metric-grid,
.metrics-grid {
    gap: 10px !important;
}

.waterfall-metric,
.q-metric-card,
#tools-master-view .metric-card,
#welcome-view .home-v4-card {
    min-height: 102px;
    padding: 14px 16px !important;
}

.waterfall-metric label,
.q-metric-card label,
.metric-card .card-header h3,
.card-footer {
    color: #7d8590 !important;
    font-size: 11px !important;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.wf-value,
.q-metric-card .card-value,
.metric-card .card-value {
    color: #e6edf3 !important;
    font-size: 22px !important;
    font-weight: 600 !important;
}

#views-view .view-filters-bar,
#layout-manager-view .view-filters-bar {
    background: #161b22;
    border: 0.5px solid #30363d;
    border-radius: 8px;
    padding: 12px;
}

#views-view .view-grid-container.main-highlight,
#layout-manager-view .view-grid-container.main-highlight,
#gmail-integration-view .view-layout .glass,
#salesforce-integration-view .view-layout .glass,
#forecast-view .quartz-content-wrapper > .quartz-panel,
#tools-master-view .data-section.glass,
#tool-detail-view .data-section.glass {
    padding: 14px 16px !important;
}

#views-view #chart-container {
    padding: 14px 16px !important;
}

#views-view .views-insights-rail,
#forecast-view .quartz-detail-panel {
    background: #161b22 !important;
    border: 0.5px solid #30363d !important;
}

#forecast-view .quartz-layout,
#views-view .views-modern-layout {
    gap: 12px !important;
}

#forecast-view .quartz-table-container,
#views-view .grid-scroll-wrapper,
#gmail-integration-view .gmail-activity-shell,
#salesforce-integration-view .gmail-activity-shell {
    border: 0.5px solid #30363d;
    border-radius: 8px;
    overflow: auto;
    background: #0d1117;
}

#gmail-integration-view .gmail-shell-card,
#salesforce-integration-view .gmail-shell-card,
#layout-manager-view .settings-shell-card {
    max-width: 100%;
    padding: 14px 16px !important;
    border-radius: 8px !important;
}

/* Gmail connection status: partial = mail OK, calendar scope/API issue */
#gmail-integration-view #gmail-status-line.gmail-status-partial {
    color: #e3b341 !important;
}
#gmail-integration-view #gmail-status-line.gmail-status-error {
    color: #f85149 !important;
}
body.light-theme #gmail-integration-view #gmail-status-line.gmail-status-partial {
    color: #9a6700 !important;
}
body.light-theme #gmail-integration-view #gmail-status-line.gmail-status-error {
    color: #cf222e !important;
}

#gmail-integration-view .gmail-metrics-strip,
#salesforce-integration-view .gmail-metrics-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
    margin: 12px 0 4px;
}

#gmail-integration-view .gmail-metric-chip,
#salesforce-integration-view .gmail-metric-chip {
    border: 0.5px solid #30363d;
    border-radius: 8px;
    padding: 10px 12px;
    background: #0d1117;
}

#gmail-integration-view .gmail-metric-chip .gmail-metric-lbl,
#salesforce-integration-view .gmail-metric-chip .gmail-metric-lbl {
    font-size: 11px;
    color: #7d8590;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

#gmail-integration-view .gmail-metric-chip .gmail-metric-val,
#salesforce-integration-view .gmail-metric-chip .gmail-metric-val {
    font-size: 1.25rem;
    font-weight: 600;
    color: #c9d1d9;
    margin-top: 4px;
}

body.light-theme #gmail-integration-view .gmail-metric-chip,
body.light-theme #salesforce-integration-view .gmail-metric-chip {
    background: #f6f8fa;
    border-color: #d0d7de;
}

body.light-theme #gmail-integration-view .gmail-metric-chip .gmail-metric-val,
body.light-theme #salesforce-integration-view .gmail-metric-chip .gmail-metric-val {
    color: #24292f;
}

#salesforce-integration-view .sf-metrics-raw-details {
    margin-top: 10px;
}

#salesforce-integration-view .sf-metrics-raw-details summary {
    cursor: pointer;
    font-size: 12px;
    color: #7d8590;
    user-select: none;
    list-style-position: outside;
}

#salesforce-integration-view .sf-metrics-raw-details summary:hover {
    color: #c9d1d9;
}

body.light-theme #salesforce-integration-view .sf-metrics-raw-details summary:hover {
    color: #24292f;
}

#salesforce-integration-view .sf-metrics-raw-details[open] summary {
    margin-bottom: 8px;
}

#employee-profile-view .rep-profile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin-bottom: 8px;
}

#employee-profile-view .rep-profile-readonly-val {
    font-size: 14px;
    color: #c9d1d9;
    padding: 8px 0;
}

body.light-theme #employee-profile-view .rep-profile-readonly-val {
    color: #24292f;
}

#employee-profile-view .rep-profile-textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    resize: vertical;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 12px;
    line-height: 1.45;
}

#salesforce-integration-view .sf-metrics-pre {
    margin-top: 0;
    padding: 12px;
    font-size: 11px;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
    border: 0.5px solid #30363d;
    border-radius: 8px;
    background: #0d1117;
    color: #c9d1d9;
    max-height: 280px;
    overflow: auto;
}

body.light-theme #salesforce-integration-view .sf-metrics-pre {
    background: #f6f8fa;
    border-color: #d0d7de;
    color: #24292f;
}

.settings-action-row,
.forecast-admin-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.settings-hint-copy {
    margin-top: 14px;
    font-size: 12px;
    color: #7d8590;
    line-height: 1.5;
}

.settings-section-title {
    margin: 18px 0 8px;
    font-size: 14px;
    font-weight: 500;
    color: #c9d1d9;
}

.settings-checkbox-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 12px;
    color: #7d8590;
    cursor: pointer;
}

.settings-layout-shell {
    padding: 14px 16px !important;
}

.settings-two-col-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.settings-status-hint {
    margin-top: 12px;
}

.settings-checklist .check-item {
    background: #0d1117;
    border: 0.5px solid #30363d;
    border-radius: 6px;
    color: #c9d1d9;
}

.forecast-admin-filter-row {
    margin-bottom: 12px;
    gap: 10px;
}

.forecast-upload-trigger {
    margin: 0;
    cursor: pointer;
}

.forecast-template-btn {
    background: #21262d !important;
    border: 0.5px solid #30363d !important;
}

.visually-hidden-input {
    display: none;
}

.forecast-insight-table {
    padding: 10px 4px !important;
}

.forecast-insight-table.is-compact {
    padding: 8px 4px !important;
}

.q-progress-empty {
    width: 0%;
}

.views-switcher-icon {
    opacity: 0.5;
}

.tools-utilization-value {
    font-size: 24px !important;
    margin-top: 12px !important;
}

#tools-master-view .metrics-grid,
#forecast-view .quartz-metric-grid,
#views-view #views-metrics-bar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

#forecast-view .quartz-metric-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

#tool-detail-view .hero-section .user-profile-card {
    padding: 16px;
    border-radius: 8px;
}

#tool-detail-view .detail-item label {
    color: #7d8590;
    font-size: 11px;
    text-transform: uppercase;
}

#tool-detail-view .detail-item span {
    color: #c9d1d9;
    font-size: 13px;
}

@media (max-width: 1200px) {
    #views-view .views-modern-layout,
    #forecast-view .quartz-layout {
        display: grid;
        grid-template-columns: 1fr;
    }

    #views-view .views-insights-rail,
    #forecast-view .quartz-detail-panel {
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    #views-view #views-metrics-bar,
    #forecast-view .quartz-metric-grid,
    #tools-master-view .metrics-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .settings-two-col-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .view-header,
    .utility-bar {
        padding: 10px 12px !important;
        min-height: auto;
    }

    .view-header .header-main h1,
    .utility-bar .view-title {
        font-size: 16px;
    }

    #views-view .view-filters-bar,
    #layout-manager-view .view-filters-bar,
    .settings-shell-card,
    #gmail-integration-view .gmail-shell-card {
        padding: 10px 12px !important;
    }

    #views-view #views-metrics-bar,
    #forecast-view .quartz-metric-grid,
    #tools-master-view .metrics-grid,
    #welcome-view .home-v4-nav-grid {
        grid-template-columns: 1fr;
    }

    .settings-action-row,
    .forecast-admin-actions {
        width: 100%;
    }

    .settings-action-row .primary-btn,
    .settings-action-row .ghost-btn,
    .settings-action-row .secondary-btn,
    .forecast-admin-actions .secondary-btn {
        width: 100%;
    }
}

/* =========================================================
   FUTURISTIC VISUAL REFRESH (2026)
   Dark-theme focused, non-breaking layer
   ========================================================= */
body:not(.light-theme) {
    --surface-primary: #050816;
    --surface-secondary: #0b1228;
    --surface-tertiary: #131d3b;
    --surface-card: rgba(11, 18, 40, 0.74);
    --border-subtle: rgba(127, 156, 255, 0.22);
    --border-strong: rgba(123, 201, 255, 0.42);
    --accent-blue: #5b7cff;
    --accent-indigo: #3a56ff;
    --text-primary: #f5f8ff;
    --text-secondary: #adc1ff;
    --text-muted: #7f93cb;
    --shadow-lg: 0 24px 54px -26px rgba(20, 18, 92, 0.95);
}

body:not(.light-theme),
body:not(.light-theme) .app-main {
    background:
        radial-gradient(circle at 15% -5%, rgba(91, 124, 255, 0.26) 0%, transparent 42%),
        radial-gradient(circle at 82% 108%, rgba(80, 224, 255, 0.2) 0%, transparent 38%),
        linear-gradient(145deg, #030612 0%, #070b1c 45%, #0a1030 100%) !important;
    color: var(--text-primary);
}

body:not(.light-theme) .login-overlay {
    background:
        radial-gradient(circle at 20% 20%, rgba(88, 114, 255, 0.35), transparent 40%),
        radial-gradient(circle at 80% 80%, rgba(60, 218, 255, 0.2), transparent 36%),
        linear-gradient(140deg, #020510 0%, #040a18 42%, #08163f 100%);
}

body:not(.light-theme) .login-card {
    background: linear-gradient(160deg, rgba(17, 27, 61, 0.8), rgba(10, 17, 36, 0.85)) !important;
    border: 1px solid rgba(105, 155, 255, 0.35) !important;
    border-radius: 22px !important;
    box-shadow:
        0 1px 0 rgba(183, 209, 255, 0.25) inset,
        0 -1px 0 rgba(0, 0, 0, 0.5) inset,
        0 26px 72px -24px rgba(49, 75, 255, 0.85) !important;
}

body:not(.light-theme) .auth-input-wrapper input {
    background: rgba(10, 18, 43, 0.85) !important;
    border: 1px solid rgba(121, 169, 255, 0.32) !important;
    border-radius: 14px !important;
}

body:not(.light-theme) .auth-input-wrapper input:focus {
    border-color: #77d9ff !important;
    box-shadow: 0 0 0 4px rgba(87, 166, 255, 0.24) !important;
}

body:not(.light-theme) .btn-login,
body:not(.light-theme) .primary-btn,
body:not(.light-theme) .btn-primary {
    background: linear-gradient(135deg, #4c6bff 0%, #5e8bff 45%, #54dbff 100%) !important;
    color: #f8fbff !important;
    border: 1px solid rgba(180, 225, 255, 0.45) !important;
    border-radius: 12px !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.35) inset,
        0 14px 28px -16px rgba(52, 109, 255, 0.95) !important;
}

body:not(.light-theme) .btn-login:hover,
body:not(.light-theme) .primary-btn:hover,
body:not(.light-theme) .btn-primary:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
}

body:not(.light-theme) .secondary-btn,
body:not(.light-theme) .btn-secondary,
body:not(.light-theme) .ghost-btn,
body:not(.light-theme) .mini-btn,
body:not(.light-theme) .mini-icon-btn,
body:not(.light-theme) .toggle-btn {
    background: rgba(18, 30, 63, 0.78) !important;
    border: 1px solid rgba(112, 148, 255, 0.34) !important;
    color: #dbe7ff !important;
}

body:not(.light-theme) .glass,
body:not(.light-theme) .metric-card,
body:not(.light-theme) .p-metric-card,
body:not(.light-theme) .highlight-card,
body:not(.light-theme) .data-section,
body:not(.light-theme) .view-grid-container.main-highlight,
body:not(.light-theme) .quartz-panel,
body:not(.light-theme) .waterfall-metric,
body:not(.light-theme) .right-rail-shell {
    background: linear-gradient(170deg, rgba(16, 27, 59, 0.85), rgba(8, 14, 31, 0.84)) !important;
    border: 1px solid rgba(118, 159, 255, 0.26) !important;
    border-radius: 14px !important;
    box-shadow: 0 20px 44px -30px rgba(67, 102, 255, 0.85) !important;
    backdrop-filter: blur(16px) saturate(130%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(130%) !important;
}

body:not(.light-theme) #sidebar.sidebar {
    background: linear-gradient(180deg, rgba(9, 15, 34, 0.96), rgba(6, 11, 26, 0.96)) !important;
    border-right: 1px solid rgba(111, 154, 255, 0.26) !important;
    box-shadow: 14px 0 36px -28px rgba(63, 88, 235, 0.8) !important;
}

body:not(.light-theme) #sidebar .nav-item {
    border-radius: 11px !important;
    transition: all 0.2s ease;
}

body:not(.light-theme) #sidebar .nav-item:hover,
body:not(.light-theme) #sidebar .nav-item.active,
body:not(.light-theme) #sidebar .nav-item.parent-open {
    background: linear-gradient(135deg, rgba(81, 116, 255, 0.22), rgba(66, 203, 255, 0.11)) !important;
    box-shadow: 0 0 0 1px rgba(112, 167, 255, 0.28) inset !important;
}

body:not(.light-theme) #sidebar .nav-item .label {
    color: #cad8ff !important;
}

body:not(.light-theme) .view-header,
body:not(.light-theme) .utility-bar,
body:not(.light-theme) .breadcrumb-bar {
    background: rgba(5, 10, 25, 0.62) !important;
    border-bottom: 1px solid rgba(113, 154, 255, 0.22) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Phase 2: data surfaces + typography + overlays */
body:not(.light-theme) .metrics-grid,
body:not(.light-theme) .waterfall-metrics-bar,
body:not(.light-theme) .quartz-metric-grid {
    gap: 14px !important;
}

body:not(.light-theme) .metric-card,
body:not(.light-theme) .q-metric-card,
body:not(.light-theme) .waterfall-metric {
    padding: 16px 18px !important;
}

body:not(.light-theme) .metric-card .card-header h3,
body:not(.light-theme) .q-metric-card label,
body:not(.light-theme) .waterfall-metric label,
body:not(.light-theme) .card-footer {
    color: #8ca4e8 !important;
    letter-spacing: 0.08em !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
}

body:not(.light-theme) .metric-card .card-value,
body:not(.light-theme) .q-metric-card .card-value,
body:not(.light-theme) .q-metric-card .value,
body:not(.light-theme) .waterfall-metric .wf-value {
    color: #f4f8ff !important;
    text-shadow: 0 0 18px rgba(124, 168, 255, 0.24);
}

body:not(.light-theme) .view-filters-bar,
body:not(.light-theme) #views-view .view-filters-bar,
body:not(.light-theme) #layout-manager-view .view-filters-bar {
    background: linear-gradient(150deg, rgba(12, 21, 46, 0.82), rgba(8, 15, 34, 0.75)) !important;
    border: 1px solid rgba(110, 152, 255, 0.25) !important;
    border-radius: 14px !important;
    box-shadow: 0 16px 34px -24px rgba(66, 93, 255, 0.78) !important;
}

body:not(.light-theme) .filter-chip label {
    color: #9eb6f8 !important;
    font-weight: 600 !important;
    letter-spacing: 0.05em !important;
}

body:not(.light-theme) .custom-select-wrapper select.mini-select,
body:not(.light-theme) select.mini-select,
body:not(.light-theme) input.mini-select,
body:not(.light-theme) .premium-select,
body:not(.light-theme) .form-group input,
body:not(.light-theme) .form-group select {
    background: linear-gradient(145deg, rgba(8, 15, 34, 0.95), rgba(12, 21, 49, 0.88)) !important;
    border: 1px solid rgba(112, 153, 255, 0.3) !important;
    border-radius: 10px !important;
    color: #e2ebff !important;
}

body:not(.light-theme) .custom-select-wrapper select.mini-select:focus,
body:not(.light-theme) select.mini-select:focus,
body:not(.light-theme) input.mini-select:focus,
body:not(.light-theme) .premium-select:focus,
body:not(.light-theme) .form-group input:focus,
body:not(.light-theme) .form-group select:focus {
    border-color: #79d4ff !important;
    box-shadow: 0 0 0 3px rgba(91, 171, 255, 0.22) !important;
}

body:not(.light-theme) .quartz-table-container,
body:not(.light-theme) .grid-scroll-wrapper,
body:not(.light-theme) #gmail-integration-view .gmail-activity-shell {
    border: 1px solid rgba(112, 152, 255, 0.24) !important;
    border-radius: 14px !important;
    background: rgba(6, 12, 29, 0.85) !important;
}

body:not(.light-theme) th,
body:not(.light-theme) .premium-table th,
body:not(.light-theme) .quartz-table th,
body:not(.light-theme) .spreadsheet-grid th {
    background: linear-gradient(180deg, rgba(8, 13, 31, 0.98), rgba(9, 15, 36, 0.93)) !important;
    color: #88a6f2 !important;
    border-bottom: 1px solid rgba(108, 147, 248, 0.24) !important;
}

body:not(.light-theme) td,
body:not(.light-theme) .premium-table td,
body:not(.light-theme) .quartz-table td,
body:not(.light-theme) .spreadsheet-grid td {
    background: rgba(12, 20, 45, 0.72) !important;
    color: #d8e4ff !important;
    border-bottom: 1px solid rgba(98, 133, 231, 0.15) !important;
}

body:not(.light-theme) tr:hover td,
body:not(.light-theme) .spreadsheet-grid tr:hover td,
body:not(.light-theme) .quartz-table tr:hover td {
    background: linear-gradient(135deg, rgba(66, 102, 233, 0.22), rgba(64, 193, 255, 0.12)) !important;
}

body:not(.light-theme) .insights-panel,
body:not(.light-theme) .modal-content,
body:not(.light-theme) .settings-shell-card,
body:not(.light-theme) #gmail-integration-view .gmail-shell-card {
    background: linear-gradient(165deg, rgba(13, 21, 48, 0.9), rgba(7, 13, 30, 0.88)) !important;
    border: 1px solid rgba(115, 156, 255, 0.3) !important;
    border-radius: 16px !important;
    box-shadow: 0 22px 48px -28px rgba(63, 91, 255, 0.9) !important;
}

body:not(.light-theme) .panel-header,
body:not(.light-theme) .modal-header,
body:not(.light-theme) .insights-panel-header {
    border-bottom: 1px solid rgba(108, 148, 248, 0.26) !important;
    background: rgba(6, 11, 27, 0.48) !important;
}

body:not(.light-theme) .panel-header h2,
body:not(.light-theme) .panel-header h3,
body:not(.light-theme) .modal-header h2,
body:not(.light-theme) .insights-panel-header h3 {
    color: #eef4ff !important;
    letter-spacing: 0.01em;
    font-weight: 650 !important;
}

body:not(.light-theme) .panel-body,
body:not(.light-theme) .modal-form {
    color: #cfe0ff !important;
}

/* Phase 3: motion polish + visual rhythm + mobile tuning */
body:not(.light-theme) {
    --fx-fast: 140ms;
    --fx-base: 220ms;
    --fx-slow: 320ms;
    --fx-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

body:not(.light-theme) .glass,
body:not(.light-theme) .metric-card,
body:not(.light-theme) .q-metric-card,
body:not(.light-theme) .waterfall-metric,
body:not(.light-theme) .nav-item,
body:not(.light-theme) .primary-btn,
body:not(.light-theme) .btn-primary,
body:not(.light-theme) .secondary-btn,
body:not(.light-theme) .btn-secondary,
body:not(.light-theme) .ghost-btn,
body:not(.light-theme) .mini-btn,
body:not(.light-theme) .mini-icon-btn,
body:not(.light-theme) .toggle-btn,
body:not(.light-theme) .custom-select-wrapper select.mini-select,
body:not(.light-theme) select.mini-select,
body:not(.light-theme) input.mini-select,
body:not(.light-theme) .premium-select {
    transition:
        transform var(--fx-base) var(--fx-ease),
        box-shadow var(--fx-base) var(--fx-ease),
        border-color var(--fx-fast) ease,
        background-color var(--fx-fast) ease,
        color var(--fx-fast) ease !important;
}

body:not(.light-theme) .glass:hover,
body:not(.light-theme) .metric-card:hover,
body:not(.light-theme) .q-metric-card:hover,
body:not(.light-theme) .waterfall-metric:hover {
    transform: translateY(-2px);
}

body:not(.light-theme) .nav-item .icon i,
body:not(.light-theme) .nav-item .icon svg {
    font-size: 13px !important;
    transition: transform var(--fx-base) var(--fx-ease), opacity var(--fx-fast) ease;
}

body:not(.light-theme) .nav-item:hover .icon i,
body:not(.light-theme) .nav-item.active .icon i {
    transform: translateY(-1px) scale(1.05);
}

body:not(.light-theme) .view-header h1,
body:not(.light-theme) .utility-bar .view-title {
    letter-spacing: 0.01em;
    line-height: 1.2;
}

body:not(.light-theme) .view-header .header-main p,
body:not(.light-theme) .settings-subcopy,
body:not(.light-theme) .settings-status-line {
    color: #90a7e8 !important;
    line-height: 1.5;
}

body:not(.light-theme) .modal-overlay.active,
body:not(.light-theme) .panel-backdrop.visible {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

body:not(.light-theme) .modal-content,
body:not(.light-theme) .insights-panel {
    animation: fx-pop-in var(--fx-slow) var(--fx-ease);
}

@keyframes fx-pop-in {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (max-width: 980px) {
    body:not(.light-theme) .view-header,
    body:not(.light-theme) .utility-bar,
    body:not(.light-theme) .breadcrumb-bar {
        padding: 10px 14px !important;
    }

    body:not(.light-theme) .metric-card,
    body:not(.light-theme) .q-metric-card,
    body:not(.light-theme) .waterfall-metric {
        padding: 14px !important;
    }

    body:not(.light-theme) .metric-card .card-value,
    body:not(.light-theme) .q-metric-card .card-value,
    body:not(.light-theme) .q-metric-card .value,
    body:not(.light-theme) .waterfall-metric .wf-value {
        font-size: 20px !important;
    }
}

@media (max-width: 768px) {
    body:not(.light-theme) #sidebar.sidebar {
        box-shadow: none !important;
        border-right-color: rgba(106, 150, 255, 0.18) !important;
    }

    body:not(.light-theme) .view-filters-bar,
    body:not(.light-theme) #views-view .view-filters-bar,
    body:not(.light-theme) #layout-manager-view .view-filters-bar,
    body:not(.light-theme) .settings-shell-card,
    body:not(.light-theme) #gmail-integration-view .gmail-shell-card,
    body:not(.light-theme) .modal-content {
        border-radius: 12px !important;
        padding: 12px !important;
    }

    body:not(.light-theme) .custom-select-wrapper select.mini-select,
    body:not(.light-theme) select.mini-select,
    body:not(.light-theme) input.mini-select,
    body:not(.light-theme) .premium-select {
        min-height: 36px !important;
        font-size: 13px !important;
    }

    body:not(.light-theme) .primary-btn,
    body:not(.light-theme) .btn-primary,
    body:not(.light-theme) .secondary-btn,
    body:not(.light-theme) .btn-secondary,
    body:not(.light-theme) .ghost-btn {
        min-height: 36px !important;
        font-size: 13px !important;
    }

    body:not(.light-theme) .toast-container {
        right: 12px;
        left: 12px;
        max-width: none;
    }

    body:not(.light-theme) .toast {
        width: 100%;
    }
}

/* RevOps AI Bot in-app view */
.ai-bot-shell {
    min-height: 560px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ai-bot-messages {
    flex: 1;
    min-height: 380px;
    max-height: 56vh;
    overflow: auto;
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 12px;
    background: rgba(7, 14, 34, 0.65);
}

.ai-bot-msg {
    margin-bottom: 8px;
    padding: 10px 12px;
    border-radius: 10px;
    line-height: 1.45;
}

.ai-bot-msg.is-user {
    background: rgba(72, 129, 255, 0.2);
    border: 1px solid rgba(122, 167, 255, 0.35);
    color: #dbe9ff;
}

.ai-bot-msg.is-assistant {
    background: rgba(26, 39, 72, 0.75);
    border: 1px solid rgba(103, 142, 234, 0.24);
    color: #f0f5ff;
}

.ai-bot-empty {
    color: var(--text-muted);
    font-size: 0.92rem;
}

.ai-bot-form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
}

.ai-bot-suggest-shell {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ai-bot-suggest-shell label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    font-weight: 600;
}

.ai-bot-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ai-bot-suggestion-chip {
    border: 1px solid rgba(112, 153, 255, 0.28);
    background: rgba(14, 24, 52, 0.7);
    color: #dbe7ff;
    padding: 7px 10px;
    border-radius: 999px;
    font-size: 0.82rem;
    cursor: pointer;
    transition: all 0.18s ease;
}

.ai-bot-suggestion-chip:hover {
    border-color: rgba(132, 184, 255, 0.48);
    background: rgba(35, 66, 150, 0.35);
    transform: translateY(-1px);
}