@charset "utf-8";
/* CSS Variables */
:root {
    /* Background Colors */
    --background: #37383B;
    --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: #23262B;
    
    /* Border Colors */
    --border: #e5e7eb;
    --border-color-dark: #4B5563;
    --border-color-light: #8C9094;
    --input-border-dark: #4B5563;
    
    /* Accent Colors - Same in both themes */
    --accent-green: #0BD286;
    --accent-amber: #F4AA4F;
    --accent-yellow: #F59E0B;
    --accent-red: #EE7B69;
    --accent-blue: #5ABDEE;
    --primary: #007AFF;
    --primary-light: rgba(0, 122, 255, 0.1);
    --primary-button: #a3d4fa;
    
    /* 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: 600;
    --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;
    --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-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);
    
    /* 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: #D9D9D9;
    --category-toggle-active-text: #23262B;
    --category-toggle-active-border: transparent;
    --category-toggle-active-hover-bg: #CACACA;
    --category-toggle-active-hover-border: transparent;
    --category-toggle-icon-stroke: #8C9094;
    --category-toggle-active-icon-stroke: #23262B;
}

/* 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;
    --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: #3E8AE2;
    --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: #F7F6F9;
    --category-toggle-text: #1A1D21;
    --category-toggle-border: #E0DFE2;
    --category-toggle-hover-bg: #F8F9FA;
    --category-toggle-hover-border: #C1C7CD;
    --category-toggle-active-bg: #FFFFFF;
    --category-toggle-active-text: #1A1D21;
    --category-toggle-active-border: #E0DFE2;
    --category-toggle-active-hover-bg: #F8F9FA;
    --category-toggle-active-hover-border: #C1C7CD;
    --category-toggle-icon-stroke: #9E9EAE;
    --category-toggle-active-icon-stroke: #1A1D21;

    /* 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: #5ABDEE;
    --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);
        border-top: 1px solid var(--light-border);
        padding-top: 1rem;
        margin-top: 0;
    }

    .tender-item:hover {
        background: var(--light-hover);
        border-radius: 10px;
    }

    .tender-item.active {
        background: var(--light-active-bg);
        border-radius: 10px;
    }

    /* Remove top border from first tender item */
    .tender-item:first-child {
        border-top: none;
        padding-top: 0;
    }
    
    /* 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;
    }
    
    /* 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(--light-text-primary);
        background-color: var(--light-mobile-bg);
    }
    
    .user-avatar:hover {
        background-color: var(--light-mobile-hover);
    }
    
    .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(--light-mobile-bg);
        color: var(--light-text-primary);
    }
    
    .category-toggle.active:hover {
        background-color: var(--light-mobile-hover);
        color: var(--light-text-primary);
    }
    
    .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(--light-text-primary);
    }
    
    /* Additional border and background fixes */
    .nav-segments {
        border-color: var(--light-border);
    }
    
    .nav-dot {
        background-color: var(--accent-blue);
    }
    
    /* 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(--accent-blue);
        box-shadow: 0 0 0 1px rgba(90, 189, 238, 0.5);
    }
    
    /* 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: 1px solid var(--light-border);
    }
    
    /* 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);
    }
    
    .hero-image-inset {
        background: #F0F9FF;
    }
    
    /* Progress and slider fixes */
    .range-slider {
        background: var(--light-border);
    }
    
    .range-slider::-webkit-slider-thumb {
        background: var(--light-text-primary);
        border: 2px solid var(--light-background);
    }
    
    .range-slider::-moz-range-thumb {
        background: var(--light-text-primary);
        border: 2px solid var(--light-background);
    }
    
    /* 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 */
    .document-list-item a {
        color: var(--light-text-primary);
    }
    
    /* 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(--background);
    }
    
    .category-toggle svg {
        stroke: var(--category-toggle-icon-stroke);
    }
    
    .category-toggle.active {
        background: var(--light-background);
        border: 1px solid var(--light-border);
    }
    
    /* Tender item title font size adjustment */
    .tender-item .tender-item-title {
        font-size: 0.9rem;
    }
    
    /* 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)
    }



.tender-item {
    background-color: var(--background-panel);
    border: none;
    position: relative;
    padding: 1rem;  /* Mobile: consistent padding */
    padding-left: 3rem;
    border-radius: 0;
    margin-bottom: 0;
    cursor: pointer;
    transition: background-color var(--transition-duration) var(--transition-easing),
                transform var(--transition-duration) var(--transition-easing),
                box-shadow var(--transition-duration) var(--transition-easing);
    font-family: var(--font-family-primary)
    }

/* Desktop: adjust padding */
@media (min-width: 1024px) {
    .tender-item {
        padding: 0.75rem 1rem;
        padding-left: 3rem;
        padding-top: 1rem;
    }
}



.tender-item:hover {
    background-color: var(--hover-bg);
    box-shadow: var(--shadow-sm);
    border-radius: 10px;
    }

.tender-item.active {
    background-color: var(--hover-bg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
    border-radius: 10px;
    }

/* Favourite star placement and styling */
.tender-item .tender-favourite {
    position: absolute;
    top: 13px;
    right: var(--spacing-sm);
    z-index: 2;
}

.favourite-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    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; }

/* Remove top border from first tender item */
/* Tender item divider using ::before pseudo-element */
.tender-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--border-color-dark);
    z-index: 1;
}

.tender-item:first-child::before {
    display: none;
}

/* Add margin-bottom to create gap between items */
.tender-item {
    margin-bottom: 8px;
    min-height: 120px;
}

/* Adjust hover state to respect the gap */
.tender-item:hover {
    margin-bottom: 8px;
}

/* Prevent title overlap by reserving space on the right of tender title */
.tender-item .tender-item-title {
    padding-right: 48px; /* matches favourite button footprint */
    font-size: 0.8em;
    
    /* 2-line clamp for consistent title heights */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
    max-height: 2.4em; /* 2 lines × 1.2 line-height */
}

.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 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 10000
    }

.nav-brand-container {
    display: flex;
    align-items: center;
    gap: 12px
    }

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

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

.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-color: var(--border-color-dark);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary-dark);
    font-weight: var(--font-weight-bold);
    font-size: 1.1rem;
    cursor: pointer;
    transition: background-color 0.2s ease
    }

.user-avatar:hover {
    background-color: var(--primary);
    }

.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: 8px;
    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: 160px;
    padding: 8px
    }

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

.user-dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    color: var(--text-primary-dark);
    text-decoration: none;
    border-radius: 6px;
    transition: background-color 0.2s ease;
    cursor: pointer
    }

.user-dropdown-item:hover {
    background-color: rgba(255, 255, 255, 0.1)
    }

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

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

/* Mobile touch-friendly improvements for user dropdown */
@media (max-width: 768px) {
    .user-dropdown-menu {
        min-width: 200px; /* Wider for better touch targets */
        padding: 12px; /* More padding for touch */
        border-radius: 12px; /* Larger border radius for modern mobile feel */
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); /* Enhanced shadow for mobile */
    }
    
    .user-dropdown-item {
        padding: 16px 20px; /* Larger padding for touch targets */
        font-size: 16px; /* Larger font for mobile readability */
        min-height: 48px; /* iOS recommended minimum touch target height */
        border-radius: 8px; /* Larger border radius for touch feedback */
    }
    
    .user-dropdown-item:active {
        background-color: rgba(255, 255, 255, 0.15); /* Enhanced active state for touch */
        transform: scale(0.98); /* Subtle scale feedback on touch */
        transition: all 0.1s ease;
    }
    
    .dropdown-divider {
        margin: 12px 20px; /* Match the new padding */
    }
}

/* Health Check Styles */
.health-check {
    padding: 2rem;
    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: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color-dark)
    }

.page-header h1 {
    font-size: clamp(1.5rem, 4vw, 2rem);
    margin-bottom: 0.5rem;
    color: var(--text-primary-dark)
    }

.status-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* MODIFIED from repeat(auto-fit, minmax(280px, 1fr)) */
    gap: 1rem;
    margin-bottom: 2rem
    }

.status-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex: 1;
    min-width: 0;
    background: var(--panel-highlight);
    border-radius: var(--radius);
    padding: 1.5rem;
    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: #22c55e
    }

.status-icon.status-yellow {
    background-color: #f59e0b
    }

.status-icon.status-red {
    background-color: #ef4444
    }

.status-content {
    display: flex;
    flex-direction: column;
    margin-left: 0.5rem
    }

.status-content h3 {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary-dark);
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    line-height: 1.4
    }

.status-value {
    font-size: 20px;
    font-weight: 600;
    margin-top: 4px;
    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: 4px
    }

.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: 0.5rem 1rem;
    border-radius: var(--radius);
    font-size: 0.875rem;
    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: 1.5rem
    }

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

.resource-count {
    color: var(--text-secondary-dark);
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
    background: var(--background-panel);
    border-radius: 16px;
    border: 1px solid var(--border-color-dark)
    }

.resource-table-wrapper {
    background: var(--background-panel);
    border-radius: var(--radius);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border-color-dark);
    overflow: visible;
    position: relative
    }

.resource-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem
    }

.resource-table th, .resource-table td {
    padding: 1rem;
    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 {
    font-size: 1.2rem;
    line-height: 1;
}

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

/* 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.6;
    font-size: 0.9rem;
    margin-bottom: 1rem;
    font-weight: var(--font-weight-normal);
    /* Added for normal text weight */
    }

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

.tender-short-summary {
    color: var(--text-secondary-dark);
    line-height: 1.4;
    font-size: 0.85rem;
    margin: 0;
    font-weight: var(--font-weight-normal);
    opacity: 0.9;
    }

/* 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: 26.5% 46% 26.5%;  /* Tenders | Overview | Analysis - 99% total */
        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);
    }

/* Add visual separation between cards */
.tender-container > .column, .detail-wrapper > .column, .settings-content {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    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%;
    }

/* 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);
    padding: 2rem;
    text-align: center;
    flex-direction: column;
    gap: 1rem;
}

.empty-state .empty-icon {
    opacity: 0.6;
    margin-bottom: 0.5rem;
}

.empty-state h3 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
}

.empty-state p {
    margin: 0;
    font-size: 0.95rem;
    max-width: 300px;
    line-height: 1.4;
}

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

.placeholder-icon {
    opacity: 0.8;
    transition: opacity var(--transition-duration) var(--transition-easing)
    }

.placeholder-icon:hover {
    opacity: 1
    }

.placeholder-title {
    font-size: 1.5rem;
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
    margin: 0
    }

.placeholder-text {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
    text-align: center
    }

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

/* 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
    }

/* 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(-100%) !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(-200%) !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(-100%) !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 {
        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 {
    font-size: 0.7rem;
    color: var(--text-secondary-dark);
    margin-bottom: 5px;
    font-weight: var(--font-weight-medium)
    }

/* 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: absolute;
    left: 0.25rem;
    top: 1.2rem;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 40%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--background-panel);
    font-size: 0.9rem;
    }

.tender-item-indicator.no-score {
    background-color: var(--text-secondary)
    }

.tender-item.high-relevance .tender-item-indicator {
    background-color: var(--accent-green);
    }

.tender-item.moderate-relevance .tender-item-indicator {
    background-color: var(--accent-blue)
    }

.tender-item.low-relevance .tender-item-indicator {
    background-color: var(--accent-amber)
    }

.tender-item.not-recommended .tender-item-indicator {
    background-color: var(--accent-red)
    }

.tender-content {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

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

.tender-item-title {
    margin: 0;
    font-size: var(--figma-title-size);
    font-weight: var(--figma-title-weight);
    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 white;
    border-color: white;
    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: 1.25rem;
    position: relative;
    border-radius: 15px 15px 15px 15px;
    }

.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: 3rem
        }

    .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: 20px;
    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 16px 10px 40px;
    border-radius: 37px;
    font-size: 14px;
    width: 100%;
    transition: all 0.2s ease
    }

.search-box input:focus {
    outline: none;
    border-color: #007AFF;
    box-shadow: 0 0 0 1px rgba(0, 122, 255, 0.5)
    }

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

/* 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 rgba(75, 85, 99, 0.3);
    padding-bottom: 0.75rem;
    margin-left: -20px;
    margin-right: -20px;
    padding-left: calc(0.5rem + 20px);
    padding-right: 20px;
    height: 2rem;
    }

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

.tender-header h1 {
    color: #E3E3E3;
    font-family: var(--font-family-primary);
    font-size: 1.7rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-top: 10px;
    margin-bottom: 0;
    }

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

.document-item a {
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 500;
    flex: 1;
    display: block;
    padding-right: 0.75rem
    }

.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: 600;
    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: 5%;
    padding-right: 5%;
    padding-top: 1%;
    padding-bottom: 1rem;
    overflow-y: auto;
    height: calc(100% - 100px); /* Increased to account for padding */
}

/* 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;
}

/* 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;
    padding-bottom: 1rem;
    border-bottom: 1px solid #37383B;
    margin-bottom: 1rem;
    justify-content: flex-start;
    box-shadow: none;
}

/* 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;
    height: calc(100% - 100px);
    padding-right: 15%;
    padding-left: 5%;
    padding-top: 0;
    margin-top: 0;
    position: relative;
    z-index: 1;
}

/* Tender List Content Wrapper - For scrollable content */
.tender-list-content-wrapper {
    overflow-y: auto;
    height: calc(100% - 100px); /* Adjust based on header height */
}

/* 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;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    position: relative;
}

.overview-column .tender-meta-inline-list::after {
    content: "";
    position: absolute;
    bottom: -0.75rem;
    left: 0;
    right: 0;
    height: 1px;
    background: rgb(224, 223, 226);
}

.overview-column .tender-meta-inline-list .meta-item {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    min-width: 200px;
}

.overview-column .tender-meta-inline-list .meta-label {
    color: #8C9094;
    font-size: 0.8rem;
    font-weight: 500;
    white-space: nowrap;
}

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

/* Overview Column H2 Styling */
.overview-column h2 {
    font-size: 1em;
    font-weight: 600;
}

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

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

/* 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: #8C9094;
    font-size: 0.8rem;
    margin-top: 0;
    margin-bottom: 8px;
}

/* Dark Mode Filter Label Styling */
[data-theme="dark"] .filter-label {
    color: #fff;
}

/* 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 #37383B;
}

/* 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: 20em;
}

/* Style AI-generated <strong> tags to look like headings */
.overview-column .tender-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); /* Adjust based on header height */
}

/* Relevance Score Card Styling */
.relevance-score-card {
    border-radius: 4rem !important;
    border: 1px solid #37383B;
    background: transparent;
    padding: 10px 15px !important;
}

/* Document Icons Styling */
.document-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 24px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #fff;
    margin-right: 12px;
    flex-shrink: 0;
}

.pdf-icon {
    background-color: #DC2626;
}

.link-icon {
    background-color: transparent;
    border: 1px solid #965EF6;
}

.doc-icon {
    background-color: #2563EB;
}

/* Simple Document List Styling */
.document-list-item {
    display: flex;
    align-items: center;
    margin-bottom: 0.75rem;
}

.document-list-item:last-child {
    margin-bottom: 0;
}

.document-list-item a {
    color: #fff;
    text-decoration: none;
    font-size: 0.9rem;
    line-height: 1.4;
}

.document-list-item a:hover {
    text-decoration: underline;
    }

/* 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;
    }
}

/* 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 {
    margin-bottom: var(--spacing-md);
    max-width: 640px;
    width: 100%
    }

.filter-group:last-child {
    margin-bottom: 0
    }

/* Filter label inside dropdown */
.filter-label {
    color: var(--text-secondary-dark);
    font-size: 10px;
    font-weight: 500;
    margin-right: auto
    }

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

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

.auth-card, .google-confirmation-card {
    background: var(--background-panel);
    border-radius: var(--radius, 8px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.25), 0 2px 4px -1px rgba(0, 0, 0, 0.15);
    width: 100%;
    max-width: 400px;
    padding: var(--spacing-xl, 2rem);
    margin: 0 auto;
    border: 1px solid var(--border-color-dark, #2d3035)
    }

.auth-header {
    text-align: center;
    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);
    margin: 0
    }

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

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

.form-group label {
    display: block;
    margin-bottom: var(--spacing-xs, 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 var(--border-color-dark, rgba(255, 255, 255, 0.1));
    border-radius: calc(var(--radius, 8px) / 2);
    background: var(--background-panel);
    color: var(--text-primary-dark);
    font-size: 1rem;
    transition: all var(--transition-duration, 0.2s) var(--transition-easing, ease);
    border-color: var(--border-color-dark, rgba(255, 255, 255, 0.1))
    }

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

.form-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.2)
    }

.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: 20em;
    /* Makes the textarea approximately 20 lines high */
    resize: vertical;
    /* Allows vertical resizing while maintaining width */
    min-height: 10em;
    /* Minimum height to prevent too small resizing */
    line-height: 1.5;
    /* Comfortable line spacing */
    }

/* 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)
    }

.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)
    }

.google-icon {
    flex-shrink: 0
    }

/* 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
    }

/* 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)
    }

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

}

/* Mobile Optimizations */
@media (max-width: 767px) {
    .auth-card, .google-confirmation-card {
        padding: var(--spacing-lg, 1.5rem)
        }

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

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

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

}

/* 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);
    transform: translateY(-1px);
    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: 20px;
    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: #007AFF;
    box-shadow: 0 0 0 1px rgba(0, 122, 255, 0.5)
    }

.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: 25px;
    text-decoration: none;
    border: 1px solid var(--border-color-dark);
    transition: background-color 0.2s ease, transform 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);
    transform: translateY(-1px);
    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: 25px; /* 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, transform 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);
    transform: translateY(-1px);
    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
    }

.document-item {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.2s ease
    }

.document-item:hover {
    background-color: rgba(0, 0, 0, 0.15);
    transform: translateY(-1px)
    }

.document-category {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.9);
    padding: 0.15rem 0.5rem;
    background-color: rgba(30, 144, 255, 0.2);
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
    white-space: nowrap;
    border: 1px solid rgba(30, 144, 255, 0.2)
    }

@media (min-width: 768px) {
    .document-list {
        grid-template-columns: repeat(2, 1fr)
        }

}

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

.ai-relevance-summary p {
    margin-bottom: 1rem;
    font-weight: var(--font-weight-normal);
    /* 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, .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 h4 {
    font-size: 1.1rem
    }

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

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

.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);
    color: var(--background-panel);
    font-size: 1rem;
    top: 32px;
    }

/* Color variations based on score */
.high-relevance .criteria-icon, .high-relevance .tender-item-indicator {
    background-color: var(--accent-green)
    }

.moderate-relevance .criteria-icon, .moderate-relevance .tender-item-indicator {
    background-color: var(--accent-blue)
    }

.low-relevance .criteria-icon, .low-relevance .tender-item-indicator {
    background-color: var(--accent-amber)
    }

.not-recommended .criteria-icon, .not-recommended .tender-item-indicator {
    background-color: var(--accent-red)
    }

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



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

.at-a-glance-content p {
    margin-top: 5px;
    margin-bottom: 5px;
}

/* 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(--accent-green) !important;
}

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

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

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

/* At a Glance Content Wrapper Styles */
.at-a-glance-content-wrapper {
    border-radius: var(--radius);
    padding: 4px 16px;
}

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

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

/* 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(--accent-green) !important;
}

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

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

[data-theme="light"] .at-a-glance-section.not-recommended .at-a-glance-content::before {
    background-color: var(--accent-red) !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 */
.column-section .criteria-item {
    display: flex;
    align-items: center;
    padding: 0 0.5rem
    }

/* Specific gap only for criteria items with progress containers (not relevance score) */
.column-section .criteria-item:has(.progress-container) {
    gap: 0.1rem
    }

.column-section .criteria-label {
    width: 100px;
    /* Fixed width for all labels */
    font-size: 0.9rem;
    font-weight: var(--font-weight-normal);
    color: var(--text-primary-dark);
    }

.column-section .progress-container {
    flex: 1;
    height: 1.75rem;
    background: #37383B;
    border: none;
    border-radius: 100px;
    position: relative;
    overflow: visible;
    margin: 0.5rem 0
    }

.column-section .progress-bar {
    height: 100%;
    border-radius: 100px;
    transition: width 0.3s ease;
    position: relative;
    /* Added for child positioning */
    }

.column-section .criteria-item {
    display: flex;
    align-items: center;
    padding: 0 0.5rem;
    gap: 0.1rem;
    position: relative;
}

.column-section .criteria-label {
    width: 100px;
    flex-shrink: 0;
}

.column-section .progress-container {
    flex: 1;
    position: relative;
    margin-right: 1rem;
}

.column-section .progress-container .criteria-value {
    position: absolute !important;
    right: -1.5rem !important;
    top: 0 !important;
    bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    font-size: 0.8rem;
    font-weight: var(--font-weight-medium);
    color: #9E9EAE;
    text-align: right;
    white-space: nowrap;
    z-index: 10;
    width: 2.5rem;
    }

/* 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(--accent-green)
    }

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

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

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

/* 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;
    }

/* 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;
}

    /* Light mode keeps the border from unified rule */
    [data-theme="light"] .column {
        border: 1px solid var(--light-border);
    }
    
    /* 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"] .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"] .checkbox-custom {
        border: 2px 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);
}

[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 .tender-summary strong {
    color: var(--light-text-primary);
}

[data-theme="light"] .document-list-item a {
    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: 16px !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: 40% !important;
}

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

    /* Light mode progress container background */
    [data-theme="light"] .column-section .progress-container {
        background: var(--background);
    }
    
    /* 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: 0.9rem;
    }

/* Hide nav-segments on onboarding pages */
.onboarding-wrapper .nav-segments,
body:has(.onboarding-wrapper) .nav-segments {
    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 */
[data-theme="dark"] .overview-column .tender-meta-inline-list::after {
    background: #37383B;
}

/* 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 #D0D0D0;
}

[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 {
    background: #F7F6F9;
    border-top: none;
    box-shadow: none;
}

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

[data-theme="light"] .tender-item.active,
[data-theme="light"] .tender-item.active.high-relevance,
[data-theme="light"] .tender-item.active.medium-relevance,
[data-theme="light"] .tender-item.active.low-relevance {
    background: #F7F6F9 !important;
    background-color: #F7F6F9 !important;
    border-top: none;
    box-shadow: none;
    transform: none;
}

.column-section {
    margin-bottom: 8px;
    padding-bottom: 8px;
    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;
}

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

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

/* 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: column;
    gap: 0.3rem
    }

.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: 1;
    }

/* Specific overflow ellipsis for location and organization spans */
.tender-list .tender-item-meta .meta-item.location-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: 100%;
    min-width: 0;
}

/* Remove overflow ellipsis from date span (first meta item) */
.tender-list .tender-item-meta .meta-item.date-meta {
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !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: 200px 1fr;
    align-items: center;
    justify-content: space-between
    }

/* Second line: Organization full width */
.tender-list .tender-item-meta .meta-item:last-child {
    width: 100%;
    overflow: normal
    }

/* 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: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    width: 100%;
    max-height: 1000px;
    opacity: 1;
    margin-top: 20px;
    margin-bottom: 20px;
    visibility: visible;
    border: 1px solid var(--border-color-dark);
    border-radius: 21px;
    padding: 16px;
    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
    }

/* At ≤1180px switch filters to a single-column layout */
@media (max-width: 1180px) {
    .filter-grid { grid-template-columns: 1fr; }
    .filter-group { width: 100%; }
}

.filter-grid.hidden {
    max-height: 0;
    opacity: 0;
    margin-bottom: 0;
    visibility: hidden;
    /* The transition from .filter-grid will cover these properties */
    /* Override global .hidden's display:none to allow animation */
    display: grid !important;
    overflow: hidden;
    padding: 0;
    border-width: 0
    }

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

/* Filter Label Styles */
.filter-label {
    color: #FFF;
    font-size: 0.75rem;
    /* 12px */
    font-weight: var(--font-weight-medium);
    margin-bottom: 2px;
    display: block
    }

/* 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 */
.tender-item.active.high-relevance, .tender-item.active.medium-relevance, .tender-item.active.low-relevance {
    background-color: var(--hover-bg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
    }

/* Settings Page Styles */
.settings-container {
    display: grid;
    grid-template-columns: 250px minmax(600px, 800px) 1fr;
    gap: var(--spacing-lg);
    padding: var(--spacing-lg);
    max-width: 1400px;
    margin: 0 auto;
    justify-content: center;
    }

.settings-nav {
    min-height: calc(100vh - var(--nav-height, 64px));
    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;
    gap: var(--spacing-md);
    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;
    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: 8px;
    overflow: hidden;
    margin-top: 1rem
    }

.settings-content .data-table th, .settings-content .data-table td {
    padding: 1rem
    }

/* Responsive Settings */
@media (max-width: 768px) {
    .settings-container {
        grid-template-columns: 1fr;
        padding: 1rem;
        gap: 1rem
        }
    
    .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;
    }



    /* Navigation content is now visible on all screens */

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

.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: #0056CC;
    border-color: #0056CC
    }

.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-radius: var(--radius);
    padding: var(--spacing-lg);
    width: 100%;
    max-width: 600px;
    height: 500px;
    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-status {
    text-align: center
    }

.connect-description {
    color: var(--text-secondary-dark);
    font-size: 14px;
    margin: 12px 0 0 0
    }

.connect-benefits {
    background: rgba(255, 255, 255, 0.02);
    border-radius: var(--radius);
    padding: var(--spacing-md)
    }

.connect-benefits h4 {
    color: var(--text-primary-dark);
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 12px 0
    }

.connect-benefits ul {
    margin: 0;
    padding-left: 20px;
    color: var(--text-secondary-dark)
    }

.connect-benefits li {
    font-size: 13px;
    margin-bottom: 6px
    }

.connect-benefits li:last-child {
    margin-bottom: 0
    }

/* 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: #85c6f6
    }

.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
    }

.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
    }

.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 {
    text-align: center;
    color: var(--text-primary-dark);
    /* White text */
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 0.75rem
    }

.range-slider-wrapper {
    position: relative;
    height: 20px;
    /* Adjust as needed based on thumb size */
    margin-bottom: 0.5rem
    }

.range-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    /* Track height */
    background: transparent;
    /* Make default track transparent */
    outline: none;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    padding: 0;
    pointer-events: none;
    /* Base sliders don't capture mouse events initially */
    }

.range-slider-min {
    z-index: 3;
    pointer-events: auto;
    /* Min slider thumb is interactive */
    }

.range-slider-max {
    z-index: 4;
    pointer-events: auto;
    /* Max slider thumb is interactive */
    }

/* Common track styles */
.range-slider::-webkit-slider-runnable-track {
    width: 100%;
    height: 4px;
    /* cursor: pointer; */
    /* Removed: track should not appear clickable */
    background: var(--slider-track);
    /* Use slider-specific track color */
    border-radius: 2px;
    pointer-events: none;
    /* Disable click on track */
    }

.range-slider::-moz-range-track {
    width: 100%;
    height: 4px;
    /* cursor: pointer; */
    /* Removed: track should not appear clickable */
    background: var(--slider-track);
    /* Use slider-specific track color */
    border-radius: 2px;
    pointer-events: none;
    /* Disable click on track */
    }

/* Make the top slider's (max-slider) track transparent */
.range-slider-max::-webkit-slider-runnable-track {
    background: transparent;
    pointer-events: none;
    /* Also disable click on the transparent track */
    /* cursor: default; */
    /* Ensure no pointer cursor */
    }

.range-slider-max::-moz-range-track {
    background: transparent;
    pointer-events: none;
    /* Also disable click on the transparent track */
    /* cursor: default; */
    /* Ensure no pointer cursor */
    }

/* Common thumb styles */
.range-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    border: none;
    /* Or a subtle border like 1px solid var(--background-panel) */
    height: 18px;
    width: 18px;
    border-radius: 50%;
    background: var(--slider-thumb);
    /* Use slider-specific thumb color */
    cursor: pointer;
    margin-top: -7px;
    /* (thumb height - track height) / 2 negated */
    position: relative;
    z-index: 1;
    /* Ensure thumb is above track if there are pseudo-elements for fill */
    pointer-events: auto;
    /* Ensure thumb is interactive */
    transition: background-color 0.2s ease;
    }

.range-slider::-moz-range-thumb {
    border: none;
    height: 18px;
    width: 18px;
    border-radius: 50%;
    background: var(--slider-thumb);
    cursor: pointer;
    position: relative;
    z-index: 1;
    pointer-events: auto;
    transition: background-color 0.2s ease
    }

/* Hover and focus styles for slider thumbs */
.range-slider:hover::-webkit-slider-thumb {
    background: var(--slider-thumb-hover);
}

.range-slider:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.2);
    /* Example focus like form-input */
    }

.range-slider:hover::-moz-range-thumb {
    background: var(--slider-thumb-hover);
}

.range-slider:focus::-moz-range-thumb {
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.2)
    }

/* Toast Notification Styles */
#toast-container {
    position: fixed;
    top: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    pointer-events: none
    }

.toast {
    background: var(--surface);
    color: var(--text-primary);
    border-radius: 18px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18);
    display: flex;
    align-items: center;
    min-width: 340px;
    max-width: 420px;
    padding: 1.2rem 2.2rem 1.2rem 1.2rem;
    border: 1.5px solid var(--border);
    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: translateY(-20px);
        }

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

}

/* Fade-out modifier applied before removal */
.toast.toast-fade-out {
    opacity: 0;
    transform: translateY(-10px);
}

.toast-icon {
    margin-right: 1.2rem;
    font-size: 2rem;
    display: flex;
    align-items: center
    }

.toast-content {
    flex: 1;
    display: flex;
    flex-direction: column
    }

.toast-title {
    font-weight: 600;
    font-size: 1.1rem;
    margin-bottom: 0.2rem
    }

.toast-message {
    color: var(--text-secondary-dark);
    font-size: 1rem
    }

.toast-close {
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 1.3rem;
    position: absolute;
    right: 1.2rem;
    top: 1.2rem;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s;
    pointer-events: auto
    }

.toast-close:hover {
    opacity: 1
    }

/* Mobile hamburger menu - hidden by default on desktop */
.mobile-hamburger {
    display: none;
}

/* Main Navigation Segments */
.nav-segments {
    display: flex;
    background-color: #46474B;
    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.6rem;
        padding: 2px 8px;
        border-radius: 16px;
    }
}

.nav-segment {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-left: 30px;
    padding-right: 30px;
    border: none;
    border-radius: 30px;
    background-color: transparent;
    color: #9CA3AF;
    cursor: pointer;
    transition: all 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 {
    color: #D1D5DB;
    background-color: rgba(255, 255, 255, 0.05);
}

.nav-segment.active {
    background-color: #36373A;
    color: #FFFFFF;
}

.nav-segment.disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.nav-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #5ABDEE;
    flex-shrink: 0;
    display: none; /* Hide by default */
}

.nav-segment.active .nav-dot {
    display: block; /* Show only when parent is active */
}

.nav-text {
    font-weight: 500;
    }

/* Category Toggle Buttons */
.category-toggle-row {
    display: flex;
    gap: 8px;
    background-color: var(--background-panel);
    align-items: center;
    justify-content: space-between;
    padding: 0 !important;  /* Force remove padding */
    margin: 0 !important;   /* Force remove margins */
    }

/* Favourites toggle appears as the last item, within the main group */
.category-toggle-row .favourites-toggle {
    order: 999;
}

/* Favourites toggle icon styling */
.category-toggle.favourites-toggle svg {
    stroke: #8C9094;
    transition: stroke 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.category-toggle.favourites-toggle.active svg {
    stroke: #23262B;
}

.category-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border: 1px solid var(--category-toggle-border);
    border-radius: 9px;
    background-color: var(--category-toggle-bg);
    color: var(--category-toggle-text);
    cursor: pointer;
    transition: 
        background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55),
        padding 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: var(--font-family-primary);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    min-height: 36px;
    box-sizing: border-box;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    flex: 1;
    }

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

/* All category toggles have the same active appearance */
.category-toggle.active {
    background-color: var(--category-toggle-active-bg);
    color: var(--category-toggle-active-text);
    border-color: var(--category-toggle-active-border);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    transform: scale(1.02);
    padding: 12px 20px;
    }

.category-toggle.active .toggle-text {
    display: block;
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.1s;
    color: var(--category-toggle-active-text);
    }

/* Center icon in inactive state */
.category-toggle:not(.active) {
    justify-content: center;
    }



.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 .toggle-icon {
    width: 15px;
    height: 11px;
    flex-shrink: 0;
    }

/* Special styling for "All Tenders" icon - matches Figma design exactly */
.category-toggle[data-category=""] .toggle-icon {
    width: 15px;
    height: 12px;
    stroke: var(--category-toggle-icon-stroke);
    stroke-width: 1px;
    stroke-linecap: round;
    stroke-linejoin: round
    }

.category-toggle[data-category=""].active .toggle-icon {
    stroke: var(--category-toggle-active-icon-stroke)
    }

/* Special styling for "Programs & Projects" icon - matches Figma design exactly */
.category-toggle[data-category="program_project"] .toggle-icon {
    width: 12px;
    height: 12px;
    stroke: var(--category-toggle-icon-stroke);
    stroke-width: 1px;
    stroke-linecap: round;
    stroke-linejoin: round
    }

.category-toggle[data-category="program_project"].active .toggle-icon {
    stroke: var(--category-toggle-active-icon-stroke)
    }

/* Special styling for "Jobs & Consultancies" icon - matches Figma design exactly */
.category-toggle[data-category="job_consultancy"] .toggle-icon {
    width: 12px;
    height: 12px;
    stroke: var(--category-toggle-icon-stroke);
    stroke-width: 1px;
    stroke-linecap: round;
    stroke-linejoin: round
    }

.category-toggle[data-category="job_consultancy"].active .toggle-icon {
    stroke: var(--category-toggle-active-icon-stroke)
    }

/* Special styling for "Procurement" icon - matches Figma design exactly */
.category-toggle[data-category="procurement"] .toggle-icon {
    width: 14px;
    height: 12px;
    stroke: var(--category-toggle-icon-stroke);
    stroke-width: 1px;
    stroke-linecap: round;
    stroke-linejoin: round
    }

.category-toggle[data-category="procurement"].active .toggle-icon {
    stroke: var(--category-toggle-active-icon-stroke)
    }

.category-toggle .toggle-text {
    font-family: var(--font-family-primary);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.171875;
    text-align: center;
    color: var(--category-toggle-text);
    transition: 
        opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    transform: translateY(-2px);
    display: none;
    }

/* Removed All Tenders text-hiding on very small screens */

/* Mobile-first category toggle responsiveness */

/* Small mobile: icon-only mode */
@media (max-width: 480px) {
    .category-toggle-row { 
        flex-wrap: nowrap;  /* Prevent wrapping */
        gap: 8px; 
        overflow-x: auto;   /* Enable horizontal scroll */
        overflow-y: hidden; /* Hide vertical scroll */
        scrollbar-width: none; /* Hide scrollbar on Firefox */
        -ms-overflow-style: none; /* Hide scrollbar on IE/Edge */
    }
    
    /* Hide scrollbar on WebKit browsers (Safari, Chrome) */
    .category-toggle-row::-webkit-scrollbar {
        display: none;
    }
    .category-toggle:not([data-category=""]) { 
        width: 48px;  /* Touch-friendly size */
        padding: 12px 0; 
        justify-content: center; 
    }
    .category-toggle:not([data-category=""]) .toggle-text { display: none; }
    .category-toggle:not([data-category=""]) .toggle-icon { margin: 0 auto; }
    
    /* Keep All Tenders text visible */
    .category-toggle[data-category=""] { 
        min-width: auto;
        padding: 12px 16px;
    }
}

/* Medium mobile: compact mode */
@media (min-width: 481px) and (max-width: 768px) {
    .category-toggle-row { 
        flex-wrap: nowrap;  /* Prevent wrapping */
        gap: 8px; 
        overflow-x: auto;   /* Enable horizontal scroll */
        overflow-y: hidden; /* Hide vertical scroll */
        scrollbar-width: none; /* Hide scrollbar on Firefox */
        -ms-overflow-style: none; /* Hide scrollbar on IE/Edge */
    }
    
    /* Hide scrollbar on WebKit browsers (Safari, Chrome) */
    .category-toggle-row::-webkit-scrollbar {
        display: none;
    }
    
    .category-toggle { 
        padding: 10px 14px; 
        flex-shrink: 0;  /* Prevent shrinking */
    }
}

/* Large mobile/tablet: standard mode */
@media (min-width: 769px) and (max-width: 1023px) {
    .category-toggle-row { 
        flex-wrap: wrap; 
        gap: 8px; 
    }
    .category-toggle { 
        padding: 8px 16px; 
    }
}

/* Desktop: full mode */
@media (min-width: 1024px) {
    .category-toggle-row { 
        gap: 8px; 
        padding: 0;  /* Remove padding on desktop too */
    }
    .category-toggle { 
        padding: 12px 16px; 
    }
}





/* Hide All Tenders text when the tender list column is narrow */
@container (max-width: 390px) {
    .tender-list-column .category-toggle[data-category=""] .toggle-text {
        display: none;
    }
}

/* Ensure All Tenders text is always visible when active */
.category-toggle[data-category=""].active .toggle-text {
    display: block !important;
    opacity: 1 !important;
}

/* Hide text for non-primary toggles only on very small screens */
@media (max-width: 768px) {
    .category-toggle:not(:first-child) .toggle-text {
        display: none
        }
    
    /* Always show All Tenders text */
    .category-toggle[data-category=""] .toggle-text {
        display: block !important;
        }

.category-toggle-row {
        gap: 6px;
        padding: 12px 16px
        }

.category-toggle {
        padding: 8px 12px;
        min-height: 32px
        }

.category-toggle {
        min-width: 44px;
        min-height: 44px;
        padding: 12px 18px;
        font-size: 16px;
        margin: 0 6px 10px 0;
        /* space between toggles */
        }

}























/* Dynamic Mobile Navigation Bar */
.mobile-dynamic-nav {
    display: none;
    position: fixed;
    top: 64px; /* Position below existing nav bar */
    left: 0;
    right: 0;
    background: none;
    z-index: 1001;
    padding: 12px 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.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: 56px; /* Height of the mobile dynamic nav bar */
    }
    }

.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;
    /* Increased padding for better click area */
    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;
    /* Pure white for better contrast */
    }

/* 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: 2px;
    /* Slight offset from bottom for better visual */
    left: 0;
    right: 0;
    height: 2px;
    background: #FFF;
    /* Pure white underline */
    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
    }

.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: 10px var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all var(--transition-duration) var(--transition-easing)
}

.notification-card:hover {
    background-color: var(--hover-bg);
    border-color: var(--hover-border);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
    }

.notification-content {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    flex: 1
    }

.notification-icon {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
    }

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

.notification-icon.slack-icon {
    background-color: var(--hover-bg)
    }

.notification-icon.teams-icon {
    background-color: var(--hover-bg);
    color: #5059C9
    }

.notification-info h3 {
    color: var(--text-primary-dark);
    font-size: 1.125rem;
    font-weight: var(--font-weight-medium);
    margin: 0 0 4px 0
}

.notification-info p {
    color: var(--text-secondary-dark);
    font-size: 0.875rem;
    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: var(--spacing-xl)
    }

.integrations-section h2 {
    }

/* 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: 150px;
        /* 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 */
    }

/* 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 */
    }

.welcome-right .hero-img {
    width: 100%;
    height: auto;
    max-height: 300px;
    /* Constrain maximum height to prevent oversized images */
    object-fit: contain;
    /* Ensure image fits within bounds while maintaining aspect ratio */
    border-radius: var(--radius);
    overflow: hidden
    }

/* 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: 0 2px 8px rgba(0, 0, 0, 0.1);
    /* Subtle shadow for depth */
    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: 100%;
    height: 100%;
    max-height: none;
    object-fit: contain;
    border-radius: 8px;
    }

@media (max-width: 768px) {
    .onboarding-wrapper .welcome-card {
        width: 100%;
        height: auto;
        min-height: 600px;
        /* Increase min-height to prevent content cutoff */
        flex-direction: column;
        }
    
    .welcome-left {
        width: 100%;
        order: 2;
        min-height: 400px;
        /* Ensure minimum content area */
        }
    
    .welcome-right {
        width: 100%;
        order: 1;
        padding: 0
        }

    .hero-image-inset {
        margin: 0.5rem;
        padding: 1rem;
        height: auto;
        /* Reset height on mobile */
        min-height: 200px;
        /* Smaller minimum height on mobile */
        }

    .hero-image-inset .hero-img {
        max-height: 180px;
        /* Smaller max height on mobile for better proportions */
        max-width: 200px
        }

}

/* Center the onboarding card and constrain its width on larger viewports */
.onboarding-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    /* horizontally and vertically center */
    width: 100%;
    /* Ensure full width */
    min-height: 100vh;
    /* Ensure full height */
    padding: 4rem 1.5rem;
    /* breathing room around the card */
    box-sizing: border-box;
    /* Include padding in width calculation */
    transform: translateY(-10%);
    /* Move card up by 10% from center */
    }

/* Ensure the onboarding container maintains consistent dimensions */
#onboarding-container {
    width: 100%;
    height: 100%;
    /* Fill the parent welcome-card */
    }

/* Full-width on mobile; limited width on tablet / desktop */
.onboarding-wrapper .welcome-card {
    width: 1100px;
    height: 700px;
    /* Fixed dimensions to prevent shifting */
    max-width: calc(100vw - 3rem);
    /* Prevent overflow on small screens */
    position: relative;
    /* Establish positioning context for absolute children if needed */
    flex-shrink: 0;
    /* Prevent flex shrinking */
    margin: 0 auto;
    /* Ensure perfect horizontal centering */
    }

@media (min-width: 768px) and (max-width: 1024px) {
    .onboarding-wrapper .welcome-card {
        width: 700px;
        height: 600px;
        /* fixed dimensions for tablets */
        max-width: calc(100vw - 3rem);
        /* Ensure it doesn't overflow on smaller tablets */
        margin: 0 auto;
        /* Ensure perfect horizontal centering */
        }
    
    .welcome-left {
        width: 350px;
        }
    
    .welcome-right {
        width: 350px;
        }

}

/* === Onboarding Welcome Form Elements === */
.welcome-left label {
    color: var(--text-primary-dark);
    font-size: 0.75rem;
    /* 12px */
    font-weight: var(--font-weight-medium);
    margin-bottom: 0.25rem
    }

/* 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;
    }

.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 */
    }

/* === End Onboarding Welcome Form Elements === */
.welcome-left h1 {
    color: var(--text-primary-dark);
    font-size: 1.4rem;
    font-weight: var(--font-weight-bold);
    margin-bottom: 0;
    margin-top: 0
    }

.welcome-left .help-text {
    color: var(--text-secondary-dark);
    font-size: 0.875rem;
    /* 14px */
    margin-bottom: 2rem;
    max-width: 420px
    }

.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
    }

/* Remove underline from Get Started button */
.welcome-left .form-actions .button-save {
    text-decoration: none
    }

/* Increase gap before subsequent form groups: add spacing above labels (not inputs) */
.welcome-left label:not(:first-of-type) {
    margin-top: 2rem
    }

/* 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-size: 0.875rem;
    padding: 0.75rem 1rem;
    width: 100%;
    min-height: 220px;
    /* taller field per mock */
    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;
    /* push to bottom */
    }

/* 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
    }

/* 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: transparent;
    color: #8C9094;
    border: none;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    padding: 10px 30px;
    border-radius: 37px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    height: 44px;
    /* Match button-save height exactly */
    box-sizing: border-box;
    margin-top: 2rem;
    /* Match button-save margin exactly */
    text-decoration: none
    }

.button-back:hover {
    color: var(--text-primary-dark);
    background-color: var(--hover-bg);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

/* Market Segment Options */
.market-segment-option {
    margin-bottom: 1rem;
    padding: 1rem;
    border: 1px solid var(--border-color-dark);
    border-radius: 8px;
    background-color: var(--background-panel);
    transition: all 0.2s ease;
    }

.market-segment-option:hover {
    border-color: var(--accent-blue);
    background-color: var(--hover-bg);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

.segment-content {
    display: flex;
    flex-direction: column;
    margin-left: 0.5rem
    }

.segment-name {
    font-weight: 500;
    color: var(--text-primary-dark);
    font-size: 14px;
    margin-bottom: 0.25rem
    }

.segment-description {
    font-size: 12px;
    color: var(--text-secondary-dark);
    line-height: 1.4
    }

/* Checkbox styling for market segments */
.market-segment-option .checkbox-label {
    display: flex;
    align-items: flex-start;
    cursor: pointer;
    width: 100%
    }

.market-segment-option .checkbox-custom {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border: 2px solid #37383B;
    border-radius: 4px;
    margin-right: 12px;
    margin-top: 2px;
    position: relative;
    background-color: #23262B
    }

.market-segment-option input[type="checkbox"]:checked + .checkbox-custom {
    background-color: #5ABDEE;
    border-color: #5ABDEE
    }

.market-segment-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)
    }

.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, .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.875rem;
    padding: 0.5rem;
    border-radius: 0.375rem;
    display: none
    }

.validation-feedback.error {
    background-color: rgba(244, 170, 79, 0.1);
    color: #F4AA4F;
    border: 1px solid rgba(244, 170, 79, 0.2)
    }

.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.5rem
    }

.service-status .status-indicator {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    font-weight: 500;
    opacity: 0.8;
    transition: opacity 0.2s ease
    }

.service-status .status-indicator.active {
    color: #2EB67D
    }

.service-status .status-indicator.inactive {
    color: #ef4444
    }

.service-status .status-indicator.connected-disabled {
    color: #f59e0b
    }

.service-status .status-indicator.needs-setup {
    color: #f59e0b
    }

.service-status .status-indicator svg {
    width: 8px;
    height: 8px;
    flex-shrink: 0
    }

.service-status .status-indicator:hover {
    opacity: 1
    }

/* Notification Info */
.notification-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem
    }

.notification-info h3 {
    margin-bottom: 0.25rem
    }

.notification-info p {
    margin-bottom: 0;
    flex: 1
    }

/* 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: 1px solid var(--border-color-dark);
    position: relative
    }

.modal-content .slack-connect-content, .modal-content form {
    overflow: visible
    }

.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-custom {
    width: 18px;
    height: 18px;
    border: 2px solid var(--border-color-dark);
    border-radius: 4px;
    background: transparent;
    position: relative;
    flex-shrink: 0;
    margin-top: 1px;
    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: #85c6f6;
    transform: translateY(-1px)
    }

.modal .button-cancel {
    background: transparent;
    color: var(--text-secondary-dark);
    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-cancel:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary-dark)
    }

.modal .button-delete {
    background: transparent;
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 8px;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease
    }

.modal .button-delete:hover {
    background: rgba(239, 68, 68, 0.1);
    border-color: #ef4444
    }

/* 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;
}

/* 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;
}

/* Header action hover text color */
.column-header-wrapper .header-action:hover {
    color: #23262B !important;
}

/* Modal overlay priority over sticky headers */
.modal { z-index: 9999 !important; }
.modal-open .settings-content .column-header-wrapper { z-index: 0 !important; pointer-events: none; }

/* Final override: enforce top padding on notification cards */
.notification-card { padding-top: 10px !important; }
/* Final override: add top margin on notification cards */
.notification-card { margin-top: 10px !important; }

/* Elevate min slider above the track */
.range-slider-min { z-index: 5; }
/* Ensure the max slider sits above the min slider's track */
.range-slider-max { z-index: 6; }

/* Ensure thumbs sit above tracks */
.range-slider::-webkit-slider-thumb { position: relative; z-index: 7; }
.range-slider::-moz-range-thumb { position: relative; z-index: 7; }

/* 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;
}

/* ========================================
   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%;
    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 */
    }
}