@charset "utf-8";
/* CSS Variables */
:root {
    /* Background Colors */
    --background: rgba(43, 44, 49, 1);
    --surface: #2D3035;
    --background-dark: #121418;
    --background-panel: #23262B;
    --background-hover: #f3f4f6;
    
    /* Text Colors */
    --text-primary: #f7f3f3;
    --text-primary-dark: #D0D0D0;
    --text-secondary: #6b7280;
    --text-secondary-dark: #ABABAB;
    --text-button: #FFFFFF;
    
    /* Border Colors */
    --border: #e5e7eb;
    --border-color-dark: #37383B;
    --border-color-light: #8C9094;
    --divider-color-subtle: rgba(255, 255, 255, 0.08);
    --input-border-dark: #4B5563;
    
    /* Accent Colors - Same in both themes */
    --accent-green: #52D89E;
    --accent-amber: #F5B94D;
    --accent-yellow: #F5B94D;
    --accent-red: #EE7B69;
    --accent-blue: #52B5E8;
    --primary: #007AFF;
    --primary-light: color-mix(in srgb, var(--primary) 10%, transparent);
    --primary-button: #007AFF;
    --primary-button-hover: #3395FF;

    /* Relevance palette — harmonized, slightly muted set reserved for the
       score signal (badge + at-a-glance). Keeps the raw --accent-* colors
       free for charts so the semantic signal stays cohesive and calm. */
    --relevance-high: #2FB67C;
    --relevance-moderate: #5B8DEF;
    --relevance-low: #E0A458;
    --relevance-negative: #D98A82;
    --relevance-none: #8C9094;
    
    /* Slider colors - Dark theme */
    --slider-track: #4B5563;
    --slider-thumb: #E1E2E6;
    --slider-thumb-hover: #FFFFFF;
    
    /* Input and Form Colors */
    --input-background-dark: #2D3035;
    --dropdown-border: #d9dce3;
    --dropdown-text: #333;
    
    /* Shadow and Overlay Colors */
    --panel-highlight: rgba(255, 255, 255, 0.06);
    --modal-background: rgba(78, 77, 77, 0.8);
    
    /* Figma Design Variables */
    --figma-title-color: #E3E3E3;
    --figma-meta-color: #8C9094;
    --figma-rank-color: #37383B;
    --figma-border-color: #37383B;
    --figma-title-size: 16px;
    --figma-meta-size: 14px;
    --figma-rank-size: 14px;
    --figma-title-weight: 500;
    --figma-meta-weight: 500;
    --figma-rank-weight: 700;
    --figma-card-radius: 8px;
    --figma-border-width: 1px;
    
    /* Error Colors */
    --error: #ef4444;
    
    /* Spacing and Layout */
    --radius: 18px;
    /* Radius scale: controls, cards, and pills */
    --radius-control: 8px;
    --radius-card: 12px;
    --radius-pill: 999px;
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --nav-height: 64px;
    
    /* Typography */
    --base-font-size: clamp(14px, 1vw, 16px);
    --heading-size: clamp(1.5rem, 3vw, 1.75rem);
    --font-family-primary: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    --font-family-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo, Consolas, monospace;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 600;
    
    /* Transitions */
    --transition-duration: 300ms;
    --transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    
    /* Shadow Variables */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.3);
    
    /* Hover State Variables */
    --hover-bg: rgba(255, 255, 255, 0.05);
    --hover-border: rgba(255, 255, 255, 0.2);
    
    /* Table Variables */
    --table-stripe-bg: rgba(255, 255, 255, 0.02);
    
    /* Category Toggle Variables */
    --category-toggle-bg: #353639;
    --category-toggle-text: var(--text-primary-dark);
    --category-toggle-border: transparent;
    --category-toggle-hover-bg: rgba(255, 255, 255, 0.08);
    --category-toggle-hover-border: transparent;
    --category-toggle-active-bg: var(--primary);
    --category-toggle-active-text: #FFFFFF;
    --category-toggle-active-border: transparent;
    --category-toggle-active-hover-bg: color-mix(in srgb, var(--primary) 88%, black);
    --category-toggle-active-hover-border: transparent;
    --category-toggle-icon-stroke: #8C9094;
    --category-toggle-active-icon-stroke: #FFFFFF;
}

/* Light Theme Overrides */
[data-theme="light"] {
    /* Background Colors */
    --background: #F7F6F9;
    --surface: #FFFFFF;
    --background-dark: #F7F6F9;
    --background-panel: #FFFFFF;
    --background-hover: rgba(0, 0, 0, 0.05);
    
    /* Text Colors */
    --text-primary: #1A1D21;
    --text-primary-dark: #1A1D21;
    --text-secondary: #2D3035;
    --text-secondary-dark: #6B7280;
    
    /* Border Colors */
    --border: #E0DFE2;
    --border-color-dark: #E0DFE2;
    --border-color-light: #E0DFE2;
    --divider-color-subtle: rgba(0, 0, 0, 0.08);
    --input-border-dark: #E0DFE2;
    
    /* Input and Form Colors */
    --input-background-dark: #FFFFFF;
    --dropdown-border: #E0DFE2;
    --dropdown-text: #1A1D21;
    
    /* Shadow and Overlay Colors */
    --panel-highlight: rgba(0, 0, 0, 0.02);
    --modal-background: rgba(0, 0, 0, 0.5);
    
    /* Figma Design Variables */
    --figma-title-color: #1A1D21;
    --figma-meta-color: #6B7280;
    --figma-rank-color: #2D3035;
    --figma-border-color: #E0DFE2;
    
    /* Button adjustments */
    --primary-button: #007AFF;
    --primary-button-hover: #3395FF;
    --text-button: #FFFFFF;
    
    /* Slider colors - Light theme */
    --slider-track: #E0DFE2;
    --slider-thumb: #23262B;
    --slider-thumb-hover: #37383B;
    
    /* Shadow Variables for Light Mode */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.1);
    
    /* Hover State Variables for Light Mode */
    --hover-bg: rgba(0, 0, 0, 0.05);
    --hover-border: rgba(0, 0, 0, 0.1);
    
    /* Table Variables for Light Mode */
    --table-stripe-bg: rgba(0, 0, 0, 0.02);
    
    /* Category Toggle Variables for Light Mode */
    --category-toggle-bg: #F0EFF3;
    --category-toggle-text: #1A1D21;
    --category-toggle-border: #E0DFE2;
    --category-toggle-hover-bg: #F0EFF3;
    --category-toggle-hover-border: #C1C7CD;
    --category-toggle-active-bg: var(--primary);
    --category-toggle-active-text: #FFFFFF;
    --category-toggle-active-border: transparent;
    --category-toggle-active-hover-bg: color-mix(in srgb, var(--primary) 88%, black);
    --category-toggle-active-hover-border: transparent;
    --category-toggle-icon-stroke: #9E9EAE;
    --category-toggle-active-icon-stroke: #FFFFFF;

    /* Focus pill (onboarding) active state – distinct from category toggles */
    --focus-pill-active-bg: #37383B;
    --focus-pill-active-text: #FFFFFF;

    /* Additional Light Mode Variables for Hard-coded Colors */
    --light-border: #E0DFE2;
    --light-background: #FFFFFF;
    --light-hover: #F8F9FA;
    --light-text-primary: #1A1D21;
    --light-text-secondary: #6B7280;
    --light-text-meta: #9E9EAE;
    --light-button-hover: #C1C7CD;
    --light-button-cancel: #F5F5F5;
    --light-progress-bg: #37383B;
    --light-active-bg: #E3F2FD;
    --light-checkbox-bg: #52B5E8;
    --light-mobile-bg: #E0DFE2;
    --light-mobile-hover: #C1C7CD;
    --light-mobile-active: #B0B7BE;

    /* Make h4 text dark in light mode */
    h4,
    .tender-section h4 {
        color: var(--text-primary-dark);
    }
    
    /* === CONSOLIDATED LIGHT MODE OVERRIDES === */
    
    /* Header Border Overrides */
    .overview-column .column-header-wrapper,
    .analysis-column .column-header-wrapper,
    .tender-list-column .column-header-wrapper,
    .settings-content .column-header-wrapper {
        border-bottom: 1px solid var(--light-border);
    }
    
    /* Collapsed Column Header Borders */
    .tender-container.analysis-collapsed .analysis-column.collapsed .column-header-wrapper,
    .tender-container.overview-collapsed .overview-column.collapsed .column-header-wrapper,
    .tender-container.tenders-collapsed .tender-list-column.collapsed .column-header-wrapper {
        border-bottom: 1px solid var(--light-border);
    }
    
    /* Tender Item Borders */
    .tender-item {
        border-top: 1px solid var(--light-border);
    }
    
    /* HR Overrides */
    hr,
    .tender-divider {
        background-color: var(--light-border);
        border-color: var(--light-border);
    }
    
    /* Heading Overrides */
    h1, h2 {
        color: var(--light-text-primary);
    }
    
    /* Overview Column Strong Tags */
    .overview-column .tender-summary strong,
    .overview-column .ai-relevance-summary strong {
        color: var(--light-text-primary);
    }
    
    /* Tender List Item Overrides */
    .tender-item {
        background: var(--light-background);
        border: none;
        color: var(--light-text-primary);
    }

    .tender-item:hover {
        background: #F7F6F9;
        border-radius: var(--radius-card);
    }

    .tender-item.active {
        background: #F7F6F9;
        border-radius: var(--radius-card);
    }
    
    /* Tender Item Text Colors */
    .tender-item .tender-title {
        color: var(--light-text-primary);
    }
    
    .tender-item .tender-item-meta {
        color: var(--light-text-secondary);
    }
    
    /* Button Overrides */
    .favourite-btn,
    .view-original-btn,
    .share-icon-btn {
        background: var(--light-background);
        border: 1px solid var(--light-border);
        color: var(--light-text-primary);
    }
    
    .favourite-btn:hover,
    .view-original-btn:hover,
    .share-icon-btn:hover {
        background: var(--light-hover);
        border-color: var(--light-button-hover);
    }
    
    .favourite-btn--active {
        color: var(--accent-yellow);
    }
    
    /* Component Overrides */
    .relevance-score-card {
        border: 1px solid var(--light-border);
        background: var(--light-background);
    }
    
    .panel-card {
        border: 1px solid var(--light-border);
        background: var(--light-background);
    }
    
    /* Analysis Column Progress Containers */
    .column-section .progress-container {
        background: var(--light-progress-bg);
        border: none;
    }
    
    /* Analysis Column Text Colors */
    .column-section .criteria-value,
    .column-section .progress-bar .criteria-value,
    .column-section .text-unknown {
        color: var(--light-text-meta);
        font-size: 0.8rem;
    }
    
    .column-section .criteria-value,
    .column-section .progress-bar .criteria-value {
        color: var(--light-text-primary);
    }
    
    /* Analysis Column Criteria Labels */
    .column-section .criteria-label {
        color: var(--light-text-primary);
    }
    
    /* Search Box Overrides */
    .search-box input {
        border: 1px solid var(--light-border);
        background: var(--light-background);
        color: var(--light-text-primary);
    }
    
    .filter-toggle-btn {
        border: 1px solid var(--light-border);
        background: var(--light-background);
        color: var(--light-text-primary);
    }
    
    .filter-toggle-btn:hover {
        background: var(--light-hover);
        border-color: var(--light-button-hover);
    }
    
    /* === CRITICAL LIGHT MODE FIXES === */
    /* Fix white text on light backgrounds - CRITICAL VISIBILITY ISSUES */
    .user-avatar {
        color: var(--text-button);
        background: linear-gradient(135deg, var(--primary-button-hover), var(--primary));
    }
    
    .user-avatar:hover {
        background: linear-gradient(135deg, var(--primary-button-hover), var(--primary));
    }
    
    .status-icon {
        color: #FFFFFF; /* Keep white for contrast on colored backgrounds */
    }
    
    .nav-segment.active {
        background-color: var(--light-mobile-bg);
        color: var(--light-text-primary);
    }
    
    .button-cancel {
        background: var(--light-button-cancel);
        color: var(--light-text-primary);
        border: 1px solid var(--light-border);
    }
    
    .button-cancel:hover,
    .button-cancel:focus {
        background: var(--light-border);
        color: var(--light-text-primary);
    }
    
    /* Fix hardcoded dark backgrounds */
    .favourite-btn {
        background: var(--light-background);
        border: 1px solid var(--light-border);
        color: var(--light-text-primary);
    }
    
    .favourite-btn:hover {
        background-color: var(--light-hover);
        border-color: var(--light-button-hover);
    }
    
    /* Override active state to use yellow color */
    .favourite-btn.favourite-btn--active {
        color: var(--accent-yellow);
    }
    
    .view-original-btn {
        background-color: var(--light-background);
        border: 1px solid var(--light-border);
        color: var(--light-text-primary);
    }
    
    .view-original-btn:hover {
        background-color: var(--light-hover);
        border-color: var(--light-button-hover);
    }
    
    .share-icon-btn {
        background-color: var(--light-background);
        border: 1px solid var(--light-border);
        color: var(--light-text-primary);
    }
    
    .share-icon-btn:hover {
        background-color: var(--light-hover);
        border-color: var(--light-button-hover);
    }
    
    /* Fix dark borders */
    hr {
        border-top: 1px solid var(--light-border);
    }
    
    .column-header-wrapper {
        border-bottom: 1px solid var(--light-border);
    }
    
    .settings-content .column-header-wrapper {
        border-bottom: 1px solid var(--light-border);
    }
    
    /* ===== LIGHT MODE FORM OVERRIDES ===== */
    .form-section {
        background: var(--light-background);
        border-color: var(--light-border);
    }
    
    .form-section:hover {
        border-color: var(--light-border-hover, #9CA3AF);
    }
    
    .form-section h3 {
        color: var(--light-text-primary);
        border-bottom-color: var(--light-border);
    }
    
    .filter-label,
    .form-label {
        color: var(--light-text-primary);
    }
    
    .help-text {
        color: var(--light-text-secondary, #6B7280);
    }
    
    .form-input,
    input[type="text"],
    input[type="email"], 
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="url"],
    textarea,
    select {
        color: var(--light-text-primary);
        background-color: var(--light-background);
        border-color: var(--light-border);
    }
    
    .form-input:hover:not(:focus),
    input:hover:not(:focus),
    textarea:hover:not(:focus) {
        border-color: var(--light-border-hover, #9CA3AF);
        background-color: var(--light-background-hover, #F9FAFB);
    }
    
    .form-input::placeholder,
    input::placeholder,
    textarea::placeholder {
        color: var(--light-text-secondary, #6B7280);
    }
    
    /* Fix collapsed column headers */
    .tender-container.analysis-collapsed .analysis-column.collapsed .column-header-wrapper,
    .tender-container.overview-collapsed .overview-column.collapsed .column-header-wrapper,
    .tender-container.tenders-collapsed .tender-list-column.collapsed .column-header-wrapper {
        border-bottom: 1px solid var(--light-border);
    }
    
    /* Fix panel cards */
    .panel-card {
        border: 1px solid var(--light-border);
        background: var(--light-background);
    }
    
    /* Fix checkboxes */
    .checkbox-custom {
        border: 2px solid var(--light-border);
        background-color: var(--light-background);
    }
    
    .checkbox-custom:checked {
        background-color: var(--light-checkbox-bg);
        border-color: var(--light-checkbox-bg);
    }
    
    /* Fix modal checkbox check marks in light mode */
    .modal .checkbox-label input[type="checkbox"]:checked + .checkbox-custom::after {
        border-color: white;
    }
    
    /* Mobile-specific light mode fixes */
    .mobile-hamburger {
        background-color: var(--light-mobile-bg);
        color: var(--light-text-primary);
    }
    
    .mobile-hamburger:hover {
        background-color: var(--light-mobile-hover);
    }
    
    .mobile-hamburger:active {
        background-color: var(--light-mobile-active);
    }
    
    .mobile-nav-tab {
        color: var(--light-text-primary);
    }
    
    .mobile-nav-tab.active {
        color: var(--light-text-primary);
        border-bottom-color: var(--light-text-primary);
    }
    
    .mobile-nav-tab.active::after {
        background: var(--light-text-primary);
    }
    
    /* Category toggle fixes */
    .category-toggle.active {
        background-color: var(--category-toggle-active-bg);
        color: var(--category-toggle-active-text);
        border: 1px solid var(--category-toggle-active-border);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    }
    
    .category-toggle.active:hover {
        background-color: var(--category-toggle-active-hover-bg);
        color: var(--category-toggle-active-text);
        border-color: var(--category-toggle-active-hover-border);
    }
    
    .category-toggle.favourites-toggle.active svg,
    .category-toggle[data-category=""].active .toggle-icon,
    .category-toggle[data-category="program_project"].active .toggle-icon,
    .category-toggle[data-category="job_consultancy"].active .toggle-icon,
    .category-toggle[data-category="procurement"].active .toggle-icon {
        stroke: var(--category-toggle-active-icon-stroke);
    }
    
    /* Additional border and background fixes */
    .nav-segments {
        border-color: var(--light-border);
    }
    
    .nav-dot {
        background-color: var(--primary);
    }
    
    /* Form and input fixes */
    .form-input,
    .input-text,
    .input-textarea {
        background: var(--light-background);
        border: 1px solid var(--light-border);
        color: var(--light-text-primary);
    }
    
    .form-input:focus,
    .input-text:focus,
    .input-textarea:focus {
        border-color: var(--light-border);
        box-shadow: none;
    }
    
    /* Search and filter fixes */
    .search-box {
        background: var(--light-background);
    }
    
    .filter-toggle-btn {
        background: var(--light-background);
        border: 1px solid var(--light-border);
        color: var(--light-text-primary);
    }
    
    .filter-toggle-btn:hover {
        background: var(--light-hover);
        border-color: var(--light-button-hover);
    }
    
    /* Dropdown fixes */
    .dropdown-panel {
        background: var(--light-background);
        border: 1px solid var(--light-border);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }
    
    .dropdown-item {
        color: var(--light-text-primary);
    }
    
    .dropdown-item:hover {
        background: var(--light-hover);
    }
    
    /* Modal fixes */
    .modal-content {
        background: var(--light-background);
        border: none;
    }
    
    /* Settings specific fixes */
    .settings-nav .nav-item {
        color: var(--light-text-secondary);
    }
    
    .settings-nav .nav-item:hover {
        background: var(--light-hover);
        color: var(--light-text-primary);
    }
    
    .settings-nav .nav-item-active {
        background: var(--light-border);
        color: var(--light-text-primary);
    }
    
    /* Welcome/Onboarding fixes */
    .welcome-card {
        background: var(--light-background);
        border: 1px solid var(--light-border);
        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.04);
    }
    
    /* Onboarding container inherits light theme text color */
    #onboarding-container {
        color: var(--light-text-primary);
    }
    
    /* Welcome left heading and labels use light theme text color */
    .welcome-left h1 {
        color: var(--light-text-primary);
    }
    
    .welcome-left label:not(.focus-pill) {
        color: var(--light-text-primary);
    }
    
    /* Market segment names use light theme text color */
    .segment-name {
        color: var(--light-text-primary);
    }
    
    /* Market segment option border: full opacity in light mode */
    .market-segment-option {
        border-bottom-color: #E0DFE2;
    }
    
    .hero-image-inset {
        background: rgba(235, 245, 255, 1);
    }
    
    /* Slider light mode overrides */
    .dual-slider-track {
        background: var(--light-border);
    }

    .dual-slider-fill {
        background: #37383B;
    }

    .dual-slider-thumb {
        background: var(--light-text-primary);
        border: 2px solid var(--light-background);
    }

    .dual-slider-thumb:hover,
    .dual-slider-thumb.active {
        background: #1A1D21;
    }
    
    /* Focus pill default background in light theme */
    .focus-pill {
        background-color: rgba(240, 242, 245, 1);
    }
    
    /* Focus pill active state – distinct colour in light theme */
    .focus-pill:has(input:checked) {
        background-color: var(--focus-pill-active-bg);
        color: var(--focus-pill-active-text);
    }
    
    .focus-pill:has(input:checked):hover {
        background-color: var(--focus-pill-active-bg);
        color: var(--focus-pill-active-text);
    }
    
    /* Additional category button and font fixes - REMOVED DUPLICATE RULES */
    /* These rules are now handled in the main [data-theme="light"] section above */
    
    /* Fix tender item text */
    .tender-item .tender-title,
    .tender-item .tender-meta,
    .tender-item-title,
    .tender-item-meta {
        color: var(--light-text-primary);
    }
    
    .tender-item .tender-meta-label,
    .tender-item-meta-label {
        color: var(--light-text-secondary);
    }
    
    /* Fix overview and analysis text */
    .overview-column .tender-summary,
    .overview-column p,
    .analysis-column p,
    .column-section p {
        color: var(--light-text-primary);
    }
    
    .overview-column .tender-summary strong,
    .analysis-column strong {
        color: var(--light-text-primary);
    }
    
    /* Fix search placeholder and text */
    .search-box input::placeholder {
        color: var(--light-text-secondary);
    }
    
    .search-box input {
        color: var(--light-text-primary);
    }
    
    /* Fix any remaining white text */
    h1, h2, h3, h4, h5, h6 {
        color: var(--light-text-primary);
    }
    
    /* Fix tender relevance indicators */
    .tender-relevance-indicator {
        color: #FFFFFF !important; /* Keep white on colored backgrounds */
    }
    
    /* Fix all remaining #37383B borders to light mode */
    .tender-container.analysis-collapsed .analysis-column.collapsed .column-header-wrapper,
    .tender-container.overview-collapsed .overview-column.collapsed .column-header-wrapper,
    .tender-container.tenders-collapsed .tender-list-column.collapsed .column-header-wrapper {
        border-bottom: 1px solid var(--light-border);
    }
    
    .overview-column .column-header-wrapper,
    .analysis-column .column-header-wrapper,
    .tender-list-column .column-header-wrapper {
        border-bottom: 1px solid var(--light-border);
    }
    
    .tender-item {
        border-top: 1px solid var(--light-border);
    }
    
    .tender-divider {
        background: var(--light-border);
    }
    
    .tender-item.selected {
        border: 1px solid var(--light-border);
    }
    
    .column-section .progress-container {
        background: var(--light-progress-bg); /* Keep dark for contrast with light bars */
    }
    
    .search-box input {
        border: 1px solid var(--light-border);
    }
    
    .filter-toggle-btn {
        border: 1px solid var(--light-border);
    }
    
    .panel-card {
        border: 1px solid var(--light-border);
    }
    
    .checkbox-custom {
        border: 2px solid var(--light-border);
    }
    
    /* Navigation segments */
    .nav-segments {
        background: var(--background);
        box-shadow: 0 1px 10px 0 #D9D9D9 inset;
    }
    
    .nav-segment.active {
        background: var(--light-background);
        color: var(--light-text-primary);
    }
    
    .nav-segment:hover:not(.active) {
        color: var(--light-text-primary);
    }
    
    /* Tender header */
    .tender-header h1 {
        color: var(--light-text-primary);
    }
    
    /* Overview column strong tags */
    .overview-column .tender-summary strong {
        color: var(--light-text-primary);
    }
    
    /* Document list items */
    /* Favourite button */
    .favourite-btn {
        background: var(--light-background);
    }
    
    /* Light mode progress container background */
    .column-section .progress-container {
        background: var(--background);
    }
    
    /* Criteria title font size adjustment */
    .criteria-title {
        font-size: 0.8rem;
    }
    
    /* Light mode span meta value color */
    span.meta-value {
        color: var(--light-text-primary);
    }
    
    /* Light mode tender summary markdown content */
    .tender-summary .markdown-content,
    .tender-summary.markdown-content {
        color: var(--light-text-primary);
    }
    
    /* Light mode ai-relevance-summary content */
    .ai-relevance-summary,
    .ai-relevance-summary p,
    .ai-relevance-summary * {
        color: var(--light-text-primary);
    }
    
    /* Light mode category toggle styling */
    .category-toggle {
        background: var(--category-toggle-bg);
    }
    
    .category-toggle svg {
        stroke: var(--category-toggle-icon-stroke);
    }
    
    .category-toggle.active {
        background: var(--category-toggle-active-bg);
    }
    
    /* Tender item title font size adjustment */
    .tender-item .tender-item-title {
        font-size: 13px;
    }
    
    /* Settings container specific fixes */
    .settings-container .settings-nav-column {
        background: transparent;
        background-color: transparent;
        border: none;
        box-shadow: none;
    }
    
    /* Mobile nav tab fixes */
    .mobile-nav-tab {
        color: var(--text-secondary-dark);
    }
    
    .mobile-nav-tab.active {
        color: var(--text-primary-dark);
    }
    
    .mobile-nav-tab.active::after {
        background: var(--text-primary-dark);
    }
}

input, select, textarea, button {
    background-color: var(--input-background-dark);
    border-color: var(--input-border-dark);
    color: var(--text-primary-dark);
    font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
    }



.tender-item {
    background-color: var(--background-panel);
    border: none;
    position: relative;
    /* Mac Mail-style inbox row: [score gutter] [content] [flag] */
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    column-gap: 6px;
    padding: 12px 14px 12px 6px;
    border-radius: 0;
    margin-bottom: 0;
    cursor: pointer;
    transition: background-color 150ms var(--transition-easing),
                transform 150ms var(--transition-easing),
                box-shadow 150ms var(--transition-easing),
                border-radius 150ms var(--transition-easing);
    font-family: var(--font-family-primary)
    }

/* Desktop: a touch more horizontal breathing room */
@media (min-width: 1024px) {
    .tender-item {
        padding: 12px 16px 12px 8px;
    }
}



.tender-item:hover {
    background-color: var(--hover-bg);
    border-radius: var(--radius-card);
    }

.tender-item.active {
    background-color: var(--hover-bg);
    box-shadow: none;
    transform: none;
    border-radius: var(--radius-card);
    }

/* Selected uses the same light-grey fill as hover */
.tender-item.active:hover {
    background-color: var(--hover-bg);
    box-shadow: none;
    }

/* Card keyboard focus: inset ring so it reads on full-bleed list items */
.tender-item:focus-visible {
    outline: none;
    border-radius: var(--radius-card);
    box-shadow: inset 0 0 0 2px var(--primary);
    }

.tender-item.active:focus-visible {
    box-shadow: inset 0 0 0 2px var(--primary);
    }

/* Tactile micro-interactions — subtle lift on hover, satisfying press.
   Gated on motion preference so it never fights accessibility settings. */
@media (prefers-reduced-motion: no-preference) {
    .category-toggle,
    .filter-toggle-btn,
    .favourite-btn,
    .share-icon-btn,
    .view-original-btn {
        transition: background-color 150ms var(--ease-spring),
                    border-color 150ms var(--ease-spring),
                    color 150ms var(--ease-spring),
                    transform 150ms var(--ease-spring),
                    box-shadow 150ms var(--ease-spring);
    }

    .category-toggle:hover,
    .filter-toggle-btn:hover,
    .favourite-btn:hover,
    .share-icon-btn:hover,
    .view-original-btn:hover {
        transform: translateY(-1px);
    }

    .category-toggle:active,
    .filter-toggle-btn:active,
    .favourite-btn:active,
    .share-icon-btn:active,
    .view-original-btn:active {
        transform: translateY(0) scale(0.96);
        transition-duration: 80ms;
    }
}

/* Favourite star — read-only indicator pinned to the row's top-right */
.tender-item .tender-favourite {
    grid-column: 3;
    align-self: start;
    margin-top: 2px;
    z-index: 2;
}

.tender-favourite--display {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-yellow);
    line-height: 0;
    pointer-events: none;
}

.favourite-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-control);
    background: var(--background-panel);
    border: 1px solid var(--border-color-dark);
    cursor: pointer;
    width: 25px;
    height: 25px;
    padding-left: 4px;
    padding-right: 4px;
    padding-bottom: 2px;
    transition: background-color var(--transition-duration) var(--transition-easing),
                border-color var(--transition-duration) var(--transition-easing),
                color var(--transition-duration) var(--transition-easing);
}

[data-theme="light"] .favourite-btn {
    background: rgba(0,0,0,0.05);
    box-shadow: var(--shadow-sm);
}

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

.favourite-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.favourite-btn--active {
    color: var(--accent-yellow) !important;
    background: var(--primary-light);
}

/* Ensure favourite button active state overrides share-icon-btn styling */
.share-icon-btn.favourite-btn--active {
    color: var(--accent-yellow) !important;
}
.favourite-btn--inactive { color: var(--text-secondary-dark); opacity: 0.9; }

/* Hairline separator between rows, centered in the inter-row gap */
.tender-item-divider {
    position: absolute;
    top: -3px;
    left: 0;
    right: 0;
    height: 1px;
    margin: 0;
    border: none;
    background: var(--border-color-dark);
    z-index: 1;
}

.tender-item-divider--hidden {
    display: none;
}

/* Even gap between rows; stays fixed across hover/active so nothing shifts */
.tender-item {
    margin-bottom: 6px;
    /* Compact, even inbox rows; clamps keep heights consistent */
    min-height: 0;
}

/* Subject line — wraps to a max of 2 lines, then truncates */
.tender-item .tender-item-title {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--figma-title-color);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.35;
    margin: 0;
}

.nav-link {
    color: var(--text-secondary-dark);
    text-decoration: none;
    padding: var(--spacing-sm);
    border-radius: var(--radius);
    transition: all var(--transition-duration) var(--transition-easing)
    }

.nav-link:hover {
    color: var(--accent-blue);
    background: var(--panel-highlight)
    }

.nav-link.active {
    color: var(--accent-blue);
    font-weight: var(--font-weight-medium)
    }

/* Base Styles */
body {
    font-family: var(--font-family-primary);
    font-size: var(--base-font-size);
    color: var(--text-primary);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    background-color: var(--background)
    }

@media (min-width: 1024px) {
    body {
        min-width: 800px
        }

}

/* Touch Optimizations */
/* Focus Management */
:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px
    }

@media (prefers-reduced-motion: no-preference) {
    :focus-visible {
        transition: outline-offset 0.15s ease
        }

}

/* Navigation Styles */
.nav-content {
    width: 100%;
    margin: 0;
    padding: 10pt 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 10000
    }

.nav-brand-container {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: -15px;
    transform: scale(0.9);
    transform-origin: left center;
    }

.nav-brand {
    font-size: 1.25rem;
    font-weight: var(--font-weight-bold);
    color: var(--text-primary-dark);
    text-decoration: none;
    display: flex;
    align-items: center
    }

.nav-brand-logo {
    height: 24px;
    width: auto;
    display: block
    }

.nav-brand-logo--light {
    display: none
    }

.nav-brand-logo--dark {
    display: block
    }

[data-theme="dark"] .nav-brand-logo--light,
[data-theme="light"] .nav-brand-logo--dark {
    display: none
    }

[data-theme="dark"] .nav-brand-logo--dark,
[data-theme="light"] .nav-brand-logo--light {
    display: block
    }

.beta-badge {
    background-color: rgba(255, 255, 255, 0.2);
    color: var(--text-primary-dark);
    font-size: 0.625rem;
    font-weight: var(--font-weight-medium);
    padding: 2px 6px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 8px;
    }

.nav-links {
    display: flex;
    gap: var(--spacing-lg);
    align-items: center
    }

.user-dropdown {
    position: relative;
    margin-left: var(--spacing-md);
    display: flex;
    align-items: center;
    gap: 12px;
}

.welcome-text {
    color: var(--text-primary-dark);
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    }

.user-avatar {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--primary-button-hover), var(--primary));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-button);
    font-weight: var(--font-weight-bold);
    font-size: 1rem;
    letter-spacing: 0.02em;
    cursor: pointer;
    user-select: none;
    border: 1px solid var(--divider-color-subtle);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.14);
    transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease;
    }

.user-avatar:hover {
    transform: translateY(-1px);
    filter: brightness(1.08);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 40%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }

.user-avatar:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    }

.user-avatar:focus-visible {
    outline: 2px solid var(--primary-button-hover);
    outline-offset: 2px;
    }

.user-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background-color: var(--background-panel);
    border: 1px solid var(--border-color-dark);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-md);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-10px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 9999;
    min-width: 210px;
    padding: 6px;
    overflow: hidden;
    }

.user-dropdown-menu.active {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    }

.user-dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    color: var(--text-primary-dark);
    text-decoration: none;
    border: none;
    border-radius: var(--radius-control);
    transition: background-color 0.15s ease, color 0.15s ease;
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
    text-align: left;
    font-size: 13px;
    }

.user-dropdown-item:hover {
    background-color: color-mix(in srgb, var(--text-primary-dark) 8%, transparent);
    }

/* Button as dropdown item: match link appearance and alignment */
button.user-dropdown-item {
    background: transparent;
    font-family: inherit;
    }

.user-dropdown-item svg {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    stroke: var(--text-secondary-dark);
    transition: stroke 0.15s ease;
    display: block;
    }

.user-dropdown-item:hover svg {
    stroke: var(--text-primary-dark);
    }

.dropdown-divider {
    height: 1px;
    background-color: var(--border-color-dark);
    margin: 6px 8px;
}

/* Mobile touch-friendly improvements for user dropdown */
@media (max-width: 768px) {
    .user-dropdown-menu {
        min-width: 220px; /* Wider for better touch targets */
        padding: 6px;
        border-radius: var(--radius-card);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    }
    
    .user-dropdown-item {
        padding: 13px 14px;
        font-size: 14px;
        min-height: 44px;
    }
    
    .user-dropdown-item:active {
        background-color: color-mix(in srgb, var(--text-primary-dark) 12%, transparent);
        transform: scale(0.98);
        transition: all 0.1s ease;
    }
    
    .dropdown-divider {
        margin: 6px 8px;
    }
}

/* Health Check Styles */
.health-check {
    padding: var(--spacing-xl);
    max-width: 1200px;
    margin: 0 auto;
    background-color: var(--background-dark);
    border-radius: calc(var(--radius) / 2);
    position: relative;
    color: var(--text-primary-dark)
    }

.page-header {
    margin-bottom: var(--spacing-xl);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--border-color-dark)
    }

.page-header h1 {
    font-size: var(--heading-size);
    margin-bottom: var(--spacing-sm);
    color: var(--text-primary-dark)
    }

.status-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl)
    }

.status-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex: 1;
    min-width: 0;
    background: var(--panel-highlight);
    border-radius: var(--radius);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color-dark);
    position: relative
    }

.status-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: white;
    flex-shrink: 0
    }

.status-icon.status-green {
    background-color: var(--accent-green);
}

.status-icon.status-yellow {
    background-color: var(--accent-yellow);
}

.status-icon.status-red {
    background-color: var(--accent-red);
}

.status-content {
    display: flex;
    flex-direction: column;
    margin-left: var(--spacing-sm)
    }

.status-content h3 {
    margin: 0;
    font-size: var(--base-font-size);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary-dark);
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    line-height: 1.4
    }

.status-value {
    font-size: var(--heading-size);
    font-weight: var(--font-weight-bold);
    margin-top: var(--spacing-xs);
    line-height: 1.1;
    color: var(--text-primary-dark)
    }

.status-value br {
    display: block;
    margin: 1px 0;
    content: ""
    }

/* Tooltip styles */
.tooltip-container {
    position: relative;
    display: inline-flex;
    align-items: center;
    overflow: visible
    }

.info-icon {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--primary-light);
    color: var(--accent-blue);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-style: italic;
    cursor: help;
    margin-left: var(--spacing-xs)
    }

.tooltip-text {
    display: none;
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%) translateY(-100%);
    background: var(--background-panel);
    color: var(--text-primary-dark);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius);
    font-size: var(--base-font-size);
    white-space: nowrap;
    z-index: 2000;
    pointer-events: none;
    border: 1px solid var(--border-color-dark)
    }

.tooltip-text::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--background-panel)
    }

.info-icon:hover + .tooltip-text {
    display: block
    }

/* Resource Health Table Styles */
.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-lg)
    }

.section-header h2 {
    color: var(--text-primary-dark);
    font-size: 1.25rem;
    margin: 0
    }

.resource-count {
    color: var(--text-secondary-dark);
    font-size: var(--base-font-size);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--background-panel);
    border-radius: var(--radius);
    border: 1px solid var(--border-color-dark)
    }

.resource-table-wrapper {
    background: var(--background-panel);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color-dark);
    overflow: visible;
    position: relative
    }

.resource-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--base-font-size)
    }

.resource-table th, .resource-table td {
    padding: var(--spacing-md);
    text-align: left;
    border-bottom: 1px solid var(--border)
    }

.resource-table th {
    background: var(--background-panel);
    font-weight: 600;
    color: var(--text-primary-dark);
    position: sticky;
    top: 0;
    white-space: nowrap;
    border-bottom: 1px solid var(--border-color-dark)
    }

.resource-table td {
    background: var(--panel-highlight);
    border-bottom: 1px solid var(--border-color-dark);
    color: var(--text-primary-dark)
    }

.resource-table tbody tr:nth-child(even) td {
    background-color: var(--table-stripe-bg);
}

.resource-table tbody tr:hover td {
    background: var(--hover-bg)
    }

.resource-table tr:last-child td {
    border-bottom: none
    }

.resource-name a {
    color: var(--accent-blue);
    text-decoration: none;
    font-weight: 500
    }

/* Admin link styling - remove underline */
.admin-link {
    text-decoration: none;
    color: var(--text-primary-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease;
}

.admin-link:hover {
    opacity: 0.8;
    text-decoration: none;
}

.admin-icon {
    display: block;
    flex-shrink: 0;
}

/* Update table header link styles */
.resource-table th a {
    color: var(--text-primary-dark);
    font-size: var(--base-font-size);
    text-decoration: none;
}

/* Center Admin column (header and cell) */
.resource-table th:last-child,
.resource-table td:last-child {
    text-align: center;
}

/* Status badges in resource table (design system tokens) */
.health-check .status-badge {
    display: inline-block;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: 9999px;
    font-size: var(--base-font-size);
    font-weight: var(--font-weight-medium);
}
.health-check .status-badge.status-green {
    background: rgba(11, 210, 134, 0.2);
    color: var(--accent-green);
}
.health-check .status-badge.status-red {
    background: rgba(238, 123, 105, 0.2);
    color: var(--accent-red);
}

/* Table cell status colors (Last Scraped, Recent Updates) */
.resource-table .text-green { color: var(--accent-green); }
.resource-table .text-yellow { color: var(--accent-yellow); }
.resource-table .text-red { color: var(--accent-red); }

/* Dark Theme Adjustments for Health Check */
/* Tender Detail Page Styles */
.back-arrow {
    margin-right: var(--spacing-sm);
    width: 16px;
    height: 16px
    }

.relevance-score {
    display: inline-block;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    text-align: center
    }

.relevance-score strong {
    color: var(--text-secondary);
    font-weight: 500;
    margin-right: 0.5rem
    }

.meta-item {
    font-size: 1rem;
    line-height: 1.5
    }

.meta-item:last-child {
    margin-bottom: 0
    }

.meta-item strong {
    color: var(--text-secondary);
    font-weight: 500;
    margin-right: 0.5rem
    }

.tender-section {
    margin-top: 0;
    margin-bottom: 1.75rem;
    padding-bottom: 0.5rem;
    border-top: none
    }

.tender-section h4 {
    font-size: 1.25rem;
    color: white;
    margin: 0 0 1rem 0;
    font-weight: 600
    }

.tender-summary {
    color: var(--text-secondary-dark);
    line-height: 1.5;
    font-size: 0.9rem;
    margin-bottom: 1rem;
    font-weight: var(--font-weight-normal);
    /* Added for normal text weight */
    }

.tender-summary p {
    font-size: 0.85rem;
    }

.tender-summary .pt-summary-section,
.ai-relevance-summary .pt-summary-section {
    display: block;
    margin: 0 0 1rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.tender-summary .pt-summary-section:last-child,
.ai-relevance-summary .pt-summary-section:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.tender-summary .pt-summary-section > p,
.ai-relevance-summary .pt-summary-section > p {
    margin: 0;
}

.tender-summary .pt-summary-section > p > strong:first-child,
.ai-relevance-summary .pt-summary-section > p > strong:first-child {
    display: block;
    margin-bottom: 0.35em;
}

.tender-summary strong {
    font-weight: var(--font-weight-bold);
    /* Ensure strong tags are bold */
    }

/* Contact Information block reads denser than the scope summaries. */
.tender-section.contact .tender-summary,
.tender-section.contact .tender-summary p {
    font-size: 12px;
    }

.tender-section.contact .tender-summary a {
    color: var(--accent-blue);
    text-decoration: none;
    }

.tender-section.contact .tender-summary a:hover {
    text-decoration: underline;
    }

/* Preview snippet — wraps to a max of 2 muted lines */
.tender-short-summary {
    color: var(--text-secondary-dark);
    line-height: 1.4;
    font-size: 0.75rem;
    margin: 0;
    font-weight: var(--font-weight-normal);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    }

/* Layout Grid */
.tender-container {
    display: grid;
    grid-template-columns: 1fr;  /* Single column on mobile */
    gap: 16px;
    height: calc(100vh - 4rem);
    padding: 0;  /* Mobile: no padding */
    overflow: hidden;
    max-width: 100vw;
    box-sizing: border-box;
    background: none;
    transition: grid-template-columns 0.3s ease-in-out;
    }

/* Tablet and Desktop Grid */
@media (min-width: 1024px) {
    .tender-container {
        grid-template-columns: 28% 44% 27%;
        gap: 10px;
        padding: 0 10px 20px 10px;
    }
    }

@media (min-width: 1440px) {
    .tender-container {
        grid-template-columns: 26.5% 46% 26.5%;
        gap: 10px;
        padding: 0 10px 20px 10px;
    }
    }

.overview-column, .analysis-column, .tender-list-column, .settings-content {
    background: var(--background-panel);
    border-radius: var(--radius);
    padding: 16px;
    overflow-y: auto;
    overflow-x: hidden;
    height: calc(100vh - 4rem);  /* Mobile: account for nav + padding */
    max-height: calc(100vh - 4rem);
    min-height: calc(100vh - 4rem);
    box-sizing: border-box;
    width: 100%;
    transition: opacity var(--transition-duration) var(--transition-easing), width 0.3s ease-in-out, min-width 0.3s ease-in-out;
    }

/* Desktop: Full height columns */
@media (min-width: 1024px) {
    .overview-column, .analysis-column, .tender-list-column, .settings-content {
        height: 95vh;
        max-height: 95vh;
        min-height: 95vh;
    }
    }

.column.tender-list-column {
    background: var(--background-panel);
    }

/* Surface separation via a crisp hairline + inner top highlight rather than a
   fuzzy drop shadow — reads as a precisely crafted panel. */
.tender-container > .column, .detail-wrapper > .column, .settings-content {
    border: 1px solid var(--border-color-dark);
    box-shadow: inset 0 1px 0 var(--panel-highlight);
    margin-bottom: 0
    }

.column {
    padding: 16px;  /* Mobile: smaller padding */
    background-color: var(--background-panel);
    border-radius: 12px;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    container-type: inline-size;
    box-sizing: border-box;
    width: 100%;
    /* Keep panel scrollbars subtle and consistent across browsers (Windows /
       Linux render a chunky default bar otherwise). Thin + transparent until
       hovered, matching the inner content wrappers. */
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
    }

.column:hover {
    scrollbar-color: var(--border-color-dark) transparent;
}

.column::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

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

.column::-webkit-scrollbar-thumb {
    background-color: transparent;
    border-radius: 3px;
}

.column:hover::-webkit-scrollbar-thumb {
    background-color: var(--border-color-dark);
}

[data-theme="light"] .column:hover {
    scrollbar-color: var(--border-color-light) transparent;
}

[data-theme="light"] .column:hover::-webkit-scrollbar-thumb {
    background-color: var(--border-color-light);
}

/* Desktop: larger padding */
@media (min-width: 1024px) {
    .column {
        padding: 20px;
    }
    }

@container (max-width: 300px) {
    .tender-item-meta .meta-item {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0 !important;
    }

    .tender-item-meta-label {
        margin-bottom: 2px;
    }

    .tender-item-meta-value {
        display: block !important;
        margin-left: 0 !important;
    }
}

.empty-state {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text-secondary-dark);
    padding: 2rem;
    text-align: center;
    flex-direction: column;
    gap: 0.75rem;
}

.empty-state h3 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-primary-dark);
    letter-spacing: -0.01em;
}

.empty-state p {
    margin: 0;
    font-size: 0.8rem;
    max-width: 260px;
    line-height: 1.5;
    color: var(--text-secondary-dark);
    opacity: 0.7;
}

.empty-state-icon-wrapper {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.25rem;
    color: var(--text-secondary-dark);
    opacity: 0.6;
}

.empty-state-icon-wrapper--lg {
    width: 56px;
    height: 56px;
    border-radius: 14px;
}

[data-theme="light"] .empty-state-icon-wrapper {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.06);
}

.placeholder-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: var(--spacing-xl);
    max-width: 300px;
}

.placeholder-title {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-primary-dark);
    margin: 0;
    letter-spacing: -0.01em;
}

.placeholder-text {
    font-size: 0.8rem;
    color: var(--text-secondary-dark);
    line-height: 1.5;
    margin: 0;
    text-align: center;
    opacity: 0.7;
}

/* Keyboard hint lines in empty/placeholder states */
.placeholder-hint,
.empty-state-hint {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 4px 0 0 0;
    font-size: 0.72rem;
    color: var(--text-secondary-dark);
    opacity: 0.8;
}

.placeholder-hint kbd,
.empty-state-hint kbd {
    font-size: 0.66rem;
    padding: 2px 5px;
}

.filter-group label.filter-label {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--text-secondary-dark);
    padding-left: 0;
    }

/* Searchable Dropdown Styles */
.searchable-dropdown .dropdown-menu {
    padding: 0.25rem 0 0 0
    }

.dropdown-options {
    max-height: 250px;
    overflow-y: auto;
    padding: 0.25rem
    }

.dropdown-search-input {
    width: 100%;
    padding: 0.375rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.875rem;
    margin: 0;
    box-sizing: border-box
    }

.dropdown-search-input:focus {
    outline: none;
    border-color: white;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2)
    }

.searchable-dropdown .dropdown-item {
    padding: 0.375rem 0.5rem;
    cursor: pointer;
    border-radius: 6px
    }

.searchable-dropdown .dropdown-item:hover, .searchable-dropdown .dropdown-item.selected {
    background-color: var(--background-hover);
    color: var(--primary)
    }

.searchable-dropdown .dropdown-item.hidden {
    display: none
    }

/* Lock body scroll on mobile when tenders page is active */
@media (max-width: 768px) {
    html:has(.tender-container),
    body:has(.tender-container) {
        overflow: hidden;
        height: 100vh;
    }
}

/* Mobile Pane Management - Data-attribute driven with slide animations */
@media (max-width: 768px) {
    .tender-container[data-pane="list"] .tender-list-column { 
        display: block !important; 
        transform: translateX(0) !important;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    .tender-container[data-pane="list"] #overview-column { 
        display: block !important; 
        transform: translateX(100%) !important;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    .tender-container[data-pane="list"] #analysis-column { 
        display: block !important; 
        transform: translateX(200%) !important;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    .tender-container[data-pane="overview"] .tender-list-column { 
        display: block !important; 
        transform: translateX(calc(-100% - 2px)) !important;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    .tender-container[data-pane="overview"] #overview-column { 
        display: block !important; 
        transform: translateX(0) !important;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    .tender-container[data-pane="overview"] #analysis-column { 
        display: block !important; 
        transform: translateX(100%) !important;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    .tender-container[data-pane="analysis"] .tender-list-column { 
        display: block !important; 
        transform: translateX(calc(-200% - 2px)) !important;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    .tender-container[data-pane="analysis"] #overview-column { 
        display: block !important; 
        transform: translateX(calc(-100% - 2px)) !important;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    .tender-container[data-pane="analysis"] #analysis-column { 
        display: block !important; 
        transform: translateX(0) !important;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
}

/* Desktop: Show all columns */
@media (min-width: 1024px) {
    .tender-container[data-pane="list"] .tender-list-column,
    .tender-container[data-pane="overview"] #overview-column,
    .tender-container[data-pane="analysis"] #analysis-column {
        display: block;
        transform: none;
        transition: none;
    }
    
    .tender-container[data-pane="list"] #overview-column,
    .tender-container[data-pane="list"] #analysis-column,
    .tender-container[data-pane="overview"] .tender-list-column,
    .tender-container[data-pane="overview"] #analysis-column,
    .tender-container[data-pane="analysis"] .tender-list-column,
    .tender-container[data-pane="analysis"] #overview-column {
        display: block;
        transform: none;
        transition: none;
    }
    
    /* Desktop column collapse functionality */
    .tender-container.analysis-collapsed {
        grid-template-columns: 26.5% 70% 2.5% !important;
    }
    
    .tender-container.analysis-collapsed .analysis-column.collapsed {
        width: 5% !important;
        min-width: 5% !important;
        overflow: hidden !important;
        transition: all 0.3s ease-in-out;
    }
    
    .tender-container.analysis-collapsed .analysis-column.collapsed .empty-state {
        display: none !important;
    }
    
    .tender-container.analysis-collapsed .analysis-column.collapsed .analysis-content-wrapper {
        display: none !important;
    }
    
    .tender-container.analysis-collapsed .analysis-column.collapsed .column-header-wrapper {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        height: 100% !important;
        padding: 8px 0 0 0 !important;
        border-bottom: 1px solid #37383B !important;
    }
    
    .tender-container.analysis-collapsed .analysis-column.collapsed .column-header {
        font-size: 0.8rem !important;
        writing-mode: vertical-rl !important;
        text-orientation: mixed !important;
        transform: rotate(180deg) !important;
        margin: 0 !important;
        white-space: nowrap !important;
    }
    
    .tender-container.analysis-collapsed .analysis-column.collapsed .collapse-btn {
        transform: none !important;
        margin-top: 0 !important;
        margin-bottom: 8px !important;
    }
    
    /* Overview column collapse functionality */
    .tender-container.overview-collapsed {
        grid-template-columns: 26.5% 2.5% 71% !important;
    }
    
    .tender-container.overview-collapsed .overview-column.collapsed {
        overflow: hidden !important;
        transition: all 0.3s ease-in-out;
    }
    
    .tender-container.overview-collapsed .overview-column.collapsed .overview-content-wrapper {
        display: none !important;
    }
    
    .tender-container.overview-collapsed .overview-column.collapsed .overview-actions {
        display: none !important;
    }
    
    .tender-container.overview-collapsed .overview-column.collapsed .column-header-wrapper {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        height: 100% !important;
        padding: 8px 0 0 0 !important;
        border-bottom: 1px solid #37383B !important;
    }
    
    .tender-container.overview-collapsed .overview-column.collapsed .column-header {
        display: block !important;
        font-size: 0.8rem !important;
        writing-mode: vertical-rl !important;
        text-orientation: mixed !important;
        transform: rotate(180deg) !important;
        margin: 0 !important;
        white-space: nowrap !important;
    }
    
    .tender-container.overview-collapsed .overview-column.collapsed .collapse-btn {
        transform: none !important;
        margin-top: 0 !important;
        margin-bottom: 8px !important;
    }
    
    /* Tenders column collapse functionality */
    .tender-container.tenders-collapsed {
        grid-template-columns: 2.5% 55% 41.5% !important;
    }
    
    .tender-container.tenders-collapsed .tender-list-column.collapsed {
        overflow: hidden !important;
        min-width: 2.5% !important;
        transition: all 0.3s ease-in-out;
    }
    
    .tender-container.tenders-collapsed .tender-list-column.collapsed .tender-list-content-wrapper {
        display: none !important;
    }
    
    .tender-container.tenders-collapsed .tender-list-column.collapsed .column-header-wrapper {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        height: 100% !important;
        padding: 8px 0 0 0 !important;
        border-bottom: 1px solid #37383B !important;
    }
    
    .tender-container.tenders-collapsed .tender-list-column.collapsed .column-header {
        font-size: 0.8rem !important;
        writing-mode: vertical-rl !important;
        text-orientation: mixed !important;
        transform: rotate(180deg) !important;
        margin: 0 !important;
        white-space: nowrap !important;
    }
    
    .tender-container.tenders-collapsed .tender-list-column.collapsed .collapse-btn {
        transform: none !important;
        margin-top: 0 !important;
        margin-bottom: 8px !important;
    }
    
    /* Responsive button text - desktop */
    .btn-text-desktop {
        display: inline;
    }
    
    .btn-text-mobile {
        display: none;
    }
}

@media (max-width: 768px) {
    .dropdown-menu {
        max-height: 60vh;
        position: absolute
        }

    /* Responsive button text - mobile */
    .btn-text-desktop {
        display: none;
    }
    
    .btn-text-mobile {
        display: inline;
    }
    
    /* Hide collapse buttons on mobile */
    .collapse-btn {
        display: none !important;
    }
}

/* HTMX Loading States */
.overview-column.htmx-request,
.analysis-column.htmx-request {
    opacity: 0.7;
    pointer-events: none;
}

.overview-column.htmx-swapping,
.analysis-column.htmx-swapping {
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

/* Enhanced mobile responsive behavior with transitions */
@media (max-width: 768px) {
    .overview-column, .analysis-column {
        transition: opacity 0.2s ease-in-out;
    }
    
    .overview-column:not(.active),
    .analysis-column:not(.active) {
        opacity: 0;
    }
    
    .overview-column.active,
    .analysis-column.active {
        opacity: 1;
    }
    
    /* Mobile slide animations */
    .tender-container {
        overflow: hidden;  /* Prevent horizontal scroll during slide */
        position: relative;
    }
    
    .tender-list-column, #overview-column, #analysis-column {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        z-index: 1;
    }
    
    /* Ensure desktop grid layout is not affected by mobile positioning */
    @media (min-width: 1024px) {
        .tender-list-column, #overview-column, #analysis-column {
            position: static !important;
            top: auto !important;
            left: auto !important;
            width: auto !important;
            height: auto !important;
            z-index: auto;
        }
        
        /* Force grid layout on desktop */
        .tender-container {
            display: grid !important;
            grid-template-columns: 26.5% 46% 26.5% !important;
        }
        
        .tender-container.tenders-collapsed {
            grid-template-columns: 2.5% 55% 41.5% !important;
        }
        
        .tender-container.overview-collapsed {
            grid-template-columns: 26.5% 2.5% 71% !important;
        }
        
        .tender-container.analysis-collapsed {
            grid-template-columns: 26.5% 70% 2.5% !important;
        }
    }
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    width: 100%;
    color: var(--dropdown-text);
    font-size: 0.9rem
    }

.checkbox-label input[type="checkbox"] {
    position: absolute;
    opacity: 0
    }

.checkbox-custom {
    width: 18px;
    height: 18px;
    border: 2px solid var(--border-color-dark);
    border-radius: 4px;
    background: var(--input-background-dark);
    flex-shrink: 0;
    flex-grow: 0;
    display: inline-block;
    margin-right: 0.5rem;
    position: relative;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1)
    }

.checkbox-label:hover .checkbox-custom {
    border-color: var(--primary-button)
    }

.checkbox-label input[type="checkbox"]:checked + .checkbox-custom {
    background: var(--primary-button);
    border-color: var(--primary-button)
    }

.checkbox-label input[type="checkbox"]:checked + .checkbox-custom::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 2px;
    width: 4px;
    height: 8px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg)
    }

/* Dark theme adjustments for dropdowns */
select, .dropdown-trigger {
    background-color: var(--input-background-dark);
    border-color: var(--dropdown-border);
    color: var(--text-primary-dark)
    }

select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23E5E7EB' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E")
    }

.trigger-icon svg {
    stroke: var(--text-primary-dark)
    }

.dropdown-menu {
    background-color: var(--background-panel);
    border: 1px solid var(--border-color-dark);
    box-shadow: var(--shadow-md);
    border-color: var(--border-color-dark);
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--background-panel);
    border-radius: 8px;
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-10px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    padding: 0.5rem;
    max-height: 300px;
    overflow-y: auto
    }

/* Legacy dropdown-item styles removed - now handled by unified dropdown system */
select:hover, .dropdown-trigger:hover {
    border-color: var(--primary);
    background-color: rgba(255, 255, 255, 0.05)
    }

select:focus, .dropdown-trigger:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.5)
    }

.date-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-family-mono);
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-secondary-dark);
    margin-top: 16px;
    margin-bottom: 8px;
    font-weight: var(--font-weight-medium);
    }

/* Trailing hairline turns each date label into a quiet section divider */
.date-header::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--border-color-dark);
    }

.date-header-icon {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    flex-shrink: 0;
    }

.date-header-icon svg {
    display: block;
    }

[data-theme="light"] .tender-list-column .date-header {
    color: #8C9094;
}

/* Hide last updated header on mobile */
@media (max-width: 768px) {
    .last-updated-header {
        display: none;
    }
    }

.tender-list ul {
    list-style: none;
    padding: 0;
    margin: 0
    }

.tender-item-indicator {
    position: static;
    grid-column: 1;
    margin-top: 2px;
    transform: translateX(-3px);
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    border-radius: var(--radius-control);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.8rem;
    font-family: var(--font-family-mono);
    font-variant-numeric: tabular-nums;
    /* Minimal chip: soft tinted surface, accent numeral, hairline ring.
       Accent colors are theme-agnostic; the tint adapts via translucency. */
    background-color: color-mix(in srgb, var(--relevance-none) 12%, transparent);
    color: var(--relevance-none);
    border: 1px solid color-mix(in srgb, var(--relevance-none) 24%, transparent);
    transition: background-color 150ms var(--transition-easing),
                border-color 150ms var(--transition-easing);
    }

/* Monospace numerics — data reads like a precise instrument */
.num {
    font-family: var(--font-family-mono);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

.tender-list .meta-item.date-meta,
/* Deadline status chip — tint and hairline border derived from currentColor
   so the three states (neutral / due-soon / expired) share one recipe and
   adapt to light + dark themes automatically. */
.countdown {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-family-primary);
    font-variant-numeric: tabular-nums;
    font-size: 0.6rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1;
    color: var(--text-primary-dark);
    white-space: nowrap;
    padding: 2px 7px;
    border-radius: 999px;
    background: none;
    border: 1px solid rgba(184, 189, 193, 1);
    }

.countdown.alert {
    color: var(--accent-amber);
    font-weight: 600;
    }

.countdown.expired {
    color: var(--relevance-negative);
    }

.tender-item-indicator.no-score {
    background-color: color-mix(in srgb, var(--relevance-none) 10%, transparent);
    border-color: color-mix(in srgb, var(--relevance-none) 20%, transparent);
    color: var(--relevance-none);
    }

.tender-item.high-relevance .tender-item-indicator {
    background-color: color-mix(in srgb, var(--relevance-high) 14%, transparent);
    border-color: color-mix(in srgb, var(--relevance-high) 30%, transparent);
    color: var(--relevance-high);
    }

.tender-item.moderate-relevance .tender-item-indicator {
    background-color: color-mix(in srgb, var(--relevance-moderate) 14%, transparent);
    border-color: color-mix(in srgb, var(--relevance-moderate) 30%, transparent);
    color: var(--relevance-moderate);
    }

.tender-item.low-relevance .tender-item-indicator {
    background-color: color-mix(in srgb, var(--relevance-low) 16%, transparent);
    border-color: color-mix(in srgb, var(--relevance-low) 32%, transparent);
    color: var(--relevance-low);
    }

.tender-item.not-recommended .tender-item-indicator {
    background-color: color-mix(in srgb, var(--relevance-negative) 14%, transparent);
    border-color: color-mix(in srgb, var(--relevance-negative) 30%, transparent);
    color: var(--relevance-negative);
    }

.tender-content {
    grid-column: 2;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

/* Inbox head row: sender (organisation) left, deadline date right */
.tender-item-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.tender-sender {
    min-width: 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--figma-title-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tender-item-date {
    flex-shrink: 0;
    font-family: var(--font-family-mono);
    font-variant-numeric: tabular-nums;
    font-size: 0.72rem;
    color: var(--text-secondary-dark);
    white-space: nowrap;
}

.tender-item-date.alert {
    color: var(--accent-amber);
    font-weight: 600;
}

.tender-item-date.expired {
    color: var(--relevance-negative);
}

/* Specific spacing for tender-item-meta */
.tender-item-meta {
    margin-top: 0;
}

.tender-item-title {
    margin: 0;
    font-size: var(--figma-title-size);
    font-weight: 600;
    color: var(--figma-title-color);
    line-height: 1.21;
    }

.meta-item.compact .meta-label {
    font-size: 0.75rem;
    color: var(--text-secondary-dark);
    margin-bottom: 0.25rem
    }

.meta-item.compact .meta-value {
    font-size: 0.875rem;
    color: var(--text-primary-dark);
    font-weight: var(--font-weight-medium)
    }

/* Search and Filter Styles for Dark Theme */
.search-box input {
    background-color: var(--input-background-dark);
    border: 1px solid rgba(255, 255, 255, 0.05);
    color: var(--text-primary-dark);
    padding: 0.6rem 1rem 0.6rem 3.2rem;
    background-image: none;
    transition: all 0.2s ease;
    width: 100%;
    border-radius: 100px;
    font-size: 0.9rem
    }

.search-box input:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--primary);
    border-color: var(--primary);
    z-index: 1
    }

.filter-group select, .custom-dropdown .dropdown-trigger {
    background-color: var(--input-background-dark);
    border-color: var(--input-border-dark);
    color: var(--text-primary-dark)
    }

/* Legacy dropdown-item selected styles removed - now handled by unified dropdown system */
/* Progress Bar Component */
.progress-bar {
    height: 100%;
    border-radius: 9999px;
    transition: width 0.3s ease
    }

.progress-bar.green {
    background: var(--accent-green)
    }

.progress-bar.amber {
    background: var(--accent-amber)
    }

.progress-bar.red {
    background: var(--accent-red)
    }

.progress-bar.blue {
    background: var(--accent-blue)
    }

.overview-column {
    padding: 16px;
    position: relative;
    border-radius: 12px;
    }

.analysis-column .card {
    background: var(--panel-highlight);
    border-radius: 12px;
    margin-bottom: 1.5rem;
    overflow: hidden;
    border: 1px solid var(--border-color-dark)
    }

.analysis-column .card-header {
    background: var(--background-panel);
    padding: 1rem 1.25rem;
    font-weight: 600;
    color: var(--text-primary-dark);
    border-bottom: 1px solid var(--border-color-dark)
    }

.analysis-column .card-body {
    padding: 1.25rem;
    color: var(--text-primary-dark)
    }

.progress-bar.yellow {
    background: var(--accent-amber)
    }

/* Responsive adjustments for Figma design */
@media (max-width: 768px) {
    .tender-item-meta {
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-start
        }

.tender-item-meta .meta-item {
        width: 100%
        }

.tender-item {
        padding-left: 45px
        }

    .tender-item-indicator {
        width: 1.75rem;
        height: 1.75rem;
        left: 0.5rem;
        top: 0.75rem;
        font-size: 9px;
        border-radius: 40%;
        }

}

/* Search Box Styles */
.search-filter-wrapper {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    width: 100%
    }

.search-box {
    position: relative;
    flex: 1;
    max-width: calc(100% - 48px);
    margin-right: 8px;
    min-width: 0
    }

.search-box::before {
    content: "";
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none
    }

.search-box input {
    background-color: var(--input-background-dark);
    border: 1px solid rgba(255, 255, 255, 0.05);
    color: var(--text-primary-dark);
    padding: 10px 38px 10px 40px;
    border-radius: var(--radius-pill);
    font-size: 14px;
    width: 100%;
    transition: all 0.2s ease
    }

.search-box input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--primary)
    }

.search-box input::placeholder {
    color: var(--text-secondary-dark)
    }

/* Keyboard hint chips — "instrument" affordance, tactile 1px + inset highlight */
kbd {
    font-family: var(--font-family-mono);
    font-size: 0.7rem;
    line-height: 1;
    color: var(--text-secondary-dark);
    background: var(--input-background-dark);
    border: 1px solid var(--border-color-dark);
    border-radius: var(--radius-control);
    box-shadow: inset 0 1px 0 var(--panel-highlight);
    padding: 3px 6px;
    min-width: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.search-kbd {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    opacity: 0.7;
    transition: opacity 0.15s ease;
}

/* Hide the hint once the field is focused (you're already there) */
.search-box input:focus ~ .search-kbd {
    opacity: 0;
}

/* Column Header Wrapper - Provides consistent layout for all column headers */
.column-header-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    border-bottom: 1px solid #37383B;
    padding-bottom: 0.75rem;
    margin-left: -16px;
    margin-right: -16px;
    padding-left: calc(0.5rem + 16px);
    padding-right: 16px;
    height: 2rem;
    }

/* Column Header Text - Typography only */
.column-header {
    font-size: 1.1rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: -0.01em;
    color: var(--text-primary-dark);
    margin: 0;
    }

/* Ensure settings/analytics column headers match tenders style */
.settings-content .column-header,
.settings-content h2.column-header {
    font-size: 1.1rem;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    color: var(--text-primary-dark);
    margin: 0;
}

.tender-eyebrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary-dark);
    }

.tender-eyebrow-org {
    font-size: 10px;
    padding-bottom: 10px;
    }

.tender-header h1 {
    color: #E3E3E3;
    font-family: var(--font-family-primary);
    font-size: 1.8rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin-top: 6px;
    margin-bottom: 0;
    padding-bottom: 20px;
    }

.key-dates .date-item {
    color: var(--text-primary-dark)
    }

.contact-info {
    color: var(--text-secondary-dark);
    /* font-weight: var(--font-weight-normal); Apply to p if needed */
    }

.contact-info p {
    font-weight: var(--font-weight-normal);
    margin-top: 0;
    /* Remove default p margin if linebreaks adds too much space */
    margin-bottom: 0.5em;
    /* Add some space between paragraphs */
    }

.contact-info p:last-child {
    margin-bottom: 30px
    }

.contact-info strong {
    font-weight: var(--font-weight-bold)
    }

.criteria-title {
    color: var(--text-primary-dark);
    font-weight: 700;
    font-size: 0.95rem;
    }

.criteria-desc {
    color: var(--text-secondary-dark);
    font-size: 0.85rem
    }

/* Overview Content Wrapper - Separates header from content with padding */
.overview-content-wrapper {
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 12px;
    padding-bottom: 1rem;
    overflow-y: auto;
    height: calc(100% - 100px);
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}

.overview-content-wrapper:hover {
    scrollbar-color: var(--border-color-dark) transparent;
}

.overview-content-wrapper::-webkit-scrollbar {
    width: 6px;
}

.overview-content-wrapper::-webkit-scrollbar-track {
    background: transparent;
}

.overview-content-wrapper::-webkit-scrollbar-thumb {
    background-color: transparent;
    border-radius: 3px;
}

.overview-content-wrapper:hover::-webkit-scrollbar-thumb {
    background-color: var(--border-color-dark);
}

[data-theme="light"] .overview-content-wrapper:hover {
    scrollbar-color: var(--border-color-light) transparent;
}

[data-theme="light"] .overview-content-wrapper:hover::-webkit-scrollbar-thumb {
    background-color: var(--border-color-light);
}

@media (min-width: 1440px) {
    .overview-content-wrapper {
        padding-left: 5%;
        padding-right: 5%;
    }
}

/* Make overview header sticky */
.overview-column .column-header-wrapper {
    position: sticky;
    top: 0;
    background: var(--background-panel);
    z-index: 10;
    padding-bottom: 1rem;
    border-bottom: 1px solid #37383B;
    margin-bottom: 1rem;
    justify-content: flex-start;
}

.overview-column .column-header-wrapper .overview-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.overview-column .column-header-wrapper .collapse-btn {
        margin-left: 0;
    }
    
    /* Tenders column header styling */
    .tender-list-column .column-header-wrapper {
        justify-content: space-between;
    }
    
    .tender-list-column .column-header-wrapper .collapse-btn {
        margin-left: 0;
    }
    
    /* Make analysis header sticky */
    .analysis-column .column-header-wrapper {
    position: sticky;
    top: 0;
    background: var(--background-panel);
    z-index: 10;
    padding-bottom: 1rem;
    border-bottom: 1px solid #37383B;
    margin-bottom: 1rem;
}

/* Make tender list header sticky */
.tender-list-column .column-header-wrapper {
    position: sticky;
    top: 0;
    background: var(--background-panel);
    z-index: 10;
    padding-bottom: 1rem;
    border-bottom: 1px solid #37383B;
    margin-bottom: 1rem;
}

/* Base text color for settings - inherits correctly in light and dark mode */
.settings-content {
    color: var(--text-primary);
    overflow: hidden;
    height: 100%;
}

/* Make settings content header sticky - same as overview column */
.settings-content .column-header-wrapper {
    position: sticky;
    top: 0;
    background: var(--background-panel);
    z-index: 20;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    border-bottom: 1px solid #37383B;
    padding-bottom: 0.75rem;
    margin-left: -16px;
    margin-right: -16px;
    padding-left: calc(0.5rem + 16px);
    padding-right: 16px;
    height: 2rem;
}

/* Ensure tender list content starts below header */
.tender-list-column .column-section {
    margin-top: 0;
    padding-top: 0;
}

/* Ensure settings content wrapper scrolls properly */
.settings-content-wrapper {
    overflow-y: auto;
    overscroll-behavior: contain;
    height: calc(100% - 100px);
    padding-right: 40px;
    padding-left: 20px;
    padding-top: 0px;
    padding-bottom: 96px;
    margin-top: 0;
    position: relative;
    z-index: 1;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}

.settings-content-wrapper:hover {
    scrollbar-color: var(--border-color-dark) transparent;
}

.settings-content-wrapper::-webkit-scrollbar {
    width: 6px;
}

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

.settings-content-wrapper::-webkit-scrollbar-thumb {
    background-color: transparent;
    border-radius: 3px;
}

.settings-content-wrapper:hover::-webkit-scrollbar-thumb {
    background-color: var(--border-color-dark);
}

[data-theme="light"] .settings-content-wrapper:hover {
    scrollbar-color: var(--border-color-light) transparent;
}

[data-theme="light"] .settings-content-wrapper:hover::-webkit-scrollbar-thumb {
    background-color: var(--border-color-light);
}

/* Tender List Content Wrapper - For scrollable content */
.tender-list-content-wrapper {
    overflow-y: auto;
    overflow-x: hidden;
    height: calc(100% - 100px);
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}

.tender-list-content-wrapper:hover {
    scrollbar-color: var(--border-color-dark) transparent;
}

.tender-list-content-wrapper::-webkit-scrollbar {
    width: 6px;
}

.tender-list-content-wrapper::-webkit-scrollbar-track {
    background: transparent;
}

.tender-list-content-wrapper::-webkit-scrollbar-thumb {
    background-color: transparent;
    border-radius: 3px;
}

.tender-list-content-wrapper:hover::-webkit-scrollbar-thumb {
    background-color: var(--border-color-dark);
}

[data-theme="light"] .tender-list-content-wrapper:hover {
    scrollbar-color: var(--border-color-light) transparent;
}

[data-theme="light"] .tender-list-content-wrapper:hover::-webkit-scrollbar-thumb {
    background-color: var(--border-color-light);
}

/* Tender Meta Inline List - Simple horizontal list without card styling */
/* Only apply to overview column to avoid affecting tender list and analysis columns */
.overview-column .tender-meta-inline-list {
    display: flex;
    flex-wrap: wrap;
    column-gap: 8px;
    row-gap: 4px;
    margin-bottom: 2rem;
}

.overview-column .tender-meta-inline-list .meta-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.overview-column .tender-meta-inline-list .meta-label {
    color: rgba(140, 144, 148, 1);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.overview-column .tender-meta-inline-list .meta-value {
    font-size: 0.8rem;
    font-weight: 600;
}

.overview-column .tender-meta-inline-list .meta-value--empty {
    color: rgba(140, 144, 148, 1);
    font-weight: 500;
}

/* Overview Column H2 Styling */
.overview-column h2 {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* Analysis Column H2 Styling */
.analysis-column h2 {
    font-size: 1em;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.analysis-content-wrapper .tender-section > h2 {
    margin-top: 20px;
}

/* Microtitle — small uppercase section label (overline style) */
.microtitle,
.analysis-column h2.microtitle,
.analysis-content-wrapper .tender-section > h2.microtitle {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary-dark);
    margin: 0 0 15px;
}

/* Score Breakdown microtitle sits flush above its panel.
   Match the specificity of `.analysis-column h2.microtitle` so the flush
   override actually wins instead of inheriting the 15px bottom margin. */
.microtitle--flush,
.analysis-column h2.microtitle--flush,
.analysis-content-wrapper .tender-section > h2.microtitle--flush {
    margin-bottom: 0;
}

/* Settings Form H2 Styling - Match tenders page */
.settings-content h2 {
    font-size: 1em;
    font-weight: 600;
    color: var(--text-primary);
}

/* Settings Form Section H2 Margins - Only form sections, not headers */
.settings-content-wrapper h2 {
    margin-top: 50px;
    margin-bottom: 0;
}

/* Remove margin-top from first h2 in form */
.settings-content-wrapper h2:first-child {
    margin-top: 0;
}

/* Specifically target About Your Organisation header */
.settings-content-wrapper h2:first-of-type {
    margin-top: 0 !important;
}

/* Settings Help Text Styling */
.settings-content .help-text {
    color: var(--text-secondary-dark);
    font-size: 0.8rem;
    margin-top: 0;
    margin-bottom: 8px;
}

/* Dark Mode Filter Label Styling */
[data-theme="dark"] .filter-label {
    color: var(--text-primary);
}

/* Form Group Label Font Size */
.form-group label {
    font-size: 0.9rem !important;
}

/* Form Input Font Size */
.form-input {
    font-size: 0.9rem !important;
}

/* Dark Mode Input and Select Border Styling */
[data-theme="dark"] .form-input,
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    border: 1px solid #4A4B4F;
}

/* Dark Mode Dropdown Button Border Styling */
[data-theme="dark"] button.dropdown-trigger,
[data-theme="dark"] .dropdown-trigger {
    border: 1px solid #37383B;
}

/* Organisation Description Textarea Height */
.org-description {
    height: 9em;
}

/* Scope Summary — structured markdown sections */
.overview-column .scope-summary {
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--text-secondary-dark);
}

.overview-column .scope-summary > :first-child {
    margin-top: 0;
}

.overview-column .scope-summary p {
    margin: 0 0 0.75rem;
}

.overview-column .scope-summary p:last-child {
    margin-bottom: 0;
}

.overview-column .scope-summary strong {
    display: block;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-transform: none;
    color: var(--text-primary);
    margin-top: 1.25rem;
    margin-bottom: 0.35rem;
    line-height: 1.4;
}

.overview-column .scope-summary > p:first-child > strong:first-child,
.overview-column .scope-summary > strong:first-child {
    margin-top: 0;
}

.overview-column .scope-summary ul,
.overview-column .scope-summary ol {
    margin: 0 0 0.75rem;
    padding-left: 1.25rem;
}

.overview-column .scope-summary li {
    margin-bottom: 0.35rem;
}

.overview-column .scope-summary li:last-child {
    margin-bottom: 0;
}

/* A section the source never covered. Stated, not hidden: the panel keeps the
   same shape for every tender so a reader can tell an absent section from one
   we failed to extract. */
.detail-section-absent {
    margin: 0 0 0.75rem;
    font-style: italic;
    color: var(--text-tertiary-dark, var(--text-secondary-dark));
    opacity: 0.75;
}

.overview-column .scope-summary a {
    color: var(--accent-blue);
    text-decoration: none;
}

.overview-column .scope-summary a:hover {
    text-decoration: underline;
}

/* Style AI-generated <strong> tags to look like headings (other overview sections) */
.overview-column .tender-summary:not(.scope-summary) strong {
    display: block;
    font-size: 0.9em;
    color: #fff;
    font-weight: 600;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

/* Ensure last elements don't push content beyond viewport */
.overview-content-wrapper .column-section:last-child {
    margin-bottom: 0;
}

/* Analysis Content Wrapper - For scrollable content */
.analysis-content-wrapper {
    overflow-y: auto;
    height: calc(100% - 100px);
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
    padding-top: 8px;
}

.analysis-content-wrapper:hover {
    scrollbar-color: var(--border-color-dark) transparent;
}

.analysis-content-wrapper::-webkit-scrollbar {
    width: 6px;
}

.analysis-content-wrapper::-webkit-scrollbar-track {
    background: transparent;
}

.analysis-content-wrapper::-webkit-scrollbar-thumb {
    background-color: transparent;
    border-radius: 3px;
}

.analysis-content-wrapper:hover::-webkit-scrollbar-thumb {
    background-color: var(--border-color-dark);
}

[data-theme="light"] .analysis-content-wrapper:hover {
    scrollbar-color: var(--border-color-light) transparent;
}

[data-theme="light"] .analysis-content-wrapper:hover::-webkit-scrollbar-thumb {
    background-color: var(--border-color-light);
}

/* Relevance Score Card Styling */
.relevance-score-card {
    border: 1px solid #37383B;
    background: transparent;
    padding: 10px 12px !important;
    margin-bottom: 30px !important;
}

.relevance-score-card h2.microtitle.criteria-verdict-title {
    margin: 0 0 0.35rem;
    color: var(--text-primary);
}

.relevance-score-card .criteria-content {
    padding-left: 0.5rem;
}

/* Document Icons Styling */
.document-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 20px;
    border-radius: 4px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    flex-shrink: 0;
    background: var(--panel-highlight);
    color: var(--text-primary-dark);
    border: 1px solid var(--border-color-dark);
}

.document-icon.pdf-icon {
    background: color-mix(in srgb, var(--accent-red) 16%, transparent);
    border-color: color-mix(in srgb, var(--accent-red) 38%, transparent);
    color: var(--accent-red);
}

.document-icon.doc-icon {
    background: color-mix(in srgb, var(--accent-blue) 16%, transparent);
    border-color: color-mix(in srgb, var(--accent-blue) 38%, transparent);
    color: var(--accent-blue);
}

.document-icon.file-icon {
    background: color-mix(in srgb, var(--text-primary-dark) 10%, transparent);
    border-color: color-mix(in srgb, var(--text-primary-dark) 22%, transparent);
    color: var(--text-primary-dark);
}

.document-icon.file-icon svg {
    width: 12px;
    height: 12px;
}

.document-icon.link-icon {
    background: color-mix(in srgb, var(--accent-green) 14%, transparent);
    border-color: color-mix(in srgb, var(--accent-green) 34%, transparent);
    color: var(--accent-green);
}

.document-icon.link-icon svg {
    width: 11px;
    height: 11px;
}

/* Unified document/link row */
.document-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    background: var(--panel-highlight);
    border: 1px solid var(--border-color-dark);
    border-radius: var(--radius-control);
    text-decoration: none;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.document-row:hover {
    background: color-mix(in srgb, var(--text-primary-dark) 6%, var(--panel-highlight));
    border-color: var(--border-color-light);
}

.document-row-text {
    flex: 1;
    min-width: 0;
    color: var(--text-primary-dark);
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.document-row-meta {
    flex-shrink: 0;
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--text-secondary-dark);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.document-row-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--text-secondary-dark);
    opacity: 0.7;
    transition: color 0.2s ease, opacity 0.2s ease;
}

.document-row:hover .document-row-action {
    color: var(--text-primary-dark);
    opacity: 1;
    }

/* Tender detail layout styling */
.detail-wrapper .column {
    background-color: var(--background-panel);
    border-radius: 12px;
    padding: 20px;
    box-shadow: none;
    overflow-y: auto;
    position: relative;
    padding-top: 0.5rem
    }

/* 2-column layout for direct tender detail page */
.tender-detail-container {
    display: grid;
    grid-template-columns: 60% 40%;  /* Overview | Analysis */
    gap: 20px;
    height: calc(100vh - 4rem);
    padding: 20px 60px 20px 20px;
    overflow: hidden;
    max-width: 100vw;
    box-sizing: border-box;
    background: none;
    }

/* Reuse existing column styles for detail container */
.tender-detail-container .column {
    background: var(--background-panel);
    border-radius: var(--radius);
    padding: 16px;
    overflow-y: auto;
    overflow-x: hidden;
    height: calc(100vh - var(--nav-height));
    max-height: calc(100vh - var(--nav-height));
    min-height: calc(100vh - var(--nav-height));
    box-sizing: border-box;
    width: 100%;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    }

/* Mobile responsive for detail view */
@media (max-width: 768px) {
    .tender-detail-container {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 0;
    }
    
    .tender-detail-container .column {
        display: none;
    }
    
    .tender-detail-container .column.active {
        display: block;
    }
    
    /* Show overview by default on mobile */
    .tender-detail-container .overview-column {
        display: block !important;
    }
}

/* Detail link styles */
/* Error Container */
.error-container {
    padding: 2rem;
    text-align: center;
    color: var(--text-secondary-dark);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px
    }

.error-container .error-icon {
    font-size: 3rem;
    color: var(--accent-red);
    margin-bottom: 1rem
    }

.error-container p {
    margin: 0.5rem 0;
    max-width: 80%
    }

/* Empty State */
/* Loading styles */
@keyframes spin {
    to {
        transform: rotate(360deg);
        }

}

/* Error container */
/* Adjust column padding for tender details */
/* Original dropdown styles for backward compatibility */
.filter-group:last-child {
    margin-bottom: 0
    }

/* Update trigger icon to match Figma */
.trigger-icon svg {
    stroke: var(--text-primary-dark)
    }

/* Authentication Styles */
.auth-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: calc(100vh - var(--nav-height, 64px));
    padding: var(--spacing-md, 1rem);
    padding-bottom: 12vh;
    overflow: hidden;
    background: var(--background);
    width: 100%;
    box-sizing: border-box
    }

.auth-card, .google-confirmation-card {
    background: var(--background-panel);
    border: none;
    border-radius: var(--radius, 8px);
    box-shadow: var(--shadow-md);
    width: 100%;
    max-width: 528px;
    padding: var(--spacing-xl, 2rem) 3.75rem;
    margin: 0 auto;
    box-sizing: border-box;
}

.auth-header {
    text-align: left;
    margin-bottom: var(--spacing-lg, 1.5rem)
    }

.auth-header h1, .auth-header h2 {
    font-size: var(--heading-size, 1.5rem);
    font-weight: var(--font-weight-bold, 700);
    color: var(--text-primary-dark);
    letter-spacing: -0.3px;
    margin: 0
    }

.auth-body {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md, 1rem)
    }

.auth-body form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md, 1rem);
    width: 100%;
    box-sizing: border-box
    }

.form-group {
    margin-top: var(--spacing-lg, 1.5rem)
    }

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--text-primary-dark);
    font-weight: var(--font-weight-medium, 500);
    font-size: 0.9375rem
    }

.form-input {
    width: 100%;
    padding: 0.625rem var(--spacing-md, 1rem);
    border: 1px solid #4A4B4F;
    border-radius: var(--radius-control);
    background: var(--background-panel);
    color: var(--text-primary-dark);
    font-size: 1rem;
    transition: all var(--transition-duration, 0.2s) var(--transition-easing, ease)
    }

.form-input:hover {
    border-color: rgba(255, 255, 255, 0.2)
    }

.form-input:focus {
    outline: none;
    border-color: var(--primary, #7C7CFF);
    box-shadow: 0 0 0 2px rgba(124, 124, 255, 0.25);
    }

.form-input.error {
    border-color: var(--error)
    }

.form-input.error:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1)
    }

/* Organization Description Textarea */
.org-description {
    height: 9em;
    resize: vertical;
    min-height: 6em;
    line-height: 1.55;
    font-family: var(--font-family-primary);
    font-size: 0.9rem;
    }

/* Settings: panel-level intro + per-section cards */
.settings-panel-intro {
    color: var(--text-secondary-dark);
    font-size: 0.85rem;
    line-height: 1.5;
    margin: 0 0 var(--spacing-lg);
    }

/* Page-level title at the top of a settings section */
.settings-content-wrapper .settings-page-title {
    margin: 0 0 var(--spacing-lg);
    padding-left: 5px;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary-dark);
    }

/* A section = heading sitting above its own card */
.settings-section-group {
    margin-bottom: var(--spacing-lg);
    }

.settings-section-group:last-child {
    margin-bottom: 0;
    }

/* Scoped under the wrapper so it beats the generic
   `.settings-content-wrapper h2` margin/font-size rules. */
.settings-content-wrapper .settings-section-title {
    margin: 0 0 0.6rem;
    padding-left: 5px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary-dark);
    }

.settings-section-card {
    background: var(--surface);
    border: 1px solid var(--border-color-dark);
    border-radius: var(--radius-card);
    padding: 1.25rem 1.5rem;
    }

.settings-section-card .form-group:first-child {
    margin-top: 0;
    }

[data-theme="light"] .settings-section-card {
    border-color: var(--light-border);
    box-shadow: var(--shadow-sm);
    }

/* --- Organisation Profile form: clean, spacious field rhythm --- */

/* Roomier cards so fields breathe */
#org-profile-form .settings-section-card {
    padding: 1.5rem;
    }

/* Consistent vertical rhythm between fields within a card */
#org-profile-form .form-group {
    margin-top: 1.75rem;
    }

#org-profile-form .form-group:first-child {
    margin-top: 0;
    }

/* Label reads as the field's primary cue */
#org-profile-form .form-group > label.filter-label {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-primary-dark);
    margin-bottom: 0.4rem;
    }

/* Helper text pairs tightly under the label, with a clear gap before the control */
#org-profile-form .help-text {
    margin: -0.15rem 0 0.7rem;
    font-size: 0.8125rem;
    color: var(--text-secondary-dark);
    line-height: 1.45;
    }

/* Table variant: let data tables / lists sit flush inside the section card
   so the card border frames the table edge to edge. */
.settings-section-card--table {
    padding: 0;
    overflow: hidden;
    }

.settings-section-card--table .data-list {
    margin-top: 0;
    }

.settings-section-card--table .data-table th,
.settings-section-card--table .data-table td {
    padding: 0.85rem 1.25rem;
    }

.settings-section-card--table .data-table tr:last-child td {
    border-bottom: none;
    }

/* Password Input */
.password-input-container .form-input {
    width: 100%
    }

/* Checkbox Styles */
.form-checkbox {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs, 0.5rem);
    margin: var(--spacing-sm, 0.75rem) 0
    }

.form-checkbox .checkbox-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs, 0.5rem);
    color: var(--text-secondary-dark);
    font-size: 0.9375rem;
    cursor: pointer
    }

/* Button Styles */
.form-actions {
    display: flex;
    justify-content: center;
    margin-top: var(--spacing-lg, 1.5rem)
    }

#org-profile-form .form-actions {
    margin-top: 0;
    justify-content: flex-start;
    }

#org-profile-form {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.settings-card-form-body {
    flex: 1 1 auto;
}

.settings-card-form-footer {
    position: sticky;
    bottom: 0;
    z-index: 6;
    margin-top: auto;
    margin-left: -20px;
    margin-right: -40px;
    padding: 1rem 40px 1rem 20px;
    border-top: 1px solid var(--divider-color-subtle);
    background: var(--background-panel);
    box-shadow: 0 -10px 24px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .settings-card-form-footer {
    box-shadow: 0 -10px 24px rgba(15, 23, 42, 0.06);
}

/* Organisation Profile: form body scrolls, footer always visible at bottom */
.settings-content:has(#organization-profile-htmx-wrapper) {
    display: flex;
    flex-direction: column;
}

/* Across all Settings sections: drop the panel chrome and the redundant
   section header (the side nav already labels the section), and run content
   edge to edge. Analytics (#analytics-content) keeps its panel + header. */
.settings-content:not(#analytics-content) {
    background: transparent;
    border: none;
    box-shadow: none;
    padding-left: 0;
    padding-right: 0;
}

.settings-content:not(#analytics-content) .column-header-wrapper {
    display: none;
}

.settings-content:not(#analytics-content) .settings-content-wrapper {
    padding-left: 0;
    padding-right: 0;
}

/* Analytics keeps a little breathing room at the top of its scroll wrapper */
#analytics-content .settings-content-wrapper {
    padding-top: 20px;
}

.settings-content:not(#analytics-content) .settings-card-form-footer {
    background: var(--background);
}

/* Section toolbar: holds a section's primary action (e.g. Add Team Member)
   now that the page header is gone. */
.settings-section-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.6rem;
}

.settings-section-toolbar--end {
    justify-content: flex-end;
}

.settings-section-toolbar h2 {
    margin: 0;
}

/* Primary action button for settings section toolbars (e.g. Add Team Member,
   Add Organisation). Overrides the borrowed tender "view original" pill so the
   action reads as a clear, intentional CTA consistent with the Save button. */
.settings-section-toolbar .view-original-btn,
.settings-section-toolbar .header-action {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
    position: static;
    height: auto;
    margin: 0;
    padding: 0.55rem 1.1rem;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    color: var(--text-button);
    background: var(--primary-button);
    border: 1px solid var(--primary-button);
    border-radius: var(--radius-pill);
    box-shadow: none;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.18s ease, border-color 0.18s ease,
                box-shadow 0.18s ease, transform 0.18s ease;
}

.settings-section-toolbar .view-original-btn:focus-visible,
.settings-section-toolbar .header-action:focus-visible {
    outline: 2px solid var(--primary-button-hover);
    outline-offset: 2px;
}

.settings-section-toolbar .view-original-btn::before {
    content: "+";
    font-size: 1.05em;
    font-weight: 600;
    line-height: 1;
}

.settings-section-toolbar .view-original-btn:hover,
.settings-section-toolbar .header-action:hover {
    background: var(--primary-button-hover);
    border-color: var(--primary-button-hover);
    color: var(--text-button) !important;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 25%, transparent);
    transform: translateY(-1px);
}

.settings-section-toolbar .view-original-btn:active,
.settings-section-toolbar .header-action:active {
    transform: translateY(0);
    box-shadow: none;
}

.settings-content-wrapper:has(#organization-profile-htmx-wrapper) {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
    flex: 1;
    min-height: 0;
    height: auto;
}

#organization-profile-htmx-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

#org-profile-form-section {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

#org-profile-form {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

#org-profile-form-section {
    border-bottom: none;
}

#org-profile-form .settings-card-form-body {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
}

#org-profile-form .settings-card-form-footer {
    flex-shrink: 0;
    position: relative;
    margin-left: 0;
    margin-right: 0;
    padding: 0.75rem 0;
}

.button-primary {
    width: 100%;
    max-width: 240px;
    padding: 0.75rem var(--spacing-lg, 1rem);
    background: var(--primary);
    color: white;
    border: none;
    border-radius: calc(var(--radius, 8px) / 2);
    font-size: 0.9375rem;
    font-weight: var(--font-weight-medium, 500);
    cursor: pointer;
    transition: all var(--transition-duration, 0.2s) var(--transition-easing, ease);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm, 0.5rem)
    }

.button-primary:hover {
    filter: brightness(1.15);
    transform: translateY(-1px)
    }

.button-primary:active {
    transform: translateY(0)
    }

/* Google Sign In */
.google-signin-container {
    margin-bottom: var(--spacing-md, 1rem);
    width: 100%;
    box-sizing: border-box
    }

.google-signin-container a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.875rem;
    background: var(--background-panel);
    border: 1px solid var(--border-color-dark, rgba(255, 255, 255, 0.1));
    border-radius: 12px;
    color: var(--text-primary-dark);
    font-size: 1rem;
    font-weight: 500;
    transition: all 0.2s ease;
    text-decoration: none;
    box-sizing: border-box
    }

[data-theme="light"] .google-signin-container a {
    border-color: #9CA3AF
    }

.google-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center
    }

.google-signin-container a span:last-of-type {
    flex: 1;
    text-align: center
    }

.google-signin-container a:hover {
    background: rgba(255, 255, 255, 0.05);
    transform: translateY(-1px)
    }

/* Divider */
.separator, .auth-divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: var(--spacing-lg, 1.5rem) 0;
    color: var(--text-secondary-dark);
    font-size: 0.9375rem
    }

.auth-divider::after, .auth-divider::before, .separator::after, .separator::before {
    content: "";
    flex: 1;
    border-bottom: 1px solid var(--border-color-dark, rgba(255, 255, 255, 0.1));
    border-bottom-color: var(--border-color-dark, rgba(255, 255, 255, 0.1))
    }

.auth-divider span, .separator span {
    padding: 0 var(--spacing-md, 1rem);
    color: var(--text-secondary-dark)
    }

/* Links */
.auth-links {
    text-align: center;
    margin-top: var(--spacing-md)
    }

.auth-links a, .text-link {
    color: var(--primary);
    text-decoration: none;
    font-size: 0.9375rem;
    transition: all var(--transition-duration) var(--transition-easing)
    }

.auth-links a:hover, .text-link:hover {
    text-decoration: underline
    }

/* Auth page links use primary text colour in light and dark modes */
.auth-container .auth-links .text-link {
    color: var(--text-primary);
    }

.auth-shared-device-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 1.5rem;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--text-secondary-dark, #718096);
    max-width: 440px;
    }

.auth-shared-device-notice svg {
    flex-shrink: 0;
    margin-top: 0.15rem;
    opacity: 0.6;
    }

.auth-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1rem 1.5rem;
    font-size: 0.8125rem;
    color: var(--text-secondary-dark, #718096);
    }

.auth-footer a {
    color: var(--text-secondary-dark, #718096);
    text-decoration: none;
    }

.auth-footer a:hover {
    text-decoration: underline;
    }

/* Error Messages */
.error-message {
    color: var(--error);
    font-size: 0.875rem;
    margin-top: var(--spacing-xs, 0.5rem);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs, 0.5rem)
    }

.error-message p {
    margin: 0
    }

/* Login-specific error list with icon per message */
.login-page .auth-error-list {
    align-items: stretch;
    flex-direction: column;
    gap: 0.375rem;
}

.login-page .auth-error-list p {
    align-items: flex-start;
    display: flex;
    gap: 0.5rem;
}

.login-page .auth-error-list p::before {
    align-items: center;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid var(--error);
    border-radius: 999px;
    content: "!";
    display: inline-flex;
    flex: 0 0 1rem;
    font-size: 0.75rem;
    font-weight: 700;
    height: 1rem;
    justify-content: center;
    line-height: 1;
    margin-top: 0.1rem;
    width: 1rem;
}

/* Login form error banner: contained alert with a "!" badge, readable on the
   dark card. Block layout + absolute icon so any number of messages stack. */
.login-page .auth-body .error-message {
    position: relative;
    display: block;
    margin: 0;
    padding: 0.75rem 0.875rem 0.75rem 2.5rem;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 10px;
}

.login-page .auth-body .error-message::before {
    content: "!";
    position: absolute;
    left: 0.875rem;
    top: 0.8rem;
    width: 1.125rem;
    height: 1.125rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--error);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
}

.login-page .auth-body .error-message p {
    margin: 0;
    color: #f87171;
    font-size: 0.8125rem;
    line-height: 1.45;
}

.login-page .auth-body .error-message p + p {
    margin-top: 0.25rem;
}

/* Loading Indicator */
@keyframes spin {
    to {
        transform: rotate(360deg);
        }

}

/* Auth card narrow variant for simpler pages */
.auth-card.auth-card-narrow {
    max-width: 400px;
}

/* ===== Login: two-column split card (borrows the onboarding welcome layout) =====
   Form on the left, Lottie animation on the right. */
.auth-card.auth-card--split {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    width: 100%;
    max-width: 960px;
    padding: 0;
    overflow: hidden;
}

.auth-card--split .auth-card-left {
    flex: 1 1 50%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--spacing-xl, 2rem) 3rem;
    box-sizing: border-box;
}

.auth-card--split .auth-card-right {
    flex: 1 1 50%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.auth-card--split .auth-card-right .hero-image-inset {
    width: calc(100% - 2rem);
    height: calc(100% - 2rem);
    margin: 1rem;
}

.auth-card--split .auth-card-right lottie-player {
    width: 100%;
    height: 100%;
}

@media (max-width: 768px) {
    /* Stack to a single column and drop the animation, mirroring onboarding. */
    .auth-card.auth-card--split {
        flex-direction: column;
        max-width: 100%;
    }

    .auth-card--split .auth-card-left {
        padding: var(--spacing-lg, 1.5rem);
    }

    .auth-card--split .auth-card-right {
        display: none;
    }
}

/* Match the "Continue with Google" button height to the "Sign In" button.
   The 0.6875rem vertical padding + 1px border + line-height 1.2 on a
   0.9375rem font equals the primary button's 0.75rem padding box. */
.login-page .google-signin-container a {
    padding-top: 0.6875rem;
    padding-bottom: 0.6875rem;
    font-size: 0.9375rem;
    line-height: 1.2;
}

/* Left-align the shared-device notice under the form (left) column. The aside
   matches the split card's footprint (so it shares the card's left edge), and
   the notice itself keeps a comfortable readable width left-aligned within it
   instead of being squeezed into exactly half. */
.login-page .auth-aside {
    width: 100%;
    max-width: 960px;
    margin: 1.5rem auto 0;
    box-sizing: border-box;
}

.login-page .auth-shared-device-notice {
    max-width: 480px;
    margin-top: 0;
}

@media (max-width: 768px) {
    /* Single-column card on mobile: let the notice use the full width. */
    .login-page .auth-shared-device-notice {
        max-width: 100%;
    }
}

/* Auth body - form layout uses standard form-group, form-input from global styles */
.auth-body {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md, 1rem);
    width: 100%;
    box-sizing: border-box;
}

.auth-body form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md, 1rem);
    width: 100%;
    box-sizing: border-box;
}

/* Auth pages: full-width primary button to match form layout */
.auth-body .form-actions .button-primary {
    max-width: none;
}

/* Django-rendered fields (e.g. socialaccount signup) inherit form-input styling */
.auth-body form input[type="text"],
.auth-body form input[type="email"],
.auth-body form input[type="password"],
.auth-body form select,
.auth-body form textarea {
    width: 100%;
    padding: 0.625rem var(--spacing-md, 1rem);
    border: 1px solid var(--input-border-dark);
    border-radius: 5px;
    background: var(--background-panel);
    color: var(--text-primary-dark);
    font-size: 1rem;
    box-sizing: border-box;
}

/* ===== Login/auth spacing & grouping =====
   Use a single flex gap per group instead of stacked margins so the
   vertical rhythm is even and elements read as clear groups. Scoped to
   .auth-body so settings/modal forms are unaffected. */
.auth-body {
    gap: 1.5rem;
}

.auth-body form {
    gap: 1.25rem;
}

/* Field groups: keep label tight to its input, drop the doubled top margin */
.auth-body .form-group {
    margin-top: 0;
}

.auth-body .form-group label {
    margin-bottom: 0.375rem;
}

/* Secondary control sits with the fields rather than floating */
.auth-body .form-checkbox {
    margin: 0;
}

/* Primary action gets a touch more separation from the input group */
.auth-body .form-actions {
    margin-top: 0.25rem;
}

/* Divider, social button, and links rely on the auth-body gap, not their
   own stacked margins */
.auth-body .separator,
.auth-body .auth-divider {
    margin: 0;
}

.auth-body .google-signin-container {
    margin-bottom: 0;
}

.auth-body .auth-links {
    margin-top: 0;
}

/* Auth message and links */
.auth-message {
    text-align: center;
    color: var(--text-secondary-dark);
    font-size: 0.9375rem;
}

.auth-message p {
    margin: 0;
}

/* Error Page Styles */
.error-container {
    text-align: center;
}

.error-container .error-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.error-container h1 {
    font-size: var(--heading-size);
    color: var(--text-primary-dark);
    font-weight: var(--font-weight-bold);
    margin: 1rem 0;
}

.error-container p {
    color: var(--text-secondary-dark);
    margin-bottom: 1.5rem;
}

.error-container .error-reason {
    color: var(--accent-red);
    margin-bottom: 1rem;
}

.error-container .auth-links {
    text-align: center;
    margin-top: var(--spacing-md);
}

.error-container .auth-links a {
    color: var(--accent-blue);
    text-decoration: none;
    font-size: 0.9rem;
    display: inline-block;
    margin: 0.5rem;
}

.error-container .auth-links span {
    color: var(--text-secondary-dark);
    margin: 0 0.5rem;
}

/* Field-level errors */
.field-error {
    color: var(--error);
    font-size: 0.875rem;
    margin: 0.25rem 0 0;
}

/* Style Django form inputs in auth context */
.auth-body input[type="text"],
.auth-body input[type="email"],
.auth-body input[type="password"],
.auth-body select,
.auth-body textarea {
    width: 100%;
    padding: 0.875rem;
    border-radius: 12px;
    box-sizing: border-box;
    background: rgba(75, 85, 99, 0.2);
    border: 1px solid var(--border-color-dark);
    color: var(--text-primary-dark);
    font-size: 1rem;
    transition: all 0.2s ease;
}

.auth-body input[type="text"]:focus,
.auth-body input[type="email"]:focus,
.auth-body input[type="password"]:focus,
.auth-body select:focus,
.auth-body textarea:focus {
    outline: none;
    border-color: var(--primary, #7C7CFF);
    box-shadow: 0 0 0 2px rgba(124, 124, 255, 0.25);
}

/* Mobile Optimizations */
@media (max-width: 768px) {
    .auth-container {
        height: auto;
        min-height: calc(100vh - var(--nav-height, 64px));
        overflow: visible;
        padding-bottom: 4rem;
        justify-content: flex-start;
        padding-top: 2rem;
    }

    .auth-card, .google-confirmation-card {
        padding: var(--spacing-lg, 1.5rem);
        max-width: 100%;
    }

    .auth-header h1 {
        font-size: 1.5rem;
    }

    .button-primary, .form-input {
        min-height: 44px;
    }

    .form-input {
        font-size: 16px;
    }

    .checkbox-label {
        min-height: 44px;
    }

    .auth-footer {
        position: static;
        justify-content: center;
        padding: 1rem;
        margin-top: 1.5rem;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .auth-card, .google-confirmation-card {
        padding: var(--spacing-xl, 2rem) 2.5rem;
    }
}

/* High Contrast Mode */
@media (forced-colors: active) {
    .button-primary {
        border: 1px solid ButtonText
        }

}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .button-primary, .form-input {
        transition: none
        }

}

/* Dark Theme Auth Styles */
.auth-message {
    color: var(--text-secondary-dark)
    }

.help-text {
    color: var(--text-secondary-dark);
    font-size: 12px;
    margin: 6px 0 5px 0;
    line-height: 1.4
    }

.success-message {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #2EB67D;
    font-size: 14px;
    font-weight: 500;
    background: rgba(46, 182, 125, 0.1);
    border: 1px solid rgba(46, 182, 125, 0.3);
    border-radius: var(--radius);
    padding: 12px;
    margin: var(--spacing-md) 0
    }

.success-message svg {
    flex-shrink: 0
    }

/* Adjust modal height for Slack modal content */
#slack-modal .modal-content {
    height: auto;
    max-height: 80vh;
    overflow-y: auto
    }

/* Single-select dropdown item styles */
.dropdown-item[data-value] {
    padding: 0.75rem 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background-color 0.2s ease
    }

.dropdown-item[data-value]:hover {
    background-color: rgba(255, 255, 255, 0.1)
    }

/* Legacy dropdown-item[data-value] span styles removed - now handled by unified dropdown system */
/* Dark theme adjustments for single-select dropdown */
/* Filter Toggle Button */
.filter-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-left: 8px;
    flex-shrink: 0;
    background-color: var(--background-panel);
    border: 2px solid var(--border-color-dark);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }

.filter-toggle-btn:hover {
    background-color: var(--hover-bg);
    border-color: var(--hover-border);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    }

.filter-toggle-btn svg {
    width: 16px;
    height: 14px;
    transition: all 0.2s ease
    }

.filter-toggle-btn svg path {
    stroke: var(--text-primary-dark);
    stroke-width: 2px;
    stroke-linecap: round;
    stroke-linejoin: round
    }

/* Purple lines when filter is expanded (active state) */
.filter-toggle-btn.active svg path {
    stroke: #965EF6
    }

/* Additional dropdown visibility fix */
/* Consistent dropdown item styling */
/* Legacy dropdown-item selected styles removed - now handled by unified dropdown system */
/* Search Filter Wrapper */
.search-filter-wrapper {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    width: 100%
    }

.search-box {
    position: relative;
    flex: 1;
    max-width: calc(100% - 48px);
    margin-right: 8px;
    min-width: 0
    }

.search-box::before {
    content: "";
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none
    }

.search-box input {
    background-color: var(--input-background-dark);
    border: 2px solid var(--border-color-dark);
    color: var(--text-primary-dark);
    padding: 10px 16px 10px 40px;
    border-radius: 37px;
    font-size: 14px;
    width: 100%;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }

.search-box input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--primary)
    }

.search-box input::placeholder {
    color: var(--text-secondary-dark)
    }

/* Welcome Page Styles */
.welcome-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 4rem 2rem;
    text-align: center
    }

.welcome-container h1 {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--text-primary-dark)
    }

.subtitle {
    font-size: 1.25rem;
    color: var(--text-secondary-dark);
    margin-bottom: 3rem
    }

/* Dark Theme Adjustments for Welcome Page */
/* Searchable dropdown specific adjustments */
/* Tender metadata compact layout */
.tender-meta-compact .meta-item {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 0.5rem
    }

/* Media query to handle responsiveness */
.view-original-btn {
    position: relative; /* avoid overlapping share icon */
    right: 0;
    padding: 0.35rem 2rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-primary-dark);
    background-color: var(--background-panel);
    border-radius: var(--radius-pill);
    text-decoration: none;
    border: 1px solid var(--border-color-dark);
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    cursor: pointer;
    }

.view-original-btn:hover {
    background-color: var(--background-hover);
    color: #1A1D21;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08)
    }

/* Share button styling */
.share-btn {
    margin-left: 0;
    /* Ensure same height and text style as view-original-btn */
    height: auto;
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.2;
    /* Override absolute positioning from view-original-btn */
    position: static;
    top: auto;
    right: auto;
    display: inline-flex;
    }

/* Icon-only share button variant */
.share-icon-btn {
    padding: 0.35rem 0.5rem; /* match view-original vertical rhythm */
    height: auto;
    width: 50px;
    border-radius: var(--radius-pill); /* pill, not circle */
    background-color: var(--background-panel);
    border: 1px solid var(--border-color-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary-dark, #6b7280); /* icon color */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); /* match view-original */
    transition: background-color 0.18s ease, box-shadow 0.18s ease;
    line-height: 1; /* prevent vertical jiggle */
    vertical-align: middle;
    cursor: pointer;
}

.share-icon-btn:hover {
    background-color: var(--background-hover);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.share-icon-btn:active {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.share-icon {
    display: block;
    width: 16px;
    height: 16px;
    stroke: #6B7280; /* gray-500 */
}

/* Temporary copied state for button */
.share-icon-btn.copied {
    background-color: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.25);
}

/* Share Link Button Styling */
.share-link-btn {
    margin-left: 1em;
    font-size: 0.95em;
    color: var(--text-primary-dark);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    transition: all 0.2s ease;
    opacity: 0.8;
}

.share-link-btn:hover {
    opacity: 1;
    background-color: var(--hover-bg);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.share-link-btn svg {
    vertical-align: middle;
    position: relative;
    top: -6px;
    margin-right: 0.25em;
    color: inherit;
}

/* Ensure the overview column is positioned correctly */
/* Deadlines list styling */
.deadlines-list {
    list-style-type: none;
    padding: 0;
    margin: 0
    }

.deadline-item {
    margin-bottom: 0.5rem;
    color: var(--text-primary-dark);
    line-height: 1.5;
    font-size: 0.75rem
    }

.deadline-item strong {
    color: var(--text-secondary-dark);
    font-weight: var(--font-weight-medium);
    margin-right: 0.5rem
    }

/* Authentication Styles */
.tender-section.documents {
    margin-top: 1.8rem;
    padding-top: 1.2rem;
    border-top: 1px solid rgba(230, 230, 230, 0.08)
    }

.document-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.75rem
    }

/* Dark theme overrides */
/* Media query for mobile */
/* AI Relevance Summary Styling */
.ai-relevance-summary {
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--text-secondary-dark)
    }

.ai-relevance-summary p {
    margin-bottom: 1rem;
    font-weight: var(--font-weight-normal);
    line-height: 20px;
    /* Added for normal text weight */
    }

.ai-relevance-summary strong {
    font-weight: var(--font-weight-bold);
    /* Ensure strong tags are bold */
    }

.ai-relevance-summary ul, .ai-relevance-summary ol {
    margin-bottom: 1rem;
    padding-left: 1.5rem
    }

.ai-relevance-summary ul {
    list-style-type: disc
    }

.ai-relevance-summary ol {
    list-style-type: decimal
    }

.ai-relevance-summary li {
    margin-bottom: 0.5rem
    }

.ai-relevance-summary strong {
    font-weight: 600
    }

.ai-relevance-summary em {
    font-style: italic
    }

.ai-relevance-summary blockquote {
    border-left: 3px solid var(--accent-blue);
    padding-left: 1rem;
    margin: 1rem 0;
    font-style: italic;
    color: var(--text-secondary-dark)
    }

.ai-relevance-summary h1, .ai-relevance-summary h2:not(.microtitle), .ai-relevance-summary h3, .ai-relevance-summary h4, .ai-relevance-summary h5, .ai-relevance-summary h6 {
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    font-weight: 600;
    color: #fff
    }

.ai-relevance-summary h2.microtitle {
    margin-top: 0;
    margin-bottom: 0.75rem;
    padding-top: 1.3rem;
    border-top: 1px solid var(--divider-color-subtle);
    color: var(--text-secondary-dark);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ai-relevance-summary h4 {
    font-size: 1.1rem
    }

.ai-relevance-summary h5 {
    font-size: 1rem
    }

.ai-relevance-summary h6 {
    font-size: 0.9rem
    }

.ai-relevance-summary .analysis-output {
    display: block;
}

.ai-relevance-summary .analysis-section {
    margin-bottom: 1rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.02);
}

.ai-relevance-summary .analysis-section:last-child {
    margin-bottom: 0;
}

.ai-relevance-summary .analysis-section-title {
    display: inline-block;
    font-weight: 600;
    color: var(--text-primary-dark);
}

.ai-relevance-summary .assessment-paragraph {
    --assessment-hanging-indent: 1.95rem;
    padding-left: var(--assessment-hanging-indent);
}

.ai-relevance-summary .assessment-heading {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-right: 0.25rem;
    margin-left: calc(-1 * var(--assessment-hanging-indent, 0rem));
    vertical-align: -0.04rem;
    color: var(--text-primary-dark);
    line-height: 1.3;
}

.ai-relevance-summary .assessment-heading strong {
    color: inherit;
    font-weight: 600;
}

.ai-relevance-summary .assessment-heading-icon {
    --assessment-icon-color: var(--text-secondary-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    flex: 0 0 1.25rem;
    border-radius: 50%;
    color: var(--assessment-icon-color);
    background: color-mix(in srgb, var(--assessment-icon-color) 12%, transparent);
}

.ai-relevance-summary .assessment-heading-icon svg {
    width: 0.78rem;
    height: 0.78rem;
}

.ai-relevance-summary .assessment-heading--red-flags .assessment-heading-icon {
    --assessment-icon-color: var(--relevance-negative);
}

.ai-relevance-summary .assessment-heading--strategic-fit .assessment-heading-icon,
.ai-relevance-summary .assessment-heading--value .assessment-heading-icon {
    --assessment-icon-color: var(--relevance-high);
}

.ai-relevance-summary .assessment-heading--complexity-risk .assessment-heading-icon {
    --assessment-icon-color: var(--accent-red);
}

.ai-relevance-summary .assessment-heading--competitive-edge .assessment-heading-icon {
    --assessment-icon-color: var(--relevance-low);
}

.ai-relevance-summary .analysis-section-intro {
    margin-top: 0;
}

.ai-relevance-summary .analysis-section-body > *:last-child {
    margin-bottom: 0;
}

.ai-relevance-summary .analysis-section--rationale {
    border-left: 3px solid rgba(90, 189, 238, 0.75);
}

.ai-relevance-summary .analysis-section--decision-factors {
    border-left: 3px solid color-mix(in srgb, var(--primary) 75%, transparent);
}

.ai-relevance-summary a {
    color: var(--accent-blue);
    text-decoration: none
    }

.ai-relevance-summary a:hover {
    text-decoration: underline
    }

.ai-relevance-summary code {
    background: rgba(0, 0, 0, 0.1);
    padding: 0.2rem 0.4rem;
    border-radius: 3px;
    font-family: monospace;
    font-size: 0.85rem
    }

.ai-relevance-summary pre {
    background: rgba(0, 0, 0, 0.1);
    padding: 1rem;
    border-radius: 4px;
    overflow-x: auto;
    margin: 1rem 0
    }

.ai-relevance-summary pre code {
    background: transparent;
    padding: 0
    }

.ai-relevance-summary code, .ai-relevance-summary pre {
    background: rgba(255, 255, 255, 0.1)
    }

/* Analysis Column Styling */
.criteria-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem
    }

.criteria-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.125rem;
    height: 2.125rem;
    background-color: var(--accent-green);
    color: var(--background-panel);
    border-radius: 50%;
    font-weight: 600;
    font-size: 1.25rem;
    flex-shrink: 0
    }

.criteria-content {
    flex: 1;
    padding-left: 10px
    }

/* Removed duplicate tender-item-title rule */

.tender-item-meta-label {
    color: var(--text-secondary-dark);
    margin: 0
    }

/* Ensure consistent styling between the two circle indicators */

.criteria-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.95rem;
    height: 1.95rem;
    border-radius: 40%;
    font-weight: var(--font-weight-medium);
    font-size: 1rem;
    border: 1px solid transparent;
    }

/* Color variations based on score — match tender-item-indicator style */
.high-relevance .criteria-icon {
    background-color: color-mix(in srgb, var(--relevance-high) 14%, transparent);
    border-color: color-mix(in srgb, var(--relevance-high) 30%, transparent);
    color: var(--relevance-high);
    }

.moderate-relevance .criteria-icon {
    background-color: color-mix(in srgb, var(--relevance-moderate) 14%, transparent);
    border-color: color-mix(in srgb, var(--relevance-moderate) 30%, transparent);
    color: var(--relevance-moderate);
    }

.low-relevance .criteria-icon {
    background-color: color-mix(in srgb, var(--relevance-low) 16%, transparent);
    border-color: color-mix(in srgb, var(--relevance-low) 32%, transparent);
    color: var(--relevance-low);
    }

.not-recommended .criteria-icon {
    background-color: color-mix(in srgb, var(--relevance-negative) 14%, transparent);
    border-color: color-mix(in srgb, var(--relevance-negative) 30%, transparent);
    color: var(--relevance-negative);
    }

/* At a Glance Section Styles */
.at-a-glance-section {
    position: relative;
}



/* Eyebrow-style label for the "At a glance" heading */
.at-a-glance-section .tender-section h2 {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary-dark);
    margin: 0 0 0.5rem 0;
}

.at-a-glance-content {
    position: relative;
    padding-left: 28px;
    font-size: 0.85rem;
    line-height: 1.6;
    font-weight: 400;
    color: var(--text-primary-dark);
}

.at-a-glance-content p {
    margin-top: 0;
    margin-bottom: 0.5rem;
}

.at-a-glance-content p:last-child {
    margin-bottom: 0;
}

/* Ensure tender-summary and ai-relevance-summary use primary dark text color */
.tender-summary,
.ai-relevance-summary {
    color: var(--text-primary-dark);
}



.at-a-glance-content::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 8px;
    border-radius: 6px;
    background-color: var(--accent-green);
}

/* Enhanced specificity for relevance-based colors */
.at-a-glance-section.high-relevance .at-a-glance-content::before {
    background-color: var(--relevance-high) !important;
}

.at-a-glance-section.moderate-relevance .at-a-glance-content::before {
    background-color: var(--relevance-moderate) !important;
}

.at-a-glance-section.low-relevance .at-a-glance-content::before {
    background-color: var(--relevance-low) !important;
}

.at-a-glance-section.not-recommended .at-a-glance-content::before {
    background-color: var(--relevance-negative) !important;
}

/* At a Glance Content Wrapper Styles */
.at-a-glance-content-wrapper {
    border-radius: var(--radius);
    padding: 14px 18px;
    font-size: 0.85rem;
    background-color: var(--panel-highlight);
}

/* Light mode overrides for at-a-glance section */

[data-theme="light"] .at-a-glance-section .tender-section h2 {
    color: var(--text-secondary-dark);
}

/* Light mode overrides for at-a-glance border colors */
[data-theme="light"] .at-a-glance-section.high-relevance .at-a-glance-content::before {
    background-color: var(--relevance-high) !important;
}

[data-theme="light"] .at-a-glance-section.moderate-relevance .at-a-glance-content::before {
    background-color: var(--relevance-moderate) !important;
}

[data-theme="light"] .at-a-glance-section.low-relevance .at-a-glance-content::before {
    background-color: var(--relevance-low) !important;
}

[data-theme="light"] .at-a-glance-section.not-recommended .at-a-glance-content::before {
    background-color: var(--relevance-negative) !important;
}



/* Auth Links Row and Button Styles */
/* Auth Button Styles */
/* Prompt Tester Styles */
/* Dark theme adjustments */
/* Mobile Responsive Adjustment */
/* Tab Container Styles for Prompt Tester */
/* Tabs */
.settings-tab.active {
    color: white
    }

.settings-tab.active::after {
    content: "";
    position: absolute;
    bottom: -9px;
    left: 0;
    right: 0;
    height: 2px;
    background: white
    }

.tab.active {
    background: var(--panel-highlight);
    color: var(--accent-blue)
    }

#promptTabContent {
    flex: 1;
    overflow-y: auto
    }

/* Tender Link Styles */
/* Prompt Tester Dropdown Adjustments */
.prompt-tester-container .dropdown-item span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100% - 28px);
    color: var(--text-primary-dark)
    }

.prompt-tester-container .dropdown-search-input {
    border-color: var(--border-color-dark);
    background-color: var(--input-background-dark);
    color: var(--text-primary-dark)
    }

.prompt-tester-container .dropdown-search-input:focus {
    border-color: var(--primary)
    }

/* Custom scrollbar for prompt tester dropdown options */
.prompt-tester-container .dropdown-options::-webkit-scrollbar {
    width: 8px
    }

.prompt-tester-container .dropdown-options::-webkit-scrollbar-track {
    background: transparent
    }

.prompt-tester-container .dropdown-options::-webkit-scrollbar-thumb {
    background-color: var(--border);
    border-radius: 4px
    }

/* Animation for prompt tester dropdowns */
@keyframes promptTesterDropdownFadeIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
        }

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

}

/* Empty state for prompt tester dropdown when no results found */
.prompt-tester-container .dropdown-options:empty::after {
    content: "No results found";
    display: block;
    padding: 8px 12px;
    color: var(--text-secondary);
    font-size: 0.875rem;
    text-align: center
    }

/* Prompt Tester Filter Group Styles */
.prompt-tester-container .filter-group {
    margin-bottom: 1rem
    }

.prompt-tester-container .filter-group label {
    display: block;
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-secondary-dark);
    margin-bottom: 0.5rem;
    padding-left: 0.25rem
    }

/* Unified Column Header Style */
.hidden {
    display: none !important
    }

/* Utility Classes */
/* Analysis Column Styling */
/* Relevance score card item keeps its simple flex layout */
.column-section .criteria-item {
    display: flex;
    align-items: center;
    padding: 0 0.5rem;
    position: relative;
}

.relevance-score-card .criteria-item {
    align-items: flex-start;
    padding-left: 0;
    padding-right: 0;
    gap: 0.65rem;
}

/* Metric rows: clean label · bar · value grid for perfect alignment */
.column-section .criteria-item:has(.progress-container) {
    display: grid;
    grid-template-columns: 85px 1fr 2.5rem;
    align-items: center;
    column-gap: 10px;
    padding: 10px 0;
    margin: 0;
    border-bottom: 1px solid rgba(128, 128, 128, 0.15);
}

.column-section .criteria-item:has(.progress-container):last-child {
    border-bottom: none;
}

.column-section .criteria-label {
    font-size: 0.8rem;
    font-weight: var(--font-weight-medium);
    color: var(--text-primary-dark);
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.column-section .progress-container {
    height: 16px;
    background: var(--panel-highlight);
    border: none;
    border-radius: var(--radius-pill);
    position: relative;
    overflow: hidden;
    margin: 0;
}

.column-section .progress-bar {
    height: 100%;
    border-radius: var(--radius-pill);
    transition: width 0.3s ease;
}

.column-section .criteria-value {
    font-family: var(--font-family-primary);
    font-variant-numeric: tabular-nums;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    text-align: right;
    white-space: nowrap;
    }

.column-section .criteria-value--unknown {
    color: var(--text-secondary-dark);
    font-weight: var(--font-weight-normal);
    }

.column-section .criteria-scale {
    font-size: 0.55rem;
    font-weight: 400;
    color: var(--text-secondary-dark);
    opacity: 0.4;
    margin-left: 1px;
    letter-spacing: 0.02em;
    vertical-align: baseline;
    }

/* Move the criteria-value inside the progress-bar */
/* Keep Unknown text aligned to right of container */
.column-section .text-unknown {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary-dark);
    font-style: italic;
    z-index: 1
    }

/* Removed conflicting rule - using only progress-bar .criteria-value rule above */

/* Dark theme overrides */
/* Dark theme overrides for sub-scores */
.progress-bar.high-relevance {
    background: var(--relevance-high)
    }

.progress-bar.moderate-relevance {
    background: var(--relevance-moderate)
    }

.progress-bar.low-relevance {
    background: var(--relevance-low)
    }

.progress-bar.not-recommended {
    background: var(--relevance-negative)
    }

/* Overview header styling - matches standard column headers */
.overview-link {
    font-size: 1.1rem;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    color: var(--text-primary-dark);
    margin: 0;
    }

/* Overview header actions - for buttons in the overview column */
.overview-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    position: relative;
    }

/* The overview header shows action buttons (not a title) when expanded, so the
   "Overview" label is hidden here and only revealed when the column collapses. */
.overview-column .column-header {
    display: none;
    }

/* Column header collapse button */
.column-header-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.collapse-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: background-color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.collapse-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.collapse-btn svg {
    width: 20px;
    height: 20px;
    }

/* === Unified 3-Column Layout Styles === */
.column {
    background: var(--background-panel);
    border-radius: 15px 15px 15px 15px;
    padding: 16px;
    border: 1px solid #E0DFE2;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
    display: flex;
    flex-direction: column;
    min-width: 0
    }

/* Prevent tenders column from collapsing too much */
.tender-list-column {
    min-width: 300px;
    }

/* Dark mode border override - must come after unified column rule for cascade priority */
.column {
    border: 0px;
}

/* Remove top padding on the settings content column */
.column.settings-content {
    padding-top: 0px;
}

    /* Light mode keeps the border from unified rule */
    [data-theme="light"] .column {
        border: 1px solid var(--light-border);
    }
    
    [data-theme="light"] .column.settings-content {
        border-color: rgba(224, 223, 226, 1);
    }
    
    /* Additional light theme border fixes using data-theme selector */
    [data-theme="light"] .tender-item {
        border-top: 1px solid var(--light-border);
    }
    
    [data-theme="light"] .column-header-wrapper {
        border-bottom: 1px solid var(--light-border);
    }
    
    [data-theme="light"] .tender-container.analysis-collapsed .analysis-column.collapsed .column-header-wrapper,
    [data-theme="light"] .tender-container.overview-collapsed .overview-column.collapsed .column-header-wrapper,
    [data-theme="light"] .tender-container.tenders-collapsed .tender-list-column.collapsed .column-header-wrapper {
        border-bottom: 1px solid var(--light-border);
    }
    
    [data-theme="light"] hr,
    [data-theme="light"] .tender-divider {
        background: var(--light-border);
        border-color: var(--light-border);
    }
    
    [data-theme="light"] .tender-item-divider {
        background: var(--light-border);
    }
    
    [data-theme="light"] .search-box input {
        border: 1px solid var(--light-border);
    }
    
    [data-theme="light"] .filter-toggle-btn {
        border: 1px solid var(--light-border);
    }
    
    [data-theme="light"] .panel-card {
        border: 1px solid var(--light-border);
    }
    
    [data-theme="light"] .notification-card {
        border-color: #E0DFE2;
    }
    
    [data-theme="light"] .checkbox-custom {
        border: 2px solid var(--light-border);
    }

[data-theme="light"] .beta-badge {
    background-color: rgba(0, 0, 0, 0.06);
    color: var(--light-text-secondary);
    border: 1px solid var(--light-border);
}

[data-theme="light"] .nav-segments {
    background: var(--background);
    box-shadow: 0 1px 10px 0 #D9D9D9 inset;
}

[data-theme="light"] .nav-segment.active {
    background: var(--light-background);
    color: var(--light-text-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

[data-theme="light"] .nav-segment:hover:not(.active) {
    color: var(--light-text-primary);
}

[data-theme="light"] .tender-header h1 {
    color: var(--light-text-primary);
}

[data-theme="light"] .overview-column .scope-summary strong,
[data-theme="light"] .overview-column .tender-summary:not(.scope-summary) strong {
    color: var(--light-text-primary);
}

[data-theme="light"] .favourite-btn {
    background: var(--light-background);
}

/* Ensure all dropdown items have consistent font size */
.user-dropdown-item {
    font-size: 13px !important;
}

/* Overview column header button adjustments */
.overview-column .favourite-btn,
.overview-column .share-icon-btn,
.overview-column .view-original-btn {
    height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
}

/* Specific padding adjustments for overview column buttons */
.overview-column .favourite-btn,
.overview-column .share-icon-btn {
    width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    border-radius: var(--radius-control) !important;
}

.overview-column .view-original-btn {
    height: 34px !important;
    padding: 0 1rem !important;
}

    /* Light mode progress track — match the at-a-glance panel background */
    [data-theme="light"] .column-section .progress-container {
        background: var(--panel-highlight);
    }
    
    /* Criteria title font size adjustment */
    .criteria-title {
        font-size: 0.8rem;
    }
    
    /* Light mode span meta value color */
    [data-theme="light"] span.meta-value {
        color: var(--light-text-primary);
    }
    
    /* Light mode tender summary markdown content */
    [data-theme="light"] .tender-summary .markdown-content,
    [data-theme="light"] .tender-summary.markdown-content {
        color: var(--light-text-primary);
    }
    
    /* Light mode ai-relevance-summary content */
    [data-theme="light"] .ai-relevance-summary,
    [data-theme="light"] .ai-relevance-summary p,
    [data-theme="light"] .ai-relevance-summary * {
        color: var(--light-text-primary);
    }
    
    /* Light mode category toggle styling - Now handled by CSS variables */
    
    /* Tender item title font size adjustment */
    .tender-item .tender-item-title {
        font-size: 13px;
    }

/* Hide nav-segments on onboarding pages */
.onboarding-wrapper .nav-segments,
body:has(.onboarding-wrapper) .nav-segments {
    display: none !important;
}

/* Hide nav-segments on logout page */
body:has(.logout-page) .nav-segments {
    display: none !important;
}

/* Hide nav-segments on login page */
body:has(.login-page) .nav-segments,
body:has(.login-page) .nav-link[href*="login"] {
    display: none !important;
}

/* Remove drop-shadow from navigation buttons */
.search-input,
.filter-button,
.category-toggle,
.search-box input,
.filter-toggle-btn {
    box-shadow: none !important;
}

/* Dark mode override for tender meta inline list separator */
/* Dark mode overrides for search and filter elements */
[data-theme="dark"] .search-box input {
    background: none;
    border: 1px solid #37383B;
}

[data-theme="dark"] .search-box input:focus {
    border: 1px solid var(--primary);
    box-shadow: 0 0 0 2px var(--primary);
}

[data-theme="dark"] .filter-toggle-btn {
    background: none;
    border: 1px solid #37383B;
}

/* Light mode tender-item styling */
[data-theme="light"] .tender-item {
    border-top: none;
}

/* Light mode tender-item hover, selected, and active states */
[data-theme="light"] .tender-item:hover:not(.active) {
    background: #F7F6F9;
    border-top: none;
    box-shadow: none;
}

[data-theme="light"] .tender-item.selected {
    background: #F7F6F9;
    border-top: none;
    box-shadow: none;
}

/* Selected state is defined once on .tender-item.active (tinted fill + accent
   bar) and shared across themes, so it stays distinct from hover. */

.column-section {
    margin-bottom: 28px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--divider-color-subtle)
    }

.panel-card {
    background: transparent;
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    margin-bottom: 18px;
    border: 1px solid #37383B;
}

.metrics-panel {
    margin-bottom: 0;
}

/* Light Mode Panel Card Overrides - Consolidated */
/* Moved to [data-theme="light"] section above */

.column-section:last-child {
    margin-bottom: 0;
    border-bottom: none
    }

/* "Our Recommendation" section sits flush against the Score Breakdown below it */
.analysis-content-wrapper .column-section.analysis-section:has(.relevance-score-card) {
    padding-bottom: 0;
}

/* "Score Breakdown" section — divider before Opportunity Assessment below */
.analysis-content-wrapper .column-section.analysis-section:has(.metrics-panel) {
    padding-bottom: 1.3rem;
    border-bottom: 1px solid var(--divider-color-subtle);
}

/* No divider or extra spacing under the header section (first column-section) */
.tender-list-content-wrapper .column-section:first-child,
.overview-content-wrapper .column-section:first-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
    }

/* Remove redundant padding/margin from nested .tender-section in column-section */
.column-section .tender-section {
    margin: 0;
    padding: 0;
    border: none
    }



/* Border color matches relevance state */
/* .tender-item.high-relevance {
  border-left-color: var(--accent-green);
}

.tender-item.medium-relevance {
  border-left-color: var(--accent-blue);
}

.tender-item.low-relevance {
  border-left-color: var(--accent-red);
}

.tender-item.active.high-relevance {
  border-left-color: var(--accent-green);
}

.tender-item.active.medium-relevance {
  border-left-color: var(--accent-blue);
}

.tender-item.active.low-relevance {
  border-left-color: var(--accent-red);
}

*/
/* Two-line meta layout for tender list */
.tender-list .tender-item-meta {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
    overflow: hidden;
    }

/* In the inbox row, client takes available space and truncates;
   the countdown stays pinned at the end. */
.tender-list .tender-item-meta .meta-item.client-meta {
    flex: 0 1 auto;
    min-width: 0;
    width: auto;
    margin-left: 0;
    }

.tender-list .tender-item-meta .countdown {
    flex-shrink: 0;
    margin-left: auto;
    }

.tender-list .tender-item-meta .meta-item {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.7rem;
    font-weight: var(--figma-meta-weight);
    color: var(--figma-meta-color);
    line-height: 1.2;
    min-width: 0;
    flex: 0 1 auto;
    }

/* Specific overflow ellipsis for client and organization spans */
.tender-list .tender-item-meta .meta-item.client-meta,
.tender-list .tender-item-meta .meta-item.organization-meta {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 100%;
    width: auto;
    min-width: 0;
}

.tender-list .tender-item-meta .meta-item.client-meta {
    flex: 1 1 auto;
    margin-left: 0;
    margin-right: 0;
    align-items: center;
    gap: 0.35rem;
}

.tender-list .tender-item-meta .meta-item.client-meta svg {
    display: block;
    flex: 0 0 9px;
    width: 9px;
    height: 10px;
}

.tender-list .tender-item-meta .meta-item.client-meta .meta-text {
    display: block;
    line-height: 10px;
    width: auto;
    flex: 1;
    min-width: 0;
}

/* Keep date on one line to prevent disjointed wrapping */
.tender-list .tender-item-meta .meta-item.date-meta {
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
}

/* Meta text ellipsis - targets the new span.meta-text */
.tender-list .tender-item-meta .meta-text {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 100%;
    display: block;
    width: 100%;
    }

/* First line: Due date and Location side by side */
.meta-line-first {
    display: grid;
    grid-template-columns: min-content 1fr;
    align-items: center;
    justify-content: space-between
    }

/* Single inbox meta row — items size to content, location flexes to fill */
.tender-list .tender-item-meta .meta-item:last-child {
    width: auto;
    }

/* Tender Overview Grid Layout */
.panel-card .tender-item-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 2rem
    }

.panel-card .tender-item-meta .meta-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem
    }

.panel-card .tender-item-meta-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary-dark)
    }

.panel-card .tender-item-meta-value {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-primary-dark);
    line-height: 1.4
    }

/* Added */
/* Figma-style icon and text alignment */
.tender-item-meta svg {
    flex-shrink: 0;
    stroke: var(--figma-meta-color);
    stroke-width: 1px
    }

/* Calendar icon specific margin */
.tender-item-meta .date-meta svg {
    margin-left: 1px;
    }

.tender-item-meta .calendar-icon, .tender-item-meta .location-icon {
    fill: var(--figma-meta-color)
    }

.tender-item-meta .toggle-icon {
    stroke: var(--figma-meta-color)
    }

/* Countdown styles removed */



html {
    box-sizing: border-box
    }

*, *::before, *::after {
    box-sizing: inherit
    }

/* Searchable dropdown specific styles */
.dropdown-search {
    padding: 0.25rem;
    border-bottom: 1px solid var(--border-color-dark);
    position: sticky;
    top: 0;
    background: var(--background-panel);
    z-index: 1;
    background-color: var(--background-panel)
    }

/* Filter Grid Layout */
.filter-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    max-height: 1000px;
    opacity: 1;
    margin-top: 12px;
    margin-bottom: 12px;
    visibility: visible;
    border: 1px solid rgba(55, 56, 59, 1);
    border-radius: 12px;
    padding: 12px;
    box-sizing: border-box;
    transition: max-height 0.35s ease-in-out, opacity 0.35s ease-in-out, margin-bottom 0.35s ease-in-out, padding 0.35s ease-in-out, border-width 0.35s ease-in-out, visibility 0s linear 0s;
}

.filter-grid.hidden {
    max-height: 0;
    opacity: 0;
    margin-bottom: 0;
    visibility: hidden;
    display: flex !important;
    overflow: hidden;
    padding: 0;
    border-width: 0;
}

[data-theme="light"] .filter-grid {
    border-color: #E0DFE2;
}

.filter-group {
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Filter Label Styles */
.filter-label {
    color: var(--text-secondary-dark);
    font-size: 0.7rem;
    font-weight: 500;
    margin-bottom: 4px;
    display: block;
    text-transform: none;
    letter-spacing: normal;
}


/* Removed special styling for status dropdown to match other dropdowns */
/* #status-dropdown .dropdown-trigger {
  border-color: #007AFF;
  box-shadow: 0 0 0 1px rgba(0, 122, 255, 0.5);
}

*/
.trigger-text {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 14px;
    color: var(--text-primary-dark)
    }

.trigger-icon {
    margin-left: 8px;
    transition: transform 0.2s ease
    }

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

/* Dropdown Menu */
.dropdown-menu {
    background-color: var(--background-panel);
    border: 1px solid var(--border-color-dark);
    box-shadow: var(--shadow-md);
    border-color: var(--border-color-dark);
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--background-panel);
    border-radius: 8px;
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-10px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    padding: 0.5rem;
    max-height: 300px;
    overflow-y: auto
    }

/* Dropdown Items - Now handled by unified dropdown system */
/* Keep relevance color on active state */

/* Settings Page Styles */
.settings-container {
    display: grid;
    grid-template-columns: 250px minmax(600px, 800px) 1fr;
    gap: 10px;
    padding: 0 10px 0 10px;
    max-width: 1400px;
    margin: 0 auto;
    height: calc(100vh - var(--nav-height, 64px));
    box-sizing: border-box;
    overflow: hidden;
}

/* Desktop: lock the panelled layouts (analytics/settings + tenders list and
   detail) to the viewport so scrolling outside a content panel (e.g. over the
   nav column or in the gutters) can't nudge the whole document. A flex column
   also makes the layout independent of the exact top-nav height, which the
   calc() heights only approximate and which otherwise leaves the page with a
   small (~80px) stray scroll. The inner panels keep their own scrolling.
   Mobile (<=768px) settings intentionally use a single scrolling column, so
   this is desktop-only. */
@media (min-width: 769px) {
    body:has(.settings-container),
    body:has(.tender-container),
    body:has(.tender-detail-container) {
        height: 100vh;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    body:has(.settings-container) #main-content,
    body:has(.tender-container) #main-content,
    body:has(.tender-detail-container) #main-content {
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
    }

    body:has(.settings-container) .settings-container,
    body:has(.tender-container) .tender-container,
    body:has(.tender-detail-container) .tender-detail-container {
        height: 100%;
    }
}

.settings-nav-column {
    overflow: hidden;
}

.settings-nav {
    height: 100%;
    background-color: transparent;
    display: flex;
    flex-direction: column;
    box-sizing: border-box
    }

.settings-nav .nav-item {
    color: var(--text-secondary-dark);
    text-decoration: none;
    padding: 10px var(--spacing-md);
    border-radius: var(--radius);
    transition: all var(--transition-duration) var(--transition-easing);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.5rem
    }

@media (max-width: 768px) {
    .settings-nav .nav-item {
        padding: 10px 1rem;
        margin-bottom: 0.25rem;
        font-size: 0.875rem
        }
}

.settings-nav .nav-icon {
    width: 20px;
    height: 20px;
    min-width: 20px;
    flex-shrink: 0;
    opacity: 0.7;
    transition: opacity var(--transition-duration) var(--transition-easing)
    }

.settings-nav .nav-item:hover .nav-icon, .settings-nav .nav-item-active .nav-icon {
    opacity: 1
    }

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

.settings-nav .nav-item-active {
    color: var(--text-primary-dark);
    background: var(--hover-bg);
    font-weight: var(--font-weight-normal)
    }

/* Enhanced form styling for settings */
.settings-content .form-group {
    margin-bottom: 1.5rem
    }

.settings-content .settings-section {
    margin-bottom: 2rem
    }

.settings-content .settings-section:last-child {
    margin-bottom: 0
    }

.settings-content .section-header {
    margin-bottom: 1.5rem
    }

.settings-content .section-header h2 {
    margin-bottom: 0.5rem
    }

.settings-content .section-header p {
    margin-bottom: 0
    }

/* Improve data table styling in settings */
.settings-content .data-table {
    border-radius: 12px;
    overflow: hidden;
    margin-top: 1rem;
    box-shadow: none;
}

.settings-content .data-table th {
    padding: 0.75rem 1.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary-dark);
    border-bottom: 1px solid var(--divider-color-subtle);
}

.settings-content .data-table td {
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--divider-color-subtle);
    color: var(--text-primary-dark);
    vertical-align: middle;
}

/* Use a single subtle per-cell divider; drop the heavier row-level border
   so it doesn't read as an underline beneath the action buttons. */
.settings-content .data-table tr {
    border-bottom: none;
}

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

/* Subtle row hover for scannability */
.settings-content .data-table tbody tr {
    transition: background-color 0.12s ease;
}

.settings-content .data-table tbody tr:hover {
    background: rgba(128, 128, 128, 0.05);
}

/* Keep the actions cell a normal right-aligned table cell (not a flex
   container) so the column stays aligned with the rest of the table. */
.settings-content .data-table .data-table-actions {
    display: table-cell;
    text-align: right;
    white-space: nowrap;
}

/* Member identity cell: avatar monogram + stacked name/email */
.settings-content .data-table .member-cell {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.settings-content .member-avatar {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--panel-highlight);
    border: 1px solid var(--divider-color-subtle);
    color: var(--text-primary-dark);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
}

.settings-content .member-avatar--pending {
    background: rgba(244, 170, 79, 0.14);
    border-color: transparent;
    color: var(--accent-amber);
}

.settings-content .member-identity {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.settings-content .member-name {
    font-size: 0.875rem;
    font-weight: var(--font-weight-medium);
    color: var(--text-primary-dark);
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings-content .member-email {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--text-secondary-dark);
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Status badges in team/settings tables */
.settings-content .status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0.6rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1.4;
}

.settings-content .status-badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.settings-content .status-badge.status-active {
    background: rgba(11, 210, 134, 0.14);
    color: #14c07e;
}

[data-theme="light"] .settings-content .status-badge.status-active {
    color: #0a8f5a;
}

.settings-content .status-badge.status-pending {
    background: rgba(244, 170, 79, 0.14);
    color: var(--accent-amber);
}

/* Quiet, rounded-square icon actions */
.settings-content .data-table .icon-btn {
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    border-radius: var(--radius-control);
    color: var(--text-secondary-dark);
    transition: background-color 0.12s ease, color 0.12s ease;
}

.settings-content .data-table .icon-btn svg {
    width: 18px;
    height: 18px;
}

/* Empty state */
.settings-content .data-table-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 2.75rem 0 2.25rem;
    color: var(--text-secondary-dark);
    font-size: 0.9375rem;
    text-align: center;
}

/* Edit action: neutral/primary hover (not red) */
.settings-content .data-table .edit-icon-btn.icon-btn:hover,
.settings-content .data-table .edit-icon-btn.icon-btn:focus {
    background: var(--primary-light);
}

.settings-content .data-table .edit-icon-btn .icon-pencil {
    color: var(--text-secondary-dark);
}

.settings-content .data-table .edit-icon-btn:hover .icon-pencil,
.settings-content .data-table .edit-icon-btn:focus .icon-pencil {
    color: var(--primary-button);
}

/* Delete/cancel action: keep red emphasis */
.settings-content .data-table .delete-icon-btn.icon-btn:hover,
.settings-content .data-table .delete-icon-btn.icon-btn:focus {
    background: rgba(239, 68, 68, 0.12);
}

/* Responsive Settings */
@media (max-width: 768px) {
    .settings-container {
        grid-template-columns: 1fr;
        padding: 0;
        gap: 0;
        height: auto;
        overflow: visible;
    }
    
    .settings-spacer-column {
        display: none;
    }

    .settings-nav {
        position: sticky;
        top: var(--nav-height);
        z-index: 10;
        min-height: auto;
        padding: 1rem;
        border-radius: 8px;
        margin-bottom: 1rem;
    }

    .settings-nav .nav-item {
        padding: 0.75rem 1rem;
        margin-bottom: 0.25rem;
        font-size: 0.875rem;
    }

    .settings-nav .nav-icon {
        width: 20px;
        height: 20px;
    }

    .settings-content {
        padding: 0 1.5rem;
    }

    .settings-content .form-group {
        margin-bottom: 1.25rem;
    }

    .settings-container {
        gap: 0;
    }

    .settings-container .column-header {
        display: none !important;
    }

    .settings-container .column {
        padding-bottom: 0;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        background: transparent !important;
    }

    /* Specific styling for settings navigation column */
    .settings-container .settings-nav-column {
        background: none !important;
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }

    /* Additional override for any theme-specific rules */
    [data-theme="dark"] .settings-container .settings-nav-column,
    [data-theme="light"] .settings-container .settings-nav-column {
        background: transparent;
        background-color: transparent;
        border: none;
        box-shadow: none;
    }

    .column.settings-content {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        background: transparent;
    }

    /* Fix nested scroll issue on mobile - single scroll container */
    .settings-content-wrapper {
        overflow: visible;
        height: auto;
        padding-right: 0;
        padding-left: 0;
    }

    .settings-card-form-footer {
        bottom: 0;
        margin-left: 0;
        margin-right: 0;
        padding: 1rem 0 0;
        box-shadow: none;
    }

    /* Let the column handle scrolling on mobile */
    .settings-container .column {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Analytics content wrapper - prevent nested scroll */
    #analytics-content .settings-content-wrapper {
        overflow: visible;
        height: auto;
    }

    /* Reset header wrapper margins on mobile */
    .settings-content .column-header-wrapper {
        margin-left: 0;
        margin-right: 0;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .settings-content .hidden-mobile {
        display: none;
    }
}

/* Additional Settings Styles */
/* Account Settings Section */
.settings-section h2 {
    color: var(--text-primary);
    font-size: 24px;
    font-weight: 500;
    margin: 0 0 8px 0
    }

.settings-section p {
    color: var(--text-secondary-dark);
    font-size: 14px;
    margin: 0 0 24px 0
    }

.settings-section .plan-section {
    margin-top: 32px
    }

.settings-section .plan-section h3 {
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 500;
    margin: 0 0 16px 0
    }

.data-list {
    display: block;
    width: 100%;
    margin-top: 24px;
    padding: 0;
    /* Remove grid and gap styles */
    }

/* Organizations Admin Section */
.organization-card {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 20px
    }

.org-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px
    }

.org-header h3 {
    color: var(--text-primary);
    font-size: 18px;
    font-weight: 500;
    margin: 0
    }

.org-details {
    margin-bottom: 20px
    }

.org-details p {
    color: var(--text-secondary-dark);
    font-size: 14px;
    margin: 8px 0
    }

.org-details strong {
    color: var(--text-primary)
    }

/* Legacy btn class - now handled by the main button-default definition above */
/* Primary button variant */
.button-primary {
    background: var(--primary);
    color: white;
    border-color: var(--primary)
    }

.button-primary:hover {
    background: var(--primary-button-hover, #6B6BEF);
    border-color: var(--primary-button-hover, #6B6BEF)
    }

.button-primary:focus {
    box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.3)
    }



/* Team Members List */
/* Pending Invitations */
/* Logo Upload */
/* Help Resources */
.help-resources {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-md)
    }

.resource-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--background-panel);
    border: 1px solid var(--border-color-dark);
    border-radius: var(--radius);
    text-decoration: none;
    transition: all var(--transition-duration) var(--transition-easing)
    }

.resource-card:hover {
    background: var(--panel-highlight);
    transform: translateY(-2px)
    }

.resource-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-blue);
    border-radius: var(--radius);
    color: white
    }

.resource-content h4 {
    color: var(--text-primary-dark);
    margin: 0;
    font-size: 1rem
    }

.resource-content p {
    color: var(--text-secondary-dark);
    margin: 0.25rem 0 0;
    font-size: 0.9rem
    }

/* Support Information */
.support-info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md)
    }

.info-item {
    padding: var(--spacing-md);
    background: var(--background-panel);
    border: 1px solid var(--border-color-dark);
    border-radius: var(--radius)
    }

.info-item strong {
    display: block;
    color: var(--text-primary-dark);
    margin-bottom: 0.5rem
    }

.info-item p {
    color: var(--text-secondary-dark);
    margin: 0;
    font-size: 0.9rem
    }

.support-hours {
    font-style: italic;
    margin-top: 0.25rem !important
    }

/* Modal Styles */
.modal-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 1rem;
    padding-top: 1.5rem;
    margin-top: 1.5rem
    }

.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--modal-background);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000
    }

.modal-content {
    background: var(--background-panel);
    border: none;
    border-radius: var(--radius);
    padding: var(--spacing-lg);
    width: 100%;
    max-width: 600px;
    margin: var(--spacing-md)
    }

.modal-content h3 {
    color: var(--text-primary-dark);
    margin-top: 0;
    margin-bottom: var(--spacing-md)
    }

/* Slack Modal Specific Styles */
.notification-status {
    margin-bottom: var(--spacing-lg)
    }

.status-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 500
    }

.status-indicator.connected {
    color: #2EB67D
    }

.status-indicator.disconnected {
    color: #ef4444
    }

.status-indicator svg {
    flex-shrink: 0
    }

.status-indicator.active {
    color: #00d26a
    }

.status-indicator.inactive {
    color: var(--text-secondary-dark)
    }

.status-indicator.connected-disabled {
    color: #f59e0b
    }

.status-indicator.needs-setup {
    color: #f59e0b
    }

.status-detail {
    color: var(--text-secondary-dark);
    font-size: 13px;
    margin: 0;
    margin-left: 24px
    }

.slack-actions {
    display: flex;
    gap: 12px;
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--border-color-dark)
    }

.slack-connect-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg)
    }

/* Connect hero: compact logo tile beside title + supporting copy */
.connect-status {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    text-align: left
    }

.connect-logo {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--panel-highlight);
    border: 1px solid var(--divider-color-subtle)
    }

.connect-logo svg {
    width: 24px;
    height: 24px
    }

.connect-status-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0
    }

.connect-status .connect-title {
    margin: 0;
    padding-right: 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-primary-dark)
    }

.connect-description {
    color: var(--text-secondary-dark);
    font-size: 0.8125rem;
    line-height: 1.45;
    margin: 0
    }

/* Benefits: soft card with green check markers */
.connect-benefits {
    background: var(--panel-highlight);
    border: 1px solid var(--divider-color-subtle);
    border-radius: var(--radius);
    padding: var(--spacing-md) var(--spacing-lg)
    }

.connect-benefits h4 {
    color: var(--text-secondary-dark);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 0.75rem 0
    }

.connect-benefits ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem
    }

.connect-benefits li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--text-primary-dark);
    margin: 0
    }

.connect-benefits li::before {
    content: "\2713";
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-top: 1px;
    border-radius: 50%;
    background: rgba(11, 210, 134, 0.16);
    color: #14c07e;
    font-size: 10px;
    font-weight: 700
    }

/* Pre-connect settings: visually separated section */
.pre-config-settings {
    border-top: 1px solid var(--divider-color-subtle);
    padding-top: var(--spacing-lg)
    }

.pre-config-settings h4 {
    color: var(--text-secondary-dark);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 var(--spacing-md) 0
    }

/* --- Slack modal: connection summary card --- */
.slack-connection-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--border-color-dark);
    border-radius: var(--radius-card);
    background: var(--surface);
    margin-bottom: 1.5rem;
    }

[data-theme="light"] .slack-connection-card {
    box-shadow: var(--shadow-sm);
    }

.slack-connection-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--panel-highlight);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    }

/* Email variant of the summary-card icon (soft indigo tile) */
.slack-connection-icon--email {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.22), rgba(99, 102, 241, 0.08));
    border: 1px solid rgba(99, 102, 241, 0.22);
    color: #6366f1;
    }

.slack-connection-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1;
    }

.slack-connection-title {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary-dark);
    }

.slack-connection-meta {
    font-size: 0.8125rem;
    color: var(--text-secondary-dark);
    }

.slack-connection-meta strong {
    color: var(--text-primary-dark);
    font-weight: 600;
    }

.slack-connection-sep {
    margin: 0 0.35rem;
    color: var(--text-secondary-dark);
    opacity: 0.6;
    }

.slack-text-link {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--primary-button);
    font-weight: 500;
    cursor: pointer;
    }

.slack-text-link:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
    }

.slack-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
    padding: 0.2rem 0.6rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    }

.slack-status-pill::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
    }

.slack-status-pill.is-active {
    background: rgba(11, 210, 134, 0.14);
    color: #14c07e;
    }

[data-theme="light"] .slack-status-pill.is-active {
    color: #0a8f5a;
    }

.slack-status-pill.is-paused {
    background: rgba(244, 170, 79, 0.14);
    color: var(--accent-amber);
    }

/* --- Modal sections --- */
.modal-section + .modal-section {
    margin-top: 1.5rem;
    }

.modal-section-title {
    margin: 0 0 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary-dark);
    }

/* --- Settings toggle row (label + description on the left, switch on the right) --- */
.settings-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 0;
    margin: 0;
    cursor: pointer;
    border-bottom: 1px solid var(--divider-color-subtle);
    }

.settings-toggle-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    }

.settings-toggle-label {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-primary-dark);
    }

.settings-toggle-desc {
    font-size: 0.8125rem;
    color: var(--text-secondary-dark);
    line-height: 1.45;
    }

/* --- Toggle switch (styled checkbox, no JS required) --- */
.toggle-switch {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    width: 40px;
    height: 22px;
    }

.toggle-switch input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 1;
    }

.toggle-slider {
    position: absolute;
    inset: 0;
    border-radius: 9999px;
    background: var(--border-color-dark);
    transition: background 0.2s ease;
    }

.toggle-slider::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s ease;
    }

.toggle-switch input:checked + .toggle-slider {
    background: var(--primary-button);
    }

.toggle-switch input:checked + .toggle-slider::before {
    transform: translateX(18px);
    }

.toggle-switch input:focus-visible + .toggle-slider {
    outline: 2px solid var(--primary-button-hover);
    outline-offset: 2px;
    }

/* Adjust modal height for Slack modal content */
#slack-modal .modal-content {
    height: auto;
    max-height: 80vh;
    overflow-y: auto
    }

/* Responsive Adjustments */
@media (max-width: 768px) {
    .help-resources {
        grid-template-columns: 1fr
        }

}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 0.75rem;
    border: none;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s, color 0.18s;
    outline: none;
    box-shadow: none;
    line-height: 1.2
    }

.button-save {
    background: var(--primary-button);
    color: var(--text-button);
    border: none;
    border-radius: 37px !important;
    padding: 10px 30px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease
    }

.button-save:hover, .button-save:focus {
    background: var(--primary-button-hover, #6B6BEF);
    }

.button-cancel {
    background: var(--background-panel);
    color: var(--text-primary-dark);
    border: none;
    border-radius: 37px !important;
    padding: 10px 30px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease
    }

.button-cancel:hover, .button-cancel:focus {
    background: var(--background-hover);
    }

.button-delete {
    background: none;
    color: #ef4444;
    font-weight: 600;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.35rem 0.75rem;
    border-radius: 20px;
    font-size: 0.85rem
    }

.button-delete:hover, .button-delete:focus {
    background: rgba(239, 68, 68, 0.08);
    color: #fff
    }

.button-group {
    display: flex;
    align-items: center;
    gap: 1.5rem
    }

.button-card-group {
    display: flex;
    align-items: center;
    gap: 2.5rem;
    margin-top: 1.5rem
    }

/* Button Variants - Placed after base button definition to ensure proper specificity */
/* Secondary button variant - Using the original manage-settings-btn styling */
.button-secondary {
    background: rgba(255, 255, 255, 0.1) !important;
    color: var(--text-primary-dark) !important;
    border: 1px solid var(--border-color-dark) !important
    }

.button-secondary:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    color: var(--text-primary-dark) !important;
    border-color: var(--border-color-light) !important
    }

.add-link {
    color: #85c6f6;
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.18s;
    background: none;
    border: none;
    padding: 0;
    display: inline-block
    }

.add-link:hover, .add-link:focus {
    color: var(--primary-button);
    text-decoration: underline
    }

.data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: transparent;
    color: var(--text-primary-dark);
}

.data-table th, .data-table td {
    padding: 1rem;
    text-align: left
    }

.data-table th {
    font-weight: 600;
    color: var(--text-primary);
    border-bottom: 2px solid var(--border-color-dark);
    background: transparent;
    font-size: 14px
    }

.data-table tr {
    border-bottom: 1px solid var(--border-color-dark)
    }

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

.data-table td {
    color: var(--text-primary-dark);
    vertical-align: middle;
    font-size: 14px
    }

.data-table-actions {
    display: flex;
    gap: 1rem;
    align-items: center
    }

.icon-btn {
    background: none;
    border: none;
    border-radius: 50%;
    padding: 0.5em;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s
    }

.icon-btn:focus, .icon-btn:hover {
    background: rgba(239, 68, 68, 0.08)
    }

.icon-btn .icon-trash {
    color: #ef4444;
    font-size: 1.3em;
    pointer-events: none
    }

.data-table th:last-child, .data-table td:last-child {
    white-space: nowrap;
    width: 1%;
    text-align: right
    }



.data-table-actions .add-link {
    font-size: 1rem;
    font-weight: 500;
    color: #85c6f6;
    background: none;
    border: none;
    padding: 0;
    margin-right: 0.5rem;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.18s;
    display: inline-block
    }

.data-table-actions .add-link:hover, .data-table-actions .add-link:focus {
    color: var(--primary-button);
    text-decoration: underline
    }

.settings-section, .settings-content {
    min-height: calc(100vh - var(--nav-height, 64px));
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column
    }

.half-width {
    width: 50%;
    max-width: 50%
    }

/* Range Slider Styles */
.slider-value-display {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--text-secondary-dark);
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.slider-value-separator {
    color: var(--text-secondary-dark);
    opacity: 0.5;
}

/* Field hint used under onboarding form labels (e.g. Typical Project Size) */
.welcome-left .field-hint {
    color: var(--text-secondary-dark);
    font-size: 0.78rem;
    line-height: 1.35;
    margin: 0 0 0.6rem;
}

/* Project-size slider: show every band boundary as a reference tick label */
.dual-slider-labels.dual-slider-labels-bands {
    font-size: 0.62rem;
    gap: 2px;
}

.dual-slider-labels.dual-slider-labels-bands span {
    white-space: nowrap;
}

/* "Any size / any duration" opt-out on the project-size step */
.slider-any-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    font-size: 0.8rem;
    cursor: pointer;
}

/* Use the site-standard custom checkbox (hidden native input + .checkbox-custom
   box with a CSS tick) instead of the raw browser control. */
.slider-any-option input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 18px;
    height: 18px;
    margin: 0;
    cursor: pointer;
}

.slider-any-option .checkbox-custom {
    box-sizing: border-box;
    width: 16px;
    height: 16px;
    margin: 0;
    border-radius: 5px;
    box-shadow: none;
    /* Optical nudge: this font's ascent > descent, so the text's cap-height sits
       just below the flex centre line — drop the box ~1px to match it. */
    position: relative;
    top: 1px;
}

.slider-any-option:hover .checkbox-custom {
    border-color: var(--primary-button);
}

.slider-any-option input[type="checkbox"]:checked + .checkbox-custom {
    background: var(--primary-button);
    border-color: var(--primary-button);
}

.slider-any-option input[type="checkbox"]:checked + .checkbox-custom::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 1px;
    width: 4px;
    height: 8px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.slider-any-option .slider-any-text {
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--text-secondary-dark);
    line-height: 1.2;
}

.dual-slider.is-disabled {
    opacity: 0.4;
    pointer-events: none;
}

/* Custom dual-thumb slider */
.dual-slider {
    position: relative;
    height: 40px;
    margin-bottom: 1rem;
    padding: 0 11px;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
}

.dual-slider-track {
    position: absolute;
    left: 11px;
    right: 11px;
    top: 50%;
    transform: translateY(-50%);
    height: 6px;
    background: var(--slider-track);
    border-radius: 3px;
    cursor: pointer;
    overflow: visible;
}

.dual-slider-fill {
    position: absolute;
    height: 100%;
    background: #FFFFFF;
    border-radius: 3px;
    pointer-events: none;
}

.dual-slider-thumb {
    position: absolute;
    top: 50%;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--slider-thumb);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    transform: translate(-50%, -50%);
    cursor: grab;
    z-index: 2;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.dual-slider-thumb:hover {
    background: var(--slider-thumb-hover);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.dual-slider-thumb.active {
    cursor: grabbing;
    background: var(--slider-thumb-hover);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 25%, transparent), 0 2px 8px rgba(0, 0, 0, 0.3);
}

.dual-slider-thumb:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 40%, transparent), 0 2px 8px rgba(0, 0, 0, 0.3);
}

.dual-slider-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    color: var(--text-secondary-dark);
    opacity: 0.6;
    margin-top: -0.5rem;
    padding: 0 11px;
}

/* Toast Notification Styles */
#toast-container {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 10001;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    pointer-events: none;
    }

.toast {
    background: var(--surface);
    color: var(--text-primary);
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
    display: flex;
    align-items: center;
    min-width: 280px;
    max-width: 380px;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-color-dark);
    pointer-events: auto;
    position: relative;
    animation: toast-in 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transition: opacity 0.3s ease, transform 0.3s ease;
    }

@keyframes toast-in {
    from {
        opacity: 0;
        transform: translateX(20px);
        }
    to {
        opacity: 1;
        transform: translateX(0);
        }
    }

.toast.toast-fade-out {
    opacity: 0;
    transform: translateX(20px);
    }

.toast-icon {
    margin-right: 0.625rem;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    }

.toast-icon svg {
    width: 20px;
    height: 20px;
    }

.toast-success .toast-icon { color: #10b981; }
.toast-error .toast-icon { color: #ef4444; }
.toast-warning .toast-icon { color: #F5B94D; }
.toast-info .toast-icon { color: var(--primary, #7C7CFF); }

.toast-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    }

.toast-title {
    font-weight: 600;
    font-size: 0.8125rem;
    margin-bottom: 0.1rem;
    }

.toast-message {
    color: var(--text-secondary-dark);
    font-size: 0.75rem;
    }

.toast-close {
    background: none;
    border: none;
    color: var(--text-secondary-dark);
    font-size: 1.1rem;
    margin-left: 0.75rem;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.2s;
    pointer-events: auto;
    flex-shrink: 0;
    line-height: 1;
    padding: 0;
    }

.toast-close:hover {
    opacity: 1;
    }

@media (max-width: 480px) {
    #toast-container {
        right: 0.5rem;
        left: 0.5rem;
    }

    .toast {
        min-width: 0;
        max-width: 100%;
    }
}

/* Mobile hamburger menu - hidden by default on desktop */
.mobile-hamburger {
    display: none;
}

/* Main Navigation Segments */
.nav-segments {
    display: flex;
    background-color: rgba(55, 56, 59, 1);
    border-radius: 30px;
    padding: 3px;
    gap: 2px;
    margin: 0 20px;
    margin-bottom: 10px;
}

/* Hide top navigation segments on mobile */
@media (max-width: 768px) {
    .nav-segments {
        display: none;
    }
    
    /* Hide welcome text on mobile */
    .welcome-text {
        display: none;
    }
    
    /* Hide user avatar and show hamburger menu on mobile */
    .user-avatar {
        display: none;
    }
    
    .mobile-hamburger {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        background-color: #46474B;
        border-radius: 50%;
        cursor: pointer;
        transition: background-color 0.2s ease;
    }
    
    .mobile-hamburger:hover {
        background-color: #56575B;
    }
    
    .mobile-hamburger:active {
        background-color: #36373A;
    }
    
    /* Make beta badge smaller on mobile */
    .beta-badge {
        font-size: 0.55rem;
        padding: 1px 5px;
        border-radius: 10px;
    }
}

.nav-segment {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding-left: 24px;
    padding-right: 24px;
    border: none;
    border-radius: 30px;
    background-color: transparent;
    color: #9CA3AF;
    cursor: pointer;
    transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: var(--font-family-primary);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    height: 35px;
    box-sizing: border-box;
    text-decoration: none;
}

.nav-segment:hover:not(.active) {
    color: #D1D5DB;
    background-color: rgba(255, 255, 255, 0.05);
}

.nav-segment.active {
    background-color: rgba(75, 76, 82, 1);
    color: #FFFFFF;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.nav-segment.disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.nav-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--primary);
    flex-shrink: 0;
    /* Reserve space when inactive to avoid layout shift on selection */
    visibility: hidden;
}

.nav-segment.active .nav-dot {
    visibility: visible; /* Show only when parent is active */
}

.nav-text {
    font-weight: 500;
    }

/* Category Toggle Buttons — Mac Mail filter style */
.category-toggle-row {
    display: flex;
    gap: 4px;
    padding: 0;
    margin: 0;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.category-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px;
    border: none;
    border-radius: var(--radius-control);
    background-color: var(--category-toggle-bg);
    color: var(--category-toggle-text);
    cursor: pointer;
    font-family: var(--font-family-primary);
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
    min-height: 34px;
    box-sizing: border-box;
    flex: 0 1 34px;
    min-width: 34px;
    transition:
        flex 0.25s cubic-bezier(0.4, 0, 0.2, 1),
        background-color 0.2s ease,
        color 0.2s ease,
        padding 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

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

.category-toggle.active {
    flex: 1 0 auto;
    padding: 8px 12px;
    background-color: var(--category-toggle-active-bg);
    color: var(--category-toggle-active-text);
}

.category-toggle.active:hover {
    background-color: var(--category-toggle-active-hover-bg);
}

.category-toggle .toggle-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    stroke: var(--category-toggle-icon-stroke);
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Normalize stroke weight across all icons (overrides inline stroke-width) */
.category-toggle .toggle-icon,
.category-toggle .toggle-icon path,
.category-toggle .toggle-icon rect {
    stroke-width: 1.75px;
}

.category-toggle.active .toggle-icon {
    stroke: var(--category-toggle-active-icon-stroke);
}

.category-toggle .toggle-text {
    display: none;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1;
    overflow: hidden;
}

.category-toggle.active .toggle-text {
    display: block;
    color: var(--category-toggle-active-text);
}

/* Favourites toggle */
.category-toggle-row .favourites-toggle {
    order: 999;
}

.category-toggle.favourites-toggle svg {
    stroke: var(--category-toggle-icon-stroke);
    transition: stroke 0.2s ease, fill 0.2s ease;
}

/* Fill the star once favourites is the active filter */
.category-toggle.favourites-toggle.active svg {
    stroke: var(--category-toggle-active-icon-stroke);
    fill: var(--category-toggle-active-icon-stroke);
}






















/* Dynamic Mobile Navigation Bar */
.mobile-dynamic-nav {
    display: none;
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    background: none;
    z-index: 1001;
    padding: 8px 16px 0;
    box-shadow: none;
}

.mobile-dynamic-nav.visible {
    display: block;
}

.mobile-dynamic-nav-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.mobile-dynamic-nav .mobile-back-link {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-primary-dark);
    font-family: var(--font-family-primary);
    font-size: 0.9em;
    font-weight: 500;
    line-height: 1.171875;
    cursor: pointer;
    transition: opacity 0.2s ease;
    flex-shrink: 0;
    width: 80px;
}

.mobile-dynamic-nav .mobile-nav-tabs {
    display: flex;
    align-items: center;
    gap: 16px;
    position: static;
    background: none;
    border: none;
    padding: 0;
    z-index: auto;
    justify-content: flex-end;
    flex: 1;
}

.mobile-dynamic-nav .mobile-nav-tab {
    font-family: var(--font-family-primary);
    font-size: 0.9em;
    font-weight: 600;
    line-height: 1.171875;
    text-align: center;
    cursor: pointer;
    transition: color 0.2s ease;
    color: #8C9094;
    position: relative;
    padding: 8px 16px;
    letter-spacing: 0.02em;
    white-space: nowrap;
    border-radius: 20px;
    background: transparent;
}

.mobile-dynamic-nav .mobile-nav-tab:hover {
    color: var(--text-primary-dark);
    background: rgba(255, 255, 255, 0.05);
}

.mobile-dynamic-nav .mobile-nav-tab.active {
    color: var(--text-primary-dark);
    background: none;
}

/* Adjust content padding when dynamic nav is visible */
@media (max-width: 768px) {
    /* Ensure dynamic nav is above all content */
    .mobile-dynamic-nav {
        z-index: 1001;
    }
    
    /* Push overview and analysis columns down to make room for mobile nav */
    .overview-column, .analysis-column {
        margin-top: 48px;
    }
    }

.mobile-nav-tab {
    font-family: var(--font-family-primary);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.171875;
    text-align: center;
    cursor: pointer;
    transition: color 0.2s ease;
    color: #8C9094;
    position: relative;
    padding: 10px 0;
    letter-spacing: 0.02em;
    white-space: nowrap
    }

/* Mobile: Touch-friendly tabs */
@media (max-width: 768px) {
    .mobile-nav-tab {
        font-size: 12px;
        padding: 12px 8px;
        min-height: 44px;  /* iOS recommended touch target */
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 1;
    }
    }

.mobile-nav-tab.active {
    color: #FFF;
    }

/* Light mode styling for mobile nav tabs */
[data-theme="light"] .mobile-nav-tab {
    color: var(--text-secondary-dark);
    }

[data-theme="light"] .mobile-nav-tab.active {
    color: var(--text-primary-dark);
    }

.mobile-nav-tab.active::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: #FFF;
    border-radius: 1px
    }

/* Light mode styling for active tab underline */
[data-theme="light"] .mobile-nav-tab.active::after {
    background: var(--text-primary-dark);
    }

.mobile-relevance-pill {
    width: 32px;
    height: 32px;
    background: var(--accent-green);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    /* Removed absolute positioning - now part of tabs flex layout */
    }

/* Color variations for mobile relevance pill based on score */
.mobile-relevance-pill.high-relevance {
    background: var(--accent-green)
    }

.mobile-relevance-pill.moderate-relevance {
    background: var(--accent-blue)
    }

.mobile-relevance-pill.low-relevance {
    background: var(--accent-amber)
    }

.mobile-relevance-pill.not-recommended {
    background: var(--accent-red)
    }





/* Notification Settings Styles - Exact Match to Image */
.notification-settings-container {
    max-width: 800px;
    margin: 0 auto
    }

/* Lead-in description sits under the page title, above the first section card */
.settings-description {
    margin-bottom: var(--spacing-lg);
    }

.settings-description h2 {
    margin-top: 30px;
    margin-bottom: 10px;
    }

.settings-description p {
    color: var(--text-secondary-dark);
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0 0 var(--spacing-xl) 0
    }

.notification-card {
    background-color: var(--background-panel);
    border: 1px solid var(--border-color-dark);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    margin-bottom: var(--spacing-md);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    transition: border-color var(--transition-duration) var(--transition-easing)
}

.notification-card:hover {
    border-color: var(--divider-color-strong, rgba(128, 128, 128, 0.35))
}

/* Smaller Edit button on notification cards */
.notification-card .button {
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    }

/* Notification card title */
.notification-card .notification-info h3 {
    font-size: 14px;
    font-weight: 600;
    }

.notification-content {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    flex: 1
}

.notification-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
    transition: transform var(--transition-duration, 0.2s) var(--transition-easing, ease)
    }

/* Subtle lift to echo the card's hover state */
.notification-card:hover .notification-icon {
    transform: translateY(-1px) scale(1.03)
    }

/* Email — soft indigo tile with a matching glyph */
.notification-icon.email-icon {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.22), rgba(99, 102, 241, 0.08));
    border: 1px solid rgba(99, 102, 241, 0.22);
    color: #6366f1
    }

/* Slack — aubergine→sky gradient that lets the brand mark pop */
.notification-icon.slack-icon {
    background: linear-gradient(135deg, rgba(74, 21, 75, 0.18), rgba(54, 197, 240, 0.14));
    border: 1px solid rgba(74, 21, 75, 0.20)
    }

[data-theme="light"] .notification-icon.slack-icon {
    background: linear-gradient(135deg, rgba(74, 21, 75, 0.10), rgba(54, 197, 240, 0.10));
    border-color: rgba(74, 21, 75, 0.14)
    }

/* Teams — soft periwinkle tile */
.notification-icon.teams-icon {
    background: linear-gradient(135deg, rgba(80, 89, 201, 0.22), rgba(80, 89, 201, 0.08));
    border: 1px solid rgba(80, 89, 201, 0.22);
    color: #5059C9
    }

.notification-info h2 {
    color: var(--text-primary-dark);
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    margin: 0
}

.notification-info h3 {
    color: var(--text-primary-dark);
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    margin: 0
}

.notification-info p {
    color: var(--text-secondary-dark);
    font-size: 12px;
    margin: 0;
    line-height: 1.4
    }

/* Default/Standard Button Style - Base for all buttons */
.button {
    background-color: var(--hover-bg);
    color: var(--text-primary-dark);
    border: 1px solid var(--border-color-dark);
    border-radius: var(--radius);
    padding: 8px 16px;
    font-size: 0.875rem;
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-sizing: border-box
    }

.button:hover {
    background-color: var(--hover-bg);
    border-color: var(--hover-border);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
    }

.button:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.2)
    }

.button:active {
    background-color: var(--hover-bg);
    transform: translateY(1px)
    }

/* Button size variants */
/* Button width variants */
.integrations-section {
    margin-top: 0
    }

/* Responsive Design */
@media (max-width: 768px) {
    .notification-settings-container {
        padding: var(--spacing-lg)
        }

.notification-card {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-md)
        }

.notification-content {
        width: 100%
        }

.button {
        align-self: flex-end
        }

}

@media (max-width: 480px) {
    .settings-description h2 {
        font-size: 1.125rem
        }

.notification-card {
        padding: var(--spacing-md)
        }

.notification-icon {
        width: 40px;
        height: 40px
        }

.welcome-right .hero-img {
        max-height: 120px;
        /* 80% of previous; even smaller max height on very small screens */
        }

}

/* === Onboarding Welcome Two-Column Layout === */
.welcome-card {
    display: flex;
    flex-direction: row;
    background: var(--background-panel);
    border-radius: var(--radius) var(--radius) var(--radius) var(--radius);
    /* Explicitly set all 4 corners to be equally rounded */
    overflow: visible;
    /* Changed from hidden to allow dropdowns to extend beyond card boundaries */
    border: 1px solid var(--border-color-dark);
    /* Prevent flicker during initial load */
    transition: none;
    /* Remove min-height to prevent conflicts with fixed dimensions */
    box-sizing: border-box;
    /* Ensure padding is included in dimensions */
    }

/* Same outline/border treatment for all onboarding steps (match welcome screen) */
.onboarding-wrapper .welcome-card {
    border-width: 0;
    border-color: transparent;
    border-style: none;
    border-image: none;
    }

/* Disable transitions for onboarding elements to prevent flicker */
.onboarding-wrapper * {
    transition: none !important
    }

/* Loading state for onboarding to prevent flicker */
.onboarding-wrapper.loading {
    opacity: 0.95;
    pointer-events: none
    }

.onboarding-wrapper.loading .welcome-card {
    /* Remove scale transform to prevent size shifting */
    opacity: 0.95
    }

/* Re-enable transitions after initial load for smooth interactions */
.onboarding-wrapper:not(.loading) .welcome-card {
    transition: all var(--transition-duration) var(--transition-easing)
    }

.onboarding-wrapper:not(.loading) .welcome-left input, .onboarding-wrapper:not(.loading) .welcome-left textarea, .onboarding-wrapper:not(.loading) .welcome-left button {
    transition: all var(--transition-duration) var(--transition-easing)
    }

.welcome-left {
    flex: none;
    width: 550px;
    padding: 3rem 2.5rem 2rem;
    /* top right/left bottom */
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    /* Ensure consistent sizing with padding */
    }

.welcome-right {
    flex: none;
    width: 550px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-sizing: border-box;
    /* Ensure consistent sizing */
    }

@keyframes hero-img-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.welcome-right .hero-img {
    width: 80%;
    height: auto;
    max-height: 240px;
    /* 80% of previous size; constrain max height to prevent oversized images */
    object-fit: contain;
    /* Ensure image fits within bounds while maintaining aspect ratio */
    border-radius: var(--radius);
    overflow: hidden;
    opacity: 0;
    animation: hero-img-fade-in 0.4s ease-out forwards
    }

/* Hero Image Inset Container */
.hero-image-inset {
    background: #F5FEE5;
    /* Light background matching the right panel */
    border-radius: 12px;
    /* Rounded corners */
    padding: 1.5rem;
    /* Internal spacing */
    margin: 1rem;
    /* External spacing from panel edges */
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    width: calc(100% - 2rem);
    /* Full width minus left/right margin */
    height: calc(100% - 2rem);
    /* Full height minus top/bottom margin */
    min-height: 400px;
    /* Minimum height to ensure good proportions */
    }

.hero-image-inset .hero-img {
    width: 80%;
    height: 80%;
    max-height: none;
    object-fit: contain;
    border-radius: 8px;
    }

@media (max-width: 768px) {
    /* On mobile the card stacks vertically and can exceed the viewport, so
       allow normal page scrolling instead of locking to the viewport. */
    body:has(.onboarding-wrapper) {
        height: auto;
        overflow: visible;
    }

    .onboarding-wrapper {
        transform: none;
        padding: 1rem;
        min-height: auto;
    }

    .onboarding-wrapper .welcome-card {
        width: 100%;
        max-width: 100%;
        height: auto;
        min-height: auto;
        flex-direction: column;
        }
    
    .welcome-left {
        width: 100%;
        padding: 1.5rem 1.25rem 1.25rem;
        min-height: auto;
        }
    
    .welcome-right {
        display: none;
        }

    .focus-pill {
        font-size: 0.85rem;
        padding: 0.55rem 1rem;
        min-height: 40px;
    }

    .focus-pill span {
        font-size: 0.85rem;
    }

    .focus-pill-grid-compact .focus-pill {
        padding: 0.5rem 0.9rem;
        min-height: 40px;
    }

    .focus-pill-grid-compact .focus-pill span {
        font-size: 0.82rem;
    }

    .unified-dropdown.dropdown-inline .dropdown-panel {
        max-height: 180px;
    }

    .dual-slider-thumb {
        width: 28px;
        height: 28px;
    }
}

/* Onboarding is a single-screen flow: lock it to the viewport so the
   background can't scroll. Resets the browser's default body margin and the
   small overflow that previously left ~80px of scrollable space. */
body:has(.onboarding-wrapper) {
    margin: 0;
    height: 100vh;
    overflow: hidden;
}

/* Center the onboarding card and constrain its width on larger viewports */
.onboarding-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: calc(100vh - var(--nav-height, 64px));
    padding: 4rem 1.5rem;
    box-sizing: border-box;
    transform: translateY(-5%);
    /* Reduced from -10% to prevent content from being pushed off-screen */
}

/* Ensure the onboarding container maintains consistent dimensions */
#onboarding-container {
    width: 100%;
    height: 100%;
}

/* Full-width on mobile; limited width on tablet / desktop */
.onboarding-wrapper .welcome-card {
    width: 1100px;
    height: 805px;
    max-width: calc(100vw - 3rem);
    max-height: calc(100vh - var(--nav-height, 64px) - 8rem);
    /* Prevent card from being taller than the space left under the nav */
    position: relative;
    flex-shrink: 0;
    margin: 0 auto;
    overflow: auto;
    /* Allow scrolling if content overflows */
}

/* Large tablets and small desktops (1024px - 1150px) */
@media (min-width: 1024px) and (max-width: 1150px) {
    .onboarding-wrapper .welcome-card {
        width: calc(100vw - 3rem);
        height: 805px;
        max-height: calc(100vh - var(--nav-height, 64px) - 8rem);
    }
    
    .welcome-left {
        width: 50%;
    }
    
    .welcome-right {
        width: 50%;
    }
}

/* Tablets (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1023px) {
    .onboarding-wrapper .welcome-card {
        width: calc(100vw - 3rem);
        max-width: 700px;
        height: 805px;
        max-height: calc(100vh - var(--nav-height, 64px) - 8rem);
        margin: 0 auto;
    }
    
    .welcome-left {
        width: 350px;
    }
    
    .welcome-right {
        width: 350px;
    }
}

/* Short viewports - reduce transform to prevent content cutoff */
@media (max-height: 800px) {
    .onboarding-wrapper {
        transform: none;
        padding: 2rem 1.5rem;
    }
}

/* === Onboarding Welcome Form Elements === */
.welcome-left label:not(.focus-pill) {
    color: rgba(230, 230, 230, 1);
    font-size: 0.875rem;
    /* 14px */
    font-weight: var(--font-weight-medium);
    margin-bottom: 5px;
    margin-top: 0;
    }

/* Preferred Partners / form labels: no top margin */
.welcome-left form > label {
    margin-top: 0;
    }

/* Ensure H3 tags in geographic sections match label styling */
.geographic-section h3 {
    color: var(--text-primary-dark);
    font-size: 0.75rem;
    /* 12px */
    font-weight: var(--font-weight-medium);
    margin-bottom: 0.25rem;
    margin-top: 0
    }

.welcome-left input.input-text {
    background: var(--input-background-dark);
    border: 1px solid var(--border-color-dark);
    border-radius: 8px;
    color: var(--text-primary-dark);
    font-size: 0.875rem;
    /* 14px */
    padding: 0.75rem 1rem;
    width: 100%;
    box-sizing: border-box;
    transition: all 0.2s ease;
    }

#website {
    margin-bottom: 5px;
    }

.welcome-left input.input-text::placeholder {
    color: var(--text-secondary-dark);
    }

.welcome-left form {
    display: flex;
    flex-direction: column;
    flex: 1;
    /* take remaining height so button can push to bottom */
    overflow-y: auto;
    /* Allow scrolling if content exceeds available space */
    overflow-x: hidden;
    /* Prevent horizontal scroll */
    }

.welcome-left .button-save {
    margin-top: 2rem;
    align-self: flex-end;
    /* right align */
    margin-bottom: 0;
    /* ensure precise 2rem space via panel padding */
    }

/* All onboarding buttons: Inter 600 */
.onboarding-wrapper .button-save,
.onboarding-wrapper .button-back {
    font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 600;
    }

/* === End Onboarding Welcome Form Elements === */
.welcome-left h1 {
    color: rgba(230, 230, 230, 1);
    font-size: 20px;
    font-weight: var(--font-weight-bold);
    line-height: 25px;
    margin-bottom: 0;
    margin-top: 0
    }

.welcome-left .help-text {
    color: var(--text-secondary-dark);
    font-size: 0.8125rem;
    /* 13px */
    line-height: 1.5;
    margin-top: 0px;
    margin-bottom: 0.625rem;
    max-width: 420px
    }

.welcome-left > h1 + .help-text {
    min-height: calc(2 * 0.8125rem * 1.5);
    }

/* Tighter gap only between help text and the textarea that follows it */
.welcome-left .help-text:has(+ textarea.input-textarea) {
    margin-bottom: 0.75rem;
    }

.welcome-left .description-guidance {
    margin-top: 0.5rem;
    font-size: 0.75rem;
    line-height: 1.4;
    }

/* Small helper text (e.g. website field hint) */
.welcome-left .help-text-small {
    color: var(--text-secondary-dark);
    font-size: 0.72rem;
    line-height: 1.4;
    margin: 4px 0 0;
    }

.welcome-left .geo-domestic-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 10px 0 4px;
    padding: 9px 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-color-dark);
    border-left: 3px solid var(--primary);
}

.welcome-left .geo-domestic-note .geo-domestic-note-icon {
    flex: none;
    margin-top: 1px;
    color: var(--primary);
}

[data-theme="light"] .welcome-left .geo-domestic-note {
    background: rgba(0, 0, 0, 0.02);
}

/* When no AI draft is present the badge row is empty — don't let it add a gap */
#onboarding-geographic-focus-areas-section .ai-fill-row:has(.ai-drafted-badge[hidden]) {
    margin-bottom: 0;
}

/* Tighter gap between help text and the form group (dropdown) that follows it */
.welcome-left .help-text:has(+ .form-group) {
    margin-bottom: 0.75rem;
    }

/* Remove top margin on form-group (dropdown) for onboarding pages */
#onboarding-preferred-partners-section .welcome-left .form-group,
#onboarding-geographic-focus-areas-section .welcome-left .form-group {
    margin-top: 0;
    }

#onboarding-geographic-focus-areas-section .market-segment-option {
    padding: 0.35rem 0;
    border: none;
    border-radius: 0;
    background: transparent;
    margin-top: 0.5rem;
    }

#onboarding-geographic-focus-areas-section .market-segment-option .checkbox-custom {
    border-color: var(--border-color-light, rgba(255, 255, 255, 0.4));
    }

#onboarding-geographic-focus-areas-section .market-segment-option input[type="checkbox"]:checked + .checkbox-custom {
    border-color: var(--primary-button);
    }

/* Tidy the simple checkbox row: align box + label on one baseline with an even
   gap and no leftover offsets from the boxed variant. */
#onboarding-geographic-focus-areas-section .market-segment-option .checkbox-label {
    align-items: center;
    gap: 0.6rem;
    }

#onboarding-geographic-focus-areas-section .market-segment-option .checkbox-custom {
    margin: 0;
    }

#onboarding-geographic-focus-areas-section .market-segment-option .segment-content {
    margin-left: 0;
    }

#onboarding-geographic-focus-areas-section .market-segment-option .segment-name {
    font-size: 0.82rem;
    line-height: 1;
    }

/* Geographic step: stop the FORM from scrolling. The card height is fixed at
   >=769px, so we let the region picker flex to fill the available space and
   make the inner country list the only scroll region. Mobile keeps page scroll. */
@media (min-width: 769px) {
    #onboarding-geographic-focus-areas-section .welcome-left form {
        overflow-y: hidden;
    }

    #onboarding-geographic-focus-areas-section .geographic-section.international-section {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    #onboarding-geographic-focus-areas-section .geo-region-picker,
    #onboarding-geographic-focus-areas-section .geo-region-picker .unified-dropdown.dropdown-inline,
    #onboarding-geographic-focus-areas-section .geo-region-picker .dropdown-panel {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    /* Let the panel grow to fill the form; .dropdown-items remains the scroller. */
    #onboarding-geographic-focus-areas-section .geo-region-picker .dropdown-panel {
        max-height: none;
    }
}

/* Preferred partners step: same flex-fill pattern. The inline partner picker
   grows to fill the fixed-height card and its chip list is the only scroller. */
@media (min-width: 769px) {
    #onboarding-preferred-partners-section .welcome-left form {
        overflow-y: hidden;
    }

    #onboarding-preferred-partners-section .partner-pill-picker,
    #onboarding-preferred-partners-section .partner-pill-picker .unified-dropdown.dropdown-inline,
    #onboarding-preferred-partners-section .partner-pill-picker .dropdown-panel {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    #onboarding-preferred-partners-section .partner-pill-picker .dropdown-panel {
        max-height: none;
    }
}

/* Focus-areas and technical-expertise steps: stop the FORM from scrolling so the
   actions (and, on focus areas, the procurement capability card) always stay in
   view. The card height is fixed at >=769px, so we let the pill list flex to fill
   the available space and make it the only scroll region. Mobile keeps page scroll. */
@media (min-width: 769px) {
    /* Reclaim the generous card padding on these two dense pill steps so the
       flex-fill scroll region below has materially more height. */
    #onboarding-focus-areas-section .welcome-left,
    #onboarding-technical-expertise-section .welcome-left {
        padding-top: 1.85rem;
        padding-bottom: 1.35rem;
    }

    #onboarding-focus-areas-section .welcome-left form,
    #onboarding-technical-expertise-section .welcome-left form {
        overflow-y: hidden;
    }

    #onboarding-focus-areas-section .pill-multiselect,
    #onboarding-technical-expertise-section .pill-multiselect {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    #onboarding-focus-areas-section .pill-scroll-container,
    #onboarding-technical-expertise-section .pill-scroll-container {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
    }

    /* Drop the 2-line reserve under the heading on these steps — the subtext is
       short, and the reclaimed space goes to the pill list. */
    #onboarding-focus-areas-section .welcome-left > h1 + .help-text,
    #onboarding-technical-expertise-section .welcome-left > h1 + .help-text {
        min-height: 0;
    }

    #onboarding-focus-areas-section .capability-section {
        flex: none;
    }
}

/* Bullet list styled as help text (e.g. onboarding complete) */
.welcome-left .help-text-list {
    list-style-type: disc;
    padding-left: 1.25rem;
    margin-top: 0;
    margin-bottom: 2rem;
    max-width: 420px;
    }

.welcome-left .help-text-list li {
    margin-bottom: 0.5rem;
    }

.welcome-left .help-text-list li:last-child {
    margin-bottom: 0;
    }

/* Paragraph block wrapper (e.g. onboarding complete) */
.welcome-left .help-text-block {
    margin-bottom: 2rem;
    max-width: 420px;
    }

/* List with purple check marks */
.welcome-left .help-text-check-list {
    list-style: none;
    padding-left: 0;
    }

.welcome-left .help-text-check-list li {
    position: relative;
    padding-left: 1.5rem;
    }

.welcome-left .help-text-check-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.35em;
    width: 0.5em;
    height: 0.25em;
    border-left: 2px solid var(--primary);
    border-bottom: 2px solid var(--primary);
    transform: rotate(-45deg);
    }

.welcome-left .check-list {
    list-style: none;
    padding-left: 0;
    font-size: 0.9rem;
    line-height: 1.8;
    }

.welcome-left .check-list li {
    position: relative;
    padding-left: 1.5rem;
    }

.welcome-left .check-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 0.5em;
    height: 0.25em;
    border-left: 2px solid var(--primary);
    border-bottom: 2px solid var(--primary);
    transform: rotate(-45deg);
    }

.welcome-left h2 {
    color: var(--text-primary-dark);
    font-size: 1rem;
    /* 16px */
    font-weight: var(--font-weight-medium);
    margin-bottom: 0.5rem;
    margin-top: 0
    }

.welcome-left h2:not(:first-of-type) {
    margin-top: 2rem
    }

/* Section label (e.g. "Other considerations") – same styling as h2 in welcome-left */
.welcome-left label.section-label {
    display: block;
    color: var(--text-primary-dark);
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    margin-bottom: 0.5rem;
    margin-top: 2rem;
    }

/* Remove underline from Get Started button */
.welcome-left .form-actions .button-save {
    text-decoration: none
    }

/* Quiet escape action shown while an AI draft gates the Continue button.
   Grouped just left of Continue; matches the 2rem top spacing of Back/Continue
   so all three sit on one baseline. */
.onboarding-skip-link {
    margin-top: 2rem;
    margin-left: auto;   /* keep Back at the left edge, group this with Continue */
    margin-right: 1rem;  /* gap between the skip link and Continue */
    border: none;
    background: none;
    padding: 8px 4px;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary-dark);
    text-decoration: none;
    cursor: pointer;
    transition: color 0.15s ease;
    white-space: nowrap;
}

.onboarding-skip-link:hover {
    color: var(--text-primary-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.onboarding-skip-link:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: 6px;
}

/* Increase gap before subsequent form groups: add spacing above labels (not inputs) */
.welcome-left label:not(:first-of-type):not(.focus-pill) {
    margin-top: 15px
    }

/* Pill-based multi-select (focus areas, technical expertise) */
.focus-pill-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    margin-top: 0;
    margin-bottom: 1rem;
    /* Small inset so a focused pill's outline isn't clipped by the
       overflow-hidden form/scroll ancestors. */
    padding: 2px;
    }

.focus-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 0.5rem 1rem;
    border-radius: 10px;
    cursor: pointer;
    border: none;
    background-color: var(--category-toggle-bg);
    color: var(--category-toggle-text);
    font-family: var(--font-family-primary);
    font-size: 0.75rem;
    font-weight: var(--font-weight-medium);
    transition: background-color 0.2s ease, color 0.2s ease;
    margin-bottom: 0px;
    }

.focus-pill input[type="checkbox"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    }

.focus-pill:hover {
    background-color: var(--category-toggle-hover-bg);
    color: var(--category-toggle-text);
    }

.focus-pill:has(input:checked) {
    background-color: var(--category-toggle-active-bg);
    color: var(--category-toggle-active-text);
    }

.focus-pill:has(input:checked):hover {
    background-color: var(--category-toggle-active-bg);
    color: var(--category-toggle-active-text);
    }

/* Selected pills get a leading checkmark so selection is not colour-only */
.focus-pill:has(input:checked)::before {
    content: "";
    flex: 0 0 auto;
    width: 0.75em;
    height: 0.75em;
    margin-right: 0.4em;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") center / contain no-repeat;
    }

/* Visible keyboard focus ring (the real checkbox is offscreen).
   Scoped to :focus-visible so it only appears for keyboard navigation,
   not when selecting a pill with the mouse. */
.focus-pill:has(:focus-visible) {
    outline: 2px solid var(--primary, #5353ED);
    outline-offset: 2px;
    }

.focus-pill span {
    font-size: 0.75rem;
    min-width: 0;
    overflow-wrap: anywhere;
    }

/* Scrollable pill container for long lists */
.pill-scroll-container {
    max-height: 384px;
    overflow-y: auto;
    overscroll-behavior: contain;
    margin-bottom: 0;
    /* small inset keeps focus rings off the clipping edge */
    padding: 2px 4px 2px 0;
}

/* While the list can scroll, keep a soft bottom edge at all times. The extra
   bottom padding (matching the fade distance) means that when scrolled to the
   very end the fade falls on empty padding, so the last row stays fully
   readable instead of ending in a hard line. */
/* No extra bottom padding here: the fade must fall on the actual pills so it
   is visible. (Bottom padding would make the fade dissolve empty space and the
   last pill edge would read as a hard line.) */
.pill-scroll-container.is-scrollable {
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 12px), transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 12px), transparent 100%);
}

/* Once scrolled down, also fade the top edge to signal content above. */
.pill-scroll-container.is-scrollable.can-scroll-up {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
}

/* The container's own padding provides the bottom gap; drop the grid's
   margin so it doesn't create ~16px of empty scrollable space. */
.pill-scroll-container .focus-pill-grid {
    margin-bottom: 0;
}

.pill-scroll-container::-webkit-scrollbar {
    width: 4px;
}

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

.pill-scroll-container::-webkit-scrollbar-thumb {
    background: var(--border-color-dark);
    border-radius: 2px;
}

/* Keep the real checkbox invisible but in place (covering the pill) so that
   keyboard focus scrolls the pill into view within the scroll container,
   instead of jumping to an off-screen control. The visible focus ring comes
   from .focus-pill:has(:focus-visible). */
.pill-scroll-container .focus-pill input[type="checkbox"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    clip: auto;
    cursor: pointer;
}

/* Compact pill variant for dense lists */
.focus-pill-grid-compact {
    gap: 0.35rem 0.5rem;
}

.focus-pill-grid-compact .focus-pill {
    padding: 0.4rem 0.8rem;
    border-radius: 8px;
}

.focus-pill-grid-compact .focus-pill span {
    font-size: 0.8rem;
}

/* Pill multi-select toolbar (search + count + clear) */
.pill-multiselect {
    margin-bottom: 1rem;
}

.pill-multiselect-toolbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.625rem;
    flex-wrap: wrap;
}

.pill-multiselect-search-wrap {
    position: relative;
    flex: 1 1 200px;
    min-width: 0;
}

.pill-multiselect-search-wrap[hidden] {
    display: none;
}

.pill-multiselect-search-icon {
    position: absolute;
    left: 0.625rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary-dark);
    pointer-events: none;
}

.pill-multiselect-search {
    width: 100%;
    padding: 0.5rem 0.75rem 0.5rem 2rem;
    border: 1px solid var(--input-border-dark, var(--border-color-dark));
    border-radius: 8px;
    background: var(--background-panel);
    color: var(--text-primary-dark);
    font-size: 0.8125rem;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.pill-multiselect-search:focus {
    outline: none;
    border-color: var(--primary, #5353ED);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 18%, transparent);
}

.pill-multiselect-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
    margin-left: auto;
}

.pill-multiselect-count {
    font-size: 0.75rem;
    color: var(--text-secondary-dark);
}

.pill-multiselect-count.has-selection {
    color: var(--text-primary-dark);
    font-weight: var(--font-weight-medium);
}

.pill-multiselect-clear {
    background: transparent;
    border: none;
    color: var(--primary, #5353ED);
    font-size: 0.75rem;
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    padding: 2px 4px;
}

.pill-multiselect-clear[hidden] {
    display: none;
}

.pill-multiselect-clear:hover {
    text-decoration: underline;
}

.focus-pill.is-hidden {
    display: none;
}

.pill-multiselect-empty {
    margin: 0.25rem 0 0;
    font-size: 0.8125rem;
    color: var(--text-secondary-dark);
}

.pill-multiselect-empty[hidden] {
    display: none;
}

/* Reset any added margin on inputs to keep them tight under their label */
.welcome-left input.input-text {
    margin-top: 0
    }

.welcome-left textarea.input-textarea {
    background: var(--input-background-dark);
    border: 1px solid var(--border-color-dark);
    border-radius: 8px;
    color: var(--text-primary-dark);
    font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.875rem;
    padding: 0.75rem 1rem;
    width: 100%;
    min-height: 220px;
    resize: vertical;
    box-sizing: border-box;
    transition: all 0.2s ease;
    }

.welcome-left input.input-text:focus,
.welcome-left textarea.input-textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.2);
    }

.welcome-left .form-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    position: sticky;
    bottom: 0;
    background: var(--background-panel);
    z-index: 10;
    }

/* When there's only one button (like on welcome card), position it on the right */
.welcome-left .form-actions.welcome-only {
    justify-content: flex-end
    }

/* Checkbox option blocks (e.g. Preferred Partners "Other considerations") */
.welcome-left .checkbox-option {
    margin-bottom: 16px;
    padding: 16px;
    border-radius: 8px;
    background-color: var(--background-panel);
    border: 1px solid var(--border-color-dark);
    transition: all 0.2s ease;
    }

.welcome-left .checkbox-option:hover {
    background-color: var(--hover-bg);
    border-color: var(--hover-border);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

.welcome-left .checkbox-option .checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    padding: 0;
    margin: 0;
    border: none;
    outline: none;
    color: var(--text-primary-dark);
    }

.welcome-left .checkbox-option input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
    }

.welcome-left .checkbox-option .checkbox-custom {
    position: relative;
    height: 18px;
    width: 18px;
    background-color: transparent;
    border: 2px solid var(--text-secondary-dark);
    border-radius: 2px;
    transition: all 0.2s;
    flex-shrink: 0;
    margin-top: 2px;
    }

.welcome-left .checkbox-option:hover .checkbox-custom {
    border-color: var(--accent-blue);
    }

.welcome-left .checkbox-option input[type="checkbox"]:checked ~ .checkbox-custom {
    background-color: var(--accent-blue);
    border-color: var(--accent-blue);
    }

.welcome-left .checkbox-option input[type="checkbox"]:checked ~ .checkbox-custom::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 2px;
    width: 6px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    }

.welcome-left .checkbox-option .checkbox-text {
    font-size: 14px;
    color: var(--text-primary-dark);
    line-height: 1.4;
    flex: 1;
    }

/* Content wrapper to maintain consistent height during navigation */
.onboarding-content-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    /* Fill the parent container */
    overflow: hidden;
    /* Prevent content from affecting card size */
    }

.onboarding-content-wrapper form {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    /* Scroll within the form if needed */
    overflow-x: hidden;
    }

.button-back {
    background: none;
    border: none;
    color: #8C9094;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 14px;
    font-weight: 500;
    margin-top: 2rem;
    padding: 0;
    text-decoration: none;
    transition: color 0.2s ease;
    }

.button-back::before {
    content: "\2190";
    font-size: 0.85em;
    }

.button-back:hover {
    color: var(--text-primary-dark);
    }

/* Market Segment Options: horizontal separators, no border, tight title/subtitle */
.market-segment-option {
    margin-bottom: 0;
    padding: 1rem 0;
    border: none;
    border-bottom: 1px solid rgba(224, 223, 226, 0.3);
    border-radius: 0;
    background-color: transparent;
    transition: background-color 0.2s ease;
    }

.market-segment-option:last-child {
    border-bottom: none;
    }

.market-segment-option:hover {
    background-color: var(--hover-bg);
    }

.segment-content {
    display: flex;
    flex-direction: column;
    margin-left: 0.5rem;
    gap: 0.125rem;
    }

.segment-name {
    font-weight: 500;
    color: rgba(230, 230, 230, 1);
    font-size: 14px;
    margin: 0;
    margin-bottom: 0;
    line-height: 1.25;
    }

.segment-description {
    font-size: 12px;
    color: var(--text-secondary-dark);
    line-height: 1.25;
    margin: 0;
    }

/* Checkbox styling for market segments */
.market-segment-option .checkbox-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    width: 100%
    }

.market-segment-option .checkbox-custom {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border: 2px solid #E0DFE2;
    border-radius: 4px;
    margin-right: 1px;
    margin-top: 2px;
    position: relative;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box
    }

.market-segment-option input[type="checkbox"]:checked + .checkbox-custom {
    background-color: var(--primary-button);
    border-color: var(--primary-button);
    }

.market-segment-option input[type="checkbox"]:checked + .checkbox-custom::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 4px;
    height: 8px;
    margin-left: -2px;
    margin-top: -4px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    box-sizing: border-box
    }

.market-segment-option input[type="checkbox"] {
    display: none
    }

.settings-section-title {
    font-family: var(--font-family-primary);
    font-size: 17px;
    font-weight: 500;
    color: var(--text-primary-dark);
    margin-bottom: var(--spacing-sm);
    margin-top: 0
    }

/* Settings Mobile Navigation Styles */
.settings-nav-mobile {
    display: none
    }

@media (max-width: 768px) {
    .settings-nav-desktop {
        display: none !important
        }

.settings-nav-mobile {
        display: block !important
        }

.settings-container, .settings-container .column {
        overflow: visible !important
        }

}

@media (min-width: 769px) {
    .settings-nav-desktop {
        display: block !important
        }

.settings-nav-mobile {
        display: none !important
        }

}

/* Ranking Status Indicator */
.ranking-status-indicator {
    display: none !important;
    background: linear-gradient(135deg, var(--primary) 0%, #0056b3 100%);
    border-radius: var(--radius);
    padding: 1rem;
    margin: 1rem 0;
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.2);
    animation: rankingPulse 2s ease-in-out infinite
    }

@keyframes rankingPulse {
    0%, 100% {
        box-shadow: 0 4px 12px rgba(0, 122, 255, 0.2);
        }

    50% {
        box-shadow: 0 4px 20px rgba(0, 122, 255, 0.4);
        }

}

.ranking-status-content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: white
    }

.ranking-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top: 2px solid white;
    border-radius: 50%;
    animation: spin 1s linear infinite
    }

.ranking-text {
    font-weight: var(--font-weight-medium);
    font-size: 0.9rem
    }

.ranking-progress {
    font-size: 0.8rem;
    opacity: 0.9;
    margin-left: auto
    }

@media (max-width: 768px) {
    .ranking-status-indicator {
        margin: 0.5rem 0;
        padding: 0.75rem
        }

.ranking-status-content {
        gap: 0.5rem
        }

.ranking-text {
        font-size: 0.85rem
        }

.ranking-progress {
        font-size: 0.75rem
        }

}

/* Website validation styles */
.validation-feedback {
    margin-top: 0.5rem;
    font-size: 0.8125rem;
    padding: 0;
    display: none;
    }

.validation-feedback.error {
    color: #F4AA4F;
    padding: 8px 12px;
    background: rgba(244, 170, 79, 0.10);
    border: 1px solid rgba(244, 170, 79, 0.28);
    border-radius: 9px;
    line-height: 1.45;
    }

.validation-feedback.error::before {
    content: '\26A0';
    margin-right: 7px;
    font-size: 0.95em;
    }

.validation-feedback.success {
    background-color: rgba(16, 185, 129, 0.1);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.2)
    }

/* Disabled button styles */
/* ================= Notifications (migrated from notifications.html) ================= */
/* Per-Service Status Indicators */
.service-status {
    margin-top: 0.6rem
    }

/* Status pill — mirrors the Team Access status badge (subtle tint + dot) */
.service-status .status-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    padding: 0.2rem 0.6rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1.4;
    white-space: nowrap;
    opacity: 1;
    background: rgba(128, 128, 128, 0.12);
    color: var(--text-secondary-dark)
    }

.service-status .status-indicator svg {
    width: 7px;
    height: 7px;
    flex-shrink: 0
    }

.service-status .status-indicator.active {
    background: rgba(11, 210, 134, 0.14);
    color: #14c07e
    }

[data-theme="light"] .service-status .status-indicator.active {
    color: #0a8f5a
    }

.service-status .status-indicator.inactive {
    background: rgba(128, 128, 128, 0.12);
    color: var(--text-secondary-dark)
    }

.service-status .status-indicator.connected-disabled,
.service-status .status-indicator.needs-setup {
    background: rgba(244, 170, 79, 0.14);
    color: var(--accent-amber)
    }

/* Notification Info — title + status share a line, description sits beneath */
.notification-info {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 0.6rem;
    row-gap: 4px;
    min-width: 0;
    }

.notification-info > h3 {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    }

.notification-info > .service-status {
    grid-column: 2;
    grid-row: 1;
    justify-self: start;
    margin-top: 0;
    }

.notification-info > p {
    grid-column: 1 / -1;
    grid-row: 2;
    margin: 0;
    }

/* Modal shell */
.modal {
    backdrop-filter: blur(4px)
    }

.modal-content {
    max-width: 500px;
    width: 90%;
    height: auto;
    max-height: 95vh;
    overflow: visible;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    border: none;
    position: relative
    }

/* Modal entrance: backdrop fades, panel lifts in */
@keyframes modalOverlayIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes modalContentIn {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.modal:not(.hidden) {
    animation: modalOverlayIn 0.16s ease both;
}

.modal:not(.hidden) .modal-content {
    animation: modalContentIn 0.22s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Close (X) affordance, pinned to the panel's top-right corner */
.modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: var(--radius-control);
    color: var(--text-secondary-dark);
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease;
    z-index: 2;
}

.modal-close:hover {
    background: rgba(128, 128, 128, 0.15);
    color: var(--text-primary-dark);
}

.modal-close:focus-visible {
    outline: 2px solid var(--primary-button-hover);
    outline-offset: 2px;
}

/* Leave room for the close button beside modal titles */
.modal-content h3 {
    padding-right: 2.25rem;
}

@media (prefers-reduced-motion: reduce) {
    .modal:not(.hidden),
    .modal:not(.hidden) .modal-content {
        animation: none;
    }
}

.modal-content .slack-connect-content, .modal-content form {
    overflow: visible
    }

/* Match dropdown trigger height to text inputs within modal forms */
.modal-content .unified-dropdown .dropdown-trigger {
    box-sizing: border-box;
    min-height: 40px;
    }

.modal-content h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: var(--text-primary-dark)
    }

/* Form groups & labels */
.modal .form-group {
    margin-bottom: 1.5rem
    }

.modal .form-group:last-of-type {
    margin-bottom: 2rem
    }

.modal .filter-label {
    display: block;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-primary-dark);
    margin-bottom: 0.5rem
    }

/* Checkbox in modal */
.modal .checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    cursor: pointer;
    font-size: 0.95rem;
    line-height: 1.4;
    color: var(--text-primary-dark)
    }

/* Modal checkbox option: single consistent gap, centered alignment, clear weight */
.modal .checkbox-label {
    align-items: center;
    gap: 0.625rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-primary-dark)
    }

.modal .checkbox-label .checkbox-text {
    line-height: 1.4
    }

.modal .checkbox-custom {
    width: 18px;
    height: 18px;
    border: 2px solid var(--border-color-dark);
    border-radius: 4px;
    background: transparent;
    position: relative;
    flex-shrink: 0;
    margin: 0;
    transition: all 0.2s ease
    }

.modal .checkbox-label:hover .checkbox-custom {
    border-color: var(--primary-button)
    }

.modal .checkbox-label input[type="checkbox"]:checked + .checkbox-custom {
    background: var(--primary-button);
    border-color: var(--primary-button)
    }

.modal .checkbox-label input[type="checkbox"]:checked + .checkbox-custom::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 2px;
    width: 4px;
    height: 8px;
    border: solid #18191a;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg)
    }

/* Modal footer & buttons */
.modal-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 1rem;
    padding-top: 1.5rem;
    margin-top: 1.5rem
    }

.modal .button-save {
    background: var(--primary-button);
    color: var(--text-button);
    border: none;
    border-radius: 8px;
    padding: 0.75rem 1.5rem;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 120px
    }

.modal .button-save:hover {
    background: var(--primary-button-hover, #6B6BEF);
    transform: translateY(-1px)
    }

.modal .button-cancel {
    background: transparent;
    color: var(--text-primary-dark);
    border: 1px solid var(--border-color-dark);
    border-radius: 8px;
    padding: 0.75rem 1.5rem;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 120px
    }

.modal .button-cancel:hover {
    background: var(--panel-highlight);
    border-color: var(--divider-color-strong, rgba(128, 128, 128, 0.4));
    color: var(--text-primary-dark)
    }

[data-theme="light"] .modal .button-cancel {
    border-color: var(--light-border)
    }

.modal .button-delete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: #ef4444;
    color: #fff;
    border: 1px solid #ef4444;
    border-radius: 8px;
    padding: 0.75rem 1.5rem;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    min-width: 120px;
    transition: all 0.2s ease
    }

.modal .button-delete:hover {
    background: #dc2626;
    border-color: #dc2626;
    transform: translateY(-1px)
    }

/* Trash icon reads white on the solid red button */
.modal .button-delete svg path {
    stroke: #ffffff;
    }

/* Secondary "remove" entry link sits on the left; Cancel/Save stay right.
   (Destructive confirm buttons keep the default right alignment.) */
.modal-footer .button-delete--link {
    margin-right: auto;
    }

/* Subtle red text-link variant (e.g. "Remove from team" entry point) */
.modal .button-delete--link {
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
    min-width: 0;
    color: #ef4444;
    font-size: 0.875rem;
    font-weight: 500;
    transition: color 0.15s ease;
    }

.modal .button-delete--link:hover {
    background: none;
    border-color: transparent;
    color: #dc2626;
    transform: none;
    text-decoration: underline;
    text-underline-offset: 2px;
    }

.modal .button-delete--link:focus-visible {
    outline: 2px solid #ef4444;
    outline-offset: 2px;
    border-radius: 4px;
    }

/* Status indicator & warnings inside modal */
.modal .status-indicator {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    font-weight: 500;
    margin-bottom: 0.5rem
    }

.modal .status-indicator.connected {
    color: #2EB67D
    }

.modal .status-indicator.disconnected {
    color: #ef4444
    }

.modal .status-indicator.connected-disabled {
    color: #f59e0b
    }

.modal .status-indicator.needs-setup {
    color: #f59e0b
    }

.modal .status-warning {
    color: #f59e0b;
    font-size: 0.875rem;
    font-weight: 500;
    margin: 0.25rem 0 0.5rem 1.5rem
    }

.modal .status-detail {
    color: var(--text-secondary-dark);
    font-size: 0.875rem;
    margin: 0 0 0 1.5rem
    }

/* Responsive tweaks */
@media (max-width: 480px) {
    .modal-content {
        width: 95%;
        margin: 1rem;
        padding: 1.5rem
        }

.modal-footer {
        flex-direction: column;
        gap: 0.75rem
        }

.modal .button-save, .modal .button-cancel {
        width: 100%;
        min-width: auto
        }

.modal .slack-actions {
        flex-direction: column;
        gap: 0.5rem
        }

}

.button-save:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: var(--text-secondary-dark)
    }

.button-save:disabled:hover {
    background-color: var(--text-secondary-dark);
    transform: none
}

/* FINAL OVERRIDE: Settings navigation column background - placed at end for maximum cascade priority */
.settings-nav-column.column {
    background: var(--background) !important;
    background-color: var(--background) !important;
    border: none !important;
    box-shadow: none !important;
    margin-bottom: 15px;
    padding-right: 0;
    padding-left: 0;
}

/* Settings navigation h4 styling */
.settings-nav-column h4 {
    font-weight: 500;
    font-size: 0.9rem;
}

/* Settings navigation item font size */
.settings-nav .nav-item {
    font-size: 0.9rem;
}

/* Settings active nav item styles */
.settings-nav .nav-item-active {
    color: #fff !important;
    font-weight: 500 !important;
}

/* Settings form section H2 font size (does not affect column header) */
.settings-content-wrapper h2 {
    font-size: 1em;
}

/* Header action alignment for settings */
.column-header-wrapper .header-action {
    margin-left: auto;
    position: relative;
    z-index: 21;
    pointer-events: auto;
}

/* Ensure header action buttons are clickable */
.column-header-wrapper .header-action.view-original-btn {
    z-index: 22;
    pointer-events: auto !important;
}

/* Header action hover text color */
.column-header-wrapper .header-action:hover {
    color: #23262B !important;
}

/* Modal overlay priority over sticky headers - modal must sit above nav (z-index: 10000) */
.modal { z-index: 10001 !important; }
.modal-open .nav-content { z-index: 0 !important; }
.modal-open .column-header-wrapper { z-index: 0 !important; pointer-events: none; }

/* Final override: enforce balanced top padding on notification cards */
.notification-card { padding-top: 1rem !important; }


/* Settings active nav item styles */
[data-theme="dark"] .settings-nav .nav-item-active {
    color: #fff !important;
    font-weight: 500 !important;
}
[data-theme="light"] .settings-nav .nav-item-active {
    color: #23262B !important;
    font-weight: 500;
    background-color: #E6E6EB;
}

/* ========================================
   CHAT INTERFACE STYLES
   ======================================== */

/* Chat Container */
.chat-container {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 120px);
    margin: var(--spacing-md);
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.chat-header {
    margin-bottom: var(--spacing-lg);
    text-align: center;
}

.chat-title {
    font-size: var(--heading-size);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary-dark);
    margin-bottom: var(--spacing-sm);
    font-family: var(--font-family-primary);
}

.chat-subtitle {
    color: var(--text-secondary-dark);
    font-size: var(--base-font-size);
    margin: 0;
    font-family: var(--font-family-primary);
}

/* Chat Log */
.chat-log {
    flex-grow: 1;
    overflow-y: auto;
    padding: var(--spacing-lg);
    margin-bottom: 0;
    border-width: 1px 1px 0 1px;
    border-style: solid;
    border-color: var(--border-color-light);
    background-color: var(--background-panel);
    border-radius: var(--radius) var(--radius) 0 0;
    scrollbar-width: thin;
    scrollbar-color: var(--border-color-light) var(--background-dark);
}

/* Scrollbar for Webkit browsers */
.chat-log::-webkit-scrollbar {
    width: 8px;
}

.chat-log::-webkit-scrollbar-track {
    background: var(--background-dark);
    border-radius: 4px;
}

.chat-log::-webkit-scrollbar-thumb {
    background-color: var(--border-color-light);
    border-radius: 4px;
    border: 2px solid var(--background-dark);
}

/* Message System */
.message-container {
    display: flex;
}

.message {
    max-width: 75%;
    padding: 11px 16px;
    border-radius: 20px;
    line-height: 1.4;
    margin-bottom: 20px;
    word-wrap: break-word;
    position: relative;
    color: var(--text-primary-dark);
    font-family: var(--font-family-primary);
    font-size: var(--base-font-size);
}

.user-message-container {
    justify-content: flex-end;
}

.system-message-container {
    justify-content: flex-start;
}

.user-message {
    background: var(--primary);
    color: #ffffff;
    margin-left: auto;
    box-shadow: var(--shadow-sm);
}

.system-message {
    background-color: var(--surface);
    margin-right: auto;
    border: 1px solid var(--border-color-dark);
}

/* Message Text Elements */
.message .system-message p {
    margin: 0;
    color: var(--text-primary-dark);
}

.message p,
.message li,
.message ul,
.message ol,
.message strong,
.message em {
    color: var(--text-primary-dark);
}

/* Thinking Indicator Animation */
#thinking-indicator .message {
    font-style: italic;
    color: var(--text-secondary-dark);
    animation: thinkingPulse 2s ease-in-out infinite;
    position: relative;
    padding-left: 20px;
}

#thinking-indicator .message::after {
    content: '';
    position: absolute;
    top: 50%;
    left: -16px;
    transform: translateY(-50%);
    width: 3px;
    height: 3px;
    background: var(--primary);
    border-radius: 50%;
    animation: thinkingDots 1.5s ease-in-out infinite 0.3s;
}

#thinking-indicator .message::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -8px;
    transform: translateY(-50%);
    width: 4px;
    height: 4px;
    background: var(--primary);
    border-radius: 50%;
    animation: thinkingDots 1.5s ease-in-out infinite;
}

/* Thinking Animation Keyframes */
@keyframes thinkingPulse {
    0%, 100% {
        opacity: 0.7;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.02);
    }
}

@keyframes thinkingDots {
    0%, 80%, 100% {
        opacity: 0.3;
        transform: translateY(-50%) scale(0.8);
    }
    40% {
        opacity: 1;
        transform: translateY(-50%) scale(1.2);
    }
}

/* Chat Form - Extending existing form patterns */
#chat-form {
    display: flex;
    padding: var(--spacing-md);
    border-width: 0 1px 1px 1px;
    border-style: solid;
    border-color: var(--border-color-light);
    background-color: var(--background-panel);
    border-radius: 0 0 var(--radius) var(--radius);
}

/* Chat Input - Extending existing form-input pattern */
#user-input {
    flex-grow: 1;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: 20px 0 0 20px; /* Left side rounded only */
    border: 1px solid var(--border-color-dark);
    background-color: var(--input-background-dark);
    color: var(--text-primary-dark);
    resize: none;
    line-height: 1.5;
    font-family: var(--font-family-primary);
    font-size: var(--base-font-size);
    transition: all var(--transition-duration) var(--transition-easing);
    box-shadow: var(--shadow-sm);
}

#user-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-light), var(--shadow-md);
    transform: translateY(-1px);
}

#user-input:hover:not(:focus) {
    border-color: var(--border-color-light);
    box-shadow: var(--shadow-md);
}

#user-input::placeholder {
    color: var(--text-secondary-dark);
}

/* Chat Button - Extending existing button-primary pattern */
#chat-form button {
    background-color: var(--primary);
    border: none;
    color: #ffffff;
    font-weight: var(--font-weight-medium);
    padding: var(--spacing-sm) var(--spacing-md);
    cursor: pointer;
    border-radius: 0 20px 20px 0; /* Right side rounded only */
    transition: all var(--transition-duration) var(--transition-easing);
    font-family: var(--font-family-primary);
    font-size: var(--base-font-size);
}

#chat-form button:hover {
    background-color: #0056CC;
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

#chat-form button:active {
    transform: translateY(0);
}

/* Markdown Element Styling */
.message code {
    background-color: var(--background-dark);
    padding: 0.2em 0.4em;
    margin: 0;
    font-size: 85%;
    border-radius: 3px;
    font-family: monospace;
    color: var(--text-primary-dark);
}

.message pre {
    background-color: var(--background-dark);
    padding: var(--spacing-md);
    border-radius: 5px;
    overflow-x: auto;
    margin: var(--spacing-md) 0;
    border: 1px solid var(--border-color-dark);
}

.message pre code {
    background-color: transparent;
    padding: 0;
    margin: 0;
    font-size: 100%;
    border-radius: 0;
    color: var(--text-primary-dark);
}

.message ul,
.message ol {
    padding-left: 25px;
    margin: var(--spacing-md) 0;
}

.message li {
    margin-bottom: var(--spacing-xs);
}

.message strong {
    font-weight: var(--font-weight-bold);
}

.message em {
    font-style: italic;
}

.message a {
    color: var(--primary);
    text-decoration: underline;
    transition: color var(--transition-duration) var(--transition-easing);
}

/* Mermaid Chart Styling */
.mermaid-chart-container {
    margin: var(--spacing-md) 0;
    padding: var(--spacing-md);
    background-color: var(--background-panel);
    border: 1px solid var(--border-color-dark);
    border-radius: var(--radius);
    overflow-x: auto;
    text-align: center;
}

.mermaid-chart-container svg {
    max-width: 100%;
    max-height: 280px;
    height: auto;
}

/* Ensure Mermaid charts are responsive */
.mermaid-chart-container .mermaid {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Light theme overrides for Mermaid charts */
[data-theme="light"] .mermaid-chart-container {
    background-color: var(--background-panel);
    border-color: var(--border-color-dark);
}

.message a:hover {
    color: #0056CC;
}

/* Typography Hierarchy for Markdown */
.message h1, .message h2, .message h3, .message h4, .message h5, .message h6 {
    font-family: var(--font-family-primary);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary-dark);
    margin: var(--spacing-lg) 0 var(--spacing-md) 0;
    line-height: 1.3;
}

.message h1 { 
    font-size: 1.5rem; 
    border-bottom: 2px solid var(--border-color-dark);
    padding-bottom: var(--spacing-xs);
}

.message h2 { 
    font-size: 1.3rem; 
    border-bottom: 1px solid var(--border-color-dark);
    padding-bottom: var(--spacing-xs);
}

.message h3 { 
    font-size: 1.1rem; 
}

.message h4 { 
    font-size: 1rem; 
}

.message h5 { 
    font-size: 0.9rem; 
}

.message h6 { 
    font-size: 0.8rem; 
    color: var(--text-secondary-dark);
}

/* Table Styling for Markdown */
.message table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--spacing-md) 0;
    background: var(--surface);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color-dark);
}

.message th, .message td {
    padding: var(--spacing-sm) var(--spacing-md);
    text-align: left;
    border-bottom: 1px solid var(--border-color-dark);
    font-family: var(--font-family-primary);
}

.message th {
    background: var(--background-panel);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary-dark);
    font-size: 0.9rem;
}

.message td {
    color: var(--text-primary-dark);
    font-size: var(--base-font-size);
}

.message tbody tr:nth-child(even) {
    background: var(--table-stripe-bg);
}

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

/* Blockquotes */
.message blockquote {
    border-left: 4px solid var(--primary);
    padding-left: var(--spacing-md);
    margin: var(--spacing-md) 0;
    font-style: italic;
    color: var(--text-secondary-dark);
    background: var(--background-panel);
    padding: var(--spacing-md);
    border-radius: 0 var(--radius) var(--radius) 0;
    font-family: var(--font-family-primary);
}

.message blockquote p {
    margin: 0;
}

/* Horizontal Rules */
.message hr {
    border: none;
    height: 1px;
    background: var(--border-color-dark);
    margin: var(--spacing-lg) 0;
    border-radius: 1px;
}

/* Light Theme Overrides for Chat Elements */
[data-theme="light"] .chat-log {
    background-color: var(--background-panel);
    border-color: var(--border-color-dark);
}

[data-theme="light"] .system-message {
    background-color: var(--surface);
    border-color: var(--border-color-dark);
    color: var(--text-primary-dark);
}

[data-theme="light"] .user-message {
    background: var(--primary);
    color: #ffffff;
}

[data-theme="light"] #chat-form {
    background-color: var(--background-panel);
    border-color: var(--border-color-dark);
}

[data-theme="light"] #user-input {
    background-color: var(--input-background-dark);
    border-color: var(--border-color-dark);
    color: var(--text-primary-dark);
}

[data-theme="light"] #user-input::placeholder {
    color: var(--text-secondary-dark);
}

[data-theme="light"] .message code {
    background-color: var(--surface);
    color: var(--text-primary-dark);
}

[data-theme="light"] .message pre {
    background-color: var(--surface);
    border-color: var(--border-color-dark);
}

[data-theme="light"] .message pre code {
    color: var(--text-primary-dark);
}

[data-theme="light"] .chat-title {
    color: var(--text-primary-dark);
}

[data-theme="light"] .chat-subtitle {
    color: var(--text-secondary-dark);
}

[data-theme="light"] .message h1, 
[data-theme="light"] .message h2, 
[data-theme="light"] .message h3, 
[data-theme="light"] .message h4, 
[data-theme="light"] .message h5, 
[data-theme="light"] .message h6 {
    color: var(--text-primary-dark);
}

[data-theme="light"] .message h1 {
    border-bottom-color: var(--border-color-dark);
}

[data-theme="light"] .message h2 {
    border-bottom-color: var(--border-color-dark);
}

[data-theme="light"] .message h6 {
    color: var(--text-secondary-dark);
}

[data-theme="light"] .message table {
    background: var(--surface);
    border-color: var(--border-color-dark);
}

[data-theme="light"] .message th {
    background: var(--background-panel);
    color: var(--text-primary-dark);
}

[data-theme="light"] .message td {
    color: var(--text-primary-dark);
}

[data-theme="light"] .message tbody tr:nth-child(even) {
    background: var(--table-stripe-bg);
}

[data-theme="light"] .message tbody tr:hover {
    background: var(--hover-bg);
}

[data-theme="light"] .message blockquote {
    background: var(--background-panel);
    border-left-color: var(--primary);
    color: var(--text-secondary-dark);
}

[data-theme="light"] .message hr {
    background: var(--border-color-dark);
}

[data-theme="light"] #thinking-indicator .message::before,
[data-theme="light"] #thinking-indicator .message::after {
    background: var(--primary);
}

[data-theme="light"] .message p,
[data-theme="light"] .message li,
[data-theme="light"] .message ul,
[data-theme="light"] .message ol,
[data-theme="light"] .message strong,
[data-theme="light"] .message em {
    color: var(--text-primary-dark);
}

[data-theme="light"] .message .system-message p {
    color: var(--text-primary-dark);
}

/* Responsive Design for Chat */
@media (max-width: 768px) {
    .chat-container {
        height: calc(100vh - 120px);
        margin: var(--spacing-sm);
    }
    
    .chat-title {
        font-size: 1.5rem;
    }
    
    .chat-subtitle {
        font-size: 0.9rem;
    }
    
    .message {
        max-width: 85%;
        padding: 8px 12px;
        font-size: 0.9rem;
    }
    
    #user-input {
        padding: var(--spacing-sm);
        font-size: 16px;
        min-height: 44px; /* Touch target */
    }
    
    #chat-form button {
        padding: var(--spacing-sm);
        font-size: 0.9rem;
        min-height: 44px; /* Touch target */
    }
    
    .message table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 480px) {
    .chat-container {
        margin: var(--spacing-xs);
        height: calc(100vh - 100px);
    }
    
    .chat-header {
        margin-bottom: var(--spacing-md);
    }
    
    .chat-title {
        font-size: 1.25rem;
    }
    
    .message {
        max-width: 90%;
        padding: 6px 10px;
        font-size: 0.85rem;
    }
    
    .message table {
        font-size: 0.8rem;
    }
    
    .message th, .message td {
        padding: var(--spacing-xs) var(--spacing-sm);
    }
    
    #user-input {
        min-height: 44px; /* Touch target */
        font-size: 16px; /* Prevent zoom on iOS */
    }
    
    #chat-form button {
        min-height: 44px; /* Touch target */
    }
}

/* ===========================================
   Analytics Dashboard Styles
   =========================================== */

/* Analytics page: 2-column layout without spacer */
.settings-container:has(#analytics-content) {
    grid-template-columns: 250px 1fr;
}

.settings-container:has(#analytics-content) .settings-content {
    max-width: none;
    display: flex;
    flex-direction: column;
}

#analytics-content {
    padding-top: 18px;
}

/* Analytics sidebar navigation — neutral, restrained treatment that mirrors
   the site's top-nav segment language (raised solid fill for the active item,
   subtle hover, accent reserved for data elsewhere). */
/* Shared side-nav styling for both the Analytics and Settings pages.
   Anchored on .settings-nav-column (used by both) so the two stay in sync. */
.settings-nav-column .nav-section-header {
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--divider-color-subtle);
}

.settings-nav-column .nav-section-header .column-header {
    margin: 0;
    padding: 0;
}

.settings-nav-column h2.microtitle {
    margin: 0;
    padding-left: 0.25rem;
}

.settings-nav-column .settings-nav-desktop {
    padding-top: 0.125rem;
}

.settings-nav-column .settings-nav {
    gap: 0.25rem;
}

.settings-nav-column .settings-nav .nav-item {
    font-size: 0.875rem;
    font-weight: var(--font-weight-medium);
    padding: 0.5rem 0.75rem;
    margin-bottom: 0;
    border-radius: var(--radius-control);
    border: 1px solid transparent;
    color: var(--text-secondary-dark);
    transition: color var(--transition-duration) var(--transition-easing),
                background-color var(--transition-duration) var(--transition-easing),
                border-color var(--transition-duration) var(--transition-easing);
}

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

.settings-nav-column .settings-nav .nav-item-active {
    color: var(--text-primary-dark) !important;
    font-weight: var(--font-weight-bold) !important;
    background: var(--surface) !important;
    border-color: var(--border-color-dark);
    box-shadow: var(--shadow-sm);
}

.settings-nav-column .settings-nav .nav-icon {
    width: 18px;
    height: 18px;
    min-width: 18px;
    opacity: 0.55;
}

.settings-nav-column .settings-nav .nav-item:hover .nav-icon,
.settings-nav-column .settings-nav .nav-item-active .nav-icon {
    opacity: 1;
}

[data-theme="light"] .settings-nav-column .nav-section-header {
    border-bottom-color: var(--light-border);
}

[data-theme="light"] .settings-nav-column .settings-nav .nav-item:hover {
    background: var(--light-hover);
    color: var(--light-text-primary);
}

[data-theme="light"] .settings-nav-column .settings-nav .nav-item-active {
    color: var(--light-text-primary) !important;
    background: var(--light-background) !important;
    border-color: var(--light-border);
}


/* Staging: Onboarding progress indicator */
.onboarding-progress-label {
    margin: 20px 0 8px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.65;
}

.onboarding-progress {
    display: flex;
    gap: 6px;
    margin-top: 0;
    margin-bottom: 30px;
    justify-content: space-between;
}

/* Completed segments are back-navigation links; give them a usable hit area
   and a visible focus ring without changing the 6px visual bar. */
a.onboarding-progress-segment {
    position: relative;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.15s ease;
}

/* Clickable (completed) segments grow slightly on hover/focus so the small
   6px bars read as interactive. scaleY avoids shifting the row layout. */
a.onboarding-progress-segment:hover,
a.onboarding-progress-segment:focus-visible {
    transform: scaleY(1.8);
}

a.onboarding-progress-segment::after {
    content: "";
    position: absolute;
    inset: -8px 0;
}

a.onboarding-progress-segment:hover {
    background: rgba(255, 255, 255, 1);
}

[data-theme="light"] a.onboarding-progress-segment:hover {
    background: rgba(0, 0, 0, 0.85);
}

a.onboarding-progress-segment:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.9);
    outline-offset: 4px;
}

[data-theme="light"] a.onboarding-progress-segment:focus-visible {
    outline-color: rgba(0, 0, 0, 0.7);
}

.onboarding-progress-segment {
    flex: 1;
    height: 6px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
    transition: background 0.3s ease;
}

.onboarding-progress-segment.filled {
    background: rgba(255, 255, 255, 0.9);
}

[data-theme="light"] .onboarding-progress-segment {
    background: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .onboarding-progress-segment.filled {
    background: rgba(0, 0, 0, 0.7);
}

/* Animate only the current step's segment (the last filled one) on each load.
   Every navigation re-renders #onboarding-container, so this replays as the new
   segment filling in. Uses a keyframe (transitions are disabled inside
   .onboarding-wrapper). Earlier filled segments keep their solid fill above. */
.onboarding-wrapper .onboarding-progress-segment.filled:not(:has(+ .onboarding-progress-segment.filled)) {
    background-color: rgba(255, 255, 255, 0.2);
    background-image: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9));
    background-repeat: no-repeat;
    background-size: 0% 100%;
    animation: onboardingSegmentFill 0.45s ease both;
}

[data-theme="light"] .onboarding-wrapper .onboarding-progress-segment.filled:not(:has(+ .onboarding-progress-segment.filled)) {
    background-color: rgba(0, 0, 0, 0.1);
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7));
}

@keyframes onboardingSegmentFill {
    from { background-size: 0% 100%; }
    to   { background-size: 100% 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .onboarding-wrapper .onboarding-progress-segment.filled:not(:has(+ .onboarding-progress-segment.filled)) {
        background-size: 100% 100%;
        animation: none;
    }
}

/* Onboarding entity selects (Step 1) + AI intake uploads (Step 2) */
/* Native single-selects (Step 1 entity basics) styled to match .input-text fields */
.welcome-left select.input-text {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: var(--input-background-dark);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a9adb8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    border: 1px solid var(--border-color-dark);
    border-radius: 8px;
    color: var(--text-primary-dark);
    font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.875rem;
    line-height: 1.4;
    padding: 0.75rem 2.75rem 0.75rem 1rem;
    width: 100%;
    box-sizing: border-box;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 0;
}

.welcome-left select.input-text:hover {
    border-color: var(--text-secondary-dark);
}

.welcome-left select.input-text:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.2);
}

/* Dropdown list items (native popup) follow the dark palette where supported */
.welcome-left select.input-text option {
    background: var(--input-background-dark);
    color: var(--text-primary-dark);
}

/* Dim the closed control while the placeholder option is still selected */
.welcome-left select.input-text.is-placeholder {
    color: var(--text-secondary-dark);
}

/* Drag-and-drop document upload (Step 2 AI intake) */
.ai-dropzone {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 0;
    padding: 1.05rem 1rem;
    border: 1.5px dashed var(--border-color-dark);
    border-radius: 12px;
    background:
        radial-gradient(120% 120% at 50% 0%, color-mix(in srgb, var(--primary) 6%, transparent), transparent 70%),
        var(--input-background-dark);
    color: var(--text-secondary-dark);
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.ai-dropzone:hover {
    border-color: var(--primary);
    color: var(--text-primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.ai-dropzone:focus-visible {
    outline: none;
    border-color: var(--primary);
    color: var(--text-primary-dark);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 25%, transparent);
}

.ai-dropzone.is-dragover {
    border-color: var(--primary);
    border-style: solid;
    background:
        radial-gradient(120% 120% at 50% 0%, color-mix(in srgb, var(--primary) 16%, transparent), transparent 70%),
        var(--input-background-dark);
    color: var(--text-primary-dark);
    transform: scale(1.01);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}

.ai-dropzone-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    color: var(--primary);
    transition: background 0.2s ease, transform 0.2s ease;
}

.ai-dropzone:hover .ai-dropzone-badge,
.ai-dropzone.is-dragover .ai-dropzone-badge {
    background: var(--primary);
    color: #fff;
}

.ai-dropzone.is-dragover .ai-dropzone-badge {
    transform: translateY(-2px);
}

.ai-dropzone-text {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--text-primary-dark);
}

.ai-dropzone-cta {
    color: var(--primary);
    font-weight: 600;
}

.ai-dropzone-hint {
    font-size: 0.72rem;
    letter-spacing: 0.02em;
    color: var(--text-secondary-dark);
}

/* Visually hidden but still focusable/clickable real file input */
.ai-dropzone-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.ai-file-list {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 116px;
    overflow-y: auto;
    padding-right: 4px;
}

.ai-file-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 6px 3px 7px;
    border: 1px solid var(--border-color-dark);
    border-radius: 8px;
    background: var(--input-background-dark);
    font-size: 0.78rem;
    color: var(--text-primary-dark);
    animation: ai-file-in 0.18s ease;
}

@keyframes ai-file-in {
    from { opacity: 0; transform: translateY(-3px); }
    to { opacity: 1; transform: translateY(0); }
}

.ai-file-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    color: var(--primary);
}

.ai-file-icon svg {
    width: 13px;
    height: 13px;
}

/* Name + size now share one row to keep each chip to a single compact line */
.ai-file-meta {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
    flex: 1 1 auto;
}

.ai-file-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
    min-width: 0;
    flex: 1 1 auto;
}

.ai-file-size {
    flex-shrink: 0;
    font-size: 0.7rem;
    color: var(--text-secondary-dark);
}

.ai-file-remove {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary-dark);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.ai-file-remove:hover {
    background: rgba(255, 0, 0, 0.12);
    color: #ff6b6b;
}

[data-theme="light"] .ai-file-remove:hover {
    background: rgba(220, 38, 38, 0.1);
    color: #dc2626;
}

/* Tighten the AI-intake step so its form fits the card without an inner scroll */
#onboarding-ai-intake-section .welcome-left {
    padding-top: 2rem;
}

#onboarding-ai-intake-section .welcome-left label:not(:first-of-type):not(.focus-pill) {
    margin-top: 10px;
}

/* Non-blocking minimum-selection nudge for pill multi-selects */
.pill-multiselect-hint {
    margin: 12px 0 0;
    font-size: 0.78rem;
    opacity: 0.75;
}

/* Kept in the layout (space reserved) but hidden when a selection exists, so the
   nudge toggling on/off never reflows the grid or forces a scroll. */
.pill-multiselect-hint.is-inactive {
    visibility: hidden;
}

/* Standalone capability question (e.g. procurement of goods) */
.capability-section {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color-dark);
}

.capability-section-label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary-dark);
}

.capability-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 10px 12px;
    border: 1px solid var(--border-color-dark);
    border-radius: 10px;
    background: var(--input-background-dark);
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.capability-card:hover {
    border-color: var(--primary);
}

.capability-card:has(input:focus-visible) {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 30%, transparent);
}

.capability-card:has(input:checked) {
    border-color: var(--primary);
    background: var(--primary-light);
    box-shadow: 0 0 0 1px var(--primary) inset;
}

/* Visually hide the native checkbox; the card + check pill convey state */
.capability-card input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
}

.capability-card-icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    color: var(--primary);
}

.capability-card-icon svg {
    width: 17px;
    height: 17px;
}

.capability-question-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1 1 auto;
    min-width: 0;
}

.capability-question-title {
    font-size: 0.85rem;
    font-weight: 600;
}

.capability-question-desc {
    font-size: 0.76rem;
    opacity: 0.7;
    line-height: 1.35;
}

.capability-card-check {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1.5px solid var(--border-color-dark);
    background: transparent;
    color: transparent;
    transition: all 0.18s ease;
}

.capability-card input:checked ~ .capability-card-check {
    border-color: var(--primary);
    background: var(--primary);
    color: #fff;
}

/* Onboarding review/summary step */
#onboarding-review-section .welcome-left {
    display: flex;
    flex-direction: column;
}

.onboarding-review {
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow-y: auto;
    padding-right: 6px;
    margin-bottom: 8px;
    flex: 1 1 auto;
    min-height: 0;
}

.onboarding-review-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    padding-bottom: 12px;
}

[data-theme="light"] .onboarding-review-item {
    border-bottom-color: rgba(0, 0, 0, 0.1);
}

.onboarding-review-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.onboarding-review-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}

.onboarding-review-label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.7;
}

.onboarding-review-edit {
    font-size: 0.78rem;
    text-decoration: underline;
    opacity: 0.8;
    flex: none;
}

.onboarding-review-edit:hover {
    opacity: 1;
}

.onboarding-review-value {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.45;
}

.onboarding-review-empty {
    opacity: 0.55;
    font-style: italic;
}

.onboarding-review-note {
    margin: 6px 0 0;
    font-size: 0.78rem;
    opacity: 0.7;
}

.onboarding-review-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.onboarding-review-chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 8px;
    font-size: 0.72rem;
    background: var(--focus-pill-active-bg, rgba(255, 255, 255, 0.9));
    color: var(--focus-pill-active-text, #1a1a1a);
}

/* === Review step: compact in-card overview === */
.onboarding-review-summary {
    display: flex;
    flex-direction: column;
    margin-bottom: 12px;
}

.onboarding-review-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 9px 8px;
    margin: 0 -8px;
    border-radius: 10px;
    transition: background 0.15s ease;
}

.onboarding-review-row + .onboarding-review-row {
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

[data-theme="light"] .onboarding-review-row + .onboarding-review-row {
    border-top-color: rgba(0, 0, 0, 0.06);
}

.onboarding-review-row:hover {
    background: rgba(255, 255, 255, 0.04);
}

[data-theme="light"] .onboarding-review-row:hover {
    background: rgba(0, 0, 0, 0.03);
}

/* Section icon tile (shared overview + modal) */
.review-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: none;
    border-radius: 9px;
    background: rgba(0, 122, 255, 0.12);
    color: var(--primary, #007aff);
}

.review-icon-lg {
    width: 34px;
    height: 34px;
    border-radius: 10px;
}

[data-theme="light"] .review-icon {
    background: rgba(0, 122, 255, 0.1);
}

.onboarding-review-row-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.onboarding-review-row-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.65;
}

.onboarding-review-row-value {
    font-size: 0.85rem;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* Description value: wrap and clamp to a few lines, with a Show more toggle */
.onboarding-review-description {
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    overflow: hidden;
}

/* Review description "Show more" opens a modal scoped to the onboarding card
   (absolute, not fixed, because .onboarding-wrapper uses a transform that would
   otherwise trap a fixed-position overlay). */
.review-modal {
    position: absolute;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.review-modal[hidden] {
    display: none;
}

.review-modal-backdrop {
    position: absolute;
    inset: 0;
    background: transparent;
}

.review-modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 460px;
    max-height: 75%;
    background: var(--background-panel);
    border: 1px solid var(--border-color-dark);
    border-radius: 16px;
    box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.02) inset;
    overflow: hidden;
    animation: review-modal-pop 0.18s ease-out;
}

@keyframes review-modal-pop {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.review-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 0.9rem 0.85rem 1.1rem;
    border-bottom: 1px solid var(--border-color-dark);
}

.review-modal-heading {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
}

.review-modal-icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 14%, transparent);
}

/* Strong selector so the global .welcome-left h2 margins (the modal title is an
   <h2> inside .welcome-left) don't break the header's vertical alignment. */
.review-modal-header h2.review-modal-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 650;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--text-primary-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.review-modal-close {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 9px;
    background: transparent;
    color: var(--text-secondary-dark);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.review-modal-close:hover {
    background: rgba(128, 128, 128, 0.16);
    color: var(--text-primary-dark);
    transform: rotate(90deg);
}

.review-modal-close:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.review-modal-body {
    padding: 1.1rem 1.25rem 1.35rem;
    overflow-y: auto;
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--text-secondary-dark);
    white-space: pre-wrap;
}

.onboarding-review-more {
    align-self: flex-start;
    margin-top: 4px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--primary);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
}

.onboarding-review-more:hover {
    text-decoration: underline;
}

/* Count badge next to a section label/title */
.review-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: rgba(0, 122, 255, 0.16);
    color: var(--primary, #007aff);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0;
}

/* Text pill next to a section label (e.g. "Procurement of goods") */
.review-pill {
    display: inline-flex;
    align-items: center;
    height: 18px;
    padding: 0 8px;
    border-radius: 999px;
    background: rgba(0, 122, 255, 0.16);
    color: var(--primary, #007aff);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
}

/* Pencil edit icon (overview rows) */
.onboarding-review-edit-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex: none;
    border-radius: 8px;
    color: var(--text-secondary-dark);
    opacity: 0.75;
    transition: all 0.15s ease;
}

.onboarding-review-edit-icon:hover {
    opacity: 1;
    color: var(--primary, #007aff);
    background: rgba(0, 122, 255, 0.1);
}

.onboarding-review-flags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
}

.onboarding-review-flag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 0.72rem;
    background: rgba(52, 199, 89, 0.13);
    border: 1px solid rgba(52, 199, 89, 0.28);
    color: #4cd167;
}

[data-theme="light"] .onboarding-review-flag {
    background: rgba(40, 167, 69, 0.1);
    border-color: rgba(40, 167, 69, 0.28);
    color: #1d8a37;
}

.onboarding-review-flag svg {
    flex: none;
}

/* AI Smart Fill Button */
.button-ai-fill {
    background: transparent;
    color: var(--text-secondary-dark);
    border: 1px solid var(--border-color-dark);
    border-radius: 20px;
    padding: 5px 12px;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
    white-space: nowrap;
    letter-spacing: 0.02em;
    min-width: 122px;
    justify-content: center;
}

.button-ai-fill:hover {
    color: var(--primary-button);
    border-color: var(--primary-button);
    background: color-mix(in srgb, var(--primary) 8%, transparent);
}

.button-ai-fill svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.ai-fill-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.ai-fill-row .help-text {
    margin: 0;
    flex: 1;
}

.ai-drafted-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--primary-button);
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
}

.ai-drafted-badge[hidden] {
    display: none;
}

.ai-drafted-badge svg {
    flex-shrink: 0;
}

.button-ai-fill.htmx-request {
    opacity: 0.6;
    cursor: wait;
}

/* AI Smart Fill loading spinner */
.button-ai-fill .ai-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-radius: 50%;
    border-top-color: transparent;
    animation: spin 0.8s linear infinite;
}

.button-ai-fill:disabled {
    opacity: 0.7;
    cursor: wait;
}

/* AI Smart Fill success state */
.button-ai-fill.ai-fill-success {
    color: var(--success-text, #28a745);
    background: rgba(40, 167, 69, 0.08);
}

/* Heading with button layout for AI Smart Fill */
.heading-with-button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    gap: 1rem;
}

.heading-with-button h1 {
    margin: 0;
    flex: 1;
}

.heading-with-button .button-ai-fill {
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .heading-with-button {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    .heading-with-button .button-ai-fill {
        align-self: flex-end;
    }
}

/* Hidden element for HTMX response targets */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* =========================================================
   AI profile prefill panel (welcome step)
   State-driven: .is-idle / .is-analysing / .is-complete / .is-hint
   Accent color is themed via --ai-accent / --ai-accent-soft.
   ========================================================= */
.ai-prefill-panel {
    --ai-accent: var(--primary-button);
    --ai-accent-soft: color-mix(in srgb, var(--primary) 10%, transparent);
    position: relative;
    margin: 0.6rem 0 0.2rem;
    padding: 0.7rem 0.9rem 0.75rem;
    border: 1px solid var(--border-color-dark);
    border-radius: 14px;
    background: linear-gradient(180deg, var(--ai-accent-soft), transparent 72%);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    animation: ai-prefill-in 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    transition: border-color 0.3s ease, background 0.3s ease;
}

.ai-prefill-panel[hidden] {
    display: none;
}

.ai-prefill-panel.is-complete {
    --ai-accent: var(--success-text, #28a745);
    --ai-accent-soft: rgba(40, 167, 69, 0.12);
    border-color: rgba(40, 167, 69, 0.40);
}

.ai-prefill-panel.is-hint {
    --ai-accent: var(--text-secondary-dark);
    --ai-accent-soft: rgba(150, 150, 150, 0.08);
}

@keyframes ai-prefill-in {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- Header --- */
.ai-prefill-header {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text-primary, #fff);
}

/* Icon badge (chip) — one of spinner / check / sparkle shows at a time */
.ai-prefill-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 9px;
    color: var(--ai-accent);
    background: var(--ai-accent-soft);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ai-accent) 22%, transparent);
    transition: color 0.3s ease, background 0.3s ease;
}

.ai-prefill-panel.is-complete .ai-prefill-badge {
    animation: ai-prefill-pop 0.34s cubic-bezier(0.16, 1, 0.3, 1);
}

.ai-prefill-spinner.ai-spinner {
    display: none;
    width: 15px;
    height: 15px;
    border: 2px solid currentColor;
    border-radius: 50%;
    border-top-color: transparent;
    animation: spin 0.8s linear infinite;
}

.ai-prefill-check,
.ai-prefill-icon {
    display: none;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

.ai-prefill-panel.is-analysing .ai-prefill-spinner { display: inline-block; }
.ai-prefill-panel.is-complete .ai-prefill-check { display: inline-flex; }
.ai-prefill-panel.is-idle .ai-prefill-icon,
.ai-prefill-panel.is-hint .ai-prefill-icon { display: inline-flex; }

/* --- Supporting copy + CTA (idle preview only) --- */
.ai-prefill-desc {
    margin: 0.4rem 0 0;
    font-size: 0.76rem;
    line-height: 1.45;
    color: var(--text-secondary-dark);
}

.ai-prefill-panel:not(.is-idle) .ai-prefill-desc {
    display: none;
}

/* Primary trigger button (idle state) — solid accent so it clearly reads as the action */
.ai-prefill-panel.is-idle .ai-prefill-action {
    display: inline-flex;
}

.ai-prefill-action {
    position: absolute;
    top: 0.85rem;
    right: 1.05rem;
    margin-top: 0;
    border-radius: 8px;
    padding: 5px 10px;
    min-width: 0;
    font-size: 0.72rem;
    font-weight: 600;
    color: #fff;
    background: var(--ai-accent);
    border: 1px solid var(--ai-accent);
}

.ai-prefill-action:hover {
    color: #fff;
    background: color-mix(in srgb, var(--ai-accent) 88%, #000);
    border-color: color-mix(in srgb, var(--ai-accent) 88%, #000);
}

.ai-prefill-action svg {
    width: 12px;
    height: 12px;
}

.ai-prefill-panel:not(.is-idle) .ai-prefill-action {
    display: none;
}

/* --- Progress bar + cycling phase message (analysing / complete) --- */
.ai-prefill-progress {
    margin-top: 0.6rem;
    height: 6px;
    border-radius: 999px;
    background: var(--ai-accent-soft);
    overflow: hidden;
}

.ai-prefill-progress-fill {
    width: 0;
    height: 100%;
    border-radius: 999px;
    background: var(--ai-accent);
    transition: width 0.4s ease;
}

.ai-prefill-phase {
    margin: 0.45rem 0 0;
    font-size: 0.74rem;
    color: var(--text-secondary-dark);
    /* Reserve a line so cycling text doesn't shift the layout */
    min-height: 1.05em;
}

/* The bar + phase only make sense while analysing/complete */
.ai-prefill-panel.is-idle .ai-prefill-progress,
.ai-prefill-panel.is-idle .ai-prefill-phase,
.ai-prefill-panel.is-hint .ai-prefill-progress,
.ai-prefill-panel.is-hint .ai-prefill-phase {
    display: none;
}

.ai-prefill-panel.is-complete .ai-prefill-phase {
    display: none;
}

@keyframes ai-prefill-pop {
    0% { transform: scale(0.6); }
    60% { transform: scale(1.12); }
    100% { transform: scale(1); }
}

/* AI suggestion notice */
.ai-suggestion-notice {
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.3);
}
/* Analytics Header with Period Control */
.settings-container:has(#analytics-content) .column-header-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    padding-bottom: 20px;
    margin-bottom: 0px;
}

/* Reduce excess bottom spacing in analytics content: let the scroll
   wrapper fill the column exactly instead of reserving a fixed 100px,
   which left a visible gap below the content. */
.settings-container:has(#analytics-content) .settings-content-wrapper {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    padding-bottom: 10px;
}

/* Breathing room under the last element of each analytics tab when fully
   scrolled (the date-range data span is hidden, so :last-child is the last
   visible section/panel). */
.settings-container:has(#analytics-content) .settings-content-wrapper > :last-child {
    margin-bottom: 50px;
}

.analytics-period-control {
    flex-shrink: 0;
}

.period-toggle-group {
    display: flex;
    gap: 4px;
    background: var(--surface);
    border: 1px solid var(--border-color-dark);
    border-radius: var(--radius);
    padding: 4px;
}

.period-toggle {
    padding: 6px 12px;
    border: none;
    background: transparent;
    color: var(--text-secondary-dark);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    border-radius: calc(var(--radius) - 2px);
    transition: all var(--transition-duration) var(--transition-easing);
}

.period-toggle:hover {
    color: var(--text-primary-dark);
    background: var(--hover-bg);
}

.period-toggle.active {
    background: rgba(230, 230, 230, 0.9);
    color: #1A1D21;
}

[data-theme="light"] .period-toggle-group {
    background: var(--light-surface);
    border-color: var(--light-border);
}

[data-theme="light"] .period-toggle {
    color: var(--light-text-secondary);
}

[data-theme="light"] .period-toggle:hover {
    color: var(--light-text-primary);
    background: var(--light-hover);
}

[data-theme="light"] .period-toggle.active {
    background: #2A2D32;
    color: #FFFFFF;
}

/* Analytics Section Layout */
.analytics-section {
    margin-bottom: var(--spacing-xl);
}

.analytics-section:last-child {
    margin-bottom: 0;
}

/* Analytics Chart Entry Animation (session-based) */
@keyframes chartFadeIn {
    from {
        opacity: 0;
        transform: scale(0.97);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Chart marks (bars, arcs, lines, radar) now animate via per-element D3
   transitions in bi-charts.js, so the old blunt whole-SVG fade is gone. The
   sparkline fade below stays because sparklines are a single static path. */

/* Sparklines in metric cards */
.analytics-animate .metric-card-sparkline svg {
    animation: chartFadeIn 0.4s ease-out forwards;
    opacity: 0;
}

.analytics-animate .analytics-metric-card:nth-child(1) .metric-card-sparkline svg { animation-delay: 200ms; }
.analytics-animate .analytics-metric-card:nth-child(2) .metric-card-sparkline svg { animation-delay: 250ms; }
.analytics-animate .analytics-metric-card:nth-child(3) .metric-card-sparkline svg { animation-delay: 300ms; }

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    .analytics-animate .analytics-chart-area svg,
    .analytics-animate .analytics-chart-panel svg,
    .analytics-animate .metric-card-sparkline svg {
        animation: none;
        opacity: 1;
    }
}

/* Section Header */
.analytics-section-header {
    margin-bottom: var(--spacing-md);
}

.analytics-section-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary-dark);
    letter-spacing: -0.01em;
    margin: 0;
}

.analytics-section-subtitle {
    font-size: 0.8rem;
    color: var(--text-secondary-dark);
    margin: 0;
    padding-bottom: 4px;
}

/* Analytics Metric Cards Row (Performance Summary).
   auto-fit so a 3-card row never leaves a permanent empty 4th column, while
   still wrapping responsively without explicit breakpoints. */
.analytics-metrics-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--spacing-md);
}

/* 2x2 Grid variant for side-by-side layouts */
.analytics-metrics-row-2x2 {
    grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 600px) {
    .analytics-metrics-row-2x2 {
        grid-template-columns: 1fr;
    }
}

/* Funnel Sankey Panel */
.analytics-funnel-panel {
    margin-top: var(--spacing-md);
    padding: var(--spacing-lg);
    background: transparent;
    border: none;
}

/* Individual Metric Card */
.analytics-metric-card {
    background: transparent;
    border: 1px solid var(--border-color-dark);
    border-radius: var(--radius);
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.metric-card-label {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary-dark);
    margin: 0;
}

.metric-card-main {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
}

.metric-card-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary-dark);
    line-height: 1;
    letter-spacing: -0.02em;
}

.metric-card-sparkline {
    flex-shrink: 0;
    height: 32px;
    width: 72px;
}

.metric-card-change {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    color: var(--text-secondary-dark);
}

.metric-card-change.positive svg {
    stroke: #52D89E;
}

.metric-card-change.positive .metric-change-pct {
    color: #52D89E;
}

.metric-card-change.negative svg {
    stroke: #EE7B69;
}

.metric-card-change.negative .metric-change-pct {
    color: #EE7B69;
}

.metric-change-period {
    color: var(--text-secondary-dark);
}

.metric-card-change-muted {
    color: var(--text-secondary-dark);
    font-size: 0.75rem;
}

/* Analytics Chart Panel */
.analytics-chart-panel {
    background: transparent;
    border: 1px solid var(--border-color-dark);
    border-radius: var(--radius);
    padding: 24px 28px;
}

.analytics-chart-area {
    min-height: 180px;
    width: 100%;
}

/* The deadline-density dot matrix auto-sizes its SVG height to the data
   (fitHeight), so the generic 180px floor would leave dead space below it. */
#chart-deadline-density {
    min-height: 0;
}

/* Micro-title inside a chart panel (e.g. periodicity for the opportunities
   chart) — sits top-left, mirroring the uppercase microtitle treatment. */
.analytics-chart-microtitle {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary-dark);
    margin: 0 0 var(--spacing-sm) 0;
}

[data-theme="light"] .analytics-chart-microtitle {
    color: var(--light-text-secondary);
}

.analytics-chart-area svg,
.analytics-chart-panel svg {
    opacity: 0.95;
}

.analytics-chart-area-large {
    min-height: 240px;
}

/* YouTube Studio "top content" ranked-rows list */
.yt-rank-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    padding-top: 4px;
}

.yt-rank-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.yt-rank-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.yt-rank-label {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-primary-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.yt-rank-value {
    flex-shrink: 0;
    font-size: 0.78rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary-dark);
}

.yt-rank-track {
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.yt-rank-bar {
    height: 100%;
    border-radius: 999px;
    width: 0;
    transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-theme="light"] .yt-rank-label {
    color: var(--light-text-primary);
}

[data-theme="light"] .yt-rank-value {
    color: var(--light-text-secondary);
}

[data-theme="light"] .yt-rank-track {
    background: rgba(0, 0, 0, 0.06);
}

@media (prefers-reduced-motion: reduce) {
    .yt-rank-bar {
        transition: none;
    }
}

/* The ranked-rows footnote aligns flush-left (no axis gutter to clear). */
.analytics-chart-area:has(.yt-rank-list) .chart-footnote,
#chart-focus-areas .chart-footnote {
    padding-left: 0;
}

/* Chart Footnote */
.chart-footnote {
    margin: var(--spacing-sm) 0 0 0;
    padding-left: 160px;
    font-size: 0.75rem;
    color: var(--text-secondary-dark);
    font-style: italic;
}

[data-theme="light"] .chart-footnote {
    color: var(--light-text-secondary);
}

/* Chart Controls */
.chart-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-md);
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.toggle-group {
    display: flex;
    gap: 4px;
    background: var(--background-panel);
    border-radius: var(--radius);
    padding: 4px;
}

.chart-toggle {
    padding: 6px 12px;
    border: none;
    background: transparent;
    color: var(--text-secondary-dark);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    border-radius: calc(var(--radius) - 2px);
    transition: all var(--transition-duration) var(--transition-easing);
}

.chart-toggle:hover {
    color: var(--text-primary-dark);
}

.chart-toggle.active {
    background: rgba(230, 230, 230, 0.9);
    color: #1A1D21;
}

/* Analytics Chart Toggle Group (inline within chart panel) */
.analytics-chart-panel {
    position: relative;
}

.chart-toggle-group {
    position: absolute;
    top: var(--spacing-sm);
    right: var(--spacing-sm);
    display: flex;
    gap: 2px;
    background: transparent;
    border: 1px solid var(--border-color-dark);
    border-radius: var(--radius);
    padding: 3px;
    z-index: 10;
}

.chart-toggle {
    padding: 4px 10px;
    border: none;
    background: transparent;
    color: var(--text-secondary-dark);
    font-size: 0.7rem;
    font-weight: 500;
    cursor: pointer;
    border-radius: calc(var(--radius) - 2px);
    transition: all var(--transition-duration) var(--transition-easing);
}

.chart-toggle:hover {
    color: var(--text-primary-dark);
    background: var(--hover-bg);
}

.chart-toggle.active {
    background: rgba(230, 230, 230, 0.9);
    color: #1A1D21;
}

.filter-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.filter-dot.high {
    background: var(--accent-green);
}

.filter-dot.moderate {
    background: var(--primary);
}

.filter-dot.low {
    background: var(--accent-amber);
}

/* Two Column Layout for Charts */
.analytics-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
    align-items: stretch;
}

@media (max-width: 900px) {
    .analytics-two-col {
        grid-template-columns: 1fr;
    }
}

/* Panel title (inside chart-panel, used in Market Fit) — microtitle treatment
   so it reads as a sub-level beneath the section title. */
.analytics-panel-title {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary-dark);
    margin: 0 0 var(--spacing-md) 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.analytics-panel-title svg {
    flex-shrink: 0;
}

[data-theme="light"] .analytics-panel-title {
    color: var(--light-text-secondary);
}

/* Compact panel variant — tighter fit for lists inside two-col */
.analytics-compact-panel {
    padding: 20px 24px;
}

.analytics-chart-panel-spaced {
    margin-top: var(--spacing-md);
}

.analytics-col {
    display: flex;
    flex-direction: column;
}

.analytics-col .analytics-section-header {
    margin-bottom: var(--spacing-sm);
}

.analytics-col .analytics-metrics-row-2x2,
.analytics-col .analytics-chart-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.analytics-col .analytics-section-title {
    font-size: 0.85rem;
}

/* Analytics Chart Area Centered */
.analytics-chart-area-centered {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: 320px;
    width: 100%;
}

/* Compact panels render smaller charts (e.g. concentration donuts at ~200px);
   drop the tall min-height so they don't sit in a sea of dead space. */
.analytics-compact-panel .analytics-chart-area-centered {
    min-height: 240px;
}

/* Analytics Empty State */
.analytics-empty-state {
    padding: var(--spacing-lg);
    text-align: center;
    color: var(--text-secondary-dark);
    font-size: 0.85rem;
}

/* Donut + HTML legend layout (Concentration Risk) — HTML legend avoids the
   SVG legend's 12-char truncation so full client/source names stay readable. */
.analytics-donut-with-legend {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    flex-wrap: wrap;
}

.analytics-donut-chart {
    width: 200px;
    flex-shrink: 0;
}

.analytics-legend-list {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
    min-width: 160px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.analytics-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: var(--text-primary-dark);
}

.analytics-legend-swatch {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    flex-shrink: 0;
}

.analytics-legend-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.analytics-legend-pct {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--text-secondary-dark);
}

/* Share bar (100% stacked horizontal bar) + roomy legend rows beneath it */
.analytics-share-bar {
    width: 100%;
    margin-bottom: var(--spacing-lg);
}

.analytics-share-bar svg {
    display: block;
    width: 100%;
}

.analytics-legend-list-rows {
    gap: 0;
}

.analytics-legend-list-rows .analytics-legend-item {
    padding: 10px 0;
    font-size: 0.9rem;
    border-bottom: 1px solid var(--divider-color-subtle, rgba(255, 255, 255, 0.06));
}

.analytics-legend-list-rows .analytics-legend-item:last-child {
    border-bottom: none;
}

/* Two-column legend for wide (full-width) panels like Win Zones. */
.analytics-legend-list-rows.analytics-legend-list-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--spacing-xl);
}

/* Keep the underline on the final item too — in two columns the lone last cell
   would otherwise sit borderless next to a bordered bottom-left item. */
.analytics-legend-list-rows.analytics-legend-list-2col .analytics-legend-item:last-child {
    border-bottom: 1px solid var(--divider-color-subtle, rgba(255, 255, 255, 0.06));
}

[data-theme="light"] .analytics-legend-list-rows.analytics-legend-list-2col .analytics-legend-item:last-child {
    border-bottom-color: var(--light-border);
}

@media (max-width: 600px) {
    .analytics-legend-list-rows.analytics-legend-list-2col {
        grid-template-columns: 1fr;
    }
}

.analytics-legend-list-rows .analytics-legend-pct {
    font-size: 0.9rem;
    color: var(--text-primary-dark);
}

[data-theme="light"] .analytics-legend-list-rows .analytics-legend-item {
    border-bottom-color: var(--light-border);
}

[data-theme="light"] .analytics-legend-list-rows .analytics-legend-pct {
    color: var(--light-text-primary);
}

[data-theme="light"] .analytics-legend-item {
    color: var(--light-text-primary);
}

[data-theme="light"] .analytics-legend-pct {
    color: var(--light-text-secondary);
}

/* Analytics Alignment Lists (Market Fit) */
.analytics-alignment-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.analytics-alignment-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    font-size: 0.82rem;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 6px;
    margin-bottom: 2px;
    transition: background 0.15s ease;
}

.analytics-alignment-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.analytics-alignment-item:last-child {
    margin-bottom: 0;
}

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

.analytics-alignment-stats {
    display: flex;
    align-items: center;
    gap: 10px;
}

.analytics-alignment-count {
    background: rgba(255, 255, 255, 0.08);
    padding: 3px 8px;
    border-radius: 4px;
    font-weight: 500;
    color: var(--text-primary-dark);
    font-size: 0.7rem;
}

.analytics-alignment-avg {
    color: var(--text-secondary-dark);
    font-size: 0.7rem;
    min-width: 55px;
    text-align: right;
}

.analytics-alignment-empty {
    color: var(--text-secondary-dark);
    font-size: 0.8rem;
    font-style: italic;
    margin: 0;
    padding: var(--spacing-sm) 0;
}

/* Analytics Data Table */
.analytics-data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
}

/* Numeric tables: first column is the label, every following column is a
   figure/badge — right-align them so digits line up for vertical scanning. */
.analytics-numeric-table th:not(:first-child),
.analytics-numeric-table td:not(:first-child) {
    text-align: right;
}

.analytics-data-table th,
.analytics-data-table td {
    padding: var(--spacing-sm) var(--spacing-md);
    text-align: left;
    border-bottom: 1px solid var(--border-color-dark);
}

.analytics-data-table th:first-child,
.analytics-data-table td:first-child {
    padding-left: 0;
}

/* Keep the Source column compact so the Opportunity title column gets the
   reclaimed width. Long source names truncate with an ellipsis (full value
   stays available via the cell's title tooltip). */
.analytics-data-table .col-source {
    width: 130px;
    max-width: 130px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.analytics-data-table th:last-child,
.analytics-data-table td:last-child {
    padding-right: 0;
}

.analytics-data-table th {
    color: var(--text-secondary-dark);
    font-weight: 500;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.analytics-data-table .th-abbr {
    display: none;
}

.analytics-data-table td {
    color: var(--text-primary-dark);
}

.analytics-data-table .cell-primary {
    font-weight: 500;
}

.analytics-data-table .cell-high {
    color: var(--accent-green);
}

.analytics-data-table .cell-moderate {
    color: var(--primary);
}

.analytics-data-table .cell-empty {
    color: var(--text-secondary-dark);
    font-style: italic;
    text-align: center;
}

.analytics-data-table .cell-moderate {
    color: var(--primary);
}

/* Analytics Badges */
.analytics-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text-secondary-dark);
}

.analytics-badge.badge-danger {
    background: rgba(238, 123, 105, 0.22);
    color: #F6A99B;
}

.analytics-badge.badge-warning {
    background: rgba(244, 170, 79, 0.22);
    color: #FFCB73;
}

.analytics-badge.badge-info {
    background: rgba(90, 189, 238, 0.22);
    color: #8FD0F4;
}

.analytics-badge.badge-high {
    background: rgba(11, 210, 134, 0.22);
    color: #74E3B2;
}

.analytics-badge.badge-moderate {
    background: rgba(90, 189, 238, 0.22);
    color: #8FD0F4;
}

.analytics-badge.badge-default {
    background: var(--surface);
    color: var(--text-secondary-dark);
}

/* Light mode: brighter text loses contrast on white tints, so use deeper,
   more saturated foregrounds for readable badges */
[data-theme="light"] .analytics-badge.badge-danger {
    background: rgba(238, 123, 105, 0.16);
    color: #C0392B;
}

[data-theme="light"] .analytics-badge.badge-warning {
    background: rgba(244, 170, 79, 0.18);
    color: #B7791F;
}

[data-theme="light"] .analytics-badge.badge-info,
[data-theme="light"] .analytics-badge.badge-moderate {
    background: rgba(90, 189, 238, 0.16);
    color: #1F7CB0;
}

[data-theme="light"] .analytics-badge.badge-high {
    background: rgba(11, 210, 134, 0.16);
    color: #1B8A5A;
}

/* Urgency band chips (Radar tab) */
.analytics-urgency-row {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.analytics-urgency-chip {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    border-radius: var(--radius-control);
    border: 1px solid var(--border-color-dark);
    background: transparent;
}

.analytics-urgency-chip .urgency-count {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary-dark);
}

.analytics-urgency-chip .urgency-label {
    font-size: 0.75rem;
    color: var(--text-secondary-dark);
}

.analytics-urgency-chip.urgency-critical .urgency-count { color: #EE7B69; }
.analytics-urgency-chip.urgency-urgent .urgency-count { color: #F5B94D; }
.analytics-urgency-chip.urgency-upcoming .urgency-count { color: #52B5E8; }
.analytics-urgency-chip.urgency-future .urgency-count { color: #52D89E; }

[data-theme="light"] .analytics-urgency-chip {
    border-color: var(--light-border);
}

/* Source freshness indicator (Radar tab Source Yield) */
.source-freshness-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
}

.source-freshness-dot.freshness-fresh { background: #52D89E; }
.source-freshness-dot.freshness-aging { background: #F5B94D; }
.source-freshness-dot.freshness-stale { background: #EE7B69; }
.source-freshness-dot.freshness-unknown { background: var(--text-secondary-dark); opacity: 0.4; }

/* Analytics callout (e.g. concentration risk warning) */
.analytics-callout {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.875rem;
    margin-bottom: 1rem;
    border-radius: var(--radius-control);
    border: 1px solid rgba(245, 185, 77, 0.35);
    background: rgba(245, 185, 77, 0.08);
    color: #F5B94D;
    font-size: 0.8125rem;
}

.analytics-callout svg {
    flex-shrink: 0;
}

[data-theme="light"] .analytics-callout {
    color: #B07D1F;
}

/* Metric Card Value Colors */
.metric-card-value.value-high {
    color: var(--accent-green);
}

.metric-card-value.value-moderate {
    color: var(--primary);
}

.metric-card-value.value-low {
    color: var(--accent-amber);
}

/* Light theme adjustments */
[data-theme="light"] .analytics-metric-card {
    background: transparent;
    border-color: var(--light-border);
}

[data-theme="light"] .metric-card-label {
    color: var(--light-text-primary);
}

[data-theme="light"] .metric-card-value {
    color: var(--light-text-primary);
}

[data-theme="light"] .metric-card-change {
    color: var(--light-text-secondary);
}

[data-theme="light"] .metric-card-change-muted {
    color: var(--light-text-secondary);
}

[data-theme="light"] .analytics-chart-panel {
    background: transparent;
    border-color: var(--light-border);
}

[data-theme="light"] .analytics-section-title {
    color: var(--light-text-primary);
}

[data-theme="light"] .analytics-section-subtitle {
    color: var(--light-text-secondary);
}

[data-theme="light"] .metric-card-label {
    color: var(--light-text-secondary);
}

[data-theme="light"] .metric-card-value {
    color: var(--light-text-primary);
}

[data-theme="light"] .toggle-group {
    background: var(--light-surface);
}

[data-theme="light"] .chart-toggle {
    color: var(--light-text-secondary);
}

[data-theme="light"] .chart-toggle:hover {
    color: var(--light-text-primary);
}

[data-theme="light"] .chart-toggle-group {
    background: transparent;
    border-color: var(--light-border);
}

[data-theme="light"] .chart-toggle {
    color: var(--light-text-secondary);
}

[data-theme="light"] .chart-toggle:hover {
    color: var(--light-text-primary);
    background: var(--light-hover);
}

[data-theme="light"] .chart-toggle.active {
    background: #2A2D32;
    color: #FFFFFF;
}

/* Light theme - Analytics Alignment */
[data-theme="light"] .analytics-alignment-name {
    color: var(--light-text-primary);
}

[data-theme="light"] .analytics-alignment-stats {
    color: var(--light-text-secondary);
}

/* Light theme - Analytics Data Table */
[data-theme="light"] .analytics-data-table th {
    color: var(--light-text-secondary);
    border-color: var(--light-border);
}

[data-theme="light"] .analytics-data-table td {
    color: var(--light-text-primary);
    border-color: var(--light-border);
}

/* Light theme - Analytics Empty State */
[data-theme="light"] .analytics-empty-state {
    color: var(--light-text-secondary);
}

/* ===========================================
   Fit Profile Table
   =========================================== */

.analytics-fit-profile-table td:first-child {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.analytics-fit-desc {
    font-size: 0.7rem;
    color: var(--text-secondary-dark);
    line-height: 1.3;
}

[data-theme="light"] .analytics-fit-desc {
    color: var(--light-text-secondary);
}

.analytics-fit-score {
    font-weight: 600;
    font-size: 0.85rem;
}

.analytics-fit-score.score-strong { color: #52D89E; }
.analytics-fit-score.score-moderate { color: #52B5E8; }
.analytics-fit-score.score-weak { color: #F5B94D; }

/* ===========================================
   Analytics Date Range
   =========================================== */

.analytics-date-range {
    font-size: 0.75rem;
    color: var(--text-secondary-dark);
    margin: 0;
    margin-left: auto;
    margin-right: var(--spacing-sm);
}

[data-theme="light"] .analytics-date-range {
    color: var(--light-text-secondary);
}

/* ===========================================
   HTMX Loading Indicator
   =========================================== */

.analytics-loading {
    height: 2px;
    width: 100%;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.analytics-loading.htmx-request {
    opacity: 1;
}

.analytics-loading-bar {
    height: 100%;
    width: 40%;
    background: var(--primary);
    border-radius: 1px;
    animation: analyticsLoadingSlide 1s ease-in-out infinite;
}

@keyframes analyticsLoadingSlide {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(350%); }
}

/* Tenders page: top progress bar for selection / search HTMX requests.
   Fixed under the nav so it survives the overview/analysis OOB swaps. */
.tender-progress {
    position: fixed;
    top: var(--nav-height);
    left: 0;
    right: 0;
    height: 2px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    z-index: 50;
    transition: opacity 0.2s ease;
}

.tender-progress.htmx-request {
    opacity: 1;
}

.tender-progress__bar {
    height: 100%;
    width: 40%;
    background: var(--primary);
    border-radius: 1px;
    animation: analyticsLoadingSlide 1s ease-in-out infinite;
}

/* ===========================================
   Metric Card Text Value (for non-numeric values)
   =========================================== */

.metric-card-value-text {
    font-size: 1.5rem;
}

.metric-card-label svg {
    vertical-align: -1px;
    margin-right: 2px;
}

/* ===========================================
   BD Performance: Progress Bars
   =========================================== */

.analytics-progress-cell {
    display: flex;
    align-items: center;
    gap: 8px;
}

.analytics-progress-bar {
    flex: 1;
    height: 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
    overflow: hidden;
    min-width: 60px;
}

.analytics-progress-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.analytics-progress-high {
    background: #52D89E;
}

.analytics-progress-moderate {
    background: #52B5E8;
}

.analytics-progress-low {
    background: #F5B94D;
}

.analytics-progress-value {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-primary-dark);
    min-width: 24px;
    text-align: right;
}

[data-theme="light"] .analytics-progress-bar {
    background: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .analytics-progress-value {
    color: var(--light-text-primary);
}

/* ===========================================
   BD Performance: Table Link Style
   =========================================== */

.analytics-table-link {
    color: var(--text-primary-dark);
    text-decoration: none;
    transition: color 0.15s ease;
}

.analytics-table-link:hover {
    color: var(--primary);
}

[data-theme="light"] .analytics-table-link {
    color: var(--light-text-primary);
}

[data-theme="light"] .analytics-table-link:hover {
    color: var(--primary);
}

/* ===========================================
   Alignment item hover highlight
   =========================================== */

[data-theme="light"] .analytics-alignment-item {
    background: rgba(0, 0, 0, 0.02);
}

[data-theme="light"] .analytics-alignment-item:hover {
    background: rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .analytics-alignment-count {
    background: rgba(0, 0, 0, 0.06);
    color: var(--light-text-primary);
}

[data-theme="light"] .analytics-alignment-avg {
    color: var(--light-text-secondary);
}

/* ===========================================
   Analytics Mobile Responsive
   =========================================== */

@media (max-width: 768px) {
    /* Override analytics 2-column grid to single column */
    .settings-container:has(#analytics-content) {
        grid-template-columns: 1fr;
        height: auto;
        overflow: visible;
        padding: 0;
    }

    /* Hide sidebar column header ("Analytics" h4) on mobile */
    .settings-container:has(#analytics-content) .settings-nav-column .column-header {
        display: none !important;
    }

    .settings-container:has(#analytics-content) .settings-nav-column .column-section:first-child {
        display: none;
    }

    /* Nav column: transparent background, no chrome */
    .settings-container:has(#analytics-content) .settings-nav-column {
        padding: 0.5rem 0 0;
    }

    /* Content column: restore panel background, proper padding and radius */
    .settings-container:has(#analytics-content) .column.settings-content {
        background: var(--background-panel) !important;
        border-radius: 12px 12px 0 0;
        padding: 1rem;
        min-height: auto;
        overflow-x: hidden;
    }

    .settings-container:has(#analytics-content) .settings-content-wrapper {
        overflow-x: hidden;
        overflow-y: visible;
        height: auto;
        padding: 0;
    }

    /* Header: title left, period toggles right, single row */
    .settings-container:has(#analytics-content) .column-header-wrapper {
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        padding: 0.5rem 0 20px;
        border-bottom: 1px solid var(--border-color-dark);
        margin-bottom: 1rem;
    }

    /* Override the global .settings-container .column-header hide for analytics content header */
    .settings-container:has(#analytics-content) .settings-content .column-header {
        display: block !important;
        flex: 1;
        min-width: 0;
        font-size: 1.1rem;
        font-weight: 600;
        margin: 0;
    }

    /* Hide date range on mobile - it overlaps with section titles */
    .settings-container:has(#analytics-content) .analytics-date-range {
        display: none;
    }

    .settings-container:has(#analytics-content) .analytics-period-control {
        flex-shrink: 0;
    }

    /* Period toggles: smaller on mobile */
    .settings-container:has(#analytics-content) .period-toggle {
        padding: 4px 10px;
        font-size: 0.7rem;
    }

    /* Metric cards: 2-up on tablet-ish, 1-up on small */
    .settings-container:has(#analytics-content) .analytics-metrics-row {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-sm);
    }

    /* Chart panels: reduce padding, contain overflow */
    .settings-container:has(#analytics-content) .analytics-chart-panel {
        padding: 12px;
        max-width: 100%;
        box-sizing: border-box;
        overflow: hidden;
    }

    /* Charts: prevent overflow */
    .settings-container:has(#analytics-content) .analytics-chart-area {
        overflow: hidden;
        max-width: 100%;
    }

    .settings-container:has(#analytics-content) .analytics-chart-area svg {
        max-width: 100%;
        height: auto;
    }

    /* Data tables: fit within container */
    .settings-container:has(#analytics-content) .analytics-chart-panel:has(.analytics-data-table) {
        overflow: hidden;
    }

    .settings-container:has(#analytics-content) .analytics-data-table {
        font-size: 0.7rem;
        min-width: 0;
        width: 100%;
        table-layout: fixed;
    }

    .settings-container:has(#analytics-content) .analytics-data-table .th-full {
        display: none;
    }

    .settings-container:has(#analytics-content) .analytics-data-table .th-abbr {
        display: inline;
    }

    .settings-container:has(#analytics-content) .analytics-data-table th,
    .settings-container:has(#analytics-content) .analytics-data-table td {
        padding: 4px 4px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .settings-container:has(#analytics-content) .analytics-data-table th:first-child,
    .settings-container:has(#analytics-content) .analytics-data-table td:first-child {
        width: 40%;
        white-space: normal;
        word-wrap: break-word;
    }

    .settings-container:has(#analytics-content) .analytics-data-table th:not(:first-child),
    .settings-container:has(#analytics-content) .analytics-data-table td:not(:first-child) {
        width: 15%;
        text-align: center;
        white-space: nowrap;
    }

    .settings-container:has(#analytics-content) .analytics-fit-profile-table th:nth-child(2),
    .settings-container:has(#analytics-content) .analytics-fit-profile-table td:nth-child(2),
    .settings-container:has(#analytics-content) .analytics-fit-profile-table th:nth-child(3),
    .settings-container:has(#analytics-content) .analytics-fit-profile-table td:nth-child(3) {
        white-space: nowrap;
        width: 1%;
    }

    .settings-container:has(#analytics-content) .analytics-fit-profile-table {
        table-layout: auto;
    }

    .settings-container:has(#analytics-content) .analytics-fit-profile-table th:first-child,
    .settings-container:has(#analytics-content) .analytics-fit-profile-table td:first-child {
        width: auto;
    }

    /* Two-column layout: stack on mobile */
    .settings-container:has(#analytics-content) .analytics-two-col {
        grid-template-columns: 1fr;
    }

    /* Section titles: proper sizing */
    .settings-container:has(#analytics-content) .analytics-section-title {
        font-size: 0.85rem;
    }

    .settings-container:has(#analytics-content) .analytics-section-subtitle {
        font-size: 0.75rem;
    }

    /* Section spacing */
    .settings-container:has(#analytics-content) .analytics-section {
        margin-bottom: var(--spacing-lg);
        overflow: hidden;
    }

    /* Chart toggle group: flow inline instead of absolute */
    .settings-container:has(#analytics-content) .chart-toggle-group {
        position: relative;
        top: auto;
        right: auto;
        margin-bottom: var(--spacing-sm);
        justify-content: flex-start;
    }

    /* Light mode: keep panel background */
    [data-theme="light"] .settings-container:has(#analytics-content) .column.settings-content {
        background: var(--light-background, #FFFFFF) !important;
        border: 1px solid var(--light-border);
    }
}

@media (max-width: 480px) {
    /* Single column metric cards on small phones */
    .settings-container:has(#analytics-content) .analytics-metrics-row {
        grid-template-columns: 1fr;
    }

    .settings-container:has(#analytics-content) .analytics-data-table {
        font-size: 0.65rem;
        min-width: 0;
    }

    .settings-container:has(#analytics-content) .analytics-data-table th,
    .settings-container:has(#analytics-content) .analytics-data-table td {
        padding: 3px 2px;
    }

    .settings-container:has(#analytics-content) .period-toggle {
        padding: 4px 8px;
        font-size: 0.65rem;
    }
}

/* Design System Page */
.design-system-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--spacing-xl);
    color: var(--text-primary-dark);
}

.design-system-hero {
    background: var(--background-panel);
    border: 1px solid var(--border-color-dark);
    border-radius: var(--radius);
    padding: var(--spacing-xl);
    box-shadow: var(--shadow-sm);
}

.design-system-eyebrow {
    margin: 0;
    color: var(--accent-blue);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: var(--font-weight-bold);
}

.design-system-hero h1 {
    margin: var(--spacing-sm) 0;
    font-size: clamp(1.6rem, 2.5vw, 2.15rem);
    color: var(--text-primary-dark);
}

.design-system-intro {
    margin: 0;
    max-width: 70ch;
    color: var(--text-secondary-dark);
}

.design-system-meta {
    margin-top: var(--spacing-lg);
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.design-system-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--panel-highlight);
    border: 1px solid var(--border-color-dark);
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 0.8rem;
}

.design-system-meta-item code {
    color: var(--accent-blue);
    font-size: 0.8rem;
}

.design-system-toc {
    margin: var(--spacing-lg) 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
    background: var(--background-panel);
    border: 1px solid var(--border-color-dark);
    border-radius: 999px;
}

.design-system-toc a {
    color: var(--text-primary-dark);
    text-decoration: none;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 0.82rem;
    border: 1px solid transparent;
    transition: all 0.16s ease;
}

.design-system-toc a:hover,
.design-system-toc a:focus {
    background: var(--hover-bg);
    border-color: var(--hover-border);
}

.design-system-section {
    margin-top: var(--spacing-xl);
    background: var(--background-panel);
    border: 1px solid var(--border-color-dark);
    border-radius: var(--radius);
    padding: var(--spacing-xl);
}

.design-system-section-header h2 {
    margin: 0;
    font-size: 1.25rem;
    color: var(--text-primary-dark);
}

.design-system-section-header p {
    margin: var(--spacing-xs) 0 var(--spacing-md) 0;
    color: var(--text-secondary-dark);
}

.design-system-subheading {
    margin: var(--spacing-lg) 0 var(--spacing-sm) 0;
    color: var(--text-primary-dark);
    font-size: 0.95rem;
}

.design-system-principles-grid,
.design-system-token-grid,
.design-system-type-grid,
.design-system-showcase-grid,
.design-system-pattern-grid,
.design-system-rules-grid,
.design-system-snippet-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--spacing-md);
}

.design-system-icon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.design-system-card,
.design-system-token-card,
.design-system-snippet-card,
.design-system-rule-card,
.design-system-icon-card {
    background: var(--surface);
    border: 1px solid var(--border-color-dark);
    border-radius: calc(var(--radius) / 1.6);
    padding: var(--spacing-md);
}

.design-system-card h3,
.design-system-token-card h3,
.design-system-snippet-card h3,
.design-system-rule-card h3 {
    margin: 0 0 var(--spacing-sm) 0;
    color: var(--text-primary-dark);
    font-size: 0.95rem;
}

.design-system-card p,
.design-system-token-card p,
.design-system-rule-card p,
.design-system-icon-card p {
    margin: 0;
    color: var(--text-secondary-dark);
    font-size: 0.86rem;
}

.design-system-icon-swatch {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    border: 1px solid var(--border-color-dark);
    background: var(--panel-highlight);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary-dark);
    margin-bottom: var(--spacing-sm);
}

.design-system-icon-card h4 {
    margin: 0 0 6px 0;
    font-size: 0.86rem;
    color: var(--text-primary-dark);
}

.design-system-token-card code,
.design-system-card code {
    display: inline-block;
    margin-bottom: var(--spacing-xs);
    color: var(--accent-blue);
    font-size: 0.82rem;
}

.design-system-color-swatch {
    width: 100%;
    height: 58px;
    border-radius: 10px;
    margin-bottom: var(--spacing-sm);
    border: 1px solid var(--border-color-dark);
}

.design-system-type-sample {
    margin: var(--spacing-xs) 0;
    font-size: var(--base-font-size);
}

.design-system-type-sample-heading {
    font-size: var(--heading-size);
    line-height: 1.25;
}

.design-system-type-sample-medium {
    font-weight: var(--font-weight-medium);
}

.design-system-type-sample-bold {
    font-weight: var(--font-weight-bold);
}

.design-system-spacing-list {
    display: grid;
    gap: var(--spacing-sm);
}

.design-system-spacing-row {
    display: grid;
    grid-template-columns: minmax(110px, 160px) minmax(140px, 220px) minmax(180px, 1fr);
    align-items: center;
    gap: var(--spacing-sm);
}

.design-system-spacing-meter {
    height: 8px;
    border-radius: 999px;
    background: var(--panel-highlight);
    border: 1px solid var(--border-color-dark);
    overflow: hidden;
}

.design-system-spacing-meter span {
    display: block;
    height: 100%;
    max-width: 100%;
    background: var(--accent-blue);
}

.design-system-spacing-usage {
    color: var(--text-secondary-dark);
    font-size: 0.82rem;
}

.design-system-token-inline-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.design-system-token-inline-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border: 1px solid var(--border-color-dark);
    border-radius: 999px;
    background: var(--panel-highlight);
    font-size: 0.8rem;
}

.design-system-token-inline-item span {
    color: var(--text-secondary-dark);
}

.design-system-table {
    margin-bottom: var(--spacing-lg);
}

.design-system-table th,
.design-system-table td {
    vertical-align: top;
}

.design-system-catalog-example {
    min-width: 180px;
}

.design-system-catalog-panel-example {
    padding: 8px 10px;
    border-radius: 10px;
}

.design-system-catalog-panel-example p {
    margin: 0;
    font-size: 0.8rem;
}

.design-system-catalog-dropdown .dropdown-trigger {
    min-height: 34px;
}

.design-system-mini-table {
    border: 1px solid var(--border-color-dark);
    border-radius: 8px;
    overflow: hidden;
    min-width: 150px;
}

.design-system-mini-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    padding: 6px 8px;
    font-size: 0.76rem;
    color: var(--text-primary-dark);
}

.design-system-mini-row-header {
    background: var(--panel-highlight);
    font-weight: var(--font-weight-medium);
}

.design-system-showcase-grid .design-system-card {
    min-height: 120px;
}

.design-system-ui-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.design-system-demo-dropdown {
    margin-top: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.design-system-search-demo-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    margin-bottom: var(--spacing-lg);
}

.design-system-search-demo {
    flex: 1;
    min-width: 220px;
}

.design-system-button-row,
.design-system-badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    align-items: center;
}

.design-system-snippet-card pre {
    margin: 0;
    overflow-x: auto;
    background: var(--background);
    border: 1px solid var(--border-color-dark);
    border-radius: 10px;
    padding: var(--spacing-sm);
}

.design-system-snippet-card code {
    color: var(--text-primary-dark);
    font-size: 0.78rem;
    white-space: pre;
}

.design-system-rule-card ul {
    margin: 0;
    padding-left: 1rem;
    color: var(--text-secondary-dark);
}

.design-system-rule-card li {
    margin-bottom: 0.35rem;
}

.design-system-rule-card li:last-child {
    margin-bottom: 0;
}

.design-system-rule-card-do {
    border-left: 3px solid var(--accent-green);
}

.design-system-rule-card-dont {
    border-left: 3px solid var(--accent-red);
}

.design-system-checklist {
    display: grid;
    gap: 0.5rem;
}

.design-system-checklist-item {
    display: grid;
    grid-template-columns: 16px 1fr;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--text-secondary-dark);
    font-size: 0.9rem;
}

.design-system-checklist-item input {
    accent-color: var(--primary);
    width: 14px;
    height: 14px;
}

.design-system-token-value {
    display: block;
    color: var(--text-secondary-dark);
    font-size: 0.72rem;
    font-family: monospace;
    margin-bottom: var(--spacing-xs);
    opacity: 0.8;
}

.design-system-icon-size-demo {
    text-align: center;
    color: var(--text-primary-dark);
}

.design-system-icon-color-demo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.design-system-icon-color-swatch {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid var(--border-color-dark);
    flex-shrink: 0;
}

.design-system-elevation-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-md);
}

.design-system-shadow-demo {
    width: 100%;
    height: 48px;
    border-radius: calc(var(--radius) / 2);
    background: var(--surface);
    margin-top: var(--spacing-sm);
}

.design-system-motion-demo {
    width: 100%;
    height: 48px;
    border-radius: calc(var(--radius) / 2);
    background: var(--surface);
    border: 1px solid var(--border-color-dark);
    margin-top: var(--spacing-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    color: var(--text-secondary-dark);
    transition: background var(--transition-duration) var(--transition-easing),
                transform var(--transition-duration) var(--transition-easing);
    cursor: default;
}

.design-system-motion-demo:hover {
    background: var(--primary);
    color: #fff;
    transform: scale(1.04);
}

.design-system-principle-demo {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: var(--spacing-sm);
    padding: var(--spacing-sm);
    background: var(--panel-highlight);
    border: 1px solid var(--border-color-dark);
    border-radius: 8px;
    flex-wrap: wrap;
}

.design-system-principle-label {
    font-size: 0.7rem;
    color: var(--text-secondary-dark);
    font-weight: var(--font-weight-medium);
}

@media (max-width: 900px) {
    .design-system-page {
        padding: var(--spacing-md);
    }

    .design-system-hero,
    .design-system-section {
        padding: var(--spacing-md);
    }

    .design-system-spacing-row {
        grid-template-columns: 1fr;
        align-items: flex-start;
    }

    .design-system-search-demo-row {
        align-items: stretch;
    }
}

[data-theme="light"] .design-system-hero,
[data-theme="light"] .design-system-section,
[data-theme="light"] .design-system-toc {
    border-color: var(--light-border);
}

[data-theme="light"] .design-system-card,
[data-theme="light"] .design-system-token-card,
[data-theme="light"] .design-system-snippet-card,
[data-theme="light"] .design-system-rule-card,
[data-theme="light"] .design-system-icon-card {
    background: var(--light-background);
    border-color: var(--light-border);
}

[data-theme="light"] .design-system-snippet-card pre {
    background: #fafbfc;
    border-color: var(--light-border);
}

[data-theme="light"] .design-system-mini-table {
    border-color: var(--light-border);
}

[data-theme="light"] .design-system-icon-swatch {
    border-color: var(--light-border);
}

/* ==========================================================================
   Slack connect nudge popup (bottom-left)
   ========================================================================== */
.slack-prompt {
    position: fixed;
    bottom: 1.25rem;
    left: 1.25rem;
    z-index: 10000; /* below modal (10001), above page content */
    width: 340px;
    max-width: calc(100vw - 2.5rem);
    padding: 1.25rem 1.25rem 1rem;
    background: var(--background-panel);
    border: 1px solid var(--divider-color-subtle, var(--border-color-dark));
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
    color: var(--text-primary-dark);
    /* Start off-screen for the slide-in transition */
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.28s ease, transform 0.28s ease;
    pointer-events: none;
}

.slack-prompt.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Keep it out of the way whenever a modal is open */
.modal-open .slack-prompt {
    opacity: 0 !important;
    transform: translateY(16px) !important;
    pointer-events: none !important;
}

.slack-prompt-close {
    position: absolute;
    top: 0.65rem;
    right: 0.65rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary-dark);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.slack-prompt-close:hover {
    background: var(--panel-highlight);
    color: var(--text-primary-dark);
}

.slack-prompt-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    padding-right: 1.75rem; /* clear the close button */
}

.slack-prompt-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--panel-highlight);
    border: 1px solid var(--divider-color-subtle, var(--border-color-dark));
}

.slack-prompt-heading {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.slack-prompt-eyebrow {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary-dark);
}

.slack-prompt-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--text-primary-dark);
}

.slack-prompt-text {
    margin: 0 0 0.85rem;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--text-secondary-dark);
}

/* Check-marked benefit list (mirrors .connect-benefits markers) */
.connect-benefits-list {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.connect-benefits-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--text-primary-dark);
    margin: 0;
}

.connect-benefits-list li::before {
    content: "\2713";
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-top: 1px;
    border-radius: 50%;
    background: rgba(11, 210, 134, 0.16);
    color: #14c07e;
    font-size: 10px;
    font-weight: 700;
}

.slack-prompt-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.slack-prompt-connect {
    flex: 1;
    justify-content: center;
}

.slack-prompt-snooze {
    border: none;
    background: transparent;
    color: var(--text-secondary-dark);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    padding: 0.4rem 0.25rem;
    transition: color 0.15s ease;
}

.slack-prompt-snooze:hover {
    color: var(--text-primary-dark);
}

.slack-prompt-optout {
    display: block;
    width: 100%;
    border: none;
    background: transparent;
    color: var(--text-secondary-dark);
    font-size: 0.75rem;
    text-align: center;
    cursor: pointer;
    padding: 0.25rem 0;
    transition: color 0.15s ease;
}

.slack-prompt-optout:hover {
    color: var(--text-primary-dark);
    text-decoration: underline;
}

.slack-prompt-close:focus-visible,
.slack-prompt-snooze:focus-visible,
.slack-prompt-optout:focus-visible,
.slack-prompt-connect:focus-visible {
    outline: 2px solid var(--accent-blue);
    outline-offset: 2px;
}

/* Respect reduced-motion: appear instantly, no slide */
@media (prefers-reduced-motion: reduce) {
    .slack-prompt {
        transition: opacity 0.15s ease;
        transform: none;
    }
    .slack-prompt.is-visible {
        transform: none;
    }
    .modal-open .slack-prompt {
        transform: none !important;
    }
}

/* On small screens, present as a near-full-width bottom sheet */
@media (max-width: 600px) {
    .slack-prompt {
        left: 0.75rem;
        right: 0.75rem;
        bottom: 0.75rem;
        width: auto;
        max-width: none;
    }
}