/* pages-consolidated.css - Built: 2026-01-09 06:28:54 UTC */
/* Source files: 69 */


/* ========== pages/_shared-economy.css ========== */
/**
 * Project Detail - Economy Section
 * bIDMIO
 * 
 * Enhanced economy section styles including:
 * - 5-column summary cards grid
 * - Tab headers with action buttons
 * - Economy table sections
 * - Empty state placeholders
 */

/* ========================================
   ENHANCED ECONOMY SECTION STYLES
   ======================================== */

/* 5-Column Summary Cards Grid */
.economy-summary-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

/* Desktop Summary Card Styling */
.economy-summary-grid .summary-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    padding: var(--space-5) var(--space-4);
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
}

.economy-summary-grid .summary-card:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
}

.economy-summary-grid .summary-card .summary-card-icon {
    font-size: 1.25rem;
    color: var(--color-text-tertiary);
    margin-bottom: var(--space-2);
}

.economy-summary-grid .summary-card .summary-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    text-transform: capitalize;
    margin-bottom: var(--space-1);
}

.economy-summary-grid .summary-card .summary-value {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: var(--space-1);
}

.economy-summary-grid .summary-card .summary-value .count {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.economy-summary-grid .summary-card .summary-value .summary-unit {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--color-text-tertiary);
}

/* Mobile: Horizontally scrollable summary cards with enhanced styling */
@media (max-width: 768px) {
    .economy-summary-grid {
        display: flex !important;
        flex-wrap: nowrap;
        gap: var(--space-3);
        margin: 0 0 1.25rem 0;
        padding: var(--space-2) var(--space-4) var(--space-3) var(--space-4);
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    
    .economy-summary-grid::-webkit-scrollbar {
        display: none;
    }
    
    .economy-summary-grid .summary-card {
        flex: 0 0 auto;
        width: 120px;
        min-width: 120px;
        padding: var(--space-4) var(--space-3);
        background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-background) 100%);
        border: 1px solid var(--color-border);
        border-radius: var(--border-radius-lg);
        text-align: center;
        scroll-snap-align: start;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    
    .economy-summary-grid .summary-card:active {
        transform: scale(0.98);
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    }
    
    .economy-summary-grid .summary-card .summary-label {
        font-size: 0.65rem;
        font-weight: 500;
        color: var(--color-text-secondary);
        margin-bottom: var(--space-2);
        text-transform: uppercase;
        letter-spacing: 0.025em;
        line-height: 1.3;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.25rem;
        min-height: 2rem;
    }
    
    .economy-summary-grid .summary-card .summary-label i {
        font-size: 0.6rem;
        opacity: 0.6;
    }
    
    .economy-summary-grid .summary-card .summary-value {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.125rem;
    }
    
    .economy-summary-grid .summary-card .summary-value .count {
        font-size: 1.75rem;
        font-weight: 700;
        color: var(--color-primary);
        line-height: 1;
    }
    
    .economy-summary-grid .summary-card .summary-value .summary-unit {
        font-size: 0.7rem;
        font-weight: 500;
        color: var(--color-text-tertiary);
        text-transform: lowercase;
    }
    
    /* Scroll indicator fade on right edge */
    .economy-summary-grid::after {
        content: '';
        position: sticky;
        right: 0;
        flex: 0 0 1rem;
        height: 100%;
        background: linear-gradient(to left, var(--color-background) 0%, transparent 100%);
        pointer-events: none;
    }
}

/* Tab Header with Action Button */
.tab-header-with-action {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-4);
    border-bottom: var(--border-width) solid var(--color-border);
}

.tab-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0;
}

/* Economy Table Section */
.economy-table-section {
    background: var(--color-surface);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-xs);
}

.table-section-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    padding: var(--space-5);
    margin: 0;
    border-bottom: var(--border-width) solid var(--color-border);
    background: var(--color-surface-secondary);
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: var(--space-12) var(--space-6);
    color: var(--color-text-secondary);
    font-style: italic;
}

/* Table Responsive Container */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Enhanced Economy Table - Striped Rows */
.economy-table tbody tr:nth-child(even) {
    background-color: var(--color-surface-secondary);
}

/* Hover state - pseudo-class has sufficient specificity to override nth-child */
.economy-table tbody tr:hover {
    background-color: var(--color-hover);
}

/* ========================================
   COMING SOON PLACEHOLDER
   ======================================== */

.coming-soon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-8);
    text-align: center;
    color: var(--color-text-secondary);
}

.coming-soon h3 {
    margin-top: var(--space-4);
    margin-bottom: var(--space-2);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.coming-soon p {
    margin: 0;
    font-size: var(--font-size-base);
}

/* ========================================
   RESPONSIVE GRID UTILITIES
   ======================================== */

.ds-grid--responsive-cols-1 {
    grid-template-columns: 1fr;
}

.ds-grid--responsive-cols-2 {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.ds-grid--responsive-cols-3 {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.ds-grid--responsive-cols-4 {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

/* ========================================
   STATUS BADGES
   ======================================== */

.status-badge {
    background: var(--color-success-bg);
    color: var(--color-success-dark);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--border-radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-align: center;
    border: var(--border-width) solid var(--color-success-border);
    display: inline-block;
}

.success-message {
    background: var(--color-success-bg);
    color: var(--color-success-dark);
    padding: var(--space-4) var(--space-5);
    border-radius: var(--border-radius);
    margin-bottom: var(--space-6);
    border: var(--border-width) solid var(--color-success-border);
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.success-message i {
    font-size: var(--font-size-lg);
}


/* ========== pages/_shared-forms.css ========== */
/**
 * Project Detail - Form Components
 * bIDMIO
 * 
 * Modern form grid system and components including:
 * - 12-column form grid with responsive breakpoints
 * - Project cards and sections
 * - Form field styling with focus states
 * - Form components and labels
 * - Status badges and success messages
 */

/* ========================================
   MODERN FORM GRID SYSTEM
   ======================================== */

.project-form-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

/* Field span utilities for 12-column grid */
.field-span-1 { grid-column: span 1; }
.field-span-2 { grid-column: span 2; }
.field-span-3 { grid-column: span 3; }
.field-span-4 { grid-column: span 4; }
.field-span-5 { grid-column: span 5; }
.field-span-6 { grid-column: span 6; }
.field-span-7 { grid-column: span 7; }
.field-span-8 { grid-column: span 8; }
.field-span-9 { grid-column: span 9; }
.field-span-10 { grid-column: span 10; }
.field-span-11 { grid-column: span 11; }
.field-span-12 { grid-column: span 12; }

/* ========================================
   MOBILE RESPONSIVE - PROJECT DETAIL FORMS
   ======================================== */
@media (max-width: 768px) {
    /* Make all grid fields full width on mobile */
    .project-form-grid {
        grid-template-columns: 1fr !important;
        gap: var(--mobile-spacing-md);
    }
    
    .field-span-1,
    .field-span-2,
    .field-span-3,
    .field-span-4,
    .field-span-5,
    .field-span-6,
    .field-span-7,
    .field-span-8,
    .field-span-9,
    .field-span-10,
    .field-span-11,
    .field-span-12 {
        grid-column: 1 / -1 !important;
    }
    
    /* Reduce card padding on mobile */
    .project-main-card {
        padding: var(--mobile-spacing-lg);
        margin-bottom: var(--mobile-spacing-lg);
    }
    
    /* Reduce section spacing on mobile */
    .project-section {
        padding: var(--mobile-spacing-md);
        margin-bottom: var(--mobile-spacing-md);
    }
    
    .project-section:last-of-type {
        margin-bottom: 0;
    }
    
    /* Optimize section titles for mobile */
    .project-section-title {
        font-size: var(--font-size-sm);
        margin-bottom: var(--mobile-spacing-md);
    }
    
    /* Ensure proper input sizing for touch */
    .project-form-grid input,
    .project-form-grid select,
    .project-form-grid textarea {
        min-height: var(--touch-target-min);
        padding: var(--mobile-spacing-sm) var(--mobile-spacing-md);
        font-size: var(--font-size-base);
    }
    
    /* Optimize labels for mobile */
    .project-form-grid label,
    .project-form-grid .ds-form-label {
        font-size: 0.75rem;
        margin-bottom: var(--mobile-spacing-xs);
    }
    
    /* Form actions - full width button on mobile */
    .project-form-actions {
        display: flex;
        flex-direction: column;
        gap: var(--mobile-spacing-sm);
    }
    
    .project-form-actions button,
    .project-form-actions .ds-btn {
        width: 100%;
        min-height: var(--touch-target-min);
        justify-content: center;
    }
}

/* ========================================
   PROJECT CARDS AND SECTIONS
   ======================================== */

/* ONE MAIN CARD - has the border and background */
.project-main-card {
    background: var(--color-surface);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--border-radius);
    padding: var(--space-6);
    margin-bottom: var(--space-6);
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}

/* SECTIONS INSIDE - bordered sections with background */
.project-section {
    margin-bottom: var(--space-5);
    padding: var(--space-5);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--border-radius);
    background: var(--color-surface-secondary);
}

.project-section:last-of-type {
    margin-bottom: 0;
}

.project-section-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-4);
    letter-spacing: 0.5px;
}

/* Form actions container */
.project-form-actions {
    text-align: center;
    margin-top: var(--space-6);
    padding-top: var(--space-5);
}

.project-form-actions .ds-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

/* ========================================
   FORM FIELD STYLING
   ======================================== */

/* Field styling within grid */
.project-form-grid label,
.project-form-grid .ds-form-label {
    display: block;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-2);
    letter-spacing: var(--letter-spacing-wide);
}

.project-form-grid .ds-form-input,
.project-form-grid input,
.project-form-grid select,
.project-form-grid textarea {
    width: 100%;
    min-height: var(--space-11);
    padding: var(--space-3) var(--space-4);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--border-radius);
    font-size: var(--font-size-base);
    background: var(--color-surface);
    transition: var(--transition-colors);
    font-family: var(--font-family-base);
    color: var(--color-text-primary);
}

.project-form-grid textarea {
    resize: vertical;
    min-height: 100px;
}

.project-form-grid .ds-form-input:focus,
.project-form-grid input:focus,
.project-form-grid select:focus,
.project-form-grid textarea:focus {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
    outline: none;
}

.project-form-grid .ds-form-input:disabled,
.project-form-grid .ds-form-input[readonly],
.project-form-grid input:disabled,
.project-form-grid input[readonly] {
    background-color: var(--color-surface-tertiary);
    color: var(--color-text-secondary);
    cursor: not-allowed;
}

/* ========================================
   FORM COMPONENTS
   ======================================== */

.ds-form-group {
    display: flex;
    flex-direction: column;
}

.ds-form-label {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-2);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    display: flex;
    align-items: center;
}

.ds-form-label i {
    margin-left: var(--space-1);
    font-size: var(--font-size-xs);
    opacity: 0.6;
}

#project-details .ds-form-input,
.project-form-grid .ds-form-input {
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--border-radius);
    padding: var(--space-3) var(--space-4);
    font-size: var(--font-size-base);
    background: var(--color-surface);
    transition: var(--transition-colors);
    min-height: var(--btn-height);
    font-family: var(--font-family-base);
    color: var(--color-text-primary);
}

#project-details .ds-form-input:focus,
.project-form-grid .ds-form-input:focus {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
    outline: none;
}

#project-details .ds-form-input:disabled,
#project-details .ds-form-input[readonly],
.project-form-grid .ds-form-input:disabled,
.project-form-grid .ds-form-input[readonly] {
    background-color: var(--color-surface-tertiary);
    color: var(--color-text-secondary);
    cursor: not-allowed;
}


/* ========== pages/_shared-layout.css ========== */
/**
 * Project Detail - Layout & Header
 * bIDMIO
 * 
 * Page layout components including:
 * - Project header section with back button
 * - Google Maps integration styling
 * - Project container layout system
 */

/* ========================================
   HEADER SECTION - Clean White Background
   ======================================== */

.ds-project-header {
    background: var(--color-surface);
    color: var(--color-text-primary);
    padding: var(--space-5) var(--space-6);
    border-bottom: var(--border-width) solid var(--color-border);
    margin-bottom: 0;
}

.ds-project-header__container {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin: 0;
}

.project-detail-header__content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex: 1;
}

.ds-project-header__back {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: var(--color-surface-secondary);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--border-radius);
    color: var(--color-text-primary);
    text-decoration: none;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    transition: var(--transition-colors);
}

.ds-project-header__back:hover {
    background: var(--color-hover);
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.ds-project-header__back i {
    font-size: var(--font-size-sm);
}

.ds-project-header__title {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--color-text-primary);
}

.ds-project-header__title i {
    color: var(--color-primary);
    font-size: var(--font-size-xl);
}

/* ========================================
   PROJECTS MAP VIEW
   ======================================== */

.projects-map-container {
    width: 100%;
    height: 600px;
    min-height: 400px;
    border-radius: var(--border-radius);
    overflow: hidden;
}

/* Full height on mobile for better map experience */
@media (max-width: 768px) {
    .projects-map-container {
        height: calc(100vh - 280px);
        min-height: 400px;
    }
}

/* Map marker label styling */
.map-marker-label {
    background: color-mix(in srgb, var(--color-surface) 95%, transparent);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--border-radius-sm);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    white-space: nowrap;
    border: var(--border-width) solid var(--color-border-light);
    margin-top: -8px;
}

/* ========================================
   PROJECT CONTAINER LAYOUT
   ======================================== */

.ds-project-container {
    display: block;
    background: var(--color-background);
    min-height: calc(100vh - 200px);
}

/* ========================================
   DESKTOP SIDEBAR NAVIGATION (≥1024px)
   ======================================== */

.ds-project-sidebar {
    width: 280px;
    background: var(--color-surface);
    border-right: var(--border-width) solid var(--color-border);
    flex-shrink: 0;
    position: sticky;
    top: 0;
    max-height: 100vh;
    min-height: calc(100vh - 100px);
    overflow-y: auto;
    padding-top: 0;
}

/* Default: Show horizontal tabs, hide sidebar */
.ds-project-sidebar {
    display: none;
}

.ds-project-tabs-container {
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: var(--z-sticky-local);
    background: var(--color-surface);
    border-bottom: var(--border-width) solid var(--color-border);
    margin-bottom: var(--space-4);
    padding-right: var(--space-4);
}

.ds-project-tabs-mobile {
    display: flex;
    gap: var(--space-2);
    padding: var(--space-3) 28px;
    overflow-x: auto;
    flex: 1;
}

/* Sidebar layout: Show sidebar, hide horizontal tabs */
.ds-project-container.layout-sidebar {
    display: flex;
    align-items: stretch;
    margin-top: var(--space-6);
}

.ds-project-container.layout-sidebar .ds-project-sidebar {
    display: block;
}

.ds-project-container.layout-sidebar .ds-project-tabs-container {
    display: none;
}

.ds-project-container.layout-sidebar .ds-project-tabs-mobile {
    display: none;
}

.ds-project-container.layout-sidebar .ds-project-content {
    flex: 1;
    min-width: 0;
    width: auto;
    max-width: none;
    padding-left: 1.5rem;
    padding-right: 1rem;
    padding-top: 0;
}

/* Add padding to tab content (not container) - except economy which has its own layout */
.ds-project-container.layout-sidebar .tab-content:not(#project-economy) {
    padding-left: 0;
}

.ds-project-container.layout-sidebar .ds-project-sidebar__nav {
    padding-top: 0;
}

.ds-project-container.layout-sidebar .ds-project-tab {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
}

/* ========================================
   MOBILE RESPONSIVE LAYOUT (≤768px)
   ======================================== */
@media (max-width: 768px) {
    /* Force horizontal tabs layout (sidebar doesn't fit on small screens) */
    .ds-project-container,
    .ds-project-container.layout-sidebar {
        display: block !important;
        flex-direction: column !important;
    }
    
    /* HIDE desktop sidebar navigation completely on mobile */
    .ds-project-sidebar,
    .ds-project-container.layout-sidebar .ds-project-sidebar {
        display: none !important;
    }
    
    /* SHOW horizontal mobile tabs - container stays visible, mobile tabs display as flex */
    .ds-project-tabs-container,
    .ds-project-container.layout-sidebar .ds-project-tabs-container {
        display: block !important;
    }
    
    .ds-project-tabs-mobile,
    .ds-project-container.layout-sidebar .ds-project-tabs-mobile {
        display: flex !important;
    }
    
    /* Content takes full width with no padding */
    .ds-project-content,
    .ds-project-container.layout-sidebar .ds-project-content {
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-top: 0 !important;
        width: 100% !important;
        flex: none !important;
    }
    
    .ds-project-tab,
    .ds-project-container.layout-sidebar .ds-project-tab {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* Mobile tab navigation styles */
    .ds-project-tabs-mobile {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: var(--space-3) var(--space-2);
        background: var(--color-surface);
        border-bottom: 1px solid var(--color-border);
        position: sticky;
        top: 0;
        z-index: 100;
    }
    
    .ds-project-tab-mobile {
        white-space: nowrap;
        padding: var(--space-2) var(--space-4) !important;
        min-height: 44px !important;
    }
}

.ds-project-sidebar__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-6);
    margin-bottom: var(--space-6);
    border-bottom: var(--border-width) solid var(--color-border);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}


/* ========== pages/_shared-navigation.css ========== */
/**
 * Project Detail - Navigation Components
 * bIDMIO
 * 
 * Navigation system including:
 * - Sidebar navigation items
 * - Default view star icons
 * - Current view badge
 * - Panel states and toggles
 * - Horizontal tab bar
 * - Layout toggle controls
 * - Project content area
 */

/* ========================================
   SIDEBAR NAVIGATION ITEMS
   ======================================== */

.ds-project-sidebar__nav {
    display: flex;
    flex-direction: column;
    padding: var(--space-6) 0 var(--space-4) 0;
}

.ds-project-nav-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-6);
    text-decoration: none;
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    transition: var(--transition-all);
    position: relative;
    border-left: var(--border-width-4) solid transparent;
    margin: var(--space-1) 0;
    border-radius: var(--border-radius);
}

.ds-project-nav-item i {
    width: var(--space-5);
    text-align: center;
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    transition: var(--transition-colors);
}

.ds-project-nav-item span {
    flex: 1;
}

.ds-project-nav-item:hover {
    background-color: var(--color-hover);
    color: var(--color-primary);
}

.ds-project-nav-item:hover i {
    color: var(--color-primary);
}

.ds-project-nav-item.active {
    background-color: var(--color-info-bg-lighter, #eff6ff);
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
    border-left-color: var(--color-primary);
}

.ds-project-nav-item.active i {
    color: var(--color-primary);
}

.ds-project-nav-item:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: -2px;
}

/* ========================================
   DEFAULT VIEW STAR ICONS
   ======================================== */

.ds-set-default-icon {
    width: var(--space-5);
    text-align: center;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: var(--transition-all);
    margin-left: auto;
    opacity: 0;
}

.ds-project-nav-item:hover .ds-set-default-icon {
    opacity: 1;
}

.ds-set-default-icon:hover {
    color: var(--color-warning);
    transform: scale(1.2);
}

.ds-set-default-icon.active {
    opacity: 1;
    color: var(--color-warning);
}

/* ========================================
   CURRENT VIEW BADGE
   ======================================== */

/* Current View Badge (shows when panel hidden on desktop) */
.ds-current-view-badge {
    display: none;
    padding: var(--space-3) var(--space-4);
    background: var(--color-info-bg);
    color: var(--color-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    border-radius: var(--border-radius);
    margin-bottom: var(--space-4);
    border: var(--border-width) solid var(--color-info-border);
    align-items: center;
    gap: var(--space-2);
}

.ds-current-view-badge i {
    font-size: var(--font-size-base);
}

/* ========================================
   PANEL STATES AND TOGGLES
   ======================================== */

/* Panel State Transitions */
.ds-project-nav {
    transition: all 0.3s ease;
    position: relative;
}

/* Panel Header with Hamburger Toggle */
.ds-panel-header {
    padding: var(--space-4);
    border-bottom: var(--border-width) solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.ds-panel-toggle-btn {
    background: var(--color-surface-secondary);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--border-radius);
    padding: var(--space-3);
    min-width: 44px;
    min-height: var(--space-11);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-all);
    color: var(--color-text-primary);
}

.ds-panel-toggle-btn:hover {
    background: var(--color-hover);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.ds-panel-toggle-btn i {
    font-size: var(--font-size-base);
}

/* ========================================
   HORIZONTAL TAB BAR
   ======================================== */

.ds-project-tab-mobile {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    text-decoration: none;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    border-bottom: var(--border-width-2) solid transparent;
    transition: var(--transition-all);
    white-space: nowrap;
    border-radius: var(--border-radius);
}

.ds-project-tab-mobile:hover {
    color: var(--color-text-primary);
    background-color: var(--color-info-bg-lighter);
}

.ds-project-tab-mobile.active {
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
    font-weight: 700;
    background-color: var(--color-primary);
    border-bottom: 4px solid var(--color-primary);
}

.ds-project-tab-mobile.active i,
.ds-project-tab-mobile.active span {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

.ds-project-tab-mobile i {
    font-size: var(--font-size-base);
}

/* ========================================
   LAYOUT TOGGLE
   ======================================== */

.layout-toggle-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 40px;
    min-height: 40px;
    padding: var(--space-2) var(--space-3);
    background: transparent;
    border: none;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: var(--transition-all);
    border-radius: var(--border-radius-md);
}

.layout-toggle-icon:hover {
    background: var(--color-hover);
    color: var(--color-text-primary);
}

.layout-toggle-icon i {
    font-size: var(--font-size-md);
}

/* ========================================
   PROJECT CONTENT AREA
   ======================================== */

.ds-project-content {
    padding: 0;
    background: var(--color-background);
}

/* FORCE ZERO PADDING - Only for horizontal layout (full-bleed design) */
.ds-project-container:not(.layout-sidebar) .ds-project-content,
.ds-project-container:not(.layout-sidebar) #projects-list.ds-project-tab,
.ds-project-container:not(.layout-sidebar) .ds-project-tab,
.ds-project-container:not(.layout-sidebar) .project-content-view,
.ds-project-container:not(.layout-sidebar) #projects-list-view,
.ds-project-container:not(.layout-sidebar) #projects-list-view.project-content-view {
    padding: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Force filter inputs to full width - override design system max-width */
.ds-project-tab .ds-form-input,
.ds-project-tab .form-select {
    width: 100%;
    max-width: none;
}

/* Full-bleed table - no borders on sides */
.projects-list__table .ds-card {
    border-left: none;
    border-right: none;
    border-radius: 0;
}

/* ========================================
   SIDEBAR ACTION BUTTONS
   ======================================== */

.ds-sidebar-actions {
    margin-top: var(--space-6);
    padding: var(--space-4) var(--space-4) var(--space-2);
    border-top: var(--border-width) solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.ds-sidebar-action-btn {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    text-decoration: none;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    transition: var(--transition-all);
    border-radius: var(--border-radius-md);
    border: var(--border-width) solid transparent;
    background: transparent;
    cursor: pointer;
    width: 100%;
    text-align: left;
}

.ds-sidebar-action-btn i {
    width: var(--space-5);
    text-align: center;
    font-size: var(--font-size-base);
    transition: var(--transition-colors);
}

.ds-sidebar-action-btn span {
    flex: 1;
}

/* Warning variant (Archive) */
.ds-sidebar-action-btn--warning {
    color: var(--color-warning-dark, #d97706);
    background: var(--color-warning-bg, #fef3c7);
    border-color: var(--color-warning-border, #fde68a);
}

.ds-sidebar-action-btn--warning:hover {
    background: var(--color-warning, #f59e0b);
    color: var(--color-text-inverse);
    border-color: var(--color-warning, #f59e0b);
}

.ds-sidebar-action-btn--warning:hover i {
    color: var(--color-text-inverse);
}

/* Danger variant (Delete) */
.ds-sidebar-action-btn--danger {
    color: var(--color-danger-dark, #dc2626);
    background: var(--color-danger-bg, #fee2e2);
    border-color: var(--color-danger-border, #fecaca);
}

.ds-sidebar-action-btn--danger:hover {
    background: var(--color-danger, #ef4444);
    color: var(--color-text-inverse);
    border-color: var(--color-danger, #ef4444);
}

.ds-sidebar-action-btn--danger:hover i {
    color: var(--color-text-inverse);
}

/* Focus states */
.ds-sidebar-action-btn:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
}


/* ========== pages/calendar-base-part1.css ========== */
/* ========================================
/* Employee Work Zone Styling */

/* Container Layout */
.workzone-container {
    display: flex;
    min-height: calc(100vh - 120px);
    background-color: var(--color-background);
}

/* Sidebar Navigation */
.workzone-sidebar {
    width: 280px;
    background: var(--color-surface);
    border-right: var(--border-width) solid var(--color-border);
    padding: 1.5rem 0;
    flex-shrink: 0;
}

.workzone-sidebar__header {
    padding: 0 1.5rem 1.5rem;
    border-bottom: var(--border-width) solid var(--color-border);
    margin-bottom: 1rem;
}

.workzone-sidebar__title {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.workzone-sidebar__title i {
    color: var(--color-primary);
}

.workzone-sidebar__subtitle {
    margin: 0.5rem 0 0;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

/* Navigation Items */
.workzone-nav {
    display: flex;
    flex-direction: column;
}

.workzone-nav__item {
    display: flex;
    align-items: center;
    padding: 0.875rem 1.5rem;
    color: var(--color-text-primary);
    text-decoration: none;
    transition: all 0.2s ease;
    border-left: var(--border-width-4) solid transparent;
    gap: var(--space-3);
}

.workzone-nav__item:hover {
    background-color: var(--color-background);
    color: var(--color-primary);
}

.workzone-nav__item--active {
    background-color: var(--color-primary);
    color: var(--color-text-inverse);
    border-left-color: var(--color-primary);
    font-weight: 700;
}

.workzone-nav__icon {
    width: var(--space-5);
    text-align: center;
    font-size: 1rem;
}

.workzone-nav__text {
    flex: 1;
    font-size: 0.9375rem;
}

.workzone-nav__arrow {
    font-size: 0.75rem;
    opacity: 0;
    transition: opacity 0.2s ease;
    color: var(--color-text-tertiary);
}

.workzone-nav__item:hover .workzone-nav__arrow {
    opacity: 1;
}

.workzone-nav__item--active .workzone-nav__arrow {
    opacity: 1;
    color: var(--color-text-inverse);
}

/* Main Content Area */
.workzone-content {
    flex: 1;
    padding: 2rem;
    padding-bottom: 4rem;
}

/* Tab Navigation */
.workzone-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    border-bottom: var(--border-width-2) solid var(--color-border);
    padding-bottom: 0;
    overflow-x: auto;
    flex-wrap: nowrap;
}

.workzone-tab {
    padding: 0.75rem 1.25rem;
    border: none;
    background: transparent;
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    border-bottom: var(--border-width-2) solid transparent;
    margin-bottom: -2px;
    transition: all 0.2s ease;
}

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

.workzone-tab--active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
    background-color: transparent;
}

/* Tab Content Visibility */
.workzone-tab-content {
    display: none !important;
}

.workzone-tab-content.active {
    display: block !important;
}

/* Stats Grid */
.workzone-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.25rem;
    margin-bottom: 2rem;
}

/* Work Zone Cards */
.workzone-card {
    background: var(--color-surface);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--border-radius);
    padding: 1.25rem;
    transition: box-shadow 0.2s ease;
}

.workzone-card:hover {
    box-shadow: var(--shadow-md);
}

.workzone-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.workzone-card__title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.workzone-card__expand {
    background: none;
    border: none;
    color: var(--color-text-tertiary);
    cursor: pointer;
    padding: 0.25rem;
    font-size: 0.875rem;
    transition: color 0.2s ease;
}

.workzone-card__expand:hover {
    color: var(--color-primary);
}

.workzone-card__body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Stats */
.workzone-stat {
    display: flex;
    flex-direction: column;
}

.workzone-stat--secondary {
    padding-top: 0.75rem;
    border-top: var(--border-width) solid var(--color-border);
}

.workzone-stat__value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 0.25rem;
}

.workzone-stat__value--large {
    font-size: 1.75rem;
}

.workzone-stat__label {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}



/* ========== pages/calendar-base-part2.css ========== */
/* Stat Rows */
.workzone-stat-row {
    display: flex;
    gap: 1.5rem;
    padding-top: 0.75rem;
    border-top: var(--border-width) solid var(--color-border);
}

.workzone-stat-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.workzone-stat-item__label {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.workzone-stat-item__value {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

/* Responsive Design */
@media (max-width: 992px) {
    .workzone-container {
        flex-direction: column;
    }
    
    .workzone-sidebar {
        width: 100%;
        border-right: none;
        border-bottom: var(--border-width) solid var(--color-border);
    }
    
    .workzone-nav {
        flex-direction: row;
        overflow-x: auto;
        padding-bottom: 0.5rem;
    }
    
    .workzone-nav__item {
        flex-direction: column;
        align-items: center;
        gap: 0.25rem;
        min-width: 80px;
        padding: 0.75rem 0.5rem;
        border-left: none;
        border-bottom: var(--border-width-4) solid transparent;
    }
    
    .workzone-nav__item--active {
        border-left-color: transparent;
        border-bottom-color: var(--color-primary);
    }
    
    .workzone-nav__text {
        font-size: 0.75rem;
        text-align: center;
    }
    
    .workzone-nav__arrow {
        display: none;
    }
    
    .workzone-content {
        padding: 1.5rem;
    }
    
    .workzone-stats-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .workzone-content {
        padding: 1rem;
    }
    
    .workzone-tabs {
        gap: 0.25rem;
    }
    
    .workzone-tab {
        padding: 0.625rem 0.875rem;
        font-size: 0.8125rem;
    }
    
    .workzone-card {
        padding: 1rem;
    }
    
    .workzone-stat__value {
        font-size: 1.25rem;
    }
    
    .workzone-stat__value--large {
        font-size: 1.5rem;
    }
}

/* Workzone Header Styling */
.workzone-header {
    padding: var(--space-5) var(--space-4);
    border-bottom: var(--border-width) solid var(--color-border);
    margin-bottom: var(--space-4);
}

.workzone-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-2) 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.workzone-title i {
    color: var(--color-primary);
}

.workzone-subtitle {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0;
}

/* Dark Mode Support */
[data-theme="dark"] .workzone-sidebar {
    background-color: var(--color-surface-dark, #1e293b);
    border-right-color: var(--color-border-dark, #334155);
}

[data-theme="dark"] .workzone-nav__item--active {
    background-color: rgba(59, 130, 246, 0.1);
}

[data-theme="dark"] .workzone-card {
    background-color: var(--color-surface-dark, #1e293b);
    border-color: var(--color-border-dark, #334155);
}
/**
 * SETTINGS-LAYOUT-BASE.CSS
 * ==========================================
 * Foundation Layout for Settings Pages
 * 
 * This module contains base structural styles for all settings pages:
 * - Body overrides scoped to settings routes
 * - Main settings container layout
 * - Sidebar structure and navigation menu
 * - Utility classes for generic layout aids
 * 
 * Related modules:
 * - settings-layout-content.css: Section structure, tabs, grids
 * - settings-layout-hours.css: Opening hours components
 * - settings-layout-tables.css: Tables and accordion layouts
 * 
 * Note: This is part of the settings-layout.css refactoring (November 2025)
 */

/**
 * !important Usage Policy
 * =======================
 * Modal Z-Index Management (Bootstrap Override)
 * - Required to override Bootstrap's modal stacking
 * - Ensures custom modals stack correctly above settings content
 * 
 * Last updated: Phase 2B - October 2025
 */

/* Base Layout - Settings and Workzone pages now use layout-two-column.css
 * The fixed positioning and padding:0 overrides have been removed to allow
 * design tokens (page background color) to remain visible around edges.
 * See: static/css/components/layout-two-column.css for the new layout system.
 */

/* Settings Navigation */
body.settings-route .settings-nav,
body.workzone-route .settings-nav {
    list-style: none;
    padding: 0;
    margin: 0;
}

body.settings-route .settings-nav li,
body.workzone-route .settings-nav li {
    border-bottom: var(--border-width) solid var(--color-border-strong);
}

body.settings-route .settings-nav a,
body.workzone-route .settings-nav a {
    display: flex;
    align-items: center;
    padding: var(--space-3) var(--space-5);
    text-decoration: none;
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    transition: all 0.2s ease;
}

body.settings-route .settings-nav a:hover,
body.workzone-route .settings-nav a:hover {
    background-color: var(--color-surface-secondary);
    color: var(--color-text-primary);
}

body.settings-route .settings-nav a.active,
body.workzone-route .settings-nav a.active {
    background-color: var(--color-info-bg-lighter, #eff6ff);
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
    border-left: 4px solid var(--color-primary);
}

body.settings-route .settings-nav a i,
body.workzone-route .settings-nav a i {
    margin-right: var(--space-3);
    width: var(--space-4);
    font-size: var(--font-size-sm);
    text-align: center;
}

/* Utility Classes */
body.settings-route .ds-p-6,
body.workzone-route .ds-p-6 {
    padding: var(--space-6);
}

body.settings-route .ds-bg-gray-50,
body.workzone-route .ds-bg-gray-50 {
    background-color: var(--color-surface-secondary);
}



/* ========== pages/calendar-base-part3.css ========== */
body.settings-route .ds-bg-gray-100,
body.workzone-route .ds-bg-gray-100 {
    background-color: var(--color-surface-tertiary);
}

body.settings-route .ds-pr-11,
body.workzone-route .ds-pr-11 {
    padding-right: var(--space-11);
}
/**
 * SETTINGS-LAYOUT-CONTENT.CSS
 * ==========================================
 * Content Area and Section Structure for Settings Pages
 * 
 * This module contains content organization styles:
 * - Settings content area layout
 * - Section panels and cards
 * - Section headers with collapse functionality
 * - Save status indicators and auto-save states
 * - Blue section component
 * - Grid systems for layout
 * - Tab navigation (modern tabs)
 * 
 * Related modules:
 * - settings-layout-base.css: Foundation container and sidebar
 * - settings-layout-hours.css: Opening hours components
 * - settings-layout-tables.css: Tables and accordion layouts
 * 
 * Note: This is part of the settings-layout.css refactoring (November 2025)
 */

/* Settings Content Area */
body.settings-route .settings-content,
body.workzone-route .settings-content {
    flex: 1;
    padding: var(--space-6) var(--space-8) var(--space-20) var(--space-8);
    background: var(--color-surface-tertiary);
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
}

/* Settings Sections */
body.settings-route .settings-section,
body.workzone-route .settings-section {
    background: var(--color-surface);
    border: var(--border-width) solid var(--color-border-strong);
    border-radius: var(--border-radius);
    margin-bottom: var(--space-8);
}

/* Section Headers */
body.settings-route .section-header,
body.workzone-route .section-header {
    background: var(--color-surface-secondary);
    padding: var(--space-4) var(--space-6);
    border-bottom: var(--border-width) solid var(--color-border-strong);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease;
}

body.settings-route .section-header:hover,
body.workzone-route .section-header:hover {
    background: var(--color-surface-tertiary);
}

body.settings-route .section-title,
body.workzone-route .section-title {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
}

body.settings-route .section-icon,
body.workzone-route .section-icon {
    color: var(--color-text-tertiary);
    font-size: var(--font-size-sm);
}

body.settings-route .collapse-icon,
body.workzone-route .collapse-icon {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    transition: transform 0.2s ease;
}

body.settings-route .collapse-icon.collapsed,
body.workzone-route .collapse-icon.collapsed {
    transform: rotate(180deg);
}

/* Section Content */
body.settings-route .section-content,
body.workzone-route .section-content {
    padding: var(--space-6);
    overflow: visible;
    max-height: none;
    transition: all 0.3s ease;
    opacity: 1;
}

body.settings-route .section-content.collapsed,
body.workzone-route .section-content.collapsed {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
}

/* Save Status Indicator */
body.settings-route .save-status,
body.workzone-route .save-status {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--space-3);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: var(--color-surface-tertiary);
    color: var(--color-text-secondary);
}

body.settings-route .save-status.saving,
body.workzone-route .save-status.saving {
    background: var(--color-border);
    color: var(--color-text-secondary);
}

body.settings-route .save-status.error,
body.workzone-route .save-status.error {
    background: var(--color-surface-tertiary);
    color: var(--color-text-primary);
}

/* Auto-save State Styling */
body.settings-route .auto-save,
body.workzone-route .auto-save {
    transition: border-color 0.2s ease;
}

body.settings-route .auto-save.saving,
body.workzone-route .auto-save.saving {
    border-color: var(--color-gray-400);
}

body.settings-route .auto-save.saved,
body.workzone-route .auto-save.saved {
    border-color: var(--color-text-secondary);
}

body.settings-route .auto-save.error,
body.workzone-route .auto-save.error {
    border-color: var(--color-text-secondary);
}

/* Blue Section Component */
body.settings-route .blue-section,
body.workzone-route .blue-section {
    background: var(--color-surface-secondary);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--space-1);
    padding: var(--space-3-5);
    margin-bottom: var(--space-3-5);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

body.settings-route .blue-section-content,
body.workzone-route .blue-section-content {
    display: flex;
    flex-direction: column;
}

body.settings-route .blue-section-title,
body.workzone-route .blue-section-title {
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    display: flex;
    align-items: center;
}

body.settings-route .blue-section-subtitle,
body.workzone-route .blue-section-subtitle {
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
    margin-top: var(--space-1);
}

/* Grid Systems */
body.settings-route .grid-two-col,
body.workzone-route .grid-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
    margin-bottom: var(--space-5);
}

/* Tab Content */
body.settings-route .settings-tab-content,
body.workzone-route .settings-tab-content {
    display: none;
}

body.settings-route .settings-tab-content.active,
body.workzone-route .settings-tab-content.active {
    display: block;
    padding-bottom: 40px;
}

/* Modern Tabs Navigation */
body.settings-route .modern-tabs,
body.workzone-route .modern-tabs {
    display: flex;
    background: var(--color-surface);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
    margin-bottom: var(--space-6);
    overflow: hidden;
}

body.settings-route .tab-btn,
body.workzone-route .tab-btn {
    flex: 1;
    padding: var(--space-4) var(--space-5);
    background: transparent;
    border: none;
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-medium);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    transition: all 0.2s ease;
    cursor: pointer;
}

body.settings-route .tab-btn:hover,
body.workzone-route .tab-btn:hover {
    color: var(--color-text-primary);
    background: var(--color-surface-tertiary);
}

body.settings-route .tab-btn.active,
body.workzone-route .tab-btn.active {
    color: var(--color-text-primary);
    background: var(--color-surface-tertiary);
    border-bottom: var(--border-width-2) solid var(--color-gray-400);
}


/* ========== pages/calendar-base-part4.css ========== */

/**
 * SETTINGS-LAYOUT-HOURS.CSS
 * ==========================================
 * Opening Hours Layout Components
 * 
 * This module contains all styles for the working hours feature:
 * - Hours summary grid and cards
 * - Days grid and day cards (active/closed states)
 * - Day headers and toggle switches
 * - Time section inputs and dividers
 * - Setting items layout
 * - Overtime section
 * 
 * Related modules:
 * - settings-layout-base.css: Foundation container and sidebar
 * - settings-layout-content.css: Section structure and tabs
 * - settings-layout-tables.css: Tables and accordion layouts
 * 
 * Note: This is part of the settings-layout.css refactoring (November 2025)
 */

/* Opening Hours Layout Components */
body.settings-route .hours-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-6);
    margin-top: var(--space-6);
    margin-bottom: var(--space-8);
}

body.settings-route .summary-card {
    background: var(--color-surface);
    border-radius: var(--space-4);
    padding: var(--space-6);
    box-shadow: var(--shadow-md);
    border: var(--border-width) solid var(--color-surface-tertiary);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

body.settings-route .summary-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

body.settings-route .summary-card .summary-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--border-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-4);
    transition: transform 0.2s ease;
}

body.settings-route .summary-card:hover .summary-icon {
    transform: scale(1.05);
}

/* Icon colors for each card type */
body.settings-route .summary-card:nth-child(1) .summary-icon {
    background: linear-gradient(135deg, var(--color-indigo) 0%, var(--color-purple) 100%);
    box-shadow: 0 4px 12px var(--color-indigo-bg);
}

body.settings-route .summary-card:nth-child(2) .summary-icon {
    background: linear-gradient(135deg, var(--color-pink-light) 0%, var(--color-pink) 100%);
    box-shadow: 0 4px 12px var(--color-pink-bg);
}

body.settings-route .summary-card:nth-child(3) .summary-icon {
    background: linear-gradient(135deg, var(--color-info-light) 0%, var(--color-cyan) 100%);
    box-shadow: 0 4px 12px var(--color-info-bg);
}

body.settings-route .summary-card .summary-icon i {
    color: var(--color-surface);
    font-size: var(--font-size-2xl);
}

body.settings-route .summary-card h4 {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-700);
    margin: 0 0 4px 0;
}

body.settings-route .summary-card p {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0 0 8px 0;
    font-size: var(--font-size-md);
}

body.settings-route .summary-card small {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

/* Days Grid */
body.settings-route .days-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: var(--space-6);
}

body.settings-route .day-card {
    background: var(--color-surface);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-sm);
    border: var(--border-width) solid var(--color-border);
    overflow: hidden;
    transition: all 0.2s ease;
    position: relative;
}

body.settings-route .day-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--space-1);
    background: linear-gradient(90deg, var(--color-border-strong) 0%, var(--color-gray-400) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

body.settings-route .day-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-card-hover);
    border-color: var(--color-border-strong);
}

body.settings-route .day-card.active {
    border-color: var(--color-gray-400);
    box-shadow: var(--shadow-lg);
}

body.settings-route .day-card.active::before {
    opacity: 1;
    background: linear-gradient(90deg, var(--color-text-secondary) 0%, var(--color-text-secondary) 100%);
}

body.settings-route .day-card.closed {
    opacity: 0.6;
    background: var(--color-surface-secondary);
    border-color: var(--color-border);
}

body.settings-route .day-card.closed .day-header {
    background: var(--color-surface-tertiary);
}

body.settings-route .day-header {
    padding: var(--space-5) var(--space-6);
    background: var(--color-surface-secondary);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: var(--border-width) solid var(--color-border);
}

body.settings-route .day-title h5 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-2) 0;
    letter-spacing: -0.01em;
}

body.settings-route .day-hours {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    background: var(--color-surface);
    padding: var(--space-1-5) var(--space-3);
    border-radius: var(--border-radius);
    display: inline-block;
    border: var(--border-width) solid var(--color-border);
}

body.settings-route .day-toggle {
    display: flex;
    align-items: center;
    gap: var(--space-3-5);
}

body.settings-route .toggle-label {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    min-width: 42px;
    text-align: right;
}

body.settings-route .day-content {
    padding: var(--space-6);
}

body.settings-route .time-section {
    display: flex;
    align-items: flex-end;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
    padding: 0;
}

body.settings-route .time-section label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-2);
    display: block;
}

body.settings-route .time-input-group {
    flex: 1;
}

body.settings-route .time-input-group input[type="time"] {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    font-size: var(--font-size-base);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--border-radius);
    background: var(--color-surface);
    transition: all 0.2s ease;
}

body.settings-route .time-input-group input[type="time"]:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-info-bg-subtle);
    outline: none;
}

body.settings-route .time-divider {
    color: var(--color-text-tertiary);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-light);
    padding: 0 var(--space-2);
    margin-bottom: var(--space-3);
}

body.settings-route .setting-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: var(--space-4) 0;
    border-bottom: var(--border-width) solid var(--color-border-light);
    transition: background 0.2s ease;
}

body.settings-route .setting-item:first-child {
    padding-top: 0;
}

body.settings-route .setting-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

body.settings-route .setting-info {
    flex: 1;
    margin-right: var(--space-4);
}

body.settings-route .setting-info span {
    display: block;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-1-5);
    line-height: 1.4;
}

body.settings-route .setting-info small {
    display: block;
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
    line-height: 1.6;
}

body.settings-route .day-actions {
    padding-top: var(--space-5);
    margin-top: var(--space-5);
}

body.settings-route .day-actions .btn-link {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface-secondary);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--border-radius);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    text-align: center;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
}

body.settings-route .day-actions .btn-link:hover {
    background: var(--color-surface-tertiary);
    border-color: var(--color-border-strong);
    color: var(--color-text-primary);
    text-decoration: none;
}

body.settings-route .day-actions .btn-link i {
    font-size: var(--font-size-sm);
}

/* Work Type Section */
body.settings-route .work-type-section {
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-5);
    border-bottom: var(--border-width) solid var(--color-border-light);
}

body.settings-route .work-type-section label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-2);
    display: block;
}

body.settings-route .work-type-section select {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    font-size: var(--font-size-sm);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--border-radius);
    background: var(--color-surface);
    color: var(--color-text-primary);
    transition: all 0.2s ease;
}

body.settings-route .work-type-section select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-info-bg-subtle);
    outline: none;
}

/* Modern Switch Styling in Day Cards */
body.settings-route .day-card .modern-switch {
    margin-top: var(--space-0-5);
}

/* Settings Section Spacing */
body.settings-route .settings-section-wrapper {
    margin-top: var(--space-5);
}

/* Overtime settings within setting-item */
body.settings-route .setting-item .overtime-threshold-group {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

body.settings-route .setting-item .overtime-threshold-group input {
    width: 80px;
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-sm);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--border-radius);
    background: var(--color-surface);
}

body.settings-route .setting-item .overtime-threshold-group input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px var(--color-info-bg-subtle);
    outline: none;
}

body.settings-route .setting-item .overtime-threshold-group span {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

/* Compact Setting Items for Day Cards */
body.settings-route .ds-setting-item--compact {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-4) 0;
    border-bottom: var(--border-width) solid var(--color-border-light);
}

body.settings-route .ds-setting-item--compact:first-child {
    padding-top: 0;
}

body.settings-route .ds-setting-item--compact:last-child {
    border-bottom: none;
}

body.settings-route .ds-setting-item--compact.ds-mb-0 {
    padding-bottom: 0;
}

body.settings-route .ds-setting-item--compact .ds-setting-info {
    flex: 1;
    margin-right: var(--space-4);
}

body.settings-route .ds-setting-item--compact .ds-setting-info span {
    display: block;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-1);
    line-height: 1.4;
}

body.settings-route .ds-setting-item--compact .ds-setting-info small {
    display: block;
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
    line-height: 1.5;
}

/* Column Layout for Work Type */
body.settings-route .ds-setting-item--column {
    flex-direction: column;
    align-items: flex-start;
    padding: var(--space-5) 0;
}

body.settings-route .ds-setting-item--column .ds-setting-info {
    margin-right: 0;
    margin-bottom: var(--space-2);
}

body.settings-route .ds-setting-item--column select {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    font-size: var(--font-size-sm);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--border-radius);
    background: var(--color-surface);
    color: var(--color-text-primary);
    transition: all 0.2s ease;
}

body.settings-route .ds-setting-item--column select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-info-bg-subtle);
    outline: none;
}

/* Settings Section Wrapper */
body.settings-route .day-content .settings-section {
    margin-top: var(--space-4);
    padding: var(--space-5) var(--space-4);
    border-top: var(--border-width) solid var(--color-border-light);
    background: var(--color-surface-secondary);
    border-radius: var(--border-radius);
}

/* Day Toggle Alignment */
body.settings-route .day-toggle {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

body.settings-route .day-toggle .toggle-label {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    min-width: 50px;
}

/* Modern Switch in Compact Items - Better Alignment */
body.settings-route .ds-setting-item--compact .modern-switch {
    flex-shrink: 0;
}

/* ========================================
   OVERTIME SECTIONS
   ======================================== */

/* Overtime Section Container */
body.settings-route .overtime-section {
    background: var(--color-surface);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--border-radius-lg);
    padding: var(--space-6);
    margin-bottom: var(--space-6);
    box-shadow: var(--shadow-sm);
}

/* Section Header Simple */
body.settings-route .section-header-simple {
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-4);
    border-bottom: var(--border-width-2) solid var(--color-border);
}

body.settings-route .section-header-simple h6 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-2) 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

body.settings-route .section-header-simple h6 i {
    color: var(--color-primary);
    font-size: var(--font-size-xl);
}

body.settings-route .section-header-simple p {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

/* Overtime Settings Items */
body.settings-route .overtime-settings {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

body.settings-route .overtime-settings .setting-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-4);
    background: var(--color-surface-secondary);
    border-radius: var(--border-radius);
    border: var(--border-width) solid var(--color-border-light);
}

body.settings-route .overtime-settings .setting-item .setting-info {
    flex: 1;
    margin-right: var(--space-4);
}

body.settings-route .overtime-settings .setting-item .setting-info span {
    display: block;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    font-size: var(--font-size-base);
    margin-bottom: var(--space-1);
}

body.settings-route .overtime-settings .setting-item .setting-info small {
    display: block;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

/* Form Grid in Overtime Section */
body.settings-route .overtime-section .form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-5);
    margin-bottom: var(--space-4);
}

body.settings-route .overtime-section .form-grid:last-of-type {
    margin-bottom: 0;
}

/* Form Groups in Overtime */
body.settings-route .overtime-section .ds-form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

body.settings-route .overtime-section .ds-form-group label.ds-form-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

body.settings-route .overtime-section .ds-form-group .form-select {
    padding: var(--space-3) var(--space-4);
    font-size: var(--font-size-sm);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--border-radius);
    background: var(--color-surface);
    color: var(--color-text-primary);
    transition: all 0.2s ease;
}

body.settings-route .overtime-section .ds-form-group .form-select:disabled {
    background: var(--color-surface-secondary);
    color: var(--color-text-secondary);
    cursor: not-allowed;
}

body.settings-route .overtime-section .ds-form-group .form-select:focus:not(:disabled) {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-info-bg-subtle);
    outline: none;
}

body.settings-route .overtime-section .ds-form-group small.ds-text-muted {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    line-height: 1.5;
}

/* Alert in Overtime Section */
body.settings-route .overtime-section .ds-alert {
    margin-top: var(--space-5);
}

body.settings-route .overtime-section .ds-alert ul {
    margin: var(--space-2) 0 0 var(--space-6);
    padding: 0;
}

body.settings-route .overtime-section .ds-alert li {
    margin-bottom: var(--space-1);
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
}


/* ========== pages/calendar-responsive-part1.css ========== */
/* Modal Header Title - Fragment Continuation */
.modal-header .modal-title {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-md);
}

.modal-header .btn-close {
    filter: brightness(0) invert(1);
    opacity: 0.8;
}

.modal-header .btn-close:hover {
    opacity: 1;
}

.modal-body {
    padding: var(--space-6);
}

.modal-body .form-label {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--space-2);
    font-size: var(--font-size-sm);
}

/* Enhanced modal form styling */
.modal-body .ds-form-input,
.modal-body .ds-form-textarea {
    border: var(--border-width-2) solid var(--color-border-strong);
    border-radius: var(--border-radius);
    padding: var(--space-2-5) var(--space-3-5);
    font-size: var(--font-size-sm);
    transition: all 0.2s ease;
}


.modal-body .ds-form-input:focus,
.modal-body .ds-form-textarea:focus {
    border-color: var(--color-gray-400);
    box-shadow: 0 0 0 3px rgba(156, 163, 175, 0.1);
}

.modal-footer {
    padding: var(--space-4) var(--space-6);
    border-top: var(--border-width) solid var(--color-border-strong);
}

.modal-footer .btn {
    padding: var(--space-2-5) var(--space-5);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    border-radius: var(--border-radius);
}

/* Make textarea fields taller in modals */
.modal textarea {
    min-height: 100px;
    resize: vertical !important;
}
/**
 * SETTINGS-FORMS-BOOTSTRAP-OVERRIDES.CSS
 * ==========================================
 * Bootstrap Color Neutralization for Settings Pages
 * 
 * This module contains all Bootstrap semantic color overrides:
 * - Background color neutralization (.bg-*)
 * - Badge color neutralization
 * - Button color neutralization (.btn-*)
 * - Outline button neutralization (.btn-outline-*)
 * - Alert color neutralization (.alert-*)
 * 
 * All selectors are scoped to .settings-page container to avoid
 * affecting other pages. Uses design tokens for consistency.
 * 
 * Part of modularized settings-forms (November 2025)
 * Related modules: settings-forms-buttons.css, settings-forms-components.css
 * 
 * IMPORTANT: This file must load AFTER settings-forms-buttons.css
 * in pages-consolidated.css to ensure override specificity.
 */

/* Bootstrap Color Override - Keep Bootstrap Colors with WHITE Text */
.settings-page .bg-success,
.settings-page .badge.bg-success {
    background-color: var(--color-success);
    color: var(--color-surface);
    border: var(--border-width) solid var(--color-success);
}

.settings-page .bg-primary,
.settings-page .badge.bg-primary {
    background-color: var(--color-primary);
    color: var(--color-surface);
    border: var(--border-width) solid var(--color-primary);
}

.settings-page .bg-warning,
.settings-page .badge.bg-warning {
    background-color: var(--color-warning);
    color: var(--color-surface);
    border: var(--border-width) solid var(--color-warning);
}

.settings-page .bg-danger,
.settings-page .badge.bg-danger {
    background-color: var(--color-danger);
    color: var(--color-surface);
    border: var(--border-width) solid var(--color-danger);
}

.settings-page .bg-info,
.settings-page .badge.bg-info {
    background-color: var(--color-info);
    color: var(--color-surface);
    border: var(--border-width) solid var(--color-info);
}

.settings-page .bg-secondary,
.settings-page .badge.bg-secondary {
    background-color: var(--color-gray-600);
    color: var(--color-surface);
    border: var(--border-width) solid var(--color-gray-600);
}

/* Button Color Override - Neutralize ALL Bootstrap Buttons */
.settings-page .btn-primary {
    background-color: var(--color-text-primary);
    border-color: var(--color-text-primary);
    color: var(--color-surface);
}

.settings-page .btn-primary:hover,
.settings-page .btn-primary:focus,
.settings-page .btn-primary:active {
    background-color: var(--color-text-secondary);
    border-color: var(--color-text-secondary);
    color: var(--color-surface);
}

.settings-page .btn-danger {
    background-color: var(--color-text-secondary);
    border-color: var(--color-text-secondary);
    color: var(--color-surface);
}

.settings-page .btn-danger:hover,
.settings-page .btn-danger:focus,
.settings-page .btn-danger:active {
    background-color: var(--color-text-secondary);
    border-color: var(--color-text-secondary);
    color: var(--color-surface);
}

.settings-page .btn-warning {
    background-color: var(--color-gray-400);
    border-color: var(--color-gray-400);
    color: var(--color-surface);
}

.settings-page .btn-warning:hover,
.settings-page .btn-warning:focus,
.settings-page .btn-warning:active {
    background-color: var(--color-text-secondary);
    border-color: var(--color-text-secondary);
    color: var(--color-surface);
}

.settings-page .btn-secondary {
    background-color: var(--color-border);
    border-color: var(--color-border-strong);
    color: var(--color-text-secondary);
}

.settings-page .btn-secondary:hover,
.settings-page .btn-secondary:focus,
.settings-page .btn-secondary:active {
    background-color: var(--color-border-strong);
    border-color: var(--color-gray-400);
    color: var(--color-text-primary);
}

/* Bootstrap Outline Button Override - Neutralize ALL Outline Buttons */
.settings-page .btn-outline-primary {
    border-color: var(--color-gray-400);
    color: var(--color-text-secondary);
    background-color: transparent;
}

.settings-page .btn-outline-primary:hover,
.settings-page .btn-outline-primary:focus,
.settings-page .btn-outline-primary:active {
    background-color: var(--color-surface-tertiary);
    border-color: var(--color-text-secondary);
    color: var(--color-text-primary);
}

.settings-page .btn-outline-danger {
    border-color: var(--color-gray-400);
    color: var(--color-text-secondary);
    background-color: transparent;
}

.settings-page .btn-outline-danger:hover,
.settings-page .btn-outline-danger:focus,
.settings-page .btn-outline-danger:active {
    background-color: var(--color-surface-tertiary);
    border-color: var(--color-text-secondary);
    color: var(--color-text-primary);
}

.settings-page .btn-outline-warning {
    border-color: var(--color-gray-400);
    color: var(--color-text-secondary);
    background-color: transparent;
}

.settings-page .btn-outline-warning:hover,
.settings-page .btn-outline-warning:focus,
.settings-page .btn-outline-warning:active {
    background-color: var(--color-surface-tertiary);
    border-color: var(--color-text-secondary);
    color: var(--color-text-primary);
}

.settings-page .btn-outline-secondary {
    border-color: var(--color-border-strong);
    color: var(--color-text-tertiary);
    background-color: transparent;
}

.settings-page .btn-outline-secondary:hover,
.settings-page .btn-outline-secondary:focus,
.settings-page .btn-outline-secondary:active {
    background-color: var(--color-surface-secondary);
    border-color: var(--color-gray-400);
    color: var(--color-text-secondary);
}



/* ========== pages/calendar-responsive-part2.css ========== */
/* Alert Override - Neutralize Alert Colors */
.settings-page .alert-success {
    background-color: var(--color-surface-tertiary);
    border-color: var(--color-border-strong);
    color: var(--color-text-primary);
}

.settings-page .alert-danger,
.settings-page .alert-error {
    background-color: var(--color-surface-secondary);
    border-color: var(--color-border);
    color: var(--color-text-secondary);
}

.settings-page .alert-warning {
    background-color: var(--color-surface-secondary);
    border-color: var(--color-border);
    color: var(--color-text-secondary);
}

.settings-page .alert-info {
    background-color: var(--color-surface-secondary);
    border-color: var(--color-border);
    color: var(--color-text-secondary);
}
/**
 * SETTINGS-FORMS-EMAIL-SCANNING.CSS
 * ==========================================
 * Email Scanning/Inbox Display Styles
 * 
 * This module contains styles specific to the email scanning tab:
 * - Inbox email display and code box
 * - Instructions and example boxes
 * - Test section layout
 * - Badge styling for email scanning
 * - Alert styling for email scanning
 * - Mobile responsive adjustments
 * 
 * Part of modularized settings-forms (November 2025)
 * Related modules: settings-forms-core.css, settings-forms-components.css
 */

/* Inbox Email Display */
.inbox-email-display {
    margin-bottom: var(--space-4);
}

.email-copy-box {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--color-surface);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--border-radius);
    margin-top: var(--space-2);
}

.inbox-email-code {
    flex: 1;
    font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
    font-size: 1rem;
    color: var(--color-primary);
    background: var(--color-surface-secondary);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--border-radius-sm);
    border: var(--border-width) solid var(--color-border-light);
    word-break: break-all;
}

/* Instructions Box */
.instructions-box {
    background: var(--color-surface-secondary);
    border: var(--border-width) solid var(--color-info-border);
    border-radius: var(--border-radius);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
}

.instructions-box h4 {
    margin-bottom: var(--space-3);
    color: var(--color-text-primary);
}

.instructions-box ul {
    margin: 0;
    padding-left: var(--space-5);
}

.instructions-box li {
    margin-bottom: var(--space-2);
    color: var(--color-text-secondary);
}

/* Example Box */
.example-box {
    background: var(--color-surface-secondary);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--border-radius);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
}

.example-box h4 {
    margin-bottom: var(--space-3);
    color: var(--color-text-primary);
}

.example-email-details p {
    margin-bottom: var(--space-2);
    color: var(--color-text-secondary);
}

.example-email-details code {
    background: var(--color-surface);
    padding: var(--space-0-5) var(--space-1-5);
    border-radius: var(--border-radius-sm);
    font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
    font-size: 0.9rem;
}

/* Test Section */
.test-section {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

/* Badge Styling */
.badge-success {
    background-color: var(--color-success);
    color: var(--color-text-inverse);
    padding: var(--space-1) var(--space-2-5);
    border-radius: var(--border-radius-sm);
    font-size: 0.75rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
}

.badge-warning {
    background-color: var(--color-warning);
    color: var(--color-text-primary);
    padding: var(--space-1) var(--space-2-5);
    border-radius: var(--border-radius-sm);
    font-size: 0.75rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
}

/* Alert Styling */
.ds-alert {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--border-radius);
    margin-bottom: var(--space-4);
}

.ds-alert--warning {
    background-color: var(--color-warning-bg);
    border: var(--border-width) solid var(--color-warning);
    color: var(--color-warning-dark-brown);
}

.ds-alert--info {
    background-color: var(--color-info-bg);
    border: var(--border-width) solid var(--color-cyan);
    color: var(--color-info-dark);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .email-copy-box {
        flex-direction: column;
        align-items: stretch;
    }
    
    .inbox-email-code {
        font-size: 0.85rem;
        padding: var(--space-2);
    }
    
    .test-section {
        flex-direction: column;
        align-items: flex-start;
    }
}
body.auth-route * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body.auth-route {
    font-family: var(--font-family-base, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif);
    background: linear-gradient(135deg, var(--color-indigo) 0%, var(--color-purple-dark) 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-5);
}

body.auth-route .auth-wrapper {
    width: 100%;
    max-width: 1100px;
    display: flex;
    background: var(--color-surface);
    border-radius: var(--space-4);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    min-height: 600px;
}

body.auth-route .auth-brand {
    flex: 1;
    background: linear-gradient(135deg, var(--color-info) 0%, var(--color-primary) 100%);
    padding: 60px 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: var(--color-text-inverse);
    position: relative;
    overflow: hidden;
}

body.auth-route .auth-brand::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px);
    background-size: 50px 50px;
    animation: drift 20s linear infinite;
}


/* ========== pages/calendar-responsive-part3.css ========== */

@keyframes drift {
    0% { transform: translate(0, 0); }
    100% { transform: translate(50px, 50px); }
}

body.auth-route .brand-content {
    position: relative;
    z-index: 1;
    text-align: center;
}

body.auth-route .logo-img {
    max-width: 100%;
    width: 320px;
    height: auto;
    margin-bottom: 30px;
}

body.auth-route .brand-tagline {
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 40px;
    opacity: 0.95;
    font-weight: 300;
    letter-spacing: 0.5px;
    color: var(--color-text-inverse);
}

body.auth-route .brand-features {
    list-style: none;
    text-align: left;
    margin-top: 30px;
}

body.auth-route .brand-features li {
    padding: 12px 0;
    font-size: 15px;
    display: flex;
    align-items: center;
    opacity: 0.9;
    color: var(--color-text-inverse);
}

body.auth-route .brand-features li i {
    margin-right: var(--space-3);
    font-size: 18px;
    color: var(--color-success-light);
}

body.auth-route .auth-form-container {
    flex: 1;
    padding: 60px 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

body.auth-route .auth-header {
    margin-bottom: 40px;
}

body.auth-route .auth-header h1 {
    font-size: var(--space-8);
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: var(--space-2);
}

body.auth-route .auth-header p {
    color: var(--color-text-secondary);
    font-size: var(--space-4);
}

body.auth-route .progress-steps {
    display: flex;
    justify-content: center;
    margin-top: var(--space-5);
    margin-bottom: 0;
}

body.auth-route .step {
    display: flex;
    align-items: center;
    color: rgba(255, 255, 255, 0.6);
    font-size: var(--space-3);
    font-weight: 500;
}

body.auth-route .step.completed {
    color: var(--color-success-light);
}

body.auth-route .step.active {
    color: var(--color-text-inverse);
}

body.auth-route .step-number {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: var(--space-2);
    font-size: var(--space-3);
    font-weight: 600;
}

body.auth-route .step.completed .step-number {
    background: var(--color-success-light);
    color: var(--color-text-inverse);
}

body.auth-route .step.active .step-number {
    background: var(--color-surface);
    color: var(--color-info);
}

body.auth-route .step-connector {
    width: 40px;
    height: 2px;
    background: rgba(255, 255, 255, 0.3);
    margin: 0 16px;
}

body.auth-route .step.completed + .step-connector {
    background: var(--color-success-light);
}

body.auth-route .form-group {
    margin-bottom: var(--space-6);
}

body.auth-route .form-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: var(--space-2);
}

body.auth-route .form-input {
    width: 100%;
    padding: 12px 16px;
    font-size: 15px;
    border: 2px solid var(--color-border);
    border-radius: var(--border-radius);
    transition: all 0.2s;
    background: var(--color-surface-secondary);
    color: var(--color-text-primary);
}

body.auth-route .form-input:focus {
    outline: none;
    border-color: var(--color-primary);
    background: var(--color-surface);
    box-shadow: 0 0 0 3px rgba(0, 116, 217, 0.1);
}

body.auth-route .password-wrapper {
    position: relative;
}

body.auth-route .password-toggle {
    position: absolute;
    right: var(--space-3);
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--color-text-tertiary);
    cursor: pointer;
    padding: var(--space-2);
    line-height: 1;
    transition: color 0.2s;
}

body.auth-route .password-toggle:hover {
    color: var(--color-gray-600);
}

body.auth-route .password-strength {
    margin-top: var(--space-2);
    font-size: var(--space-3);
}

body.auth-route .strength-bar {
    height: var(--space-1);
    background: var(--color-border);
    border-radius: var(--border-radius-sm);
    margin: 4px 0;
    overflow: hidden;
}

body.auth-route .strength-fill {
    height: 100%;
    border-radius: var(--border-radius-sm);
    transition: all 0.3s ease;
    width: 0%;
}

body.auth-route .strength-weak .strength-fill { background: var(--color-danger-dark); width: 25%; }
body.auth-route .strength-fair .strength-fill { background: var(--color-warning); width: 50%; }
body.auth-route .strength-good .strength-fill { background: var(--color-success); width: 75%; }
body.auth-route .strength-strong .strength-fill { background: var(--color-success-dark); width: 100%; }

body.auth-route .strength-text {
    color: var(--color-text-secondary);
}

body.auth-route .form-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
    font-size: 14px;
}

body.auth-route .remember-me {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
}

body.auth-route .remember-me input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--color-info);
}

body.auth-route .remember-me label {
    color: var(--color-text-secondary);

}


/* ========== pages/calendar-responsive-part4.css ========== */
/* Auth Route Styles Continuation */
.auth-route-element {
    cursor: pointer;
    user-select: none;
}

body.auth-route .forgot-link {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 500;
}

body.auth-route .forgot-link:hover {
    text-decoration: underline;
}

body.auth-route .btn-primary {
    width: 100%;
    padding: 14px 24px;
    background: linear-gradient(135deg, var(--color-info) 0%, var(--color-primary) 100%);
    color: var(--color-text-inverse);
    border: none;
    border-radius: var(--border-radius);
    font-size: var(--space-4);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: var(--shadow-info);
}

body.auth-route .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

body.auth-route .btn-primary:active {
    transform: translateY(0);
}

body.auth-route .btn-primary:disabled {
    background: var(--color-text-tertiary);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

body.auth-route .btn-outline {
    width: 100%;
    padding: 12px 24px;
    background: var(--color-surface);
    color: var(--color-text-primary);
    border: 2px solid var(--color-border);
    border-radius: var(--border-radius);
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-decoration: none;
}

body.auth-route .btn-outline:hover {
    background: var(--color-surface-secondary);
    border-color: var(--color-border-strong);
}

body.auth-route .divider {
    display: flex;
    align-items: center;
    margin: 28px 0;
    color: var(--color-text-tertiary);
    font-size: 14px;
}

.divider::before,
body.auth-route .divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--color-border);
}

body.auth-route .divider span {
    padding: 0 16px;
}

body.auth-route .signup-link {
    text-align: center;
    margin-top: 28px;
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    font-size: 14px;
}

body.auth-route .signup-link a {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 600;
}

body.auth-route .signup-link a:hover {
    text-decoration: underline;
}

body.auth-route .alert {
    padding: 14px 16px;
    border-radius: var(--border-radius);
    margin-bottom: var(--space-6);
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    font-size: 14px;
}

body.auth-route .alert-danger {
    background: var(--color-danger-bg-light);
    border: 1px solid var(--color-danger-border);
    color: var(--color-danger-darker);
}

body.auth-route .alert-success {
    background: var(--color-success-bg-light);
    border: 1px solid var(--color-success-border);
    color: var(--color-success-darker);
}

body.auth-route .alert-error {
    background: var(--color-danger-bg-light);
    border: 1px solid var(--color-danger-border);
    color: var(--color-danger-dark);
}

body.auth-route .alert i {
    margin-top: 2px;
}

body.auth-route .info-box {
    background: var(--color-info-bg-lighter);
    border: 1px solid var(--color-info-border);
    border-radius: var(--border-radius);
    padding: var(--space-4);
    margin-bottom: var(--space-6);
}

body.auth-route .info-box p {
    color: var(--color-cyan);
    font-size: 14px;
    margin: 0;
}

body.auth-route .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

@media (max-width: 768px) {
    body {
        padding: 0;
        background: var(--color-surface);
    }

    body.auth-route .auth-wrapper {
        flex-direction: column;
        max-width: 100%;
        border-radius: 0;
        box-shadow: none;
        min-height: 100vh;
    }

    body.auth-route .auth-brand {
        padding: 40px 30px;
        min-height: auto;
    }

    body.auth-route .logo-img {
        width: 240px;
        margin-bottom: var(--space-5);
    }

    body.auth-route .brand-tagline {
        font-size: var(--space-4);
        margin-bottom: var(--space-5);
    }

    body.auth-route .brand-features {
        display: none;
    }

    body.auth-route .auth-form-container {
        padding: 40px 30px;
    }

    body.auth-route .auth-header h1 {
        font-size: 26px;
    }

    body.auth-route .auth-header p {
        font-size: 14px;
    }

    body.auth-route .form-options {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
    }

    body.auth-route .form-row {
        grid-template-columns: 1fr;
        gap: var(--space-5);
    }

    body.auth-route .step-connector {
        width: 30px;
        margin: 0 12px;
    }
}

@media (max-width: 480px) {
    body.auth-route .auth-brand {
        padding: 30px 20px;
    }

    body.auth-route .logo-img {
        width: 200px;
    }

    body.auth-route .auth-form-container {
        padding: 30px 20px;
    }

    body.auth-route .auth-header h1 {
        font-size: var(--space-6);
    }
}



/* ========== pages/calendar-views-part1.css ========== */
    margin-top: var(--space-6);
    border-top: var(--border-width-2) solid var(--color-surface-tertiary);
}

body.settings-route .overtime-section {
    background: var(--color-surface);
    border-radius: var(--space-4);
    box-shadow: var(--shadow-md);
    border: var(--border-width) solid var(--color-surface-tertiary);
    padding: var(--space-6);
    margin-top: var(--space-6);
}

body.settings-route .section-header-simple {
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-4);
    border-bottom: var(--border-width) solid var(--color-surface-tertiary);
}

body.settings-route .section-header-simple h6 {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-700);
    margin: 0 0 4px 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

body.settings-route .section-header-simple p {
    margin: 0;
    font-size: var(--font-size-sm);
}

body.settings-route .overtime-settings {
    background: var(--color-surface-secondary);
    border-radius: var(--border-radius-lg);
    padding: var(--space-4);
}

/**
 * SETTINGS-LAYOUT-TABLES.CSS
 * ==========================================
 * Tables and Accordion Layout for Settings Pages
 * 
 * This module contains data display layout patterns:
 * - Projects settings containers and cards
 * - Desktop table layouts (headers, rows, cells)
 * - Accordion/price list layout structures
 * - Accordion toggle buttons and collapse animations
 * - Level-based indentation for hierarchical data
 * - Item details grid layout
 * 
 * Related modules:
 * - settings-layout-base.css: Foundation container and sidebar
 * - settings-layout-content.css: Section structure and tabs
 * - settings-layout-hours.css: Opening hours components
 * 
 * Note: This is part of the settings-layout.css refactoring (November 2025)
 */

/* Projects Settings Layout */
body.settings-route .projects-settings-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    padding-bottom: 60px;
    width: 100%;
    overflow: visible;
}

body.settings-route .setting-card {
    background: var(--color-surface);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--border-radius);
    box-shadow: none;
    margin-bottom: 0;
}

body.settings-route .setting-header {
    background: var(--color-surface-secondary);
    padding: var(--space-3-5) var(--space-5);
    border-bottom: var(--border-width) solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

body.settings-route .setting-header-title {
    display: flex;
    align-items: center;
    gap: var(--space-2-5);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
}

body.settings-route .setting-header-title i {
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
}

/* Tables Layout (Desktop) */
body.settings-route .items-table {
    width: 100%;
    border-collapse: collapse;
}

body.settings-route .items-table thead {
    background: var(--color-surface-secondary);
}

body.settings-route .items-table th {
    padding: var(--space-2-5) var(--space-4);
    text-align: left;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: var(--border-width) solid var(--color-border);
}

body.settings-route .items-table td {
    padding: var(--space-3) var(--space-4);
    border-bottom: var(--border-width) solid var(--color-surface-tertiary);
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
}

body.settings-route .items-table tbody tr:hover {
    background: var(--color-surface-secondary);
}

body.settings-route .items-table tbody tr:last-child td {
    border-bottom: none;
}

body.settings-route .text-end {
    text-align: right;
}

body.settings-route .text-center {
    text-align: center;
}

/* Accordion/Price List Layout */
body.settings-route .accordion-list {
    background: var(--color-surface);
}

body.settings-route .accordion-item {
    border-bottom: var(--border-width) solid var(--color-border);
    transition: background-color 0.2s ease;
}

body.settings-route .accordion-item:last-child {
    border-bottom: none;
}

body.settings-route .accordion-row {
    display: flex;
    align-items: center;
    padding: var(--space-3-5) var(--space-4);
    transition: background-color 0.2s ease;
    position: relative;
}

body.settings-route .accordion-row:hover {
    background-color: var(--color-surface-secondary);
}

/* Accordion Toggle Button (Caret) */
body.settings-route .accordion-toggle {
    background: none;
    border: none;
    padding: var(--space-2);
    margin-right: var(--space-2);
    cursor: pointer;
    color: var(--color-text-secondary);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    min-height: 28px;
}

body.settings-route .accordion-toggle:hover {
    color: var(--color-text-primary);
    background-color: var(--color-surface-tertiary);
    border-radius: var(--space-1);
}

body.settings-route .accordion-toggle i {
    font-size: var(--font-size-sm);
    transition: transform 0.2s ease;
}

body.settings-route .accordion-toggle.collapsed i {
    transform: rotate(-90deg);
}

/* Level-based indentation and backgrounds */
body.settings-route .accordion-item.level-0 > .accordion-row {
    background-color: var(--color-surface);
    padding-left: var(--space-4);
}

body.settings-route .accordion-item.level-1 > .accordion-row {
    background-color: var(--color-surface-secondary);
    padding-left: var(--space-11);
}

body.settings-route .accordion-item.level-2 > .accordion-row {
    background-color: var(--color-surface-tertiary);
    padding-left: var(--space-19);
}

body.settings-route .accordion-content {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
}

body.settings-route .accordion-main-info {
    flex: 1;
    min-width: 200px;
}

body.settings-route .accordion-name {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    margin-bottom: 2px;


/* ========== pages/calendar-views-part2.css ========== */
/* Settings Route Accordion Styles */
body.settings-route .accordion-meta {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

body.settings-route .accordion-badges {
    display: flex;
    gap: var(--space-2);
    align-items: center;
}

body.settings-route .accordion-actions {
    display: flex;
    gap: var(--space-1);
}

/* Item Details in Accordion */
body.settings-route .item-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface-secondary);
    border-top: var(--border-width) solid var(--color-border);
}

body.settings-route .item-detail {
    display: flex;
    flex-direction: column;
}

body.settings-route .item-detail-label {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

body.settings-route .item-detail-value {
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    font-weight: var(--font-weight-medium);
}

body.settings-route .accordion-filters {
    padding: var(--space-4);
    background: var(--color-surface-secondary);
    border-bottom: var(--border-width) solid var(--color-border);
}

/* Smooth transitions for expand/collapse */
body.settings-route .accordion-children {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

body.settings-route .accordion-children.expanded {
    max-height: 10000px;
    transition: max-height 0.5s ease-in;
}

/**
 * SETTINGS-FORMS-CORE.CSS
 * ==========================================
 * Form Structure and Foundational Styles
 * 
 * This module contains the core form structure for settings pages:
 * - Form grids and layouts
 * - Form groups and containers
 * - Form labels and basic styling
 * - Inline form groups
 * 
 * Part of modularized settings-forms (November 2025)
 * Related modules: settings-forms-buttons.css, settings-forms-inputs.css,
 * settings-forms-components.css, settings-forms-modals.css,
 * settings-forms-bootstrap-overrides.css, settings-forms-email-scanning.css
 * 
 * Note: Responsive styles are in settings-responsive.css
 * Note: Layout/structural styles are in settings-layout.css
 */

/**
 * !important Usage Policy
 * =======================
 * Total Instances: ~15 (1.5% density) - 84% reduction from previous 93
 * 
 * 1. Textarea Resize Control (~1 instance)
 *    - resize: vertical !important
 *    - Prevents layout breaking from horizontal resize
 *
 * 2. Modal Z-Index Management (~14 instances)
 *    - Required to override Bootstrap 5.3 modal stacking specificity
 *    - Ensures centralized z-index authority system (z-index.css)
 *    - Uses design tokens: var(--z-modal-backdrop), var(--z-modal), etc.
 *
 * 3. Bootstrap Color Neutralization (REMOVED - November 2025)
 *    - Previously: ~78 instances overriding Bootstrap semantic colors
 *    - Solution: Scoped all Bootstrap overrides to .settings-page container
 *    - All selectors now use .settings-page prefix (e.g., .settings-page .btn-primary)
 *    - No !important required - scoping provides sufficient specificity
 *    - Applies neutral, design-token-based palette for consistency
 *    - Uses design tokens: var(--color-surface-*), var(--color-text-*), var(--color-border-*)
 *
 * Scoping Strategy:
 * - All settings templates wrapped in <div class="settings-page">
 * - Bootstrap color overrides scope: .settings-page .btn-*, .settings-page .bg-*, etc.
 * - Maintains design system consistency without !important declarations
 * - Z-index and resize rules remain unchanged (still require !important)
 *
 * Last updated: November 2025 - Task: !important Reduction via Scoped Selectors
 */

/**
 * DESIGN SYSTEM INTEGRATION
 * ==========================
 * Form Class Naming Strategy (Phase 1 - October 2025)
 *
 * This file uses .form-* classes (e.g., .form-label, .form-group) which are
 * design-system-compliant aliases that work alongside .ds-form-* classes.
 *
 * CLASS EQUIVALENTS:
 * - .form-label    ≈ .ds-form-label   (slight styling differences for settings context)
 * - .form-group    ≈ .ds-form-field   (same structure)
 * - .form-grid     = Settings-specific grid layout
 *
 * WHY TWO NAMING CONVENTIONS?
 * - .ds-form-* classes: Global design system (used in 724 locations)
 * - .form-* classes: Settings-specific forms (used in 515 locations)
 * - Both use design tokens (var(--color-*)) for consistency
 * - Both are maintained as part of the unified design system
 *
 * USAGE GUIDANCE:
 * - New settings forms: Continue using .form-* classes (this file's convention)
 * - Other pages: Use .ds-form-* classes (components-core.css convention)
 * - Both approaches are valid and design-system-compliant
 *
 * All form classes below use CSS variables from design-tokens.css, ensuring
 * visual consistency across the application.
 */

/* Form Structure */
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-5);
    margin-bottom: var(--space-5);
}

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

.form-label {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-2);
    font-weight: var(--font-weight-semibold);
    display: flex;
    align-items: center;
}

.form-label i {
    margin-left: var(--space-1);
    font-size: var(--font-size-xs);
    opacity: 0.6;
}

.time-input-group label {
    display: block;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-2);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.form-group-inline {
    margin-bottom: var(--space-5);
}

.form-group-inline label {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-2);
    font-weight: var(--font-weight-semibold);
}

/* Inline form groups - ensure full width */
.form-group-inline .ds-form-input,
.form-group-inline .ds-form-textarea {
    width: 100%;
}

#numberingForm {
    padding: var(--space-5);
}

#numberingForm .row {
    margin-bottom: var(--space-5);
}
/**
 * SETTINGS-FORMS-INPUTS.CSS
 * ==========================================
 * Input Fields and Controls for Settings Pages
 * 
 * This module contains input field and control styles:
 * - Text input fields
 * - Select dropdowns
 * - Switch/toggle controls
 * - Input hover and focus states
 * 
 * Part of modularized settings-forms (November 2025)
 * Related modules: settings-forms-core.css, settings-forms-buttons.css,
 * settings-forms-components.css
 */

/* Input Fields */
.modern-time-input {
    width: 100%;
    padding: var(--space-3) var(--space-3-5);
    border: var(--border-width-2) solid var(--color-border);
    border-radius: var(--border-radius-md);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    background: var(--color-surface);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    color: var(--color-gray-700);
}



/* ========== pages/calendar-views-part3.css ========== */
.modern-time-input:hover {
    border-color: var(--color-border-strong);
}

.modern-time-input:focus {
    border-color: var(--color-gray-400);
    box-shadow: 0 0 0 4px rgba(148, 163, 184, 0.1);
    outline: none;
    transform: scale(1.01);
}

.modern-select {
    padding: var(--space-2-5) var(--space-3-5);
    border: var(--border-width-2) solid var(--color-border);
    border-radius: var(--border-radius-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    background: var(--color-surface);
    min-width: 180px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    color: var(--color-gray-700);
    cursor: pointer;
}

.modern-select:hover {
    border-color: var(--color-border-strong);
}

.modern-select:focus {
    border-color: var(--color-gray-400);
    box-shadow: 0 0 0 4px rgba(148, 163, 184, 0.1);
    outline: none;
}

/* Switch/Toggle Controls */
.modern-switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: var(--space-6);
}

.modern-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.modern-switch .switch-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-border-strong);
    border-radius: var(--space-6);
    transition: all 0.3s ease;
}

.modern-switch .switch-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background: var(--color-surface);
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.modern-switch input:checked + .switch-slider {
    background: var(--color-text-secondary);
}

.modern-switch input:checked + .switch-slider:before {
    transform: translateX(24px);
}
/**
 * SETTINGS-FORMS-BUTTONS.CSS
 * ==========================================
 * Button Styles for Settings Pages
 * 
 * This module contains all button styles used in settings forms:
 * - Primary and secondary buttons
 * - Icon buttons
 * - Modern button styles with gradients
 * - Small button variants
 * - Button hover/active states
 * 
 * Part of modularized settings-forms (November 2025)
 * Related modules: settings-forms-core.css, settings-forms-inputs.css,
 * settings-forms-components.css
 */

/* Buttons - Scoped to .settings-page */
.settings-page .btn-primary {
    background: var(--color-text-primary);
    border: var(--border-width) solid var(--color-text-primary);
    color: var(--color-surface);
    padding: var(--space-2-5) var(--space-5);
    border-radius: var(--space-1);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: none;
}

.settings-page .btn-primary:hover {
    background: var(--color-text-primary);
    border-color: var(--color-text-primary);
}

.settings-page .btn-secondary {
    background: var(--color-surface);
    border: var(--border-width) solid var(--color-border);
    color: var(--color-text-secondary);
    padding: var(--space-2-5) var(--space-5);
    border-radius: var(--space-1);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all 0.2s ease;
}

.settings-page .btn-secondary:hover {
    background: var(--color-surface-secondary);
    border-color: var(--color-border-strong);
}

.btn-sm {
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-sm);
}

.btn-icon {
    padding: var(--space-2) var(--space-3);
    background: transparent;
    border: var(--border-width) solid var(--color-border-strong);
    color: var(--color-text-secondary);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-icon:hover {
    background: var(--color-surface-tertiary);
    color: var(--color-text-primary);
}

.btn-icon.btn-danger {
    border-color: var(--color-border-strong);
    color: var(--color-text-secondary);
}

.btn-icon.btn-danger:hover {
    background: var(--color-surface-tertiary);
    color: var(--color-text-primary);
}

/* Modern Button Styles */
.modern-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2-5);
    padding: var(--space-3) var(--space-5);
    border: none;
    border-radius: var(--border-radius-lg);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    width: 100%;
}

.modern-btn.secondary {
    background: linear-gradient(135deg, var(--color-surface-secondary) 0%, var(--color-surface) 100%);
    color: var(--color-text-secondary);
    border: var(--border-width-2) solid var(--color-border);
}

.modern-btn.secondary:hover {
    background: linear-gradient(135deg, var(--color-surface-tertiary) 0%, var(--color-surface-secondary) 100%);
    border-color: var(--color-border-strong);
    color: var(--color-gray-700);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.modern-btn.secondary:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}

.modern-btn i {
    font-size: var(--font-size-base);
}
/**
 * SETTINGS-FORMS-COMPONENTS.CSS
 * ==========================================
 * Form Component Utilities for Settings Pages
 * 
 * This module contains reusable form components and utilities:
 * - Alert messages (success, error)
 * - Numbering preview display
 * - Badges and status indicators
 * - Accordion toggle buttons
 * - Clickable name links
 * - Settings-specific utilities (readonly, copy button, lock icon, tooltip)
 * 
 * Part of modularized settings-forms (November 2025)
 * Related modules: settings-forms-core.css, settings-forms-buttons.css,
 * settings-forms-inputs.css, settings-forms-modals.css
 */

/* Alert Messages */
.alert-message {
    margin: var(--space-4) var(--space-5);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--border-radius);
    font-size: var(--font-size-sm);
    display: none;
}

.alert-message.success {
    display: block;
    background: var(--color-surface-tertiary);
    color: var(--color-text-secondary);
    border: var(--border-width) solid var(--color-border-strong);
}

.alert-message.error {
    color: var(--color-danger);
}


/* ========== pages/calendar-views-part4.css ========== */
    display: block;
    background: var(--color-border);
    color: var(--color-text-primary);
    border: var(--border-width) solid var(--color-text-tertiary);
}

/* Numbering Preview */
.numbering-preview {
    background: var(--color-surface-secondary);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--border-radius);
    padding: var(--space-5);
    margin: var(--space-5);
    text-align: center;
}

.numbering-preview h4 {
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-secondary);
    margin: 0 0 10px 0;
    font-weight: var(--font-weight-medium);
}

.preview-number {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    font-family: 'Courier New', monospace;
    letter-spacing: 1px;
    text-shadow: none;
}

/* Badges and Status Indicators */
.color-badge {
    display: inline-block;
    width: var(--space-3);
    height: var(--space-3);
    border-radius: 50%;
    border: var(--border-width) solid var(--color-border);
    box-shadow: none;
    filter: grayscale(70%) opacity(0.6);
    font-size: 0;
    line-height: 0;
    overflow: hidden;
}

.badge {
    display: inline-block;
    padding: var(--space-0-5) var(--space-2);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border: var(--border-width) solid var(--color-border);
}

.badge.badge-success {
    background: transparent;
    color: var(--color-text-primary);
    border-color: var(--color-border-strong);
    font-weight: var(--font-weight-semibold);
}

.badge.badge-secondary {
    background: transparent;
    color: var(--color-text-primary);
    border-color: var(--color-border);
    font-weight: var(--font-weight-semibold);
}

/* Accordion Toggle Button */
.accordion-toggle {
    background: none;
    border: none;
    padding: var(--space-2);
    margin-right: var(--space-2);
    cursor: pointer;
    color: var(--color-text-secondary);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    min-height: 28px;
}

.accordion-toggle:hover {
    color: var(--color-text-primary);
    background-color: var(--color-border);
    border-radius: var(--space-1);
}

.accordion-toggle i {
    transition: transform 0.2s ease;
    font-size: var(--font-size-sm);
}

.accordion-toggle.expanded i {
    transform: rotate(90deg);
}

/* Clickable Name Links - Visual Indicators */
.clickable-name-link {
    display: inline-flex;
    align-items: center;
    color: var(--color-primary-light);
    transition: all 0.2s ease;
    cursor: pointer;
}

.clickable-name-link:hover {
    color: var(--color-info-dark);
    text-decoration: underline;
}

.clickable-name-link:hover i {
    opacity: 1;
    transform: translateX(3px);
}

.clickable-name-link i {
    transition: all 0.2s ease;
}

/* Settings-specific Form Components */

/* Readonly form input */
.ds-form-input--readonly {
    background-color: var(--color-surface-secondary);
    cursor: not-allowed;
}

/* Copy address button */
.copy-address-btn {
    position: absolute;
    right: var(--space-2);
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--color-text-secondary);
    cursor: pointer;
    padding: var(--space-2);
    border-radius: var(--border-radius);
    transition: all 0.2s;
}

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

.copy-address-btn i {
    font-size: var(--font-size-base);
}

/* Input with button (for address field with copy button) */
.ds-input-with-btn {
    padding-right: var(--space-11);
}

/* Lock icon for protected fields */
.ds-lock-icon {
    font-size: 0.75rem;
}

/* Tooltip info icon */
.tooltip-icon,
.ds-tooltip-icon {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    margin-left: var(--space-1);
    cursor: help;
    padding: var(--space-1);
}

.ds-tooltip-icon {
    font-size: 0.875rem;
}
/**
 * SETTINGS-FORMS-MODALS.CSS
 * ==========================================
 * Modal Styling for Settings Pages
 * 
 * This module contains all modal-specific styles:
 * - Modal backdrop and z-index management
 * - Modal dialog and content styling
 * - Modal header, body, and footer
 * - Modal-specific form field styling
 * - Textarea height adjustments
 * 
 * Part of modularized settings-forms (November 2025)
 * Related modules: settings-forms-core.css, settings-forms-components.css
 * 
 * Note: Uses !important for z-index to override Bootstrap 5.3 modal specificity
 */

/* Modal Styles */
.modal-backdrop {
    background-color: rgba(0, 0, 0, 0.5);
    z-index: var(--z-modal-backdrop);
}

.modal-backdrop.show {
    opacity: 0.5;
}

.modal {
    z-index: var(--z-modal);
}

.modal .modal-dialog {
    z-index: var(--z-modal-dialog);
}

.modal .modal-content {
    border-radius: var(--border-radius-lg);
    border: none;
    box-shadow: var(--shadow-2xl);
    position: relative;
    z-index: var(--z-modal-content);
}

.modal-header {
    background: var(--color-text-secondary);
    color: var(--color-surface);
    border-top-left-radius: var(--border-radius-lg);
    border-top-right-radius: var(--border-radius-lg);
    padding: var(--space-4) var(--space-6);
    border-bottom: none;
}

.modal-title {


/* ========== pages/dashboard-main-controls.css ========== */
/* More Filters Toggle Button */
#moreFiltersToggle {
    white-space: nowrap;
}

#moreFiltersToggle[aria-expanded="true"] {
    background: var(--color-primary);
    color: var(--color-text-inverse);
    border-color: var(--color-primary);
}

/* Sort Order Toggle */
#sort-order-toggle {
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#sort-order-toggle i {
    transition: transform 0.2s;
}

/* Filter Form Buttons */
.filter-actions .btn {
    min-width: 100px;
}

/* Tooltip Info Icons */
[data-bs-toggle="tooltip"] {
    cursor: help;
    color: var(--color-text-secondary);
    transition: color 0.2s;
}

[data-bs-toggle="tooltip"]:hover {
    color: var(--color-primary);
}

/* Responsive Adjustments */
@media (max-width: 991px) {
    .project-filters-primary .col-lg-1 {
        display: flex;
        justify-content: flex-end;
    }
    
    #moreFiltersToggle span {
        display: inline !important;
    }
}

@media (max-width: 767px) {
    .project-filters-primary {
        padding: var(--space-3);
    }
    
    .project-filters-primary .row {
        gap: var(--space-2);
    }
    
    #advancedFilters .card-body {
        padding: var(--space-3);
    }
    
    .active-filters-badges {
        font-size: var(--font-size-xs);
    }
}

/* Loading State for Filters */
.filters-loading {
    position: relative;
    pointer-events: none;
    opacity: 0.6;
}

.filters-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: var(--space-6);
    height: var(--space-6);
    border: 2px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Ensure proper spacing with hero header */
.projects-hero-header + .project-filters-primary {
    margin-top: var(--space-4);
}

/* Clear Filters Button Styling */
#clearFilters {
    transition: all 0.2s;
}

#clearFilters:hover {
    background: var(--color-danger-bg);
    border-color: var(--color-danger);
    color: var(--color-danger);
}

/* Filter Badge Color Variations */
.active-filters-badges .badge.bg-info {
    background-color: var(--color-info) !important;
    color: var(--color-text-inverse);
}

.active-filters-badges .badge.bg-secondary {
    background-color: var(--color-text-secondary) !important;
    color: var(--color-text-inverse);
}

.active-filters-badges .badge.bg-danger {
    background-color: var(--color-danger) !important;
    color: var(--color-text-inverse);
}

/* Accessibility Improvements */
.form-control:focus,
.form-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-bg-lighter);
}

/* Print Styles */
@media print {
    .project-filters-primary,
    #advancedFilters {
        display: none;
    }
}


/* ========== pages/dashboard-main-filters.css ========== */
/* ========================================
   ALPHABET FILTER UTILITIES
   ======================================== */

.alphabet-filter-container {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.alphabet-filter {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  min-width: fit-content;
  flex-wrap: nowrap;
}

.alphabet-btn {
  flex: 1 1 auto;
  min-width: 36px;
  min-height: 44px;
  text-align: center;
  white-space: nowrap;
  padding: var(--space-2) var(--space-1);
}

/* On larger screens, distribute evenly with small gaps */
@media (min-width: 1024px) {
  .alphabet-filter {
    gap: var(--space-1);
  }
}

/* On mobile, make it scrollable horizontally */
@media (max-width: 1023px) {
  .alphabet-filter {
    gap: var(--space-1);
    justify-content: flex-start;
  }
  
  .alphabet-btn {
    flex: 0 0 auto;
  }
}

/* ========================================
   PROJECT FILTERS STYLING
   Enhanced filtering interface for project list page
   ======================================== */

/* Primary Filters Bar */
.project-filters-primary {
    /* Override input-height variable within this scope to 32px for compact filter fields */
    --input-height: var(--filter-field-height);
    --btn-height: var(--filter-field-height);
    background: var(--color-surface);
    padding: var(--space-5);
    border-radius: var(--border-radius);
    border: var(--border-width) solid var(--color-border);
    margin-bottom: var(--space-4);
    box-shadow: var(--shadow-sm);
}

.project-filters-primary .form-label {
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-xs);
    margin-bottom: var(--space-1);
}

.project-filters-primary .form-control,
.project-filters-primary .form-select,
.project-filters-primary .ds-form-select,
.project-filters-primary .ds-form-input {
    font-size: var(--font-size-sm);
    height: var(--filter-field-height) !important;
    min-height: var(--filter-field-height) !important;
    max-height: var(--filter-field-height) !important;
    border-color: var(--color-border);
    color: var(--color-text-primary);
    padding-top: var(--space-1);
    padding-bottom: var(--space-1);
    line-height: 1.2;
    box-sizing: border-box;
}

.project-filters-primary .form-control:focus,
.project-filters-primary .form-select:focus,
.project-filters-primary .ds-form-select:focus,
.project-filters-primary .ds-form-input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-bg-lighter);
}

.project-filters-primary .input-group-text {
    height: var(--filter-field-height);
    background: var(--color-surface);
    border-color: var(--color-border);
    border-right: none;
    padding: 0 var(--space-2);
    display: flex;
    align-items: center;
}

.project-filters-primary .input-group .form-control {
    border-left: none;
}

.project-filters-primary .btn,
.project-filters-primary .ds-btn {
    height: var(--filter-field-height);
    min-width: var(--filter-field-height);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-top: 0;
    padding-bottom: 0;
}

.project-filters-primary .sort-order-btn {
    width: var(--filter-field-height);
    padding: 0;
    font-size: var(--font-size-sm);
}

.project-filters-primary .input-group {
    flex-wrap: nowrap;
}

.project-filters-primary .input-group .form-select,
.project-filters-primary .input-group .ds-form-select {
    min-width: 0;
    flex: 1 1 auto;
}

.project-filters-primary .btn-outline-danger {
    border-color: var(--color-danger);
    color: var(--color-danger);
}

.project-filters-primary .btn-outline-danger:hover {
    background: var(--color-danger);
    color: var(--color-text-inverse);
}

/* Advanced Filters Card */
#advancedFilters .card {
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--border-radius);
    background: var(--color-surface-secondary);
}

#advancedFilters .card-body {
    padding: var(--space-4);
}

#advancedFilters .card-title {
    color: var(--color-text-primary);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-base);
    margin-bottom: var(--space-3);
}

/* Advanced Filter Fields */
.advanced-filter-field {
    transition: all 0.3s ease;
}

.advanced-filter-field label {
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-2);
}

/* Active Filter Badges */
.active-filters-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
}

.active-filters-badges .badge {
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    border-radius: var(--border-radius);
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

.active-filters-badges .badge a {
    text-decoration: none;
    opacity: 0.8;
    transition: opacity 0.2s;
}

.active-filters-badges .badge a:hover {
    opacity: 1;
}



/* ========== pages/dashboard-responsive-layout.css ========== */
/* FullCalendar Resource Labels */
.fc .fc-resource-timeline-divider {
    background-color: var(--color-surface-secondary) !important;
}

.fc .fc-datagrid-cell {
    color: var(--color-text-primary) !important;
}

.fc .fc-datagrid-cell-cushion {
    color: var(--color-text-primary) !important;
}

/* FullCalendar Today Highlighting */
.fc .fc-day-today {
    background-color: var(--color-info-bg) !important;
}

.fc .fc-timegrid-col.fc-day-today {
    background-color: var(--color-info-bg) !important;
}

/* FullCalendar Events - Hybrid Style with Light Backgrounds and Colored Borders */
.fc-event {
    border-radius: var(--border-radius) !important;
    padding: var(--space-1) var(--space-2) !important;
    border-width: 2px !important;
    border-style: solid !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    margin-bottom: 3px !important;
}

.fc-event:hover {
    transform: translateY(-1px) !important;
    box-shadow: var(--shadow-md) !important;
    border-width: 2.5px !important;
}

.fc-event-title {
    color: var(--color-text-primary) !important;
    font-weight: var(--font-weight-medium) !important;
}

.fc-event-time {
    color: var(--color-text-secondary) !important;
}

/* FullCalendar More Link */
.fc .fc-more-link {
    color: var(--color-primary) !important;
    font-weight: var(--font-weight-medium) !important;
}

/* FullCalendar Popover Styling */
.fc .fc-popover {
    z-index: 1050 !important;
    max-height: 70vh !important;
    box-shadow: var(--shadow-lg) !important;
}

.fc .fc-popover-body {
    max-height: 65vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* ========================================
   DASHBOARD NAVIGATION STYLES
   ======================================== */

/* Dashboard Container */
.ds-dashboard-container {
    display: block;
    position: relative;
}

/* Dashboard Sidebar */
.ds-dashboard-sidebar {
    width: var(--sidebar-project-width);
    background: var(--color-surface);
    border-right: var(--border-width) solid var(--color-border);
    flex-shrink: 0;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    padding-top: 0;
}

/* Default: Show horizontal tabs, hide sidebar */
.ds-dashboard-sidebar {
    display: none;
}

.ds-dashboard-tabs-mobile {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0;
    background: var(--color-surface);
    border-bottom: var(--border-width) solid var(--color-border);
    margin-bottom: var(--space-4);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Vertical layout: Show sidebar, hide horizontal tabs */
.ds-dashboard-container.layout-vertical {
    display: flex;
}

.ds-dashboard-container.layout-vertical .ds-dashboard-sidebar {
    display: block;
}

.ds-dashboard-container.layout-vertical .ds-dashboard-tabs-mobile {
    display: none;
}

.ds-dashboard-container.layout-vertical .ds-dashboard-content {
    flex: 1;
    min-width: 0;
    width: auto;
    max-width: 100%;
    padding-left: var(--space-6);
    padding-top: 0;
    padding-right: var(--space-4);
}

/* Dashboard Sidebar Header */
.ds-dashboard-sidebar__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-6);
    border-bottom: var(--border-width) solid var(--color-border);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

/* Dashboard Sidebar Navigation */
.ds-dashboard-sidebar__nav {
    display: flex;
    flex-direction: column;
    padding: var(--space-2) 0;
}

/* Navigation Section */
.ds-dashboard-nav-section {
    margin-bottom: var(--space-2);
}

.ds-dashboard-nav-section-header {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: var(--space-3) var(--space-6);
    margin-top: var(--space-2);
}

/* Dashboard Nav Item */
.ds-dashboard-nav-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-6);
    color: var(--color-text-secondary);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
    border-left: 3px solid transparent;
    transition: all 0.2s ease;
}

.ds-dashboard-nav-item:hover {
    background: var(--color-surface-secondary);
    color: var(--color-text-primary);
    text-decoration: none;
}

.ds-dashboard-nav-item.active {
    background: var(--color-primary);
    color: var(--color-text-inverse) !important;
    border-left-color: var(--color-primary-dark);
    font-weight: var(--font-weight-semibold);
}

.ds-dashboard-nav-item.active i,
.ds-dashboard-nav-item.active span {
    color: var(--color-text-inverse) !important;
}

.ds-dashboard-nav-item i {
    width: var(--space-5);
    text-align: center;
    font-size: var(--font-size-base);
    flex-shrink: 0;
}

/* Dashboard Mobile Tab Item */
.ds-dashboard-tab-mobile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-3) var(--space-4);
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    border-bottom: 3px solid transparent;
    transition: all 0.2s ease;
    min-width: 44px;
}

.ds-dashboard-tab-mobile:hover {
    color: var(--color-text-primary);
    background: var(--color-surface-secondary);
    text-decoration: none;
}

.ds-dashboard-tab-mobile.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
}

.ds-dashboard-tab-mobile i {
    font-size: var(--font-size-lg);
}

/* Layout Toggle Button */
.layout-toggle-icon {
    background: none;
    border: none;
    padding: var(--space-2);
    color: var(--color-text-secondary);
    cursor: pointer;
    border-radius: var(--border-radius);
    transition: all 0.2s ease;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.layout-toggle-icon:hover {
    background: var(--color-surface-secondary);
    color: var(--color-text-primary);
}

/* Mobile responsiveness */
@media (max-width: 991px) {
    /* Always use horizontal tabs on mobile */
    .ds-dashboard-container.layout-vertical {
        display: block;
    }
    
    .ds-dashboard-container.layout-vertical .ds-dashboard-sidebar {
        display: none;
    }
    
    .ds-dashboard-container.layout-vertical .ds-dashboard-tabs-mobile {
        display: flex;
    }
    
    .ds-dashboard-container.layout-vertical .ds-dashboard-content {
        padding-left: 0;
    }
}


/* ========== pages/dashboard-responsive-mobile.css ========== */
/* Dashboard Nav Item - Mobile Overrides */
.ds-dashboard-nav-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-6);
    text-decoration: none;
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    transition: var(--transition-all);
    position: relative;
    border-left: var(--border-width-4) solid transparent;
}

.ds-dashboard-nav-item i {
    width: var(--space-5);
    text-align: center;
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    transition: var(--transition-colors);
}

.ds-dashboard-nav-item span {
    flex: 1;
}

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

.ds-dashboard-nav-item:hover i {
    color: var(--color-primary);
}

.ds-dashboard-nav-item.active {
    background: var(--color-primary);
    color: var(--color-text-inverse) !important;
    border-left-color: var(--color-primary-dark);
}

.ds-dashboard-nav-item.active i {
    color: var(--color-text-inverse) !important;
}

.ds-dashboard-nav-item.active span {
    color: var(--color-text-inverse) !important;
}

/* Mobile Tabs */
.ds-dashboard-tabs-mobile__scrollable {
    display: flex;
    gap: var(--space-2);
    padding: 0;
    flex: 1;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.ds-dashboard-tab-mobile {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    text-decoration: none;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    border-bottom: 3px solid transparent;
    transition: var(--transition-all);
}

.ds-dashboard-tab-mobile i {
    font-size: var(--font-size-base);
}

.ds-dashboard-tab-mobile:hover {
    color: var(--color-text-primary);
    background: var(--color-hover);
}

.ds-dashboard-tab-mobile.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

/* Layout Toggle Icon */
.layout-toggle-icon {
    background: none;
    border: none;
    color: var(--color-text-secondary);
    cursor: pointer;
    padding: var(--space-2);
    border-radius: var(--border-radius);
    transition: var(--transition-all);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.layout-toggle-icon:hover {
    background: var(--color-hover);
    color: var(--color-text-primary);
}

/* Dashboard Content */
.ds-dashboard-content {
    padding: 0 0 var(--space-4) 0;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    /* Force horizontal tabs on mobile */
    .ds-dashboard-sidebar,
    .ds-dashboard-container.layout-vertical .ds-dashboard-sidebar {
        display: none !important;
    }
    
    .ds-dashboard-tabs-mobile,
    .ds-dashboard-container.layout-vertical .ds-dashboard-tabs-mobile {
        display: flex !important;
    }
    
    .ds-dashboard-content,
    .ds-dashboard-container.layout-vertical .ds-dashboard-content {
        padding: var(--space-3) var(--space-3) var(--space-3) var(--space-3);
        padding-left: var(--space-3) !important;
    }
    
    .ds-dashboard-tab-mobile {
        min-height: var(--touch-target-min);
        padding: var(--space-3) var(--space-4);
    }
}

/* Tab Content Areas */
.tab-content {
    animation: fadeIn 0.3s ease-in;
}

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


/* ========== pages/dashboard-widgets-cards.css ========== */
/* ========================================
   CUSTOMER FILTERS STYLING
   Enhanced filtering interface for customer list page
   ======================================== */

/* Primary Filters Bar - Customer Version */
.customer-filters-primary {
    /* Override input-height variable within this scope to 32px for compact filter fields */
    --input-height: var(--filter-field-height);
    --btn-height: var(--filter-field-height);
    background: var(--color-surface);
    padding: var(--space-5);
    border-radius: var(--border-radius);
    border: var(--border-width) solid var(--color-border);
    margin-bottom: var(--space-4);
    box-shadow: var(--shadow-sm);
}

.customer-filters-primary .form-label {
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-xs);
    margin-bottom: var(--space-1);
}

.customer-filters-primary .form-control,
.customer-filters-primary .form-select,
.customer-filters-primary .ds-form-select,
.customer-filters-primary .ds-form-input {
    font-size: var(--font-size-sm);
    height: var(--filter-field-height) !important;
    min-height: var(--filter-field-height) !important;
    max-height: var(--filter-field-height) !important;
    border-color: var(--color-border);
    color: var(--color-text-primary);
    padding-top: var(--space-1);
    padding-bottom: var(--space-1);
    line-height: 1.2;
    box-sizing: border-box;
}

.customer-filters-primary .form-control:focus,
.customer-filters-primary .form-select:focus,
.customer-filters-primary .ds-form-select:focus,
.customer-filters-primary .ds-form-input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-bg-lighter);
}

.customer-filters-primary .input-group-text {
    height: var(--filter-field-height);
    background: var(--color-surface);
    border-color: var(--color-border);
    border-right: none;
    padding: 0 var(--space-2);
    display: flex;
    align-items: center;
}

.customer-filters-primary .input-group .form-control {
    border-left: none;
}

.customer-filters-primary .btn,
.customer-filters-primary .ds-btn {
    height: var(--filter-field-height);
    min-width: var(--filter-field-height);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.customer-filters-primary .sort-order-btn {
    width: var(--filter-field-height);
    padding: 0;
    font-size: var(--font-size-sm);
}

.customer-filters-primary .input-group {
    flex-wrap: nowrap;
}

.customer-filters-primary .input-group .form-select {
    min-width: 0;
    flex: 1 1 auto;
}

.customer-filters-primary .btn-outline-danger {
    border-color: var(--color-danger);
    color: var(--color-danger);
}

.customer-filters-primary .btn-outline-danger:hover {
    background: var(--color-danger);
    color: var(--color-text-inverse);
}

/* CRITICAL FIX: Force flex items to stay in one row by overriding default form input widths */
.customer-filters-primary .ds-form-input,
.customer-filters-primary .form-control,
.customer-filters-primary .form-select,
.customer-filters-primary .ds-form-select,
.customer-filters-primary select.ds-form-input {
    flex: 0 0 auto;
    width: auto;
    min-width: 150px;
}

/* Make search input flexible and take available space */
.customer-filters-primary input[name='search'],
.customer-filters-primary input[type='search'] {
    flex: 1 1 240px;
    /* No max-width to allow full expansion */
}

/* Mobile: revert to full width for vertical stacking */
@media (max-width: 767px) {
    .customer-filters-primary .ds-form-input,
    .customer-filters-primary .form-control,
    .customer-filters-primary .form-select,
    .customer-filters-primary .ds-form-select,
    .customer-filters-primary input[name='search'],
    .customer-filters-primary input[type='search'] {
        width: 100%;
        flex: 1 1 100%;
        max-width: none;
    }
}

/* Responsive Adjustments for Customer Filters */
@media (max-width: 991px) {
    .customer-filters-primary .col-lg-1 {
        display: flex;
        justify-content: flex-end;
    }
}

@media (max-width: 767px) {
    .customer-filters-primary {
        padding: var(--space-3);
    }
    
    .customer-filters-primary .row {
        gap: var(--space-2);
    }
}

/* Customer Empty State - Centered Layout */
.customer-empty-state {
    text-align: center;
    margin: var(--space-12) auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    max-width: 420px;
}

/* ========================================
   CRITICAL FIX: PROJECT VIEW TOGGLE BUTTONS
   Ensure List/Map/Calendar buttons have correct colors
   ======================================== */

/* Primary button (active state) - blue background with white text */
.project-view-btn.ds-btn--primary,
button.project-view-btn.ds-btn--primary,
.ds-btn.ds-btn--primary.project-view-btn {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

.project-view-btn.ds-btn--primary i,
button.project-view-btn.ds-btn--primary i,
.ds-btn.ds-btn--primary.project-view-btn i {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Outline buttons (inactive state) - visible dark text and icons */
.project-view-btn.ds-btn--outline,
button.project-view-btn.ds-btn--outline,
.ds-btn.ds-btn--outline.project-view-btn {
    background-color: var(--color-surface) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text-primary) !important;
    -webkit-text-fill-color: var(--color-text-primary) !important;
}

.project-view-btn.ds-btn--outline i,
button.project-view-btn.ds-btn--outline i,
.ds-btn.ds-btn--outline.project-view-btn i {
    color: var(--color-text-primary) !important;
    -webkit-text-fill-color: var(--color-text-primary) !important;
}

/* Outline button hover state */
.project-view-btn.ds-btn--outline:hover,
button.project-view-btn.ds-btn--outline:hover,
.ds-btn.ds-btn--outline.project-view-btn:hover {
    background-color: var(--color-surface-secondary) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text-primary) !important;
}

.project-view-btn.ds-btn--outline:hover i,
button.project-view-btn.ds-btn--outline:hover i,
.ds-btn.ds-btn--outline.project-view-btn:hover i {
    color: var(--color-text-primary) !important;
    -webkit-text-fill-color: var(--color-text-primary) !important;
}


/* ========== pages/dashboard-widgets-charts.css ========== */
a.projects-tab-link.active {
    color: var(--color-primary) !important;
    -webkit-text-fill-color: var(--color-primary) !important;
    background-color: var(--color-info-bg-lighter, #eff6ff) !important;
}

.ds-project-nav-item.active span,
.ds-project-nav-item[aria-selected="true"] span,
.projects-tab-link.active span,
.projects-tab-link[aria-selected="true"] span,
a.ds-project-nav-item.active span,
a.projects-tab-link.active span {
    color: var(--color-primary) !important;
    -webkit-text-fill-color: var(--color-primary) !important;
}

.ds-project-nav-item.active i,
.ds-project-nav-item[aria-selected="true"] i,
.projects-tab-link.active i,
.projects-tab-link[aria-selected="true"] i,
a.ds-project-nav-item.active i,
a.projects-tab-link.active i {
    color: var(--color-primary) !important;
    -webkit-text-fill-color: var(--color-primary) !important;
}

/* Dropdown toggle when open (Project Options) */
.dropdown-toggle.show,
button.dropdown-toggle.show,
.btn.dropdown-toggle.show,
.btn-primary.dropdown-toggle.show {
    color: var(--color-text-inverse) !important;
    -webkit-text-fill-color: var(--color-text-inverse) !important;
}

/* All DS primary buttons - force white text */
.ds-btn.ds-btn--primary,
button.ds-btn--primary,
a.ds-btn--primary {
    color: var(--color-text-inverse) !important;
    -webkit-text-fill-color: var(--color-text-inverse) !important;
}

/* ========================================
   FULLCALENDAR CUSTOM STYLES
   ======================================== */

/* FullCalendar Toolbar - Fix dark text on dark backgrounds */
.fc .fc-toolbar-title {
    color: var(--color-text-primary) !important;
    font-size: var(--font-size-xl) !important;
    font-weight: var(--font-weight-semibold) !important;
}

/* FullCalendar Buttons - Force white text on all buttons */
.fc .fc-button,
.fc .fc-button-primary,
.fc button.fc-button,
#organization-schedule-calendar-container .fc .fc-button,
#organization-schedule-calendar-container .fc button,
.fc .fc-prev-button,
.fc .fc-next-button,
.fc .fc-today-button {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: var(--color-text-inverse) !important;
    font-weight: var(--font-weight-medium) !important;
    padding: var(--space-2) var(--space-4) !important;
    border-radius: var(--border-radius) !important;
}

/* FullCalendar Button Groups - Add spacing between buttons */
.fc .fc-button-group {
    gap: var(--space-2) !important;
}

/* FullCalendar Toolbar - Add spacing between button groups */
.fc .fc-toolbar-chunk {
    gap: var(--space-2) !important;
    display: flex !important;
}

/* Remove default button group styling that makes buttons touch */
.fc .fc-button-group > .fc-button {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* FullCalendar Button Text - Force white on button spans */
.fc .fc-button .fc-icon,
.fc .fc-button span,
#organization-schedule-calendar-container .fc .fc-button span,
#organization-schedule-calendar-container .fc button span {
    color: var(--color-text-inverse) !important;
}

.fc .fc-button:hover:not(:disabled),
.fc button:hover:not(:disabled) {
    background-color: var(--color-primary-dark) !important;
    border-color: var(--color-primary-dark) !important;
    color: var(--color-text-inverse) !important;
}

.fc .fc-button:disabled,
.fc button:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

.fc .fc-button-active,
.fc .fc-button:active,
.fc button.fc-button-active,
.fc button:active {
    background-color: var(--color-primary-dark) !important;
    border-color: var(--color-primary-dark) !important;
    color: var(--color-text-inverse) !important;
}

/* FullCalendar Header Cells */
.fc .fc-col-header-cell {
    background-color: var(--color-surface-secondary) !important;
    color: var(--color-text-primary) !important;
    font-weight: var(--font-weight-semibold) !important;
    padding: var(--space-3) !important;
}

.fc .fc-col-header-cell-cushion {
    color: var(--color-text-primary) !important;
}

/* FullCalendar Timeline Header Text - Fix dark text on time slots */
/* High specificity selectors to override FullCalendar theme */
#organization-schedule-calendar-container .fc-timeline-header .fc-timeline-slot-label a.fc-timeline-slot-cushion,
#organization-schedule-calendar-container .fc-theme-standard a,
#organization-schedule-calendar-container .fc-timeline-slot.fc-timeline-lane a.fc-timeline-slot-cushion,
#organization-schedule-calendar-container .fc .fc-timeline-slot-cushion,
.fc .fc-timeline-slot-cushion,
.fc .fc-timeline-header-row .fc-timeline-slot-cushion,
.fc-timeline-header-row a {
    color: var(--color-text-primary) !important;
}

/* FullCalendar Day Headers */
.fc .fc-day-header {
    color: var(--color-text-primary) !important;
    font-weight: var(--font-weight-semibold) !important;
}

/* FullCalendar Time Axis */
.fc .fc-timegrid-slot-label {
    color: var(--color-text-primary) !important;
}

.fc .fc-scrollgrid {
    border-color: var(--color-border) !important;
}

.fc .fc-scrollgrid-section > * {
    border-color: var(--color-border) !important;
}

/* ========================================
   ORGANIZATION SCHEDULE CALENDAR EVENTS
   ======================================== */

/* Base timeline event styles */
.fc-timeline-event,
.fc-h-event {
    min-height: 28px !important;
}

/* Work Log Event States - 4 state system */

/* State 1: Future planned work - Orange/Amber with dashed border */
.work-log-future-planned {
    background-color: var(--color-warning-bg-lighter) !important;
    border-color: var(--color-warning-light) !important;
    border-style: dashed !important;
    color: var(--color-warning-dark-brown) !important;
}

.work-log-future-planned .fc-event-title,
.work-log-future-planned .fc-event-main {
    color: var(--color-warning-dark-brown) !important;
}

/* State 2: Completed but editable - Green */
.work-log-completed-editable {
    background-color: var(--color-success-bg) !important;
    border-color: var(--color-success-dark) !important;
    color: var(--color-success-darkest) !important;
}

.work-log-completed-editable .fc-event-title,
.work-log-completed-editable .fc-event-main {
    color: var(--color-success-darkest) !important;
}

/* State 3: Completed and locked - Gray */
.work-log-completed-locked {
    background-color: var(--color-gray-200) !important;
    border-color: var(--color-gray-500) !important;
    color: var(--color-gray-600) !important;
    cursor: not-allowed !important;
}

.work-log-completed-locked .fc-event-title,
.work-log-completed-locked .fc-event-main {
    color: var(--color-gray-600) !important;
}

.work-log-completed-locked::after {
    content: '\f023';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    margin-left: var(--space-1);
    font-size: 0.7em;
}

/* State 4: Overdue planned - Red/Warning */
.work-log-overdue-planned {
    background-color: var(--color-danger-bg) !important;
    border-color: var(--color-danger-dark) !important;
    border-style: dashed !important;
    color: var(--color-danger-darker) !important;
}

.work-log-overdue-planned .fc-event-title,
.work-log-overdue-planned .fc-event-main {
    color: var(--color-danger-darker) !important;
}

/* Leave Event Styles */
.leave-event {
    border-radius: var(--border-radius-sm) !important;
    font-weight: var(--font-weight-medium) !important;
}

/* Annual Leave - Green */
.leave-event.leave-annual,
.leave-event[data-leave-type="annual"] {
    background-color: var(--color-success-bg) !important;
    border-color: var(--color-success-dark) !important;
    color: var(--color-success-darkest) !important;
}

/* Sick Leave - Red */
.leave-event.leave-sick,
.leave-event[data-leave-type="sick"] {
    background-color: var(--color-danger-bg) !important;
    border-color: var(--color-danger-dark) !important;
    color: var(--color-danger-darker) !important;
}

/* Public Holiday - Cyan */
.leave-event.leave-holiday,
.leave-event[data-leave-type="holiday"] {
    background-color: var(--color-cyan-bg) !important;
    border-color: var(--color-cyan) !important;
    color: var(--color-cyan-dark) !important;
}

/* Private/Unpaid Leave - Gray */
.leave-event.leave-private,
.leave-event[data-leave-type="private"] {
    background-color: var(--color-gray-200) !important;
    border-color: var(--color-gray-500) !important;
    color: var(--color-gray-600) !important;
}

/* Leave status modifiers */
.leave-event.leave-pending {
    opacity: 0.85 !important;
    border-style: dashed !important;
}

.leave-event.leave-approved {
    opacity: 1 !important;
    border-style: solid !important;
}

.leave-event.leave-rejected {
    opacity: 0.5 !important;
    text-decoration: line-through !important;
}

/* Default leave event styling when type not specified */
.leave-event {
    background-color: var(--color-success-bg) !important;
    border-color: var(--color-success-dark) !important;
    color: var(--color-success-darkest) !important;
}

/* Task Events - Blue */
.task-event {
    background-color: var(--color-info-bg) !important;
    border-color: var(--color-info) !important;
    color: var(--color-blue-darker) !important;
}

.task-event .fc-event-title,
.task-event .fc-event-main {
    color: var(--color-blue-darker) !important;
}

/* Event text visibility for all timeline events */
.fc-timeline-event .fc-event-main,
.fc-h-event .fc-event-main {
    padding: 2px 6px !important;
    font-size: 0.85em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}



/* ========== pages/dashboard-mobile.css ========== */
/* ==============================================
   DASHBOARD PAGE - MOBILE ENHANCEMENTS
   Following established design patterns:
   - Edge-to-edge layouts
   - 44px minimum touch targets
   - Hidden scrollbars with smooth scrolling
   - White backgrounds
   - Border-radius: 6px (small), 8px (default), 12px (cards)
   ============================================== */

@media (max-width: 768px) {
    /* ==============================================
       CONTAINER - Edge-to-edge
       ============================================== */
    .ds-dashboard-container {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .ds-dashboard-content {
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* Override responsive-mobile padding */
    .ds-dashboard-content,
    .ds-dashboard-container.layout-vertical .ds-dashboard-content {
        padding: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin: 0 !important;
    }
    
    /* Tab content panels */
    .ds-dashboard-content .tab-content {
        padding: 0 !important;
        margin: 0 !important;
    }

    /* ==============================================
       TAB NAVIGATION - Clean horizontal scrolling
       ============================================== */
    .ds-dashboard-tabs-mobile {
        background: var(--color-surface);
        border-bottom: 1px solid var(--color-border);
        margin: 0;
        padding: 0;
        display: flex;
        align-items: center;
    }
    
    .ds-dashboard-tabs-mobile .layout-toggle-icon {
        display: none !important;
    }
    
    .ds-dashboard-tabs-mobile__scrollable {
        display: flex;
        gap: 0 !important;
        padding: 0 !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        flex: 1;
        width: 100%;
    }
    
    .ds-dashboard-tabs-mobile__scrollable::-webkit-scrollbar {
        display: none !important;
        height: 0 !important;
        width: 0 !important;
    }
    
    .ds-dashboard-tabs-mobile__scrollable::after {
        display: none !important;
    }
    
    .ds-dashboard-tab-mobile {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: var(--space-1);
        padding: var(--space-3) var(--space-4);
        min-height: var(--space-14);
        min-width: var(--mobile-tab-min-width);
        flex: 0 0 auto;
        white-space: nowrap;
        text-decoration: none !important;
        color: var(--color-text-secondary);
        font-size: var(--font-size-xs);
        font-weight: var(--font-weight-medium);
        border-bottom: 3px solid transparent;
        background: transparent;
        transition: all 0.2s ease;
    }
    
    .ds-dashboard-tab-mobile i {
        font-size: var(--font-size-lg);
        color: inherit;
    }
    
    .ds-dashboard-tab-mobile span {
        font-size: var(--font-size-xs);
        text-align: center;
    }
    
    .ds-dashboard-tab-mobile.active {
        color: var(--color-primary);
        border-bottom-color: var(--color-primary);
        background: var(--color-primary-bg);
    }
    
    .ds-dashboard-tab-mobile:active {
        background: var(--color-hover);
    }

    /* ==============================================
       STATS CARDS - 2-column grid, edge-to-edge
       ============================================== */
    .ds-dashboard-content .row.ds-mb-4:first-child {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-2);
        padding: var(--space-2) 0;
        margin: 0 !important;
        background: var(--color-surface-secondary);
    }
    
    .ds-dashboard-content .row.ds-mb-4:first-child > [class*="col-"] {
        max-width: 100% !important;
        flex: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .ds-dashboard-content .row.ds-mb-4:first-child .ds-card {
        margin: 0;
        border-radius: var(--border-radius-lg);
        box-shadow: var(--shadow-sm);
        border: 1px solid var(--color-border);
        height: 100%;
    }
    
    .ds-dashboard-content .row.ds-mb-4:first-child .ds-card__body {
        padding: var(--space-3-5);
    }
    
    .ds-dashboard-content .row.ds-mb-4:first-child .ds-card__body .row {
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    
    .ds-dashboard-content .row.ds-mb-4:first-child .ds-text-xs {
        font-size: var(--font-size-xs);
        letter-spacing: 0.02em;
    }
    
    .ds-dashboard-content .row.ds-mb-4:first-child .h5 {
        font-size: var(--font-size-xl);
        margin-bottom: var(--space-0-5) !important;
    }
    
    .ds-dashboard-content .row.ds-mb-4:first-child .ds-text-sm {
        font-size: var(--font-size-xs);
    }
    
    .ds-dashboard-content .row.ds-mb-4:first-child .col-auto i {
        font-size: var(--font-size-2xl) !important;
    }

    /* ==============================================
       RECENT ACTIVITY SECTIONS - Full width cards
       ============================================== */
    .ds-dashboard-content > .tab-content > .row {
        margin: 0 !important;
        padding: 0;
    }
    
    .ds-dashboard-content > .tab-content > .row > [class*="col-"] {
        padding: 0 !important;
        margin-bottom: 0 !important;
    }
    
    .ds-dashboard-content .ds-card {
        margin: 0;
        border-radius: 0;
        border-left: none;
        border-right: none;
        border-top: none;
        box-shadow: none;
    }
    
    .ds-dashboard-content .ds-card__header {
        padding: var(--space-3-5) var(--space-4);
        background: var(--color-surface-secondary);
        border-bottom: 1px solid var(--color-border);
        display: flex;
        justify-content: space-between;
        align-items: center;
        min-height: 44px;
    }
    
    .ds-dashboard-content .ds-card__title {
        font-size: var(--font-size-base);
        font-weight: var(--font-weight-semibold);
        color: var(--color-text-primary);
        margin: 0;
    }
    
    .ds-dashboard-content .ds-card__header .ds-btn {
        min-height: var(--space-9);
        padding: var(--space-1-5) var(--space-3);
        font-size: var(--font-size-sm);
        border-radius: var(--border-radius);
    }
    
    .ds-dashboard-content .ds-card__body {
        padding: 0;
    }
    
    .ds-dashboard-content .ds-card__body--no-padding {
        padding: 0 !important;
    }

    /* ==============================================
       LIST ITEMS - Touch-friendly
       ============================================== */
    .ds-list__item {
        padding: var(--space-3-5) var(--space-4) !important;
        min-height: var(--space-14);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-3);
        border-bottom: 1px solid var(--color-surface-secondary);
        text-decoration: none !important;
    }
    
    .ds-list__item:last-child {
        border-bottom: none;
    }
    
    .ds-list__item-content {
        flex: 1;
        min-width: 0;
    }
    
    .ds-list__item-title {
        font-size: var(--font-size-base);
        font-weight: var(--font-weight-medium);
        color: var(--color-text-primary);
        margin-bottom: var(--space-0-5);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    .ds-list__item-subtitle {
        font-size: var(--font-size-sm);
        color: var(--color-text-secondary);
        margin: 0;
    }
    
    .ds-list__item-actions {
        flex-shrink: 0;
    }
    
    .ds-list__item .ds-badge {
        font-size: var(--font-size-xs);
        padding: var(--space-1) var(--space-2);
        border-radius: var(--border-radius-sm);
    }

    /* ==============================================
       MOBILE CARDS - Proper card styling
       Override pages-consolidated.css padding:0 rule
       ============================================== */
    .ds-dashboard-content .ds-card__body--no-padding .ds-desktop-hidden {
        padding: var(--space-2) 0 !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
    }
    
    /* Match Recent sections width with stats cards - edge-to-edge */
    #dashboard-overview > .row:not(:first-child) {
        padding: 0 !important;
        margin: 0 !important;
    }
    
    #dashboard-overview > .row:not(:first-child) > [class*="col-"] {
        padding: 0 !important;
    }
    
    #dashboard-overview > .row:not(:first-child) .ds-card {
        margin: 0 !important;
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
    }
    
    .ds-mobile-card {
        display: block !important;
        background: var(--color-surface) !important;
        border: 1px solid var(--color-border) !important;
        border-radius: var(--border-radius-lg) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
        padding: var(--space-4) !important;
        margin: 0 !important;
        text-decoration: none !important;
        transition: box-shadow 0.2s ease, transform 0.2s ease;
    }
    
    .ds-mobile-card:active {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
        transform: scale(0.99);
    }
    
    .ds-mobile-card__header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: var(--space-3);
    }
    
    .ds-mobile-card__title {
        font-size: 1.0625rem;
        font-weight: var(--font-weight-semibold);
        color: var(--color-text-primary);
        line-height: 1.3;
    }
    
    .ds-mobile-card__subtitle {
        font-size: var(--font-size-sm);
        color: var(--color-text-secondary);
        margin-top: var(--space-1);
    }
    
    .ds-mobile-card__info {
        display: flex;
        flex-direction: column;
        gap: var(--space-1-5);
        background: var(--color-surface-tertiary);
        border-radius: var(--border-radius);
        padding: var(--space-3);
        margin-top: var(--space-2);
    }
    
    .ds-mobile-card__info-row {
        font-size: var(--font-size-sm);
        color: var(--color-gray-700);
        display: flex;
        align-items: center;
        gap: var(--space-2);
    }
    
    .ds-mobile-card__icon {
        width: 1.125rem;
        color: var(--color-text-tertiary);
        font-size: var(--font-size-xs);
        flex-shrink: 0;
        text-align: center;
    }

    /* ==============================================
       EMPTY STATES
       ============================================== */
    .ds-empty-state {
        padding: var(--space-8) var(--space-4);
        text-align: center;
    }
    
    .ds-empty-state__icon {
        font-size: var(--font-size-4xl);
        color: var(--color-text-tertiary);
        margin-bottom: var(--space-3);
    }
    
    .ds-empty-state__message {
        font-size: var(--font-size-sm);
        color: var(--color-text-secondary);
        margin: 0;
    }

    /* ==============================================
       FORM SECTIONS (Bug Report, Feedback tabs)
       ============================================== */
    .ds-dashboard-content .form-group {
        margin-bottom: var(--space-4);
    }
    
    .ds-dashboard-content .form-group label {
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-medium);
        color: var(--color-text-primary);
        margin-bottom: var(--space-1-5);
    }
    
    .ds-dashboard-content .form-control {
        min-height: 44px;
        font-size: var(--font-size-base);
        border-radius: var(--border-radius);
        border: 1px solid var(--color-border);
        padding: var(--space-2-5) var(--space-3-5);
    }
    
    .ds-dashboard-content .form-control:focus {
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px var(--color-primary-bg-lighter);
    }
    
    .ds-dashboard-content textarea.form-control {
        min-height: var(--min-height-textarea);
    }
    
    .ds-dashboard-content form .ds-btn {
        width: 100%;
        min-height: 44px;
        font-size: var(--font-size-base);
        border-radius: var(--border-radius);
        margin-top: var(--space-2);
    }

    /* ==============================================
       INFORMATION TABS - Content padding
       ============================================== */
    #dashboard-information .ds-card__body,
    #dashboard-find-answers .ds-card__body,
    #dashboard-support .ds-card__body,
    #dashboard-updates .ds-card__body,
    #dashboard-requests .ds-card__body,
    #dashboard-bug-report .ds-card__body,
    #dashboard-feedback .ds-card__body,
    #dashboard-marketplace .ds-card__body,
    #dashboard-billing .ds-card__body,
    #dashboard-affiliate .ds-card__body {
        padding: var(--space-4) !important;
    }
    
    #dashboard-billing h6,
    #dashboard-affiliate h6 {
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-semibold);
        color: var(--color-text-primary);
        margin-bottom: var(--space-1);
    }
    
    #dashboard-affiliate ul {
        padding-left: var(--space-5);
        margin: var(--space-2) 0;
    }
    
    #dashboard-affiliate ul li {
        font-size: var(--font-size-sm);
        color: var(--color-text-secondary);
        margin-bottom: var(--space-1);
    }
}


/* ========== pages/fab-footer.css ========== */
/* Floating Action Button System */
.fab-container {
    position: fixed;
    bottom: var(--space-8);
    right: var(--space-8);
    z-index: 9999;
}

.fab-main {
    width: var(--fab-button-size, 60px);
    height: var(--fab-button-size, 60px);
    border-radius: var(--border-radius-full);
    background: linear-gradient(135deg, var(--color-info) 0%, var(--color-primary) 100%);
    border: none;
    box-shadow: var(--shadow-lg);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-inverse);
    font-size: var(--font-size-2xl);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 10;
}

.fab-main i,
.fab-main svg {
    color: var(--color-text-inverse);
}

.fab-main:hover {
    transform: scale(1.1);
    box-shadow: var(--shadow-xl);
}

.fab-main:active {
    transform: scale(0.95);
}

.fab-icon,
.fab-icon-close {
    transition: all 0.3s ease;
    position: absolute;
    top: 50%;
    left: 50%;
}

.fab-icon {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(0deg);
}

.fab-icon-close {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(-90deg);
}

.fab-container.active .fab-icon {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(90deg);
}

.fab-container.active .fab-icon-close {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(0deg);
}

.fab-menu {
    position: absolute;
    bottom: calc(var(--fab-button-size, 60px) + var(--space-2));
    right: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(var(--space-5));
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.fab-container.active .fab-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.fab-item {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-3);
    background: var(--color-surface);
    border: none;
    border-radius: var(--border-radius-full);
    padding: var(--space-3) var(--space-5);
    cursor: pointer;
    box-shadow: var(--shadow-md);
    transition: all 0.2s ease;
    white-space: nowrap;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.fab-item:hover {
    background: var(--color-surface-secondary);
    transform: translateX(calc(var(--space-1) * -1));
    box-shadow: var(--shadow-lg);
}

.fab-item i {
    width: var(--space-5);
    height: var(--space-5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-base);
    color: var(--color-info);
}

.fab-label {
    font-weight: var(--font-weight-semibold);
}

/* Staggered animation for menu items */
.fab-container.active .fab-item:nth-child(1) {
    transition-delay: 0.05s;
}

.fab-container.active .fab-item:nth-child(2) {
    transition-delay: 0.1s;
}

.fab-container.active .fab-item:nth-child(3) {
    transition-delay: 0.15s;
}

.fab-container.active .fab-item:nth-child(4) {
    transition-delay: 0.2s;
}

/* Mobile: Hide FAB completely to avoid overlap with bottom navigation */
@media (max-width: 768px) {
    .fab-container {
        display: none !important;
    }
}

/* Dark mode support */
[data-theme="dark"] .fab-item {
    background: var(--color-surface);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
}

[data-theme="dark"] .fab-item:hover {
    background: var(--color-surface-secondary);
}

[data-theme="dark"] .fab-item i {
    color: var(--color-info);
}

/* Accessibility */
.fab-main:focus,
.fab-item:focus {
    outline: 2px solid var(--color-info);
    outline-offset: 2px;
}

/* App Footer - Professional dark footer bar */
.app-footer {
    width: 100%;
    background: linear-gradient(135deg, #1e3a5f 0%, #2d4a6f 100%);
    padding: var(--space-4) var(--space-6);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-size-sm);
    color: rgba(255, 255, 255, 0.9);
    margin-top: auto;
    flex-shrink: 0;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}

.app-footer__brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.app-footer__logo {
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-md);
    color: #ffffff;
    letter-spacing: 0.5px;
}

.app-footer__copyright {
    color: rgba(255, 255, 255, 0.7);
    font-size: var(--font-size-xs);
}

.app-footer__links {
    display: flex;
    gap: var(--space-5);
    align-items: center;
}

.app-footer__link {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s ease, transform 0.2s ease;
    background: none;
    border: none;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--border-radius-sm);
}

.app-footer__link:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-1px);
}

/* Mobile responsive footer */
@media (max-width: 768px) {
    .app-footer {
        flex-direction: column;
        gap: var(--space-3);
        text-align: center;
        padding: var(--space-4) var(--space-4);
    }

    .app-footer__brand {
        flex-direction: column;
        gap: var(--space-1);
    }

    .app-footer__links {
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--space-2);
    }
    
    .app-footer__link {
        padding: var(--space-2);
    }
}


/* ========== pages/filters.css ========== */
/* ========================================
   LIST VIEW
   ======================================== */

.uploads-list-view {
    background: var(--color-surface);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
}

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

.uploads-table thead {
    background: var(--color-surface-secondary);
    border-bottom: var(--border-width) solid var(--color-border);
}

.uploads-table th {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
}

.uploads-table tbody tr {
    border-bottom: var(--border-width) solid var(--color-border);
    transition: var(--transition-colors);
}

.uploads-table tbody tr:nth-child(even) {
    background: var(--color-surface-secondary);
}

.uploads-table tbody tr:hover {
    background: var(--color-hover);
}

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

.uploads-table td {
    padding: var(--space-3) var(--space-4);
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
}

.file-icon-cell {
    text-align: center;
}

.file-icon-cell i {
    font-size: var(--font-size-lg);
    color: var(--color-text-tertiary);
}

.file-name-cell {
    font-weight: var(--font-weight-medium);
}

.file-size-cell,
.file-date-cell {
    color: var(--color-text-secondary);
}

.file-actions-cell {
    display: flex;
    gap: var(--space-2);
}

/* ========================================
   RESPONSIVE STYLES - UPLOADS SECTION
   ======================================== */

/* Tablet - 2 columns */
@media (max-width: 1024px) {
    .uploads-grid-view {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .uploads-header {
        flex-direction: column;
        align-items: stretch;
    }
    
    .uploads-actions {
        justify-content: space-between;
    }
}

/* Mobile - 1 column */
@media (max-width: 768px) {
    .uploads-grid-view {
        grid-template-columns: 1fr;
    }
    
    .uploads-filter-tabs {
        width: 100%;
        justify-content: flex-start;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: var(--space-2);
    }
    
    .uploads-actions {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-2);
    }
    
    .view-toggle-group {
        width: 100%;
    }
    
    .view-toggle-btn {
        flex: 1;
    }
    
    .uploads-actions .ds-btn {
        width: 100%;
    }
    
    .uploads-list-view {
        overflow-x: auto;
    }
    
    .uploads-table {
        min-width: 600px;
    }
    
    .uploads-empty-state {
        min-height: 300px;
        padding: var(--space-5);
    }
}



/* ========== pages/inbox.css ========== */
/**
 * Inbox Module Styles
 *
 * Converted from templates/inbox/styles.html for better caching and maintainability.
 * Based on Original Mockup design.
 */

/* ============================================
   GLOBAL FONT AWESOME FIX
   Ensures all inbox icons render correctly
   ============================================ */
.inbox-container .fas,
.inbox-container .far {
    font-family: "Font Awesome 6 Free" !important;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.inbox-container .fas {
    font-weight: 900 !important;
}

.inbox-container .far {
    font-weight: 400 !important;
}

.inbox-container .fab {
    font-family: "Font Awesome 6 Brands" !important;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    font-weight: 400 !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============================================
   INBOX CONTAINER LAYOUT
   ============================================ */
.inbox-container {
    display: flex;
    gap: var(--space-4);
    height: calc(100vh - 144px);
    min-height: calc(100vh - 144px);
    position: relative;
}

/* ============================================
   LEFT PANEL - APPROVAL LIST
   ============================================ */
.approvals-list-panel {
    width: 400px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--card-bg, var(--color-card-bg, #ffffff));
    border-radius: var(--border-radius-lg);
    box-shadow: var(--card-shadow);
}

/* ============================================
   FILTERS SECTION
   Note: .filter-tab styling is in inbox-filters.css (SSOT)
   ============================================ */
.filters-section {
    padding: var(--font-size-base);
    border-bottom: 1px solid var(--color-border-light);
    background: var(--card-bg, var(--color-card-bg, #ffffff));
}

/* ============================================
   SEARCH BOX
   ============================================ */
.search-box {
    position: relative;
}

.search-box input {
    width: 100%;
    padding: 0.625rem 0.75rem 0.625rem 2.5rem;
    border: 1px solid var(--color-border-light);
    border-radius: var(--border-radius);
    font-size: var(--font-size-sm);
}

.search-box i {
    position: absolute;
    left: var(--font-size-sm);
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-secondary);
}

/* ============================================
   APPROVAL ITEMS LIST
   ============================================ */
.approvals-list {
    flex: 1;
    overflow-y: auto;
    background: var(--card-bg, var(--color-card-bg, #ffffff));
}

.approval-item {
    padding: var(--font-size-base);
    border-bottom: 1px solid var(--color-border-light);
    cursor: pointer;
    transition: background 0.2s;
}

.approval-item:hover {
    background: var(--card-bg-hover, var(--color-card-bg-hover, #f8fafc));
}

.approval-item.active {
    background: var(--color-info-bg-lighter);
    border-left: 3px solid var(--color-primary);
}

.approval-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}

/* ============================================
   APPROVAL ICONS
   ============================================ */
.approval-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    flex-shrink: 0;
    position: relative;
}

/* Icon badge overlay for email items */
.icon-badge {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: var(--space-4);
    height: var(--space-4);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.5rem;
    border: 2px solid var(--color-surface);
}

.icon-badge.email-badge {
    background: var(--color-indigo);
    color: #ffffff;
}

.icon-badge.email-badge i {
    color: #ffffff;
}

.approval-icon.invoice {
    background: var(--color-info-bg);
    color: var(--color-blue-darker);
}

.approval-icon.expense {
    background: var(--color-warning-bg);
    color: var(--color-warning-dark);
}

.approval-icon.leave {
    background: var(--color-success-bg-alt);
    color: var(--color-success-dark);
}

.approval-icon.stock {
    background: var(--color-purple-bg);
    color: var(--color-purple-dark);
}

/* ============================================
   APPROVAL INFO
   ============================================ */
.approval-info {
    flex: 1;
    min-width: 0;
}

.approval-title {
    font-weight: 600;
    font-size: var(--font-size-sm);
    margin-bottom: 0.25rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.approval-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

/* ============================================
   BADGES
   ============================================ */
.approval-badge {
    padding: 0.125rem 0.5rem;
    border-radius: var(--border-radius-md);
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.badge-pending {
    background: var(--color-warning-bg);
    color: var(--color-warning-dark);
}

.badge-urgent {
    background: var(--color-danger-bg);
    color: var(--color-danger-dark);
}

.badge-high {
    background: var(--color-orange-bg);
    color: var(--color-orange-dark);
}

/* Icon-only badges for email processing status */
.approval-badge-icon {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.625rem;
}

.approval-badge-icon.badge-success {
    background: var(--color-success-bg);
    color: var(--color-success-darker);
}

.approval-badge-icon.badge-warning {
    background: var(--color-orange-border);
    color: var(--color-warning-dark-brown);
}

.badge-internal {
    background: var(--color-info-bg);
    color: var(--color-blue-darker);
}

.approval-amount {
    font-weight: 600;
    color: var(--color-text-primary);
    margin-top: 0.25rem;
    font-size: var(--font-size-sm);
}

/* ============================================
   RIGHT PANEL - APPROVAL DETAILS
   ============================================ */
.approval-detail-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    min-height: 0;
    background: var(--card-bg, var(--color-card-bg, #ffffff));
    border-radius: var(--border-radius-lg);
    box-shadow: var(--card-shadow);
}

.detail-header {
    padding: 1.5rem;
    border-bottom: 1px solid var(--color-border-light);
    position: sticky;
    top: 0;
    z-index: var(--z-modal-sticky-header);
    flex-shrink: 0;
}

.detail-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--font-size-base);
}

.detail-title {
    font-size: 1.25rem;
    font-weight: 600;
}

.detail-actions {
    display: flex;
    gap: 0.5rem;
}

/* ============================================
   ACTION BUTTONS
   ============================================ */
.btn-approve {
    background: var(--color-success);
    color: var(--color-surface);
    border: none;
    padding: var(--space-2) var(--space-6);
    border-radius: var(--border-radius);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-approve:hover {
    background: var(--color-success-dark);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-reject {
    background: var(--color-surface);
    color: var(--color-danger);
    border: 1px solid var(--color-danger);
    padding: var(--space-2) var(--space-6);
    border-radius: var(--border-radius);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-reject:hover {
    background: var(--color-danger);
    color: var(--color-surface);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* ============================================
   DETAIL META
   ============================================ */
.detail-meta {
    display: flex;
    gap: 2rem;
    font-size: var(--font-size-sm);
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-text-secondary);
}

.meta-item i {
    width: var(--space-4);
    text-align: center;
}

.meta-item strong {
    color: var(--color-text-primary);
}

/* ============================================
   DETAIL CONTENT
   ============================================ */
.detail-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1.5rem;
    min-height: 0;
}

.detail-section {
    background: var(--color-surface);
    border-radius: var(--border-radius-lg, 12px);
    padding: 1.25rem;
    margin-bottom: var(--space-4);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
}

.section-title {
    font-weight: 600;
    font-size: var(--font-size-base);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border-light);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-text-primary);
}

.section-title i {
    color: var(--color-primary);
    font-size: 1rem;
    width: 20px;
    text-align: center;
}

.detail-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--font-size-base);
}

.detail-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.field-label {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.field-value {
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    font-weight: 500;
}

/* ============================================
   ACTIVITY TIMELINE
   ============================================ */
.activity-timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.timeline-item {
    display: flex;
    gap: var(--font-size-base);
    position: relative;
    padding-bottom: 1.5rem;
}

.timeline-item:last-child {
    padding-bottom: 0;
}

.timeline-item:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 18px;
    top: 36px;
    bottom: 0;
    width: 2px;
    background: var(--color-border-light);
}

.timeline-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-sm);
    flex-shrink: 0;
    z-index: var(--z-focus-state);
    background: var(--color-surface);
    border: 2px solid var(--color-border-light);
}

.timeline-icon.created {
    background: var(--color-info-bg);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.timeline-icon.email {
    background: var(--color-warning-bg);
    border-color: var(--color-warning);
    color: var(--color-warning);
}

.timeline-icon.comment {
    background: var(--color-indigo-bg);
    border-color: var(--color-indigo);
    color: var(--color-indigo);
}

.timeline-icon.forwarded {
    background: var(--color-purple-border);
    border-color: var(--color-purple);
    color: var(--color-purple);
}

.timeline-icon.status {
    background: var(--color-success-bg);
    border-color: var(--color-success);
    color: var(--color-success);
}

.timeline-content {
    flex: 1;
    padding-top: 0.125rem;
}

.timeline-action {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 0.25rem;
}

.timeline-details {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    line-height: 1.4;
}

.timeline-time {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    margin-top: 0.25rem;
}

/* ============================================
   EMPTY STATE
   ============================================ */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--color-text-secondary);
    padding: 3rem 2rem;
    text-align: center;
}

.empty-state i {
    font-size: 4rem;
    margin-bottom: var(--font-size-base);
    opacity: 0.3;
}

.empty-state p {
    margin: 0;
}

/* ============================================
   NEW ITEMS BADGE
   ============================================ */
.new-items-badge {
    position: absolute;
    top: var(--font-size-base);
    right: 4rem;
    background: var(--color-info);
    color: var(--color-surface);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--space-5);
    font-size: var(--font-size-xs);
    font-weight: 600;
    box-shadow: var(--shadow-md);
    cursor: pointer;
    transition: all 0.3s;
    z-index: var(--z-sticky-header);
    animation: slideDown 0.3s ease-out;
}

.new-items-badge:hover {
    background: var(--color-info-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

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

/* ============================================
   TABLET RESPONSIVE
   ============================================ */
@media (max-width: 992px) {
    .inbox-container {
        flex-direction: column;
        height: calc(100vh - 110px);
        max-height: calc(100vh - 110px);
        overflow: hidden;
    }

    .approvals-list-panel {
        width: 100%;
        height: 35%;
        min-height: 200px;
        max-height: 350px;
        border-right: none;
        border-bottom: 2px solid var(--color-border-light);
        flex-shrink: 0;
    }

    .approvals-list {
        overflow-y: auto;
        height: 100%;
    }

    .approval-detail-panel {
        width: 100%;
        height: 65%;
        flex: 1;
        overflow: hidden;
    }

    .detail-content {
        max-height: calc(65vh - 200px);
        overflow-y: auto;
    }

    .detail-header {
        position: sticky;
        top: 0;
        z-index: var(--z-modal-sticky-header);
        box-shadow: var(--shadow-sm);
    }

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

    .detail-actions {
        width: 100%;
        flex-direction: column;
    }

    .btn-approve, .btn-reject {
        width: 100%;
        flex: 1;
    }

    .new-items-badge {
        top: 0.5rem;
        right: 3.5rem;
        padding: 0.375rem 0.75rem;
        font-size: 0.625rem;
    }
}

/* ============================================
   MOBILE RESPONSIVE
   ============================================ */
@media (max-width: 576px) {
    .approvals-list-panel {
        height: 30%;
        max-height: 250px;
    }

    .approval-detail-panel {
        height: 70%;
    }

    /* Note: .filter-tabs mobile styling is in inbox-filters.css (SSOT) */

    .detail-meta {
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-start;
    }
}

/* ============================================
   CUSTOMER MESSAGES - DISCUSSION THREAD STYLES
   ============================================ */
.unread-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--color-danger);
    color: var(--color-surface);
    font-size: 0.625rem;
    width: var(--space-4);
    height: var(--space-4);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

.discussion-thread {
    display: flex;
    flex-direction: column;
    gap: var(--font-size-base);
    padding: var(--font-size-base);
    max-height: calc(100vh - 400px);
    overflow-y: auto;
}

.discussion-message {
    display: flex;
    gap: var(--space-3);
    padding: var(--font-size-base);
    border-radius: var(--border-radius);
    max-width: 85%;
}

.discussion-message.customer {
    background: var(--color-gray-100);
    align-self: flex-start;
}

.discussion-message.admin {
    background: var(--color-info-bg-lighter);
    align-self: flex-end;
}

.discussion-message.internal {
    background: var(--color-warning-bg);
    align-self: flex-end;
    border: 1px dashed var(--color-warning);
}

.message-avatar {
    width: var(--space-8);
    height: var(--space-8);
    border-radius: 50%;
    background: var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xs);
    flex-shrink: 0;
}

.customer .message-avatar {
    background: var(--color-info-bg);
    color: var(--color-blue-darker);
}

.admin .message-avatar {
    background: var(--color-success-bg-alt);
    color: var(--color-green-dark);
}

.message-content {
    flex: 1;
}

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

.message-author {
    font-weight: 500;
    font-size: var(--font-size-sm);
}

.message-time {
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
}

.internal-badge {
    background: var(--color-warning-bg);
    color: var(--color-warning-dark-brown);
    padding: 0.125rem 0.5rem;
    border-radius: var(--space-1);
    font-size: 0.625rem;
    font-weight: 600;
}

.message-text {
    font-size: var(--font-size-sm);
    line-height: 1.5;
    color: var(--color-gray-700);
    white-space: pre-wrap;
}

.reply-section {
    border-top: 1px solid var(--color-border);
    padding: var(--font-size-base);
    background: var(--color-surface);
}

.reply-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.reply-textarea {
    width: 100%;
    min-height: 80px;
    padding: var(--font-size-xs);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    font-size: var(--font-size-sm);
    resize: vertical;
}

.reply-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.entity-link-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--font-size-base);
    background: var(--color-gray-50);
    border-bottom: 1px solid var(--color-border);
}

.entity-link-header h4 {
    margin: 0;
    font-size: var(--font-size-base);
    color: var(--color-gray-900);
}

.entity-link-header .customer-info {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}


/* ========== pages/inbox-detail.css ========== */

.timeline-action {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 0.25rem;
}

.timeline-details {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    line-height: 1.4;
}

.timeline-time {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    margin-top: 0.25rem;
}

/* Empty State */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--color-text-secondary);
    padding: 3rem 2rem;
    text-align: center;
}

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

.empty-state p {
    margin: 0;
}

/* New Items Badge */
.new-items-badge {
    position: absolute;
    top: 1rem;
    right: 4rem;
    background: var(--color-info);
    color: var(--color-text-inverse);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--space-5);
    font-size: 0.75rem;
    font-weight: 600;
    box-shadow: var(--shadow-md);
    cursor: pointer;
    transition: all 0.3s;
    z-index: var(--z-sticky-header);
    animation: slideDown 0.3s ease-out;
}

.new-items-badge:hover {
    background: var(--color-primary-light);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

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

/* Accounting Modal Enhancements */
/* Ensure dropdown menus appear above modal */
#accountingModal .form-select {
    position: relative;
    z-index: var(--z-focus-state);
}

#accountingModal .table {
    position: relative;
    z-index: var(--z-base);
}

/* PDF Text Layer for Copy/Paste Support */
.textLayer {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    line-height: 1.0;
    user-select: text;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    cursor: text;
    z-index: var(--z-layer-2);
}

.textLayer > span {
    color: transparent;
    position: absolute;
    white-space: pre;
    cursor: text;
    transform-origin: 0% 0%;
    user-select: text;
    -webkit-user-select: text;
}

.textLayer ::selection {
    background: var(--color-focus-ring);
    color: transparent;
}

.textLayer ::-moz-selection {
    background: var(--color-focus-ring);
    color: transparent;
}

/* Inbox Module Styles - Based on Original Mockup */
/* Main content padding is inherited from core layout for consistent page spacing */

.inbox-container {
    display: flex;
    min-height: 600px;
    height: calc(100vh - 96px);
    overflow: hidden;
    position: relative;
}

/* Hide mobile cards on desktop - they should only appear on mobile */
.mobile-inbox-card {
    display: none;
}

/* Left Panel - Approval List */
/* NOTE: Background handled by ds-card class for design token inheritance */
.approvals-list-panel {
    width: 400px;
    border-right: var(--border-width) solid var(--color-border-light);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: visible;
}
/* Tablet and Mobile Responsive */
@media (max-width: 992px) {
    .inbox-container {
        flex-direction: column;
        height: calc(100vh - 110px);
        max-height: calc(100vh - 110px);
        overflow: hidden;
    }

    .approvals-list-panel {
        width: 100%;
        height: 35%;
        min-height: 200px;
        max-height: 350px;
        border-right: none;
        border-bottom: var(--border-width-2) solid var(--color-border-light);
        flex-shrink: 0;
    }

    .approvals-list {
        overflow-y: auto;
        height: 100%;
    }

    .approval-detail-panel {
        width: 100%;
        height: 65%;
        flex: 1;
        overflow: hidden;
    }

    .detail-content {
        max-height: calc(65vh - 200px);
        overflow-y: auto;
    }

    .detail-header {
        position: sticky;
        top: 0;
        z-index: var(--z-sticky-local);
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }

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

    .detail-actions {
        width: 100%;
        flex-direction: column;
    }

    .btn-approve, .btn-reject {
        width: 100%;
        flex: 1;
    }

    .new-items-badge {
        top: 0.5rem;
        right: 3.5rem;
        padding: 0.375rem 0.75rem;
        font-size: 0.625rem;
    }
}

/* Very small screens */
@media (max-width: 576px) {
    .approvals-list-panel {
        height: auto;
        max-height: 40vh;
        min-height: 180px;
    }

    .approval-detail-panel {
        height: auto;
        flex: 1;
        min-height: 50vh;
    }

    .filter-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .detail-meta {
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-start;
    }
}

/* ========================================
   MOBILE INBOX - EXPANDABLE CARD PATTERN
   ======================================== */
@media (max-width: 768px) {
    /* Full-screen mobile inbox - single column */
    .inbox-container {
        flex-direction: column;
        height: calc(100vh - 70px);
        height: calc(100dvh - 70px);
    }
    
    /* HIDE the detail panel completely on mobile */
    .approval-detail-panel {
        display: none !important;
    }
    
    /* Full-height list panel on mobile */
    .approvals-list-panel {
        width: 100%;
        height: 100%;
        max-height: none;
        min-height: auto;
        border-right: none;
        border-bottom: none;
        flex: 1;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }
    
    /* Scrollable approval list - full height */
    .approvals-list {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        max-height: none;
        padding-bottom: 1rem;
    }
    
    /* Hide desktop-only items on mobile */
    .desktop-only-item {
        display: none !important;
    }
    
    /* Show mobile cards */
    .mobile-inbox-card {
        display: block !important;
    }
    
    /* ========================================
       MOBILE INBOX CARD COMPONENT
       ======================================== */
    .mobile-inbox-card {
        display: block !important;
        background: var(--color-surface);
        border-bottom: 1px solid var(--color-border-light);
        padding: 0;
        margin: 0;
        cursor: pointer;
        transition: background-color 0.15s ease;
    }
    
    .mobile-inbox-card:hover {
        background: var(--card-bg, var(--color-card-bg, #ffffff));
    }
    
    .mobile-inbox-card.active {
        background: transparent;
        border-left: none;
    }
    
    /* Card Header - Always Visible */
    .mobile-card-header {
        display: flex;
        align-items: flex-start;
        gap: var(--space-3);
        padding: 1rem;
        position: relative;
    }
    
    .mobile-card-icon {
        width: 40px;
        height: 40px;
        border-radius: var(--border-radius-md);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
        flex-shrink: 0;
        background: var(--card-bg, var(--color-card-bg, #ffffff));
        color: var(--color-text-secondary);
    }
    
    .mobile-card-icon.invoice {
        background: var(--color-info-bg);
        color: var(--color-info-dark);
    }
    
    .mobile-card-icon.expense,
    .mobile-card-icon.employeeoutlay {
        background: var(--color-warning-bg);
        color: var(--color-warning-dark);
    }
    
    .mobile-card-icon.leave {
        background: var(--color-success-bg-alt);
        color: var(--color-success);
    }
    
    .mobile-card-icon.tooltransfer {
        background: var(--color-purple-bg);
        color: var(--color-purple-dark);
    }
    
    .mobile-card-content {
        flex: 1;
        min-width: 0;
    }
    
    .mobile-card-title {
        font-size: 0.9375rem;
        font-weight: 600;
        color: var(--color-text-primary);
        line-height: 1.3;
        margin-bottom: 0.25rem;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    
    .mobile-card-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        align-items: center;
        font-size: 0.8125rem;
        color: var(--color-text-secondary);
    }
    
    .mobile-card-meta .meta-sender {
        display: flex;
        align-items: center;
        gap: 0.25rem;
    }
    
    .mobile-card-meta .meta-sender i {
        font-size: 0.6875rem;
    }
    
    .mobile-card-amount {
        font-size: 1rem;
        font-weight: 700;
        color: var(--color-primary);
        margin-top: 0.375rem;
    }
    
    .mobile-card-badges {
        display: flex;
        gap: 0.375rem;
        margin-top: 0.375rem;
        flex-wrap: wrap;
    }
    
    /* Chevron toggle */
    .mobile-card-toggle {
        position: absolute;
        right: 1rem;
        top: 50%;
        transform: translateY(-50%);
        width: var(--space-8);
        height: var(--space-8);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--color-text-secondary);
        transition: transform 0.3s ease, color 0.2s;
        font-size: 0.875rem;
    }
    
    .mobile-inbox-card.expanded .mobile-card-toggle {
        transform: translateY(-50%) rotate(180deg);
        color: var(--color-primary);
    }
    
    /* ========================================
       EXPANDABLE CARD DETAIL SECTION
       ======================================== */
    .mobile-card-detail {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.35s ease-out, opacity 0.25s ease;
        opacity: 0;
        background: var(--card-bg, var(--color-card-bg, #ffffff));
        border-top: 1px solid var(--color-border-light);
    }
    
    .mobile-inbox-card.expanded .mobile-card-detail {
        max-height: 80vh;
        opacity: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .mobile-card-detail-inner {
        padding: 1rem;
    }
    
    /* Loading state */
    .mobile-card-loading {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 2rem;
        color: var(--color-text-secondary);
    }
    
    .mobile-card-loading .spinner-border {
        width: 2rem;
        height: 2rem;
        margin-bottom: 0.75rem;
    }
    
    /* Detail sections inside card */
    .mobile-card-detail .detail-section {
        background: var(--color-surface);
        border-radius: var(--border-radius);
        padding: 1rem;
        margin-bottom: 0.75rem;
        border: 1px solid var(--color-border-light);
    }
    
    .mobile-card-detail .section-title {
        font-size: 0.875rem;
        font-weight: 600;
        margin-bottom: 0.75rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        color: var(--color-text-primary);
    }
    
    .mobile-card-detail .section-title i {
        color: var(--color-primary);
    }
    
    .mobile-card-detail .detail-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.625rem;
    }
    
    .mobile-card-detail .detail-field {
        padding: 0;
    }
    
    .mobile-card-detail .field-label {
        font-size: 0.6875rem;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: var(--color-text-secondary);
        margin-bottom: 0.125rem;
    }
    
    .mobile-card-detail .field-value {
        font-size: 0.8125rem;
        color: var(--color-text-primary);
        font-weight: 500;
    }
    
    /* PDF Viewer in expanded card */
    .mobile-card-detail .pdf-viewer {
        max-height: 50vh;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: var(--border-radius);
    }
    
    .mobile-card-detail .pdf-canvas-container {
        background: var(--color-gray-800);
        border-radius: var(--border-radius);
        padding: var(--space-2);
    }
    
    /* ========================================
       STICKY ACTION BUTTONS
       ======================================== */
    .mobile-card-actions {
        position: sticky;
        bottom: 0;
        background: var(--color-surface);
        padding: 1rem;
        border-top: 1px solid var(--color-border-light);
        display: flex;
        gap: var(--space-3);
        z-index: 10;
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
    }
    
    .mobile-card-actions .btn-reject,
    .mobile-card-actions .btn-approve {
        flex: 1;
        min-height: 48px;
        font-size: 0.9375rem;
        font-weight: 600;
        border-radius: var(--border-radius-md);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        border: none;
        cursor: pointer;
        transition: transform 0.15s, box-shadow 0.15s;
    }
    
    .mobile-card-actions .btn-reject {
        background: var(--color-surface);
        color: var(--color-danger-dark);
        border: 2px solid var(--color-danger-dark);
    }
    
    .mobile-card-actions .btn-approve {
        background: linear-gradient(135deg, var(--color-info) 0%, var(--color-info-dark) 100%);
        color: var(--color-text-inverse);
        box-shadow: var(--shadow-info);
    }
    
    .mobile-card-actions .btn-reject:active,
    .mobile-card-actions .btn-approve:active {
        transform: scale(0.98);
    }
    
    /* Special styling for email invoices */
    .mobile-card-actions .btn-account {
        background: linear-gradient(135deg, var(--color-success-dark) 0%, var(--color-success-darker) 100%);
        color: var(--color-text-inverse);
        box-shadow: 0 2px 4px rgba(5, 150, 105, 0.3);
    }
    
    /* Timeline compact view */
    .mobile-card-detail .timeline-item {
        padding: var(--space-2) 0;
        font-size: 0.8125rem;
    }
    
    /* Empty state compact */
    .empty-state {
        padding: 2rem 1rem;
    }
    
    .empty-state i {
        font-size: 2.5rem;
    }
    
    .empty-state p {
        font-size: 0.875rem;
    }
    
    /* Question items styling on mobile */
    .question-item.mobile-inbox-card .mobile-card-icon {
        background: var(--color-warning-bg);
        color: var(--color-warning-dark-brown);
    }
}


/* ============================================
   INBOX DETAIL PAGE STYLES
   Extracted from inline styles for maintainability
   ============================================ */

/* ============================================
   PAGE HEADER
   ============================================ */
.inbox-page-header {
    margin-bottom: var(--space-6);
}

.inbox-page-title {
    margin-bottom: var(--space-2);
}

.inbox-page-subtitle {
    margin-bottom: 0;
}

/* ============================================
   DETAIL CARDS
   ============================================ */
.inbox-detail-card {
    margin-bottom: var(--space-6);
}

.inbox-card-title {
    margin-bottom: 0;
}

/* ============================================
   INLINE ICON SPACING
   ============================================ */
.icon-inline {
    margin-right: var(--space-2);
}

.icon-inline-left {
    margin-left: var(--space-2);
}

/* ============================================
   AMOUNT DISPLAY
   ============================================ */
.amount-display {
    margin-bottom: 0;
}

/* ============================================
   ALERT SPACING
   ============================================ */
.alert-spaced {
    margin-top: var(--space-4);
}

.alert-flush {
    margin-bottom: 0;
}

/* ============================================
   AI ASSIGNMENT CARD
   ============================================ */
.ai-assignment-card .card-title {
    margin-bottom: var(--space-4);
}

.ai-assignment-card .card-text {
    margin-bottom: var(--space-6);
}

/* ============================================
   EXTRACTED DATA SECTION HEADERS
   ============================================ */
.section-header-muted {
    margin-bottom: var(--space-4);
}

/* ============================================
   DOCUMENT PREVIEW
   ============================================ */
.document-preview-img {
    max-width: 100%;
    height: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
}

.document-preview-iframe {
    width: 100%;
    height: 600px;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
}

.document-item {
    margin-bottom: var(--space-4);
}

.document-item-header {
    margin-bottom: var(--space-2);
}

/* ============================================
   CONVERSATION / COMMENTS
   ============================================ */
.comment-item {
    margin-bottom: var(--space-4);
}

.comment-content {
    margin-left: var(--space-4);
}

.comment-time {
    margin-left: var(--space-2);
}

.comment-body {
    margin-top: var(--space-1);
}

.comment-form-group {
    margin-bottom: var(--space-4);
}

/* ============================================
   TIMELINE / ACTIVITY
   ============================================ */
.timeline-item {
    display: flex;
    gap: var(--space-4);
}

.timeline-item-spacing {
    margin-bottom: var(--space-4);
}

.timeline-marker {
    width: var(--space-8);
    height: var(--space-8);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-inverse);
    flex-shrink: 0;
}

.timeline-content {
    flex: 1;
}

.timeline-notes {
    margin-top: var(--space-1);
}

/* ============================================
   AVATAR CIRCLE
   ============================================ */
.avatar-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-weight-bold);
}

/* ============================================
   ACTIVITY HISTORY TOGGLE
   ============================================ */
.activity-toggle-header {
    cursor: pointer;
}

/* ============================================
   INBOX MODALS
   ============================================ */
.inbox-modal .modal-content {
    border: none;
    border-radius: var(--space-3);
    box-shadow: var(--shadow-2xl);
}

.inbox-modal .modal-header {
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-6) var(--space-8);
    background: var(--color-surface);
    border-radius: var(--border-radius-lg) 12px 0 0;
}

.inbox-modal .modal-title {
    font-size: var(--font-size-2xl);
    font-weight: 600;
    margin: 0;
    color: var(--color-text-primary);
}

.inbox-modal .modal-subtitle {
    margin: var(--space-1) 0 0 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.inbox-modal .modal-body {
    padding: var(--space-8);
    max-height: 70vh;
    overflow-y: auto;
}

.inbox-modal .modal-footer {
    background: var(--card-bg, var(--color-card-bg, #ffffff));
    padding: var(--space-6) var(--space-8);
    border-top: 1px solid var(--color-border);
}

/* Fullscreen modal variant */
.inbox-modal--fullscreen .modal-content {
    border-radius: 0;
}

.inbox-modal--fullscreen .modal-header {
    border-radius: 0;
}

.inbox-modal--fullscreen .modal-body {
    padding: 0;
    height: calc(100vh - 60px);
    max-height: none;
}

.inbox-modal--fullscreen .pdf-preview-frame {
    width: 100%;
    height: 100%;
    border: none;
}

/* ============================================
   BUTTON SPACING
   ============================================ */
.btn-reject-spacing {
    margin-right: var(--space-2);
}

/**
 * Page-Specific Styles - Project Details Tab
 * bIDMIO
 *
 * Tab-specific styling overrides for project details page
 * - Removes card styling from sections within Project Details tab
 * - Overview strip layout
 * - Two-column grid responsive behavior
 *
 * Scope: .project-details-tab context only
 */



/* ========== pages/inbox-filters.css ========== */
/* ============================================
   FONT AWESOME ICON FIX FOR INBOX LIST
   ============================================ */
.filters-section .fas,
.filters-section .far,
.approval-icon .fas,
.approval-icon .far,
.approval-icon i,
.filter-tab .fas,
.filter-tab .far,
.inbox-search-container .fas {
    font-family: "Font Awesome 6 Free" !important;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.filters-section .fas,
.approval-icon .fas,
.filter-tab .fas,
.inbox-search-container .fas {
    font-weight: 900 !important;
}

.filters-section .far,
.approval-icon .far,
.filter-tab .far {
    font-weight: 400 !important;
}

/* Filters */
.filters-section {
    padding: 1rem;
    border-bottom: var(--border-width) solid var(--color-border-light);
    overflow: hidden;
    flex-shrink: 0;
    max-width: 100%;
}

/* Filter Tabs Dropdown */
.filter-tab-dropdown {
    position: relative;
}

.filter-tab-more {
    display: flex;
    align-items: center;
}

.filter-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 0.25rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--border-radius);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 160px;
    z-index: 100;
    overflow: hidden;
}

.filter-dropdown-menu.show {
    display: block;
}

.filter-dropdown-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.625rem 1rem;
    color: var(--color-text-primary);
    text-decoration: none;
    font-size: 0.875rem;
    transition: background 0.15s;
}

.filter-dropdown-item:hover {
    background: var(--card-bg-hover, var(--color-card-bg-hover, #f8fafc));
}

.filter-dropdown-item.active {
    background: var(--color-primary-lighter);
    color: var(--color-primary);
    font-weight: 500;
}

.filter-dropdown-item .count {
    background: rgba(0,0,0,0.08);
    padding: 0.125rem 0.5rem;
    border-radius: var(--border-radius-md);
    font-size: 0.75rem;
    margin-left: 0.5rem;
}

/* Inbox Email Display */
.inbox-email-display {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    margin-bottom: 1rem;
    background: var(--color-info-bg-lighter);
    border: var(--border-width) solid var(--color-info-border);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: all 0.2s;
}

.inbox-email-display:hover {
    background: var(--color-info-bg-hover);
    border-color: var(--color-info-light);
}

.inbox-email-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--border-radius);
    background: var(--color-info);
    color: var(--color-text-inverse);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.inbox-email-content {
    flex: 1;
    min-width: 0;
}

.inbox-email-label {
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--color-blue-darker);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.125rem;
}

.inbox-email-address {
    font-size: 0.75rem;
    color: var(--color-primary);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.inbox-email-copy {
    color: var(--color-info);
    font-size: 0.875rem;
    flex-shrink: 0;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.inbox-email-display:hover .inbox-email-copy {
    opacity: 1;
}

.filter-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--space-2);
    margin-bottom: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-behavior: smooth;
}

.filter-tabs::-webkit-scrollbar {
    display: none;
}

.filter-tab {
    padding: var(--space-2) var(--space-4);
    border: var(--border-width) solid var(--color-border-light);
    background: var(--color-surface);
    border-radius: var(--border-radius);
    cursor: pointer;
    white-space: nowrap;
    font-size: 0.875rem;
    transition: all 0.2s;
    flex-shrink: 0;
}

.filter-tab:hover {
    background: var(--card-bg-hover, var(--color-card-bg-hover, #f8fafc));
}

.filter-tab.active {
    background: var(--color-primary);
    color: var(--color-text-inverse);
    border-color: var(--color-primary);
}

.filter-tab .count {
    margin-left: 0.5rem;
    background: rgba(0,0,0,0.1);
    padding: 0.125rem 0.5rem;
    border-radius: var(--border-radius-md);
    font-size: 0.75rem;
}

.filter-tab.active .count {
    background: rgba(255,255,255,0.2);
    color: var(--color-text-inverse);
}

/* ========================================
   MOBILE INBOX ENHANCEMENTS
   ======================================== */
@media (max-width: 768px) {
    /* Compact filters section */
    .filters-section {
        padding: 0.75rem;
    }
    
    /* Compact inbox email display */
    .inbox-email-display {
        padding: var(--space-2) var(--space-3);
        margin-bottom: var(--space-3);
    }
    
    .inbox-email-icon {
        width: var(--space-8);
        height: var(--space-8);
        font-size: 0.875rem;
    }
    
    .inbox-email-label {
        font-size: 0.5rem;
    }
    
    .inbox-email-address {
        font-size: 0.7rem;
    }
    
    /* Horizontal scrollable filter tabs - pill style */
    .filter-tabs {
        display: flex;
        flex-wrap: nowrap;
        gap: 0.375rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding-bottom: 0.25rem;
    }
    
    .filter-tabs::-webkit-scrollbar {
        display: none;
    }
    
    .filter-tab {
        padding: 0.375rem 0.75rem;
        font-size: 0.75rem;
        border-radius: var(--space-4);
        min-height: var(--space-8);
        display: flex;
        align-items: center;
    }
    
    .filter-tab .count {
        margin-left: 0.25rem;
        padding: 0.0625rem 0.375rem;
        font-size: 0.65rem;
    }
    
    /* Compact search row */
    .filters-section > div:last-child {
        margin-top: 0.75rem !important;
    }
    
    .search-box input {
        padding: var(--space-2) 0.625rem var(--space-2) 2rem;
        font-size: 0.8125rem;
        min-height: 40px;
    }
    
    .search-box i {
        left: 0.625rem;
        font-size: 0.75rem;
    }
}

.search-box {
    position: relative;
}

.search-box input {
    width: 100%;
    height: var(--filter-field-height);
    padding: var(--space-1) 0.75rem var(--space-1) 2.5rem;
    border: var(--border-width) solid var(--color-border-light);
    border-radius: var(--border-radius);
    font-size: var(--font-size-sm);
    line-height: 1;
}

.search-box i {
    position: absolute;
    left: 0.875rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-secondary);
}

/* Approval Items */
.approvals-list {
    flex: 1;
    overflow-y: auto;
}

.approval-item {
    padding: 1rem;
    border-bottom: var(--border-width) solid var(--color-border-light);
    cursor: pointer;
    transition: background 0.2s;
}

.approval-item:hover {
    background: var(--card-bg-hover, var(--color-card-bg-hover, #f8fafc));
}

.approval-item.active {
    background: var(--color-info-bg);
    border-left: var(--border-width-4) solid var(--color-primary);
}

.approval-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}

.approval-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    flex-shrink: 0;
    position: relative;
}

/* Icon badge overlay for email items */
.icon-badge {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: var(--space-4);
    height: var(--space-4);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.5rem;
    border: var(--border-width-2) solid var(--color-surface);
}

.icon-badge.email-badge {
    background: var(--color-indigo);
    color: var(--color-text-inverse);
}

.approval-icon.invoice {
    background: var(--color-info-bg);
    color: var(--color-blue-darker);
}

.approval-icon.expense {
    background: var(--color-warning-bg);
    color: var(--color-warning-dark);
}

.approval-icon.leave {
    background: var(--color-success-bg-light);
    color: var(--color-success);
}

.approval-icon.stock {
    background: var(--color-purple-bg);
    color: var(--color-purple-dark);
}

.approval-info {
    flex: 1;
    min-width: 0;
}

.approval-title {
    font-weight: 600;
    font-size: 0.875rem;
    margin-bottom: 0.25rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.approval-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.approval-badge {
    padding: 0.125rem 0.5rem;
    border-radius: var(--border-radius-md);
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.badge-pending {
    background: var(--color-warning-bg);
    color: var(--color-warning-dark);
}

.badge-urgent {
    background: var(--color-danger-bg);
    color: var(--color-danger-dark);
}

.badge-high {
    background: var(--color-warning-bg-gradient-end);
    color: var(--color-warning-darker);
}

/* Icon-only badges for email processing status */
.approval-badge-icon {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}


/* ========== pages/inbox-list.css ========== */
/* Inbox Approval Badge Styles */
.approval-badge-small {
    font-size: 0.625rem;
}

.approval-badge-icon.badge-success {
    background: var(--color-success-bg);
    color: var(--color-success-darker);
}

.approval-badge-icon.badge-warning {
    background: var(--color-warning-bg-gradient-end);
    color: var(--color-warning-dark-brown);
}

.badge-internal {
    background: var(--color-info-bg);
    color: var(--color-blue-darker);
}

.approval-amount {
    font-weight: 600;
    color: var(--color-text-primary, #1f2937);
    margin-top: 0.25rem;
    font-size: 0.875rem;
}

/* Right Panel - Details */
.approval-detail-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

.detail-header {
    padding: 1.5rem;
    border-bottom: var(--border-width) solid var(--color-border-light, #e5e7eb);
    position: sticky;
    top: 0;
    z-index: var(--z-sticky-local);
    flex-shrink: 0;
}

.detail-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.detail-title {
    font-size: 1.25rem;
    font-weight: 600;
}

.detail-actions {
    display: flex;
    gap: 0.5rem;
}

.btn-approve {
    background: var(--color-success, #16a34a);
    color: var(--color-text-inverse);
    border: none;
    padding: var(--space-2) var(--space-6);
    border-radius: var(--border-radius);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-approve:hover {
    background: var(--color-success-dark, #15803d);
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.btn-reject {
    background: var(--color-surface);
    color: var(--color-danger, #dc2626);
    border: var(--border-width) solid var(--color-danger, #dc2626);
    padding: var(--space-2) var(--space-6);
    border-radius: var(--border-radius);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-reject:hover {
    background: var(--color-danger, #dc2626);
    color: var(--color-text-inverse);
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.detail-meta {
    display: flex;
    gap: 2rem;
    font-size: 0.875rem;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-text-secondary, #6b7280);
}

.meta-item i {
    width: var(--space-4);
    text-align: center;
}

.meta-item strong {
    color: var(--color-text-primary, #1f2937);
}

/* Detail Content */
.detail-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1.5rem;
    height: 100%;
    max-height: calc(100vh - 110px - 120px); /* viewport - navbar - header */
}

.detail-section {
    background: var(--card-bg, var(--color-card-bg, #ffffff));
    border-radius: var(--border-radius);
    padding: 1.25rem;
    margin-bottom: 1rem;
}

.section-title {
    font-weight: 600;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.section-title i {
    color: var(--color-primary, #1e3a8a);
}

.detail-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.detail-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.field-label {
    font-size: 0.75rem;
    color: var(--color-text-secondary, #6b7280);
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.field-value {
    font-size: 0.875rem;
    color: var(--color-text-primary, #1f2937);
    font-weight: 500;
}

/* Activity Timeline */
.activity-timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.timeline-item {
    display: flex;
    gap: 1rem;
    position: relative;
    padding-bottom: 1.5rem;
}

.timeline-item:last-child {
    padding-bottom: 0;
}

.timeline-item:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 18px;
    top: 36px;
    bottom: 0;
    width: 2px;
    background: var(--color-border-light, #e5e7eb);
}

.timeline-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    flex-shrink: 0;
    z-index: var(--z-focus-state);
    background: var(--color-surface);
    border: var(--border-width-2) solid var(--color-border-light, #e5e7eb);
}

.timeline-icon.created {
    background: var(--color-info-bg);
    border-color: var(--color-primary, #1e3a8a);
    color: var(--color-primary, #1e3a8a);
}

.timeline-icon.email {
    background: var(--color-warning-bg);
    border-color: var(--color-warning);
    color: var(--color-warning);
}

.timeline-icon.comment {
    background: var(--color-purple-bg);
    border-color: var(--color-indigo);
    color: var(--color-indigo);
}

.timeline-icon.forwarded {
    background: var(--color-purple-border);
    border-color: var(--color-purple);
    color: var(--color-purple);
}

.timeline-icon.status {
    background: var(--color-success-bg);
    border-color: var(--color-success);
    color: var(--color-success);
}

.timeline-content {
    flex: 1;
    padding-top: 0.125rem;
}


/* ========== pages/inbox-mobile.css ========== */
/* ==============================================
   INBOX PAGE - MOBILE ENHANCEMENTS
   Single scrollable page - no nested scroll areas
   ============================================== */

@media (max-width: 768px) {
    /* ==============================================
       NUCLEAR RESET - Remove ALL nested scrolling
       Only body/html should scroll
       ============================================== */
    
    /* Body is the only scroll container */
    html {
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }
    
    body {
        overflow-x: hidden !important;
        overflow-y: auto !important;
        height: auto !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
    }
    
    /* Reset all parent shells - but preserve padding for page background visibility */
    .page-shell,
    .shell-main,
    .content-area {
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
    }
    
    /* Inbox container - no scroll */
    .inbox-container {
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
        display: block !important;
    }
    
    /* Remove fixed height and scroll from ALL inbox panels */
    .approvals-list-panel {
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
        flex: none !important;
        width: 100% !important;
    }
    
    .approvals-list {
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
        padding-bottom: 100px !important;
    }
    
    /* Hide desktop detail panel completely */
    .approval-detail-panel {
        display: none !important;
    }
    
    /* Mobile card detail - COLLAPSED state (hidden) */
    .mobile-card-detail {
        max-height: 0 !important;
        overflow: hidden !important;
        opacity: 0;
        padding: 0 !important;
        border: none !important;
    }
    
    /* Mobile card detail - EXPANDED state (visible, no scroll) */
    .mobile-inbox-card.expanded .mobile-card-detail {
        max-height: none !important;
        height: auto !important;
        overflow: visible !important;
        opacity: 1;
        border-top: 1px solid var(--color-border) !important;
    }
    
    .mobile-card-detail-inner,
    .detail-content,
    .detail-body,
    .detail-sections {
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
    
    /* Only allow horizontal scroll on filter tabs */
    .filter-tabs {
        overflow-x: auto !important;
        overflow-y: visible !important;
    }

    /* ==============================================
       INBOX CONTAINER - Add top spacing after header
       ============================================== */
    .inbox-container {
        padding-top: 16px !important;
    }
    
    /* ==============================================
       FILTERS SECTION - Sticky at top
       ============================================== */
    .filters-section {
        position: sticky;
        top: 0;
        z-index: 100;
        background: var(--color-surface);
        padding: 12px 16px !important;
        border-bottom: 1px solid var(--color-border);
    }
    
    /* Inbox email display */
    .inbox-email-display {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        padding: 12px 14px;
        background: var(--card-bg, var(--color-card-bg, #ffffff));
        border: 1px solid var(--color-border);
        border-radius: var(--border-radius-md);
        margin-bottom: var(--space-3);
        min-height: 48px;
    }
    
    .inbox-email-icon {
        width: 36px;
        height: 36px;
        background: var(--color-info-bg);
        border-radius: var(--border-radius);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--color-info-dark);
        flex-shrink: 0;
    }
    
    .inbox-email-content {
        flex: 1;
        min-width: 0;
    }
    
    .inbox-email-label {
        font-size: 0.6875rem;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: var(--color-text-secondary);
        margin-bottom: 0.125rem;
    }
    
    .inbox-email-address {
        font-size: 0.8125rem;
        color: var(--color-primary-dark);
        font-weight: 500;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .inbox-email-copy {
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--color-text-secondary);
    }
    
    /* Filter tabs - horizontal scroll */
    .filter-tabs {
        display: flex;
        gap: 0.375rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding-bottom: 0.25rem;
    }
    
    .filter-tabs::-webkit-scrollbar {
        display: none;
    }
    
    .filter-tab {
        flex: 0 0 auto;
        min-height: 36px;
        padding: var(--space-2) 0.875rem;
        font-size: 0.8125rem;
        font-weight: 500;
        border-radius: var(--border-radius-lg);
        background: var(--color-gray-100);
        color: var(--color-gray-600);
        border: none;
        white-space: nowrap;
        display: flex;
        align-items: center;
        gap: 0.375rem;
        cursor: pointer;
        transition: all 0.2s;
    }
    
    .filter-tab.active {
        background: var(--color-primary);
        color: var(--color-surface);
    }
    
    .filter-tab .count {
        background: rgba(0, 0, 0, 0.1);
        padding: 0.125rem 0.375rem;
        border-radius: var(--border-radius-md);
        font-size: 0.6875rem;
        font-weight: 600;
    }
    
    .filter-tab.active .count {
        background: rgba(255, 255, 255, 0.2);
    }
    
    /* Search box */
    .search-box {
        display: flex;
        align-items: center;
        background: var(--card-bg, var(--color-card-bg, #ffffff));
        border: 1px solid var(--color-border);
        border-radius: var(--border-radius);
        padding: 0 0.75rem;
        min-height: 44px;
    }
    
    .search-box i {
        color: var(--color-text-tertiary);
        font-size: 0.875rem;
        margin-right: 0.5rem;
    }
    
    .search-box input {
        flex: 1;
        border: none;
        background: transparent;
        font-size: 0.9375rem;
        color: var(--color-primary-dark);
        outline: none;
        min-height: 44px;
    }
    
    .search-box input::placeholder {
        color: var(--color-text-tertiary);
    }

    /* ==============================================
       MOBILE CARD STYLING - EDGE TO EDGE
       Using .mobile-inbox-card prefix for specificity
       ============================================== */
    .mobile-inbox-card {
        background: var(--color-surface);
        border-bottom: 1px solid var(--color-border);
    }
    
    .mobile-inbox-card.expanded {
        background: var(--color-surface);
    }
    
    /* Mobile card detail inner - FULL WIDTH */
    .mobile-inbox-card .mobile-card-detail-inner {
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
    }
    
    /* CRITICAL: Override desktop .detail-content rules */
    .mobile-inbox-card .detail-content {
        padding: 0 !important;
        margin: 0 !important;
        background: var(--color-surface) !important;
        overflow: visible !important;
        height: auto !important;
        max-height: none !important;
        width: 100% !important;
    }
    
    /* CRITICAL: Override desktop .detail-section rules */
    .mobile-inbox-card .detail-section {
        padding: 0 !important;
        margin: 0 !important;
        background: var(--color-surface) !important;
        border: none !important;
        border-bottom: 1px solid var(--color-border) !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        width: 100% !important;
    }
    
    /* All cards inside mobile-inbox-card - EDGE TO EDGE */
    .mobile-inbox-card .card {
        background: var(--color-surface) !important;
        border-radius: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        border-bottom: 1px solid var(--color-border) !important;
        width: 100% !important;
        box-shadow: none !important;
    }
    
    /* Section header - FULL WIDTH */
    .mobile-inbox-card .section-title {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        padding: 14px 16px !important;
        margin: 0 !important;
        background: var(--card-bg, var(--color-card-bg, #ffffff)) !important;
        border: none !important;
        border-bottom: 1px solid var(--color-border) !important;
        min-height: 48px;
        cursor: pointer;
        font-size: 0.875rem !important;
        font-weight: 600 !important;
        color: var(--color-primary-dark) !important;
        width: 100% !important;
        border-radius: 0 !important;
    }
    
    .mobile-inbox-card .card-header,
    .mobile-inbox-card h5,
    .mobile-inbox-card h6 {
        display: flex !important;
        align-items: center;
        padding: 14px 16px !important;
        margin: 0 !important;
        background: var(--card-bg, var(--color-card-bg, #ffffff)) !important;
        border-bottom: 1px solid var(--color-border) !important;
        font-size: 0.875rem !important;
        font-weight: 600 !important;
        color: var(--color-primary-dark) !important;
        width: 100% !important;
        border-radius: 0 !important;
    }
    
    .mobile-inbox-card .section-title i {
        margin-right: 0.5rem;
        color: var(--color-info);
        font-size: 0.9375rem;
    }
    
    /* Collapse indicator */
    .mobile-inbox-card .section-title::after,
    .mobile-inbox-card .collapsible-header::after {
        content: '\f078';
        font-family: 'Font Awesome 6 Free';
        font-weight: 900;
        font-size: 0.75rem;
        color: var(--color-text-tertiary);
        transition: transform 0.3s ease;
        margin-left: auto;
    }
    
    .mobile-inbox-card .section-title.collapsed::after,
    .mobile-inbox-card .collapsible-header.collapsed::after {
        transform: rotate(-90deg);
    }
    
    /* Section content - FULL WIDTH with proper padding */
    .mobile-inbox-card .detail-grid {
        padding: 12px 16px !important;
        margin: 0 !important;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px !important;
        width: 100% !important;
        background: var(--color-surface) !important;
    }
    
    .mobile-inbox-card .card-body {
        padding: 12px 16px !important;
        margin: 0 !important;
        width: 100% !important;
        background: var(--color-surface) !important;
    }
    
    .mobile-inbox-card .detail-field {
        padding: 0;
        margin: 0;
    }
    
    .mobile-inbox-card .field-label {
        font-size: 0.6875rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--color-text-secondary);
        margin-bottom: 0.25rem;
        font-weight: 500;
    }
    
    .mobile-inbox-card .field-value {
        font-size: 0.875rem;
        color: var(--color-primary-dark);
        font-weight: 500;
    }
    
    /* Description field - full width */
    .mobile-inbox-card .detail-field:has(.description-text),
    .mobile-inbox-card .detail-field[style*="margin-top"] {
        grid-column: 1 / -1;
        padding: 12px 16px 16px !important;
        border-top: 1px solid var(--color-gray-100);
        margin: 0 !important;
    }
    
    /* Show more button - FULL WIDTH */
    .mobile-inbox-card .description-toggle-btn {
        width: calc(100% - 32px) !important;
        min-height: 44px !important;
        padding: 0.75rem 1rem !important;
        margin: 0.75rem 16px !important;
        background: var(--color-gray-100) !important;
        border: 1px solid var(--color-border) !important;
        border-radius: var(--border-radius) !important;
        font-size: 0.875rem !important;
        font-weight: 600 !important;
        color: var(--color-gray-600) !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
    }
    
    .mobile-inbox-card .description-toggle-btn:active {
        background: var(--color-border) !important;
    }

    /* ==============================================
       ACTION BUTTONS - Stacked on mobile
       ============================================== */
    .detail-header .detail-actions,
    .mobile-card-actions {
        display: flex;
        flex-direction: column !important;
        gap: 0.5rem !important;
        width: 100% !important;
        padding: 1rem;
        background: var(--color-surface);
        border-top: 1px solid var(--color-border);
    }
    
    .detail-actions .btn-reject,
    .detail-actions .btn-approve,
    .mobile-card-actions .btn-reject,
    .mobile-card-actions .btn-approve,
    .mobile-card-actions .btn {
        width: 100% !important;
        min-height: 48px !important;
        font-size: 0.9375rem !important;
        font-weight: 600 !important;
        border-radius: var(--border-radius-md) !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        border: none;
        cursor: pointer;
    }
    
    .btn-reject,
    .mobile-card-actions .btn-outline-danger {
        background: var(--color-surface) !important;
        color: var(--color-danger-dark) !important;
        border: 2px solid var(--color-danger-dark) !important;
        order: 2;
    }
    
    .btn-approve,
    .mobile-card-actions .btn-success {
        background: linear-gradient(135deg, var(--color-success-light) 0%, var(--color-success-dark) 100%) !important;
        color: var(--color-text-inverse) !important;
        box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3) !important;
        order: 1;
    }
    
    /* "Approve & Account" special styling */
    .btn-approve[onclick*="invoice_accounting"],
    .mobile-card-actions .btn-primary {
        background: linear-gradient(135deg, var(--color-info) 0%, var(--color-info-dark) 100%) !important;
        box-shadow: var(--shadow-info) !important;
    }

    /* ==============================================
       DETAIL HEADER - Mobile layout
       ============================================== */
    .detail-header {
        padding: 0 !important;
        background: var(--color-surface);
        border-bottom: 1px solid var(--color-border);
    }
    
    .detail-title-row {
        padding: 1rem;
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
    }
    
    .detail-title {
        font-size: 1.125rem !important;
        font-weight: 600;
        color: var(--color-primary-dark);
        line-height: 1.3;
    }
    
    .detail-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem 1rem;
        padding: 0.75rem 1rem;
        background: var(--card-bg, var(--color-card-bg, #ffffff));
        border-top: 1px solid var(--color-border);
    }
    
    .detail-meta .meta-item {
        display: flex;
        align-items: center;
        gap: 0.375rem;
        font-size: 0.8125rem;
        color: var(--color-text-secondary);
    }
    
    .detail-meta .meta-item i {
        color: var(--color-text-tertiary);
        font-size: 0.75rem;
    }

    /* ==============================================
       CONVERSATION SECTION
       ============================================== */
    .conversation-thread {
        padding: 0 !important;
        overflow: visible !important;
    }
    
    .conversation-thread > div {
        padding: 1rem;
        border-bottom: 1px solid var(--color-gray-100);
    }
    
    .conversation-thread > div:last-child {
        border-bottom: none;
    }
    
    .avatar-circle {
        width: 36px !important;
        height: 36px !important;
        font-size: 0.8125rem !important;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    /* ==============================================
       TIMELINE SECTION
       ============================================== */
    .timeline-item {
        padding: 0.75rem 1rem !important;
        border-bottom: 1px solid var(--color-gray-100);
    }
    
    .timeline-item:last-child {
        border-bottom: none;
    }
    
    .timeline-action {
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--color-primary-dark);
        margin-bottom: 0.25rem;
    }
    
    .timeline-details {
        font-size: 0.8125rem;
        color: var(--color-text-secondary);
    }
    
    .timeline-time {
        font-size: 0.75rem;
        color: var(--color-text-tertiary);
        margin-top: 0.25rem;
    }

    /* ==============================================
       PDF VIEWER - FULL WIDTH, simplified for mobile
       Using .mobile-inbox-card prefix for specificity
       ============================================== */
    
    /* Hide the duplicate "Receipt PDF" inner header on mobile */
    .mobile-inbox-card [id^="receipt-pdf-viewer-"]  ~ div[style*="background: white"][style*="padding: 0.75rem"],
    .mobile-inbox-card div[style*="background: white"][style*="border-bottom: 1px solid #e5e7eb"][style*="display: flex"] {
        display: none !important;
    }
    
    /* Main PDF viewer container */
    .mobile-inbox-card [id^="pdf-viewer-"],
    .mobile-inbox-card [id^="receipt-pdf-viewer-"] {
        background: var(--color-surface) !important;
        padding: 0 !important;
        margin: 0 !important;
        min-height: auto !important;
        height: auto !important;
        overflow: visible !important;
        width: 100% !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }
    
    /* Loading state - allow JS to hide it with display:none */
    .mobile-inbox-card .pdf-loading-state {
        min-height: 120px !important;
        align-items: center !important;
        justify-content: center !important;
        flex-direction: column !important;
        padding: 2rem 16px !important;
        background: var(--card-bg, var(--color-card-bg, #ffffff)) !important;
    }
    
    /* When loading state is hidden by JS (display:none), respect it */
    .mobile-inbox-card .pdf-loading-state[style*="display: none"],
    .mobile-inbox-card .pdf-loading-state[style*="display:none"] {
        display: none !important;
    }
    
    /* Canvas container */
    .mobile-inbox-card .pdf-canvas-container {
        border-radius: 0 !important;
        overflow: visible !important;
        height: auto !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: var(--card-bg, var(--color-card-bg, #ffffff)) !important;
    }
    
    .mobile-inbox-card .pdf-canvas-container canvas,
    .mobile-inbox-card canvas {
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
        display: block !important;
    }
    
    /* PDF toolbar - simplified for mobile */
    .mobile-inbox-card [id$="_toolbar"] {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        padding: 10px 16px !important;
        gap: 8px !important;
        border-radius: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        background: var(--color-gray-800) !important;
        border: none !important;
    }
    
    .mobile-inbox-card [id$="_toolbar"] button,
    .mobile-inbox-card [id$="_toolbar"] a {
        padding: 10px 14px !important;
        font-size: 0.8125rem !important;
        min-height: 44px !important;
        min-width: 44px !important;
        border-radius: var(--border-radius) !important;
    }
    
    /* Hide page info, print, fullscreen on mobile */
    .mobile-inbox-card [id$="_toolbar"] span[id$="_page_info"],
    .mobile-inbox-card [id$="_toolbar"] span[id$="_zoom_info"],
    .mobile-inbox-card [id$="_toolbar"] button[title="Print PDF"],
    .mobile-inbox-card [id$="_toolbar"] button[title="Fullscreen"],
    .mobile-inbox-card [id$="_toolbar"] button[title="Reset zoom"],
    .mobile-inbox-card [id$="_toolbar"] div[style*="width: 1px"] {
        display: none !important;
    }
    
    /* Keep only essential buttons: zoom in/out and download */
    .mobile-inbox-card [id$="_toolbar"] button[title="Zoom out"],
    .mobile-inbox-card [id$="_toolbar"] button[title="Zoom in"],
    .mobile-inbox-card [id$="_toolbar"] a[title="Download PDF"] {
        display: inline-flex !important;
    }
    
    /* Receipt/Document wrapper - remove inline styles */
    .mobile-inbox-card div[style*="margin-top: 1rem"][style*="border: 1px solid"],
    .mobile-inbox-card div[style*="background: #f9fafb"] {
        margin: 0 !important;
        border: none !important;
        border-radius: 0 !important;
        background: var(--color-surface) !important;
        padding: 0 !important;
    }

    /* ==============================================
       DOCUMENT CARDS - Using specificity prefix
       ============================================== */
    .mobile-inbox-card .document-card {
        padding: 12px 16px !important;
        margin: 0 !important;
        border-radius: 0 !important;
        border: none !important;
        border-bottom: 1px solid var(--color-border) !important;
        background: var(--color-surface) !important;
        width: 100% !important;
        box-shadow: none !important;
    }
    
    .mobile-inbox-card .document-card:last-child {
        border-bottom: none !important;
    }

    /* ==============================================
       BADGES - Mobile sizing
       ============================================== */
    .approval-badge,
    .badge,
    .ds-badge {
        font-size: 0.6875rem;
        padding: 0.25rem 0.5rem;
        border-radius: var(--border-radius);
    }
    
    .badge-pending {
        background: var(--color-warning-bg);
        color: var(--color-warning-dark-brown);
    }
    
    .badge-urgent {
        background: var(--color-danger-bg);
        color: var(--color-danger-dark);
    }

    /* ==============================================
       EMPTY STATE
       ============================================== */
    .empty-state {
        padding: 3rem 1.5rem;
        text-align: center;
    }
    
    .empty-state i {
        font-size: 3rem;
        color: var(--color-gray-300);
        margin-bottom: 1rem;
    }
    
    .empty-state p {
        font-size: 0.9375rem;
        color: var(--color-text-secondary);
        margin: 0.5rem 0;
    }
    
    .empty-state p strong {
        color: var(--color-gray-600);
    }
    
    /* ==============================================
       MOBILE LOADING STATE
       ============================================== */
    .mobile-card-loading {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-3);
        padding: 2rem;
        color: var(--color-text-secondary);
    }
}


/* ========== pages/inbox-approval-detail.css ========== */
/**
 * Inbox Approval Detail Content Styles
 *
 * Extracted from templates/inbox/partials/_approval_detail_content.html
 * for better caching and maintainability. Contains document grid, timeline,
 * comment sections, and activity drawer styles.
 */

/* ============================================
   FONT AWESOME ICON FIX
   Ensures icons render correctly with proper font-family
   ============================================ */
.inbox-detail-panel .fas,
.inbox-detail-panel .far,
.activity-drawer .fas,
.activity-drawer .far,
.unified-timeline .fas,
.unified-timeline .far,
.action-icon .fas,
.action-icon .far,
.btn-icon .fas,
.btn-icon .far,
.drawer-header .fas,
.drawer-header .far {
    font-family: "Font Awesome 6 Free" !important;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.inbox-detail-panel .fas,
.activity-drawer .fas,
.unified-timeline .fas,
.action-icon .fas,
.btn-icon .fas,
.drawer-header .fas {
    font-weight: 900 !important;
}

.inbox-detail-panel .far,
.activity-drawer .far,
.unified-timeline .far,
.action-icon .far,
.btn-icon .far,
.drawer-header .far {
    font-weight: 400 !important;
}

.inbox-detail-panel .fab,
.activity-drawer .fab {
    font-family: "Font Awesome 6 Brands" !important;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    font-weight: 400 !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============================================
   DOCUMENTS GRID
   ============================================ */
.documents-grid {
    display: grid;
    gap: var(--space-3);
    margin-top: var(--font-size-base);
}

.document-card {
    display: flex;
    align-items: center;
    gap: var(--font-size-base);
    padding: var(--font-size-base);
    background: var(--color-gray-50);
    border-radius: var(--border-radius);
    border: 1px solid var(--color-border);
    transition: all 0.2s;
}

.document-card:hover {
    background: var(--color-gray-100);
    border-color: var(--color-border-strong);
}

.document-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface);
    border-radius: var(--border-radius);
    flex-shrink: 0;
}

.document-icon i {
    font-size: 1.5rem;
}

.fa-file-pdf {
    color: var(--color-danger-dark);
}

.fa-file-image {
    color: var(--color-info);
}

.fa-file {
    color: var(--color-text-secondary);
}

.document-info {
    flex: 1;
    min-width: 0;
}

.document-name {
    font-weight: 500;
    color: var(--color-gray-900);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.document-meta {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-top: 0.25rem;
}

.document-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* ============================================
   ICON BUTTON
   ============================================ */
.btn-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--border-radius);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}

.btn-icon:hover {
    background: var(--color-gray-100);
    border-color: var(--color-gray-400);
    color: var(--color-gray-900);
}

/* ============================================
   UNIFIED TIMELINE
   ============================================ */
.unified-timeline {
    margin-top: var(--font-size-base);
}

.timeline-item {
    display: flex;
    gap: var(--font-size-base);
    margin-bottom: 1.5rem;
}

.timeline-avatar {
    flex-shrink: 0;
}

.user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-indigo-light) 0%, var(--color-purple) 100%);
    color: var(--color-text-inverse);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: var(--font-size-sm);
}

.action-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-inverse);
    font-size: var(--font-size-sm);
    flex-shrink: 0;
}

/* Ensure action icon Font Awesome renders */
.action-icon i {
    line-height: 1;
}

/* Action Icon Colors */
.action-created { background: var(--color-info); }
.action-approved { background: var(--color-success); }
.action-rejected { background: var(--color-danger); }
.action-forwarded { background: var(--color-warning); }
.action-document_added { background: var(--color-purple); }
.action-icon:not([class*="action-"]) { background: var(--color-text-secondary); }

.timeline-content {
    flex: 1;
    min-width: 0;
}

.timeline-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--font-size-base);
    margin-bottom: 0.5rem;
}

.timeline-user strong {
    font-weight: 600;
    color: var(--color-gray-900);
}

.timeline-user .text-muted {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-left: 0.5rem;
}

.timeline-time {
    font-size: 0.8125rem;
    color: var(--color-gray-400);
    white-space: nowrap;
}

.timeline-message {
    color: var(--color-gray-700);
    line-height: 1.6;
    padding: var(--font-size-xs);
    background: var(--color-gray-50);
    border-radius: var(--border-radius);
    border-left: 3px solid var(--color-border);
}

.timeline-action .timeline-message {
    background: var(--color-info-bg-lighter);
    border-left-color: var(--color-info);
}

.timeline-system_note .timeline-message {
    background: var(--color-warning-bg);
    border-left-color: var(--color-warning);
    font-style: italic;
}

/* ============================================
   ADD COMMENT SECTION
   ============================================ */
.add-comment-section {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-border);
}

.comment-input-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.comment-input {
    width: 100%;
    padding: var(--font-size-xs);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--border-radius);
    font-family: inherit;
    font-size: 0.9375rem;
    resize: vertical;
    min-height: 80px;
}

.comment-input:focus {
    outline: none;
    border-color: var(--color-info);
    box-shadow: var(--shadow-focus);
}

.btn-send-comment {
    align-self: flex-end;
    padding: 0.625rem 1.25rem;
    background: var(--color-info);
    color: var(--color-text-inverse);
    border: none;
    border-radius: var(--border-radius);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-send-comment:hover {
    background: var(--color-info-dark);
}

.btn-send-comment i {
    margin-right: 0.5rem;
}

/* ============================================
   ACTIVITY HISTORY FLOATING BUTTON
   ============================================ */
.activity-history-toggle {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--color-info);
    color: #ffffff;
    border: none;
    box-shadow: var(--shadow-info);
    cursor: pointer;
    z-index: var(--z-dropdown);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    transition: all 0.3s;
}

.activity-history-toggle i {
    color: #ffffff;
}

.activity-history-toggle:hover {
    background: var(--color-info-dark);
    transform: scale(1.1);
}

/* ============================================
   ACTIVITY DRAWER
   ============================================ */
.activity-drawer {
    position: fixed;
    top: 0;
    right: -400px;
    width: 400px;
    height: 100vh;
    background: var(--color-surface);
    box-shadow: -4px 0 16px rgba(0, 0, 0, 0.1);
    z-index: var(--z-tooltip);
    transition: right 0.3s ease;
    display: flex;
    flex-direction: column;
}

.activity-drawer.open {
    right: 0;
}

.drawer-header {
    padding: 1.5rem;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    background: var(--card-bg, var(--color-card-bg, #ffffff));
}

.drawer-header h5 {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-text-primary);
}

.drawer-header h5 i {
    color: var(--color-info);
    font-size: 1rem;
}

/* Close button in drawer header */
.drawer-header .btn-icon {
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    color: var(--color-text-secondary);
    border-radius: 50%;
}

.drawer-header .btn-icon:hover {
    background: var(--color-gray-200);
    color: var(--color-gray-800);
}

.drawer-header .btn-icon i {
    font-size: 1rem;
}

.drawer-content {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
}

/* ============================================
   INLINE PREVIEW STYLES
   ============================================ */
.document-preview-section {
    margin-bottom: 1.5rem;
}

.inline-preview {
    margin-top: var(--font-size-xs);
}

/* ============================================
   APPROVAL BUTTON VARIANTS
   ============================================ */
.btn-approve--convert {
    background: linear-gradient(135deg, var(--color-success) 0%, var(--color-success-dark) 100%);
    border: none;
}

.btn-approve--approve-only {
    background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary) 100%);
    border: none;
}

/* ============================================
   STATUS BADGES - Semantic Colors
   ============================================ */
.approval-badge--approved {
    background: var(--color-success-bg);
    color: var(--color-success);
}

.approval-badge--rejected {
    background: var(--color-danger-bg);
    color: var(--color-danger);
}

.approval-badge--pending {
    background: var(--color-warning-bg);
    color: var(--color-warning-dark);
}

/* ============================================
   FIELD VALUE VARIANTS
   ============================================ */
.field-value--amount {
    color: var(--color-primary);
    font-weight: 700;
    font-size: var(--font-size-lg);
}

.field-value--danger {
    color: var(--color-danger);
}

.field-value--success {
    color: var(--color-success);
}

.field-value--primary {
    font-weight: 600;
    color: var(--color-primary);
}

.field-value--secondary {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    margin-left: var(--space-2);
}

/* ============================================
   DESCRIPTION WRAPPER
   ============================================ */
.description-wrapper {
    line-height: 1.6;
}

.description-text {
    max-height: 4.8em;
    overflow: hidden;
    transition: max-height 0.3s ease;
    white-space: pre-wrap;
    word-break: break-word;
}

.description-text.expanded {
    max-height: none;
}

.description-toggle-btn {
    display: block;
    background: var(--card-bg, var(--color-card-bg, #ffffff));
    border: 1px solid var(--color-border);
    color: var(--color-text-primary);
    cursor: pointer;
    font-size: var(--font-size-sm);
    font-weight: 600;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--border-radius);
    transition: all 0.2s;
    margin-top: var(--space-3);
    visibility: hidden;
}

.description-toggle-btn:hover {
    background: var(--color-border-light);
    border-color: var(--color-border-strong);
}

/* ============================================
   SECTION TITLE VARIANTS
   ============================================ */
.section-title--flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.section-title--with-margin {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-4);
}

/* ============================================
   VIEW LINK BUTTON
   ============================================ */
.btn-view-link {
    text-decoration: none;
    padding: var(--space-2) var(--space-4);
    background: var(--card-bg, var(--color-card-bg, #ffffff));
    border-radius: var(--border-radius);
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
}

.btn-view-link:hover {
    background: var(--color-border-light);
}

/* ============================================
   QUOTE LINE ITEMS TABLE
   ============================================ */
.quote-line-items-wrapper {
    margin-top: var(--space-4);
}

.quote-line-items-container {
    background: var(--color-surface-tertiary);
    border: 1px solid var(--color-border-light);
    border-radius: var(--border-radius);
    overflow: hidden;
}

.quote-line-items-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}

.quote-line-items-table thead tr {
    background: var(--card-bg, var(--color-card-bg, #ffffff));
    border-bottom: 1px solid var(--color-border-light);
}

.quote-line-items-table th {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    font-weight: 600;
    color: var(--color-text-primary);
}

.quote-line-items-table th.text-right {
    text-align: right;
}

.quote-line-items-table tbody tr {
    border-bottom: 1px solid var(--color-border-light);
}

.quote-line-items-table td {
    padding: var(--space-3) var(--space-4);
    color: var(--color-text-primary);
}

.quote-line-items-table td.text-right {
    text-align: right;
}

.quote-line-items-table td.text-secondary {
    color: var(--color-text-secondary);
}

.quote-line-items-table td.font-medium {
    font-weight: 500;
}

.quote-line-items-table tfoot {
    background: var(--card-bg, var(--color-card-bg, #ffffff));
}

.quote-line-items-table tfoot td {
    padding: var(--space-3) var(--space-4);
    font-weight: 600;
    color: var(--color-text-primary);
}

.quote-line-items-table tfoot tr.total-row {
    background: var(--color-success-bg);
}

.quote-line-items-table tfoot tr.total-row td {
    font-weight: 700;
    color: var(--color-success-dark);
    font-size: var(--font-size-base);
}

/* ============================================
   INFO BOX / MESSAGE BOX
   ============================================ */
.info-box {
    margin-top: var(--space-4);
    background: var(--color-info-bg);
    border: 1px solid var(--color-info-border);
    border-radius: var(--border-radius);
    padding: var(--space-4);
}

.info-box .field-label {
    color: var(--color-info-dark);
    margin-bottom: var(--space-2);
}

.info-box .field-label i {
    margin-right: var(--space-2);
}

.info-box p,
.info-box .message-content {
    color: var(--color-info-dark);
}

/* ============================================
   ATTACHMENT CARD
   ============================================ */
.attachments-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.attachment-card {
    display: flex;
    align-items: center;
    padding: var(--space-3);
    background: var(--color-surface-tertiary);
    border: 1px solid var(--color-border-light);
    border-radius: var(--border-radius);
}

.attachment-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-info-bg);
    border-radius: var(--border-radius);
    margin-right: var(--space-3);
}

.attachment-icon i {
    font-size: var(--font-size-xl);
}

.attachment-icon .fa-file-pdf {
    color: var(--color-danger);
}

.attachment-icon .fa-file-image {
    color: var(--color-primary-light);
}

.attachment-icon .fa-file {
    color: var(--color-text-secondary);
}

.attachment-info {
    flex: 1;
    min-width: 0;
}

.attachment-name {
    font-weight: 500;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.attachment-size {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

.attachment-download {
    padding: var(--space-2);
    color: var(--color-primary-light);
    text-decoration: none;
}

/* ============================================
   CATEGORY BADGE
   ============================================ */
.category-badge {
    background: var(--color-info-bg);
    color: var(--color-info-dark);
    padding: var(--space-1) var(--space-3);
    border-radius: 9999px;
    font-size: var(--font-size-sm);
    font-weight: 500;
}

/* ============================================
   RECEIPT PREVIEW AREA
   ============================================ */
.receipt-preview-container {
    margin-top: var(--space-4);
    border: 1px solid var(--color-border-light);
    border-radius: var(--border-radius);
    overflow: hidden;
    background: var(--color-surface-tertiary);
    padding: var(--space-4);
}

.receipt-preview-image {
    max-width: 100%;
    height: auto;
    border-radius: var(--border-radius);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.pdf-viewer-wrapper {
    margin-top: var(--space-4);
    border: 1px solid var(--color-border-light);
    border-radius: var(--border-radius);
    overflow: hidden;
    background: var(--color-surface-tertiary);
}

.pdf-viewer-header {
    background: var(--color-surface);
    padding: var(--space-3);
    border-bottom: 1px solid var(--color-border-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pdf-viewer-title {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    font-weight: 500;
}

.pdf-viewer-title i {
    color: var(--color-danger);
    margin-right: var(--space-2);
}

.pdf-viewer-actions {
    display: flex;
    gap: var(--space-2);
}

.pdf-viewer-content {
    background: var(--color-surface);
    padding: var(--space-4);
    min-height: 500px;
}

.pdf-viewer-content--tall {
    min-height: 700px;
}

.pdf-loading-state {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 500px;
    flex-direction: column;
}

.pdf-loading-state i {
    font-size: 2rem;
    color: var(--color-primary-light);
    margin-bottom: var(--space-4);
}

.pdf-loading-state p {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.pdf-error-state {
    display: none;
    text-align: center;
    padding: 3rem;
}

.pdf-error-state i {
    font-size: 3rem;
    color: var(--color-danger);
    margin-bottom: var(--space-4);
}

.pdf-error-state p {
    color: var(--color-text-secondary);
}

/* ============================================
   BTN-OPEN / BTN-DOWNLOAD
   ============================================ */
.btn-pdf-open {
    padding: var(--space-2) var(--space-3);
    background: var(--color-primary-light);
    color: var(--color-surface);
    border: none;
    border-radius: var(--border-radius);
    text-decoration: none;
    font-size: var(--font-size-sm);
}

.btn-pdf-download {
    padding: var(--space-2) var(--space-3);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    text-decoration: none;
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
}

/* ============================================
   WARNING BOX
   ============================================ */
.warning-box {
    margin-top: var(--space-4);
    background: var(--color-warning-bg);
    border: 1px solid var(--color-warning-border);
    border-radius: var(--border-radius);
    padding: var(--space-4);
    text-align: center;
}

.warning-box i {
    font-size: 1.5rem;
    color: var(--color-warning-dark);
    margin-bottom: var(--space-2);
}

.warning-box .warning-title {
    color: var(--color-warning-dark);
    font-weight: 500;
}

.warning-box .warning-message {
    color: var(--color-warning-dark);
    font-size: var(--font-size-sm);
}

.warning-box a {
    color: var(--color-info-dark);
    text-decoration: underline;
    font-size: var(--font-size-sm);
}

/* ============================================
   FILE ATTACHMENT ICON (warning state)
   ============================================ */
.file-icon-warning {
    font-size: 2rem;
    color: var(--color-warning-dark);
    margin-bottom: var(--space-2);
}

/* ============================================
   MODAL STYLES - Approval Modals
   ============================================ */
.approval-modal .modal-content {
    border: none;
    border-radius: var(--space-3);
    box-shadow: var(--shadow-2xl);
    background: var(--color-surface) !important;
}

.approval-modal .modal-header {
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-6) var(--space-8);
    background: var(--color-surface);
    border-radius: var(--border-radius-lg) 12px 0 0;
}

.approval-modal .modal-header--success {
    background: linear-gradient(135deg, var(--color-success-bg) 0%, var(--color-success-gradient-end) 100%);
}

.approval-modal .modal-title {
    font-size: var(--font-size-2xl);
    font-weight: 600;
    margin: 0;
    color: var(--color-text-primary);
}

.approval-modal .modal-title--success {
    color: var(--color-success-dark);
}

.approval-modal .modal-subtitle {
    margin: var(--space-1) 0 0 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.approval-modal .modal-subtitle--success {
    color: var(--color-success);
}

.approval-modal .modal-body {
    padding: var(--space-8);
    max-height: 70vh;
    overflow-y: auto;
    background: var(--color-surface) !important;
}

.approval-modal .modal-footer {
    background: var(--card-bg, var(--color-card-bg, #ffffff));
    padding: var(--space-6) var(--space-8);
    border-top: 1px solid var(--color-border);
    border-radius: 0 0 var(--space-3) var(--space-3);
}

/* ============================================
   ALERT INFO BOX (modal context)
   ============================================ */
.alert-info-box {
    background: var(--color-info-bg);
    border: 1px solid var(--color-info-border);
    border-radius: var(--border-radius);
    padding: var(--space-4);
    margin-bottom: var(--space-6);
}

.alert-info-box i {
    color: var(--color-primary-light);
}

/* ============================================
   FORM LABELS WITH ICONS
   ============================================ */
.form-label-with-icon {
    font-weight: 500;
    margin-bottom: var(--space-2);
}

.form-label-with-icon i {
    color: var(--color-text-secondary);
    margin-right: var(--space-2);
}

/* ============================================
   EMAIL CHIPS CONTAINER
   ============================================ */
.email-chips-container {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    min-height: 44px;
    background: var(--color-surface);
}

.email-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: var(--color-info-bg);
    color: var(--color-info-dark);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--space-5);
    font-size: var(--font-size-sm);
}

.remove-email-chip {
    background: none;
    border: none;
    color: var(--color-info-dark);
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.remove-email-chip i {
    font-size: var(--font-size-xs);
}

.email-chip-input {
    border: none;
    outline: none;
    flex: 1;
    min-width: 200px;
    padding: var(--space-1);
    font-size: var(--font-size-sm);
}

/* ============================================
   FORM CONTROL WITH PADDING
   ============================================ */
.form-control--styled {
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
}

.form-textarea--styled {
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    resize: vertical;
}

/* ============================================
   SENDING OPTIONS BOX
   ============================================ */
.sending-options-box {
    background: var(--color-surface-tertiary);
    border-radius: var(--border-radius);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
    border: 1px solid var(--color-border-light);
}

.sending-options-title {
    margin: 0 0 var(--space-3) 0;
    font-weight: 600;
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
}

.sending-options-title i {
    margin-right: var(--space-2);
}

.form-check-label-styled {
    font-size: var(--font-size-sm);
}

.form-check-label-styled i {
    color: var(--color-text-secondary);
    margin-right: var(--space-1);
}

.form-check-label-styled .fa-file-pdf {
    color: var(--color-danger);
}

.form-check-hint {
    display: block;
    margin-left: var(--space-6);
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
}

/* ============================================
   INVOICE SUMMARY BOX
   ============================================ */
.invoice-summary-box {
    background: linear-gradient(135deg, var(--color-info-bg) 0%, var(--color-info-gradient-end) 100%);
    border-radius: var(--border-radius);
    padding: var(--space-5);
    margin-top: var(--space-4);
    border: 1px solid var(--color-info-border);
}

.invoice-summary-title {
    margin: 0 0 var(--space-4) 0;
    font-weight: 600;
    color: var(--color-info-dark);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.invoice-summary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}

.invoice-summary-label {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.invoice-summary-value {
    font-weight: 600;
    color: var(--color-text-primary);
}

.invoice-summary-value--medium {
    font-weight: 500;
    color: var(--color-text-primary);
}

.invoice-summary-divider {
    margin: var(--space-4) 0;
    border: none;
    border-top: 1px solid var(--color-info-border);
}

.invoice-summary-total-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
}

.invoice-summary-total-row {
    grid-column: span 2;
    margin-top: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px dashed var(--color-info-border);
}

.invoice-summary-total-value {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-info-dark);
}

.invoice-summary-full-row {
    grid-column: span 2;
}

/* ============================================
   CONVERT BOX (Quote to Project)
   ============================================ */
.convert-info-box {
    background: var(--color-success-bg);
    border: 1px solid var(--color-success-border);
    border-radius: var(--border-radius);
    padding: var(--space-5);
    margin-bottom: var(--space-6);
}

.convert-info-title {
    margin: 0 0 var(--space-3) 0;
    color: var(--color-success-dark);
    font-weight: 600;
}

.convert-info-title i {
    margin-right: var(--space-2);
}

.convert-info-list {
    margin: 0;
    padding-left: var(--space-5);
    color: var(--color-success-dark);
}

.convert-warning-box {
    background: var(--color-warning-bg);
    border: 1px solid var(--color-warning-border);
    border-radius: var(--border-radius);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
}

.convert-warning-box p {
    margin: 0;
    color: var(--color-warning-dark);
    font-size: var(--font-size-sm);
}

.convert-warning-box i {
    margin-right: var(--space-2);
}

/* ============================================
   CONVERT BUTTON
   ============================================ */
.btn-convert {
    background: linear-gradient(135deg, var(--color-success) 0%, var(--color-success-dark) 100%);
    color: var(--color-surface);
    border: none;
}

.btn-convert i {
    margin-right: var(--space-2);
}

/* ============================================
   INLINE ATTACHMENT LIST (modal)
   ============================================ */
.modal-attachments-box {
    background: var(--color-surface-tertiary);
    border-radius: var(--border-radius);
    padding: var(--space-4);
    margin-top: var(--space-4);
    border: 1px solid var(--color-border-light);
}

.modal-attachments-title {
    margin: 0 0 var(--space-3) 0;
    font-weight: 600;
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
}

.modal-attachments-title i {
    margin-right: var(--space-2);
}

.modal-attachment-item {
    display: flex;
    align-items: center;
    padding: var(--space-2);
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--border-radius);
}

.modal-attachment-item i {
    margin-right: var(--space-2);
}

.modal-attachment-item .fa-file-pdf {
    color: var(--color-danger);
}

.modal-attachment-item .fa-file-image {
    color: var(--color-primary-light);
}

.modal-attachment-item .fa-file {
    color: var(--color-text-secondary);
}

.modal-attachment-name {
    flex: 1;
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.modal-attachment-size {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    margin-left: var(--space-2);
}

.modal-attachments-hint {
    display: block;
    margin-top: var(--space-2);
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
}

/* ============================================
   SPACING UTILITY CLASSES
   ============================================ */
.ds-mt-2 {
    margin-top: var(--space-2);
}

.ds-mt-4 {
    margin-top: var(--space-4);
}

.ds-mb-4 {
    margin-bottom: var(--space-4);
}

.ds-mb-2 {
    margin-bottom: var(--space-2);
}

.ds-flex-col {
    display: flex;
    flex-direction: column;
}

.ds-gap-2 {
    gap: var(--space-2);
}

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


/* ========== pages/projects-core-detail.css ========== */
/**
 * PROJECT DETAIL PAGE STYLES
 * ===========================
 * Project detail page-specific styling and behaviors
 * 
 * Contains:
 * - Sidebar hiding for project detail route
 * - Smooth scrolling
 * - Scrollbar styling
 * - Projects map view
 * - Coming soon placeholder
 * - Header section
 * 
 * Dependencies: design-tokens.css, core-consolidated.css
 * Used by: Project detail pages
 */

/* ========================================
   !important Usage Policy
   ======================================== */

/* Phase 3 Refactoring: Reduced from 6 to 2 !important declarations (67% reduction)
 * 
 * ACCEPTABLE !important USE CASES:
 * 
 * 1. Main App Sidebar Override - .sidebar display: none requires !important to override
 *    the main application sidebar styles when viewing project detail pages
 * 2. Main Content Layout Override - .main-content margin-left: 0 requires !important to
 *    override the main application content margin when sidebar is hidden
 * 
 * Each remaining !important declaration below has an inline comment explaining why it's necessary.
 */

/* ========================================
   PROJECT DETAIL PAGE LAYOUT
   ======================================== */

/* Hide main sidebar on project detail page (desktop only) */
@media (min-width: 1024px) {
    /* !important: Required to override main app sidebar display */
    body.project-detail-route .sidebar {
        display: none !important;
    }
}

/* !important: Required to override main app content margin when sidebar is hidden */
body.project-detail-route .main-content {
    margin-left: 0 !important;
}

/* Smooth scrolling for better UX */
html {
    scroll-behavior: smooth;
}

/* ========================================
   SCROLLBAR STYLING
   ======================================== */

/* Improve scrollbar appearance */
.ds-project-tabs-mobile__scrollable,
.economy-tab-nav,
.calendar-tab-nav,
.uploads-filter-tabs {
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
}

.ds-project-tabs-mobile__scrollable::-webkit-scrollbar,
.economy-tab-nav::-webkit-scrollbar,
.calendar-tab-nav::-webkit-scrollbar {
    height: var(--height-scrollbar);
}

.ds-project-tabs-mobile__scrollable::-webkit-scrollbar-track,
.economy-tab-nav::-webkit-scrollbar-track,
.calendar-tab-nav::-webkit-scrollbar-track {
    background: transparent;
}

.ds-project-tabs-mobile__scrollable::-webkit-scrollbar-thumb,
.economy-tab-nav::-webkit-scrollbar-thumb,
.calendar-tab-nav::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: var(--border-radius-full);
}

/* ========================================
   PROJECTS MAP VIEW
   ======================================== */

.projects-map-container {
    width: 100%;
    height: var(--min-height-map);
    min-height: var(--min-height-panel);
    border-radius: var(--border-radius);
    overflow: hidden;
}

/* Full height on mobile for better map experience */
@media (max-width: 768px) {
    .projects-map-container {
        height: calc(100vh - 280px);
        min-height: var(--min-height-panel);
    }
}

/* Map marker label styling */
.map-marker-label {
    background: color-mix(in srgb, var(--color-surface) 95%, transparent);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--border-radius-sm);
    box-shadow: var(--shadow-sm);
    white-space: nowrap;
    border: var(--border-width) solid var(--color-border-light);
    margin-top: calc(-1 * var(--space-2));
}

/* Adjust label position on mobile for better readability */
@media (max-width: 768px) {
    .map-marker-label {
        font-size: var(--font-size-xs) !important;
        padding: var(--space-1) var(--space-1-5);
    }
}

/* ========================================
   COMING SOON PLACEHOLDER
   ======================================== */

.coming-soon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-8);
    text-align: center;
    color: var(--color-text-secondary);
}

.coming-soon h3 {
    margin-top: var(--space-4);
    margin-bottom: var(--space-2);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.coming-soon p {
    margin: 0;
    font-size: var(--font-size-base);
}

/* ========================================
   HEADER SECTION - Clean White Background
   ======================================== */

.ds-project-header {
    background: var(--color-surface);
    color: var(--color-text-primary);
    padding: var(--space-5) var(--space-6);
    border-bottom: var(--border-width) solid var(--color-border);
    margin-bottom: 0;
}

.ds-project-header__container {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin: 0;
}

.project-detail-header__content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex: 1;
}

.ds-project-header__back {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: var(--color-surface-secondary);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--border-radius);
    color: var(--color-text-primary);
    text-decoration: none;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    transition: var(--transition-colors);
}

.ds-project-header__back:hover {
    background: var(--color-hover);
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.ds-project-header__back i {
    font-size: var(--font-size-sm);
}

.ds-project-header__title {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--color-text-primary);
}

.ds-project-header__title i {
    color: var(--color-primary);
    font-size: var(--font-size-xl);
}


/* ========== pages/projects-core-layout.css ========== */
/**
 * PROJECTS CORE LAYOUT
 * ====================
 * Core layout and structure for project details pages
 * 
 * Contains:
 * - Project details tab layout
 * - Two-column grid layouts
 * - Section styling
 * - Form groups and fields
 * - Mobile responsive adjustments
 * - Copy address button
 * 
 * Dependencies: design-tokens.css, core-consolidated.css
 * Used by: Project detail pages
 */

/* ========================================
   PROJECT DETAILS TAB - REDESIGNED LAYOUT
   Clean, modern layout without cards
   ======================================== */

/* Remove card styling from sections within Project Details tab only */
#project-details .project-section,
#project-details .project-overview-strip {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    margin-bottom: var(--space-8);
}

/* Section 1: Overview Strip */
.project-overview-strip {
    padding: var(--space-4);
    background: var(--color-surface-secondary);
    border-radius: var(--border-radius);
    margin-bottom: var(--space-6);
}

.overview-fields-grid {
    display: flex;
    gap: var(--space-4);
}

.overview-fields-grid .ds-form-group {
    flex: 1;
}

/* Two-Column Grid Layout */
.project-two-column-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
    margin-bottom: var(--space-8);
}

@media (min-width: 1024px) {
    body.project-detail-route
    .project-two-column-grid {
        grid-template-columns: 2fr 1fr;
    }
}

/* Section Title Styling with Divider */
.project-section-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    color: var(--color-text-primary);
    margin: 0 0 var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: var(--border-width) solid var(--color-border);
    letter-spacing: var(--letter-spacing-wide);
}

/* Section Fields Container */
.section-fields {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* Form Groups within sections */
.project-section .ds-form-group {
    margin-bottom: 0;
}

/* Full-Width Sections (Scheduling & Logistics, Compliance & Notes) */
#project-details > form > .project-section:nth-last-child(3),
#project-details > form > .project-section:nth-last-child(2) {
    grid-column: 1 / -1;
}

/* Ensure proper spacing for form elements */
#project-details .ds-form-input {
    min-height: var(--space-11);
}

#project-details .ds-form-label {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    margin-bottom: var(--space-2);
}

/* Utility classes for height control - Project-specific heights */
.ds-project-height-15 {
    height: 120px;
}

.ds-project-height-20 {
    height: 160px;
}

/* ========================================
   PROJECT DETAILS - RESPONSIVE BEHAVIOR
   ======================================== */

/* Tablet/Mobile: Stack columns and adjust spacing */
@media (max-width: 1023px) {
    .project-two-column-grid {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }
    
    .overview-fields-grid {
        flex-direction: column;
        gap: var(--space-4);
    }
    
    #project-details .project-section,
    #project-details .project-overview-strip {
        margin-bottom: var(--space-6);
    }
}

/* Mobile: Ensure proper touch targets */
@media (max-width: 767px) {
    .project-overview-strip {
        padding: var(--space-3);
    }
    
    #project-details .ds-form-input,
    #project-details .ds-btn {
        min-height: var(--space-11);
    }
    
    .project-section-title {
        font-size: var(--font-size-base);
    }
    
    .section-fields {
        gap: var(--space-3);
    }
}

/* ========================================
   COPY ADDRESS BUTTON
   ======================================== */

/* Pseudo-classes provide sufficient specificity */
.copy-address-btn:hover {
    background: var(--color-hover);
    color: var(--color-primary);
}

.copy-address-btn:active {
    transform: translateY(-50%) scale(0.95);
}

/* ========================================
   VERY SMALL SCREENS (< 400px)
   Extra optimizations for phones
   ======================================== */
@media (max-width: 399px) {
    /* Make modals nearly full-screen on very small devices */
    .economy-modal {
        padding: var(--space-1);
    }
    
    .modal-container {
        max-height: 98vh;
        border-radius: 0;
    }
    
    .modal-header,
    .modal-body,
    .modal-footer {
        padding: var(--space-3);
    }
    
    .modal-title {
        font-size: var(--font-size-base);
    }
    
    /* Reduce summary card padding on tiny screens */
    .summary-card {
        padding: var(--space-3);
    }
    
    .summary-value {
        font-size: var(--font-size-xl);
    }
    
    /* Compact project header even more */
    .ds-project-header {
        padding: var(--space-2) var(--space-3);
    }
    
    .ds-project-header__title {
        font-size: var(--font-size-lg);
    }
}


/* ========== pages/projects-economy-panels.css ========== */
/**
 * PROJECTS ECONOMY - RESPONSIVE PANEL SYSTEM
 * ============================================
 * Panel states and toggles for economy navigation
 * 
 * Contains:
 * - Panel header with hamburger toggle
 * - Default view star icons
 * - Current view badge
 * - Panel state transitions (expanded/collapsed/hidden)
 * - Desktop panel states
 * 
 * Dependencies: design-tokens.css, core-consolidated.css
 * Used by: Project economy tab
 */

/* ========================================
   RESPONSIVE PANEL SYSTEM
   ======================================== */

/* Panel Header with Hamburger Toggle */
.ds-panel-header {
    padding: var(--space-4);
    border-bottom: var(--border-width) solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.ds-panel-toggle-btn {
    background: var(--color-surface-secondary);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--border-radius);
    padding: var(--space-3);
    min-width: 44px;
    min-height: var(--space-11);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-all);
    color: var(--color-text-primary);
}

.ds-panel-toggle-btn:hover {
    background: var(--color-hover);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.ds-panel-toggle-btn i {
    font-size: var(--font-size-base);
}

/* Default View Star Icons */
.ds-set-default-icon {
    width: var(--space-5);
    text-align: center;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: var(--transition-all);
    margin-left: auto;
    opacity: 0;
}

.ds-project-nav-item:hover .ds-set-default-icon {
    opacity: 1;
}

.ds-set-default-icon:hover {
    color: var(--color-warning);
    transform: scale(1.2);
}

.ds-set-default-icon.active {
    opacity: 1;
    color: var(--color-warning);
}

/* Current View Badge (shows when panel hidden on desktop) */
.ds-current-view-badge {
    display: none;
    padding: var(--space-3) var(--space-4);
    background: var(--color-info-bg);
    color: var(--color-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    border-radius: var(--border-radius);
    margin-bottom: var(--space-4);
    border: var(--border-width) solid var(--color-info-border);
    align-items: center;
    gap: var(--space-2);
}

.ds-current-view-badge i {
    font-size: var(--font-size-base);
}

/* Panel State Transitions */
.ds-project-nav {
    transition: var(--transition-slow);
    position: relative;
}

/* Desktop Panel States (>= 1024px) */
@media (min-width: 1024px) {
    body.project-detail-route
    /* Expanded State - Default */
    .ds-project-nav.panel-expanded {
        width: 280px;
    }
    
    /* Collapsed State - Icons Only */
    .ds-project-nav.panel-collapsed {
        width: 60px;
    }
    
    .ds-project-nav.panel-collapsed .ds-project-nav-item span {
        display: none;
    }
    
    .ds-project-nav.panel-collapsed .ds-set-default-icon {
        display: none;
    }
    
    .ds-project-nav.panel-collapsed .ds-project-nav-item {
        justify-content: center;
        padding: var(--space-4);
    }
    
    /* Hidden State - Completely Off Screen */
    .ds-project-nav.panel-hidden {
        transform: translateX(-100%);
        position: absolute;
        left: 0;
        top: 0;
        z-index: var(--z-behind);
    }
    
    /* Show current view badge when panel is hidden */
    .ds-project-nav.panel-hidden ~ .ds-project-content .ds-current-view-badge {
        display: flex;
    }
    
    /* Adjust content area when panel is collapsed or hidden */
    .ds-project-nav.panel-collapsed ~ .ds-project-content,
    .ds-project-nav.panel-hidden ~ .ds-project-content {
        margin-left: 0;
    }
}


/* ========== pages/projects-economy-subnav.css ========== */
/**
 * PROJECTS ECONOMY - SECTION SUBNAV
 * ===================================
 * Context-aware navigation for Economy section ONLY
 * Uses namespaced classes to avoid affecting other layouts
 * 
 * Dependencies: design-tokens.css, core-consolidated.css
 * Used by: Project economy tab
 */

/* ========================================
   CRITICAL FIX: Override parent wrapper constraints
   The HTMX tab loader adds .ds-section-content class directly
   to #project-economy element (NOT as a descendant) which has
   max-width/margin:auto causing the gap
   ======================================== */

/* Target #project-economy when IT HAS the ds-section-content class */
#project-economy.ds-section-content,
.tab-content#project-economy.ds-section-content,
div#project-economy.ds-section-content {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* Add left padding when main nav is in sidebar mode (left side) */
.layout-sidebar #project-economy,
.ds-project-container.layout-sidebar #project-economy {
    padding-left: var(--space-4) !important;
}

/* Also target if it's a descendant (fallback) */
#project-economy .ds-section-content,
.ds-project-container #project-economy .ds-section-content {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ========================================
   ECONOMY LAYOUT CONTAINER (Namespaced)
   ======================================== */

/* Base economy layout - flex container */
.economy-layout {
    display: flex;
    width: 100%;
    max-width: none;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

/* SIDEBAR MODE: Nav on left, content on right */
.economy-layout:has(.ds-section-subnav--sidebar) {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-4);
}

/* SEGMENTED MODE: Tabs on top, content below */
.economy-layout:has(.ds-section-subnav--segmented) {
    flex-direction: column;
    gap: 0;
}

/* Fallback classes for browsers without :has() */
.economy-layout.layout-sidebar {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-4);
}

.economy-layout.layout-segmented {
    flex-direction: column;
    gap: 0;
}

/* Economy tab container - remove any inherited padding */
#project-economy {
    padding: 0;
    margin: 0;
}

/* ========================================
   ECONOMY TAB STACK (Content Area)
   ======================================== */

/* The flex-growing content area */
.economy-tab-stack {
    flex: 1 1 0%;
    min-width: 0;
    max-width: none;
    width: auto;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

/* ========================================
   BASE ECONOMY TAB BUTTON STYLES (Minimal Reset)
   Only applies basic properties - variants add enhanced styling
   ======================================== */

.economy-tab-btn,
button.economy-tab-btn {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    cursor: pointer;
    margin: 0;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
}

/* ========================================
   FALLBACK PILL STYLES - Only when NO variant class is present
   Uses :not() to avoid overriding sidebar/segmented variants
   ======================================== */

#economySubnav:not(.ds-section-subnav--sidebar):not(.ds-section-subnav--segmented) .economy-tab-btn {
    padding: var(--space-3) var(--space-5) !important;
    background: var(--color-surface) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 999px !important;
    outline: none !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04) !important;
    flex-shrink: 0 !important;
    position: relative !important;
    overflow: hidden !important;
}

#economySubnav:not(.ds-section-subnav--sidebar):not(.ds-section-subnav--segmented) .economy-tab-btn:hover {
    color: var(--color-primary) !important;
    background: var(--color-surface) !important;
    border-color: var(--color-primary) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15), 0 2px 4px rgba(0, 0, 0, 0.06) !important;
}

#economySubnav:not(.ds-section-subnav--sidebar):not(.ds-section-subnav--segmented) .economy-tab-btn.active {
    color: var(--color-surface) !important;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%) !important;
    border-color: transparent !important;
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.35), 0 2px 6px rgba(59, 130, 246, 0.2) !important;
    transform: translateY(-1px) !important;
    font-weight: var(--font-weight-bold) !important;
}

#economySubnav:not(.ds-section-subnav--sidebar):not(.ds-section-subnav--segmented) .economy-tab-btn.active .economy-tab-icon {
    color: var(--color-surface) !important;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.1)) !important;
}

/* ========================================
   ECONOMY TAB ICON STYLES
   ======================================== */

.economy-tab-icon {
    font-size: 1rem;
    width: 1.25rem;
    text-align: center;
    flex-shrink: 0;
    transition: var(--transition-all);
}

.economy-tab-btn:hover .economy-tab-icon {
    transform: scale(1.1);
}

.economy-tab-btn.active .economy-tab-icon {
    transform: scale(1.05);
}

/* ========================================
   CRITICAL: Override touch-target border for SIDEBAR only
   The touch-target utility adds border: 1px solid to buttons.
   Sidebar buttons should be borderless, but segmented buttons
   need their border styling for the pill/chip effect.
   ======================================== */

#economySubnav.ds-section-subnav--sidebar .economy-tab-btn.touch-target {
    border: none !important;
    border-color: transparent !important;
    border-width: 0 !important;
    border-style: none !important;
}

/* ========================================
   SIDEBAR NAVIGATION VARIANT
   ======================================== */

#economySubnav.ds-section-subnav--sidebar {
    width: 220px !important;
    min-width: 220px !important;
    max-width: 220px !important;
    flex: 0 0 220px !important;
    flex-direction: column !important;
    display: flex !important;
    background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-gray-50) 100%) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--border-radius-lg) !important;
    padding: var(--space-4) var(--space-3) !important;
    position: sticky !important;
    top: var(--space-4) !important;
    align-self: flex-start !important;
    max-height: calc(100vh - 200px) !important;
    overflow-y: auto !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06), 0 1px 4px rgba(0, 0, 0, 0.04) !important;
}

#economySubnav.ds-section-subnav--sidebar .economy-tab-btn {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4) !important;
    text-decoration: none;
    color: var(--color-text-secondary);
    font-size: 0.8125rem;
    font-weight: var(--font-weight-medium);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    border: none !important;
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;
    border-left: 3px solid transparent !important;
    outline: none !important;
    box-shadow: none !important;
    margin: var(--space-1) 0;
    border-radius: var(--border-radius) !important;
    text-align: left;
    width: 100%;
    background: transparent !important;
    cursor: pointer;
    position: relative;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

#economySubnav.ds-section-subnav--sidebar .economy-tab-btn:hover {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(59, 130, 246, 0.04) 100%) !important;
    color: var(--color-primary);
    transform: translateX(4px);
    border-left-color: rgba(59, 130, 246, 0.3) !important;
}

#economySubnav.ds-section-subnav--sidebar .economy-tab-btn:hover .economy-tab-icon {
    color: var(--color-primary);
    transform: scale(1.1);
}

#economySubnav.ds-section-subnav--sidebar .economy-tab-btn.active {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.12) 0%, rgba(59, 130, 246, 0.06) 100%) !important;
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
    border-left-color: var(--color-primary) !important;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
}

#economySubnav.ds-section-subnav--sidebar .economy-tab-btn.active .economy-tab-icon {
    color: var(--color-primary);
    filter: drop-shadow(0 1px 2px rgba(59, 130, 246, 0.2));
}

#economySubnav.ds-section-subnav--sidebar .economy-tab-btn:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: -2px;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2) !important;
}

/* ========================================
   SEGMENTED CONTROL VARIANT (Tabs on Top)
   Modern pill/chip style with polished visual design
   ======================================== */

#economySubnav.ds-section-subnav--segmented {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: var(--space-3) !important;
    padding: var(--space-4) var(--space-5) !important;
    border-bottom: none !important;
    border-radius: var(--border-radius) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: var(--z-sticky-local) !important;
    margin-bottom: var(--space-4) !important;
    width: 100% !important;
    background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-background) 100%) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

#economySubnav.ds-section-subnav--segmented .economy-tab-btn,
#economySubnav.ds-section-subnav--segmented .economy-tab-btn.touch-target {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5) !important;
    background: var(--color-surface) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 999px !important;
    outline: none !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04) !important;
    font-weight: var(--font-weight-semibold);
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    position: relative;
    overflow: hidden;
}

#economySubnav.ds-section-subnav--segmented .economy-tab-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.1) 100%);
    opacity: 0;
    transition: opacity 0.2s ease;
}

#economySubnav.ds-section-subnav--segmented .economy-tab-btn:hover,
#economySubnav.ds-section-subnav--segmented .economy-tab-btn.touch-target:hover {
    color: var(--color-primary);
    background: var(--color-surface) !important;
    border-color: var(--color-primary) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15), 0 2px 4px rgba(0, 0, 0, 0.06) !important;
}

#economySubnav.ds-section-subnav--segmented .economy-tab-btn:hover::before {
    opacity: 1;
}

#economySubnav.ds-section-subnav--segmented .economy-tab-btn:hover .economy-tab-icon {
    color: var(--color-primary);
}

#economySubnav.ds-section-subnav--segmented .economy-tab-btn.active,
#economySubnav.ds-section-subnav--segmented .economy-tab-btn.touch-target.active {
    color: var(--color-surface) !important;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%) !important;
    border-color: transparent !important;
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.35), 0 2px 6px rgba(59, 130, 246, 0.2) !important;
    transform: translateY(-1px);
}

#economySubnav.ds-section-subnav--segmented .economy-tab-btn.active .economy-tab-icon {
    color: var(--color-surface) !important;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.1));
}

#economySubnav.ds-section-subnav--segmented .economy-tab-btn:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.25) !important;
}

/* ========================================
   ULTRA-HIGH SPECIFICITY: GUARANTEED PILL STYLES (SEGMENTED ONLY)
   Uses [data-section="economy"] combined with :not(.ds-section-subnav--sidebar)
   to ensure styles apply only in segmented/top-tab mode, not sidebar mode.
   ======================================== */

/* Target nav inside economy section with multiple selectors for max specificity - SEGMENTED ONLY */
[data-section="economy"] nav#economySubnav:not(.ds-section-subnav--sidebar) .economy-tab-btn,
[data-section="economy"] nav#economySubnav:not(.ds-section-subnav--sidebar) button.economy-tab-btn,
.economy-layout[data-section="economy"] #economySubnav:not(.ds-section-subnav--sidebar) .economy-tab-btn,
div.economy-layout[data-section="economy"] nav#economySubnav:not(.ds-section-subnav--sidebar) .economy-tab-btn {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    padding: var(--space-3) var(--space-5) !important;
    background: var(--color-surface) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 999px !important;
    outline: none !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04) !important;
    font-weight: var(--font-weight-semibold) !important;
    font-size: 0.8125rem !important;
    color: var(--color-text-secondary) !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    gap: var(--space-2) !important;
}

/* Hover state with ultra-high specificity - SEGMENTED ONLY */
[data-section="economy"] nav#economySubnav:not(.ds-section-subnav--sidebar) .economy-tab-btn:hover,
[data-section="economy"] nav#economySubnav:not(.ds-section-subnav--sidebar) button.economy-tab-btn:hover,
.economy-layout[data-section="economy"] #economySubnav:not(.ds-section-subnav--sidebar) .economy-tab-btn:hover,
div.economy-layout[data-section="economy"] nav#economySubnav:not(.ds-section-subnav--sidebar) .economy-tab-btn:hover {
    color: var(--color-primary) !important;
    background: var(--color-surface) !important;
    border-color: var(--color-primary) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15), 0 2px 4px rgba(0, 0, 0, 0.06) !important;
}

/* Active state with ultra-high specificity - gradient blue pill - SEGMENTED ONLY */
[data-section="economy"] nav#economySubnav:not(.ds-section-subnav--sidebar) .economy-tab-btn.active,
[data-section="economy"] nav#economySubnav:not(.ds-section-subnav--sidebar) button.economy-tab-btn.active,
.economy-layout[data-section="economy"] #economySubnav:not(.ds-section-subnav--sidebar) .economy-tab-btn.active,
div.economy-layout[data-section="economy"] nav#economySubnav:not(.ds-section-subnav--sidebar) .economy-tab-btn.active {
    color: var(--color-surface) !important;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%) !important;
    border-color: transparent !important;
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.35), 0 2px 6px rgba(59, 130, 246, 0.2) !important;
    transform: translateY(-1px) !important;
    font-weight: var(--font-weight-bold) !important;
}

/* Active icon with ultra-high specificity - SEGMENTED ONLY */
[data-section="economy"] nav#economySubnav:not(.ds-section-subnav--sidebar) .economy-tab-btn.active .economy-tab-icon,
.economy-layout[data-section="economy"] #economySubnav:not(.ds-section-subnav--sidebar) .economy-tab-btn.active .economy-tab-icon {
    color: var(--color-surface) !important;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.1)) !important;
}

/* Nav container styling with ultra-high specificity - SEGMENTED ONLY */
[data-section="economy"] nav#economySubnav:not(.ds-section-subnav--sidebar),
.economy-layout[data-section="economy"] #economySubnav:not(.ds-section-subnav--sidebar),
div.economy-layout[data-section="economy"] nav#economySubnav:not(.ds-section-subnav--sidebar) {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: var(--space-3) !important;
    padding: var(--space-4) var(--space-5) !important;
    border-bottom: none !important;
    border-radius: var(--border-radius) !important;
    width: 100% !important;
    background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-background) 100%) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

/* ========================================
   MOBILE VARIANT (<768px)
   ======================================== */

@media (max-width: 767px) {
    /* Economy layout container - force column on mobile */
    .economy-layout,
    .economy-layout.layout-sidebar,
    .economy-layout.layout-segmented {
        display: flex !important;
        flex-direction: column !important;
        gap: 0;
        width: 100%;
        max-width: 100%;
        padding: 0;
        margin: 0;
    }
    
    /* Economy sub-navigation tabs - pill-style horizontal scrollable on mobile */
    #economySubnav.ds-section-subnav--sidebar,
    #economySubnav.ds-section-subnav--segmented {
        width: 100% !important;
        min-width: auto !important;
        max-width: none !important;
        flex: none !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: var(--space-2) !important;
        padding: var(--space-3) var(--space-4) !important;
        border-right: none !important;
        border-bottom: 1px solid var(--color-border) !important;
        border-radius: 0 !important;
        position: sticky !important;
        top: 0 !important;
        z-index: var(--z-sticky-local) !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        -ms-overflow-style: none;
        max-height: none !important;
        align-self: auto !important;
        background: var(--color-surface) !important;
        margin-bottom: 0 !important;
    }
    
    #economySubnav.ds-section-subnav--sidebar::-webkit-scrollbar,
    #economySubnav.ds-section-subnav--segmented::-webkit-scrollbar {
        display: none;
    }
    
    /* Economy sub-tab buttons - compact pill style on mobile */
    #economySubnav.ds-section-subnav--sidebar .economy-tab-btn,
    #economySubnav.ds-section-subnav--segmented .economy-tab-btn {
        width: auto !important;
        flex: 0 0 auto !important;
        min-width: fit-content !important;
        padding: var(--space-2) var(--space-3) !important;
        background: var(--color-background) !important;
        border: 1px solid var(--color-border) !important;
        border-radius: var(--border-radius-full) !important;
        font-weight: var(--font-weight-semibold) !important;
        font-size: var(--font-size-xs) !important;
        color: var(--color-text-secondary) !important;
        cursor: pointer !important;
        transition: var(--transition-all) !important;
        white-space: nowrap !important;
        min-height: var(--space-8) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: var(--space-2) !important;
        scroll-snap-align: start;
        text-transform: uppercase !important;
        letter-spacing: var(--letter-spacing-wide) !important;
    }
    
    /* Icon styling on mobile - smaller icons */
    #economySubnav.ds-section-subnav--sidebar .economy-tab-icon,
    #economySubnav.ds-section-subnav--segmented .economy-tab-icon {
        font-size: 0.875rem !important;
        width: 1rem !important;
    }
    
    #economySubnav.ds-section-subnav--sidebar .economy-tab-btn:hover,
    #economySubnav.ds-section-subnav--segmented .economy-tab-btn:hover {
        color: var(--color-primary) !important;
        border-color: var(--color-primary) !important;
        background: var(--color-info-bg) !important;
    }
    
    /* Active state - filled pill */
    #economySubnav.ds-section-subnav--sidebar .economy-tab-btn.active,
    #economySubnav.ds-section-subnav--segmented .economy-tab-btn.active {
        color: var(--color-text-inverse) !important;
        background: var(--color-primary) !important;
        border-color: var(--color-primary) !important;
        box-shadow: var(--shadow-md) !important;
    }
    
    /* Economy content area - full width on mobile */
    .economy-tab-stack {
        flex: none !important;
        width: 100% !important;
        min-width: 0;
        padding: 0;
    }
    
    /* Economy tab content panels - hide inactive, show active */
    .economy-tab-content {
        display: none !important;
        width: 100%;
        padding: 0;
    }
    
    .economy-tab-content.active {
        display: block !important;
    }
    
    /* Economy table sections on mobile */
    .economy-table-section {
        border-radius: 0;
        border-left: none;
        border-right: none;
        margin: 0 0 var(--space-4) 0;
    }
    
    /* Table section title on mobile */
    .economy-table-section .table-section-title {
        padding: var(--space-3) var(--space-4);
        font-size: var(--font-size-sm);
    }
    
    /* Economy cards grid on mobile */
    .economy-cards-grid {
        padding: var(--space-3) var(--space-4);
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
    }
}

/* ========================================
   UNIVERSAL PILL BORDER-RADIUS FIX - HIGHEST PRIORITY
   Only corrects border-radius to 999px for all variants
   Preserves all other variant-specific styles (background, border, padding)
   ======================================== */

#economySubnav .economy-tab-btn,
#economySubnav.ds-section-subnav--sidebar .economy-tab-btn,
#economySubnav.ds-section-subnav--segmented .economy-tab-btn,
[data-section="economy"] .economy-tab-btn {
    border-radius: 999px !important;
}

/* ========================================
   MOBILE ACTIVE STATE FIX - HIGHEST PRIORITY
   Ensures filled primary background on active tab
   ======================================== */
@media (max-width: 768px) {
    #economySubnav .economy-tab-btn.active,
    #economySubnav.ds-section-subnav--sidebar .economy-tab-btn.active,
    #economySubnav.ds-section-subnav--segmented .economy-tab-btn.active,
    .economy-layout .economy-tab-btn.active {
        background: var(--color-primary) !important;
        background-color: var(--color-primary) !important;
        color: var(--color-text-inverse, #ffffff) !important;
        border-color: var(--color-primary) !important;
    }
    
    #economySubnav .economy-tab-btn.active .economy-tab-icon,
    .economy-layout .economy-tab-btn.active .economy-tab-icon,
    #economySubnav .economy-tab-btn.active i {
        color: var(--color-text-inverse, #ffffff) !important;
    }
    
    #economySubnav .economy-tab-btn.active span {
        color: var(--color-text-inverse, #ffffff) !important;
    }
}


/* ========== pages/projects-economy-mobile.css ========== */
/* ==============================================
   PROJECT ECONOMY - MOBILE ENHANCEMENTS
   Native app-style bottom navigation and edge-to-edge cards
   ============================================== */

@media (max-width: 768px) {
    /* ========================================
       STICKY SCROLLABLE MENUS - SOLID BACKGROUND FIX
       Ensures content doesn't show through when scrolling
       ======================================== */
    .ds-project-tabs-container,
    .ds-project-tabs-mobile,
    .scroll-fade-container.scroll-x,
    .tab-header-with-action,
    .economy-tab-content .tab-header-with-action {
        background-color: var(--color-surface, #ffffff) !important;
        background: var(--color-surface, #ffffff) !important;
    }
    
    /* Ensure the project tabs container is opaque */
    .ds-project-tabs-container {
        background: var(--color-surface, #ffffff) !important;
        position: sticky !important;
        top: 0 !important;
        z-index: var(--z-sticky-local, 100) !important;
    }
    
    .ds-project-tabs-mobile.scroll-fade-container {
        background: var(--color-surface, #ffffff) !important;
    }
    
    /* ========================================
       BODY PADDING FOR BOTTOM NAV
       ======================================== */
    body:has(#project-economy) {
        padding-bottom: var(--height-bottom-nav) !important;
    }
    
    /* Fallback for browsers without :has() */
    .economy-layout {
        padding-bottom: var(--height-bottom-nav) !important;
    }
    
    /* ========================================
       ECONOMY SUB-NAV - FIXED BOTTOM BAR
       ======================================== */
    .economy-layout .ds-section-subnav--sidebar,
    .economy-layout .ds-section-subnav--segmented,
    #economySubnav {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        z-index: var(--z-modal) !important;
        background: var(--color-surface) !important;
        border-top: 1px solid var(--color-border) !important;
        border-bottom: none !important;
        border-right: none !important;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08) !important;
        padding: var(--space-2) var(--space-2) calc(var(--space-2) + env(safe-area-inset-bottom, 0)) !important;
        margin: 0 !important;
        width: 100% !important;
        min-width: unset !important;
        max-width: unset !important;
        height: auto !important;
        max-height: none !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        align-items: stretch !important;
        gap: var(--space-1) !important;
        border-radius: 0 !important;
    }
    
    .economy-layout .ds-section-subnav--sidebar::-webkit-scrollbar,
    .economy-layout .ds-section-subnav--segmented::-webkit-scrollbar,
    #economySubnav::-webkit-scrollbar {
        display: none !important;
    }
    
    /* ========================================
       ECONOMY TAB BUTTONS - Bottom Nav Style
       ======================================== */
    .economy-layout .economy-tab-btn,
    #economySubnav .economy-tab-btn {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: var(--space-1) !important;
        padding: var(--space-2) var(--space-2-5) !important;
        min-height: var(--space-14) !important;
        min-width: var(--space-16) !important;
        font-size: var(--font-size-xs) !important;
        font-weight: var(--font-weight-semibold) !important;
        color: var(--color-text-secondary) !important;
        text-decoration: none !important;
        background: transparent !important;
        border: none !important;
        border-radius: var(--border-radius) !important;
        white-space: nowrap !important;
        transition: var(--transition-base) !important;
        position: relative !important;
        text-align: center !important;
        flex: 0 0 auto !important;
        cursor: pointer !important;
        text-transform: uppercase !important;
        letter-spacing: var(--letter-spacing-wide) !important;
    }
    
    .economy-layout .economy-tab-btn::before,
    #economySubnav .economy-tab-btn::before {
        content: '' !important;
        font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free' !important;
        font-weight: 900 !important;
        font-size: var(--font-size-lg) !important;
        display: block !important;
        margin-bottom: var(--space-0-5) !important;
    }
    
    /* Icons for each tab */
    .economy-layout .economy-tab-btn[data-economy-tab="overview"]::before,
    #economySubnav .economy-tab-btn[data-economy-tab="overview"]::before {
        content: '\f200' !important; /* fa-chart-pie */
    }
    
    .economy-layout .economy-tab-btn[data-economy-tab="work-logs"]::before,
    #economySubnav .economy-tab-btn[data-economy-tab="work-logs"]::before {
        content: '\f017' !important; /* fa-clock */
    }
    
    .economy-layout .economy-tab-btn[data-economy-tab="stock-logs"]::before,
    #economySubnav .economy-tab-btn[data-economy-tab="stock-logs"]::before {
        content: '\f49e' !important; /* fa-box-open */
    }
    
    .economy-layout .economy-tab-btn[data-economy-tab="price-lists-logs"]::before,
    #economySubnav .economy-tab-btn[data-economy-tab="price-lists-logs"]::before {
        content: '\f0cb' !important; /* fa-list-ol */
    }
    
    .economy-layout .economy-tab-btn[data-economy-tab="other-items-logs"]::before,
    #economySubnav .economy-tab-btn[data-economy-tab="other-items-logs"]::before {
        content: '\f067' !important; /* fa-plus */
    }
    
    .economy-layout .economy-tab-btn[data-economy-tab="transport"]::before,
    #economySubnav .economy-tab-btn[data-economy-tab="transport"]::before {
        content: '\f0d1' !important; /* fa-truck */
    }
    
    /* Hover state */
    .economy-layout .economy-tab-btn:hover,
    #economySubnav .economy-tab-btn:hover {
        color: var(--color-primary) !important;
        background: var(--color-info-bg) !important;
    }
    
    /* Active state - filled background */
    .economy-layout .economy-tab-btn.active,
    #economySubnav .economy-tab-btn.active {
        color: var(--color-text-inverse, #ffffff) !important;
        background: var(--color-primary) !important;
        border-radius: var(--border-radius) !important;
    }
    
    .economy-layout .economy-tab-btn.active::after,
    #economySubnav .economy-tab-btn.active::after {
        content: '' !important;
        position: absolute !important;
        top: 0 !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: var(--space-6) !important;
        height: 3px !important;
        background: var(--color-surface, #ffffff) !important;
        border-radius: 0 0 var(--border-radius-sm) var(--border-radius-sm) !important;
    }
    
    /* ========================================
       ECONOMY CONTENT AREA
       ======================================== */
    .economy-tab-stack {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    
    /* ========================================
       ECONOMY SUMMARY CARDS - Horizontal Scroll
       Compact, single-row, scrollable on mobile
       ======================================== */
    #overview .economy-summary-grid {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: var(--space-2) !important;
        padding: var(--space-3) !important;
        margin: 0 calc(var(--space-3) * -1) var(--space-3) calc(var(--space-3) * -1) !important;
        width: calc(100% + var(--space-6)) !important;
        background: var(--color-surface-secondary) !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        scroll-snap-type: x mandatory !important;
    }
    
    #overview .economy-summary-grid::-webkit-scrollbar {
        display: none !important;
    }
    
    #overview .summary-card {
        flex: 0 0 auto !important;
        min-width: 90px !important;
        max-width: 100px !important;
        background: var(--color-surface) !important;
        border-radius: var(--border-radius-lg) !important;
        padding: var(--space-2-5) var(--space-2) !important;
        box-shadow: var(--shadow-xs) !important;
        border: 1px solid transparent !important;
        text-align: center !important;
        scroll-snap-align: start !important;
        transition: var(--transition-all) !important;
        cursor: pointer !important;
    }
    
    #overview .summary-card--clickable:hover,
    #overview .summary-card--clickable:active {
        border-color: var(--color-primary) !important;
        background: var(--color-info-bg) !important;
        transform: translateY(-1px) !important;
    }
    
    #overview .summary-card--clickable:active {
        transform: scale(0.97) !important;
    }
    
    #overview .summary-card .summary-card-icon {
        display: block !important;
        font-size: var(--font-size-lg) !important;
        color: var(--color-primary) !important;
        margin-bottom: var(--space-1) !important;
    }
    
    #overview .summary-card .summary-label {
        font-size: var(--font-size-xs) !important;
        font-weight: var(--font-weight-semibold) !important;
        color: var(--color-text-secondary) !important;
        text-transform: uppercase !important;
        letter-spacing: var(--letter-spacing-wide) !important;
        margin-bottom: var(--space-1) !important;
        line-height: 1.2 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0 !important;
    }
    
    #overview .summary-card .summary-label i.fa-question-circle {
        display: none !important;
    }
    
    #overview .summary-card .summary-value {
        font-size: var(--font-size-lg) !important;
        font-weight: var(--font-weight-bold) !important;
        color: var(--color-text-primary) !important;
        line-height: 1.2 !important;
    }
    
    #overview .summary-card .summary-value .count {
        display: block !important;
    }
    
    #overview .summary-card .summary-unit {
        font-size: var(--font-size-xs) !important;
        font-weight: var(--font-weight-medium) !important;
        color: var(--color-text-tertiary) !important;
        display: block !important;
        margin-top: var(--space-0-5) !important;
    }
    
    /* ========================================
       ECONOMY CARDS GRID - Edge to Edge
       ======================================== */
    .economy-cards-grid,
    #overviewMobile {
        margin: 0 calc(var(--space-3) * -1) !important;
        padding: var(--space-3) !important;
        width: calc(100% + var(--space-6)) !important;
        background: var(--color-surface-secondary) !important;
    }
    
    /* ========================================
       ECONOMY ENTRY CARDS - Edge to Edge
       ======================================== */
    .economy-card-compact {
        margin: 0 0 var(--space-3) 0 !important;
        border-radius: var(--border-radius-lg) !important;
        padding: var(--space-4) !important;
        border: none !important;
        box-shadow: var(--shadow-xs) !important;
    }
    
    .economy-card-compact:last-child {
        margin-bottom: 0 !important;
    }

    /* Larger touch targets for expandable details */
    .eco-details-btn {
        min-height: 44px !important;
        padding: var(--space-2-5) var(--space-3) !important;
        font-size: var(--font-size-sm) !important;
    }
    
    /* ========================================
       ALL TAB HEADERS - Stacked Layout on Mobile
       ======================================== */
    .tab-header-with-action {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: var(--space-3) !important;
        padding: var(--space-3) !important;
        margin: 0 calc(var(--space-3) * -1) var(--space-3) calc(var(--space-3) * -1) !important;
        width: calc(100% + var(--space-6)) !important;
        background: var(--color-surface) !important;
        border-bottom: 1px solid var(--color-border) !important;
    }
    
    .tab-header-with-action h3,
    .tab-header-with-action .tab-title {
        font-size: var(--font-size-lg) !important;
        font-weight: var(--font-weight-semibold) !important;
        margin: 0 !important;
    }
    
    .tab-header-with-action .ds-btn {
        width: 100% !important;
        min-height: var(--space-12) !important;
        padding: var(--space-2-5) var(--space-4) !important;
        border-radius: var(--border-radius) !important;
        font-weight: var(--font-weight-semibold) !important;
        font-size: var(--font-size-sm) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: var(--space-2) !important;
    }
    
    /* ========================================
       WORK LOGS TAB - Summary Cards
       Horizontal scroll like Overview
       ======================================== */
    #work-logs .economy-summary-grid {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: var(--space-3) !important;
        padding: var(--space-3) !important;
        margin: 0 calc(var(--space-3) * -1) var(--space-3) calc(var(--space-3) * -1) !important;
        width: calc(100% + var(--space-6)) !important;
        background: var(--color-surface-secondary) !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }
    
    #work-logs .economy-summary-grid::-webkit-scrollbar {
        display: none !important;
    }
    
    #work-logs .summary-card {
        flex: 1 1 0 !important;
        min-width: 130px !important;
        background: var(--color-surface) !important;
        border-radius: var(--border-radius-lg) !important;
        padding: var(--space-4) var(--space-3) !important;
        box-shadow: var(--shadow-xs) !important;
        text-align: center !important;
        border: none !important;
    }
    
    #work-logs .summary-card .summary-label {
        font-size: var(--font-size-xs) !important;
        font-weight: var(--font-weight-semibold) !important;
        color: var(--color-text-secondary) !important;
        text-transform: uppercase !important;
        letter-spacing: 0.05em !important;
        margin-bottom: var(--space-1-5) !important;
    }
    
    #work-logs .summary-card .summary-value {
        font-size: var(--font-size-2xl) !important;
        font-weight: var(--font-weight-bold) !important;
        color: var(--color-text-primary) !important;
    }
    
    /* Mobile card view for work logs */
    .mobile-card-view--project {
        margin: 0 calc(var(--space-3) * -1) !important;
        padding: var(--space-3) !important;
        width: calc(100% + var(--space-6)) !important;
        background: var(--color-surface-secondary) !important;
    }
    
    .mobile-card-view--project .ds-mobile-card {
        margin: 0 0 var(--space-3) 0 !important;
        border-radius: var(--border-radius-lg) !important;
        padding: var(--space-4) !important;
        border: none !important;
        box-shadow: var(--shadow-xs) !important;
        background: var(--color-surface) !important;
    }
    
    /* ========================================
       STOCK LOGS, PRICE LISTS, OTHER ITEMS
       Edge-to-edge layouts with proper touch targets
       ======================================== */
    #stock-logs .economy-table-section,
    #price-lists-logs .economy-table-section,
    #other-items-logs .economy-table-section,
    #transport .economy-table-section {
        margin: 0 calc(var(--space-3) * -1) !important;
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
    }
    
    #stock-logs .mobile-card-view--project,
    #price-lists-logs .mobile-card-view--project,
    #other-items-logs .mobile-card-view--project,
    #transport .mobile-card-view--project {
        margin: 0 !important;
        padding: var(--space-3) !important;
        width: 100% !important;
        background: var(--color-surface-secondary) !important;
    }
    
    /* Mobile Cards - Consistent Design */
    #stock-logs .ds-mobile-card,
    #price-lists-logs .ds-mobile-card,
    #other-items-logs .ds-mobile-card,
    #transport .ds-mobile-card {
        background: var(--color-surface) !important;
        border-radius: var(--border-radius-lg) !important;
        padding: var(--space-4) !important;
        margin-bottom: var(--space-3) !important;
        box-shadow: var(--shadow-xs) !important;
        border: none !important;
    }
    
    #stock-logs .ds-mobile-card:last-child,
    #price-lists-logs .ds-mobile-card:last-child,
    #other-items-logs .ds-mobile-card:last-child,
    #transport .ds-mobile-card:last-child {
        margin-bottom: 0 !important;
    }
    
    /* Card Header */
    .ds-mobile-card__header {
        margin-bottom: var(--space-3) !important;
    }
    
    .ds-mobile-card__title {
        font-size: var(--font-size-base) !important;
        font-weight: var(--font-weight-semibold) !important;
        color: var(--color-text-primary) !important;
        margin-bottom: var(--space-1) !important;
    }
    
    .ds-mobile-card__subtitle {
        font-size: var(--font-size-sm) !important;
        color: var(--color-text-secondary) !important;
    }
    
    /* Card Info Rows */
    .ds-mobile-card__info {
        display: flex !important;
        flex-direction: column !important;
        gap: var(--space-2) !important;
    }
    
    .ds-mobile-card__info-row {
        display: flex !important;
        align-items: center !important;
        gap: var(--space-2) !important;
        font-size: var(--font-size-sm) !important;
        color: var(--color-text-primary) !important;
    }
    
    .ds-mobile-card__icon {
        width: var(--space-4) !important;
        color: var(--color-text-secondary) !important;
        flex-shrink: 0 !important;
    }
    
    /* Card Actions - Full Width Touch Targets */
    .ds-mobile-card__actions {
        display: flex !important;
        gap: var(--space-2) !important;
        margin-top: var(--space-3) !important;
        padding-top: var(--space-3) !important;
        border-top: 1px solid var(--color-border) !important;
    }
    
    .ds-mobile-card__actions .ds-btn {
        flex: 1 !important;
        min-height: 44px !important;
        border-radius: var(--border-radius) !important;
        font-size: var(--font-size-sm) !important;
        font-weight: var(--font-weight-medium) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: var(--space-1-5) !important;
    }
    
    /* Stock Movement Actions */
    .stock-movement-actions {
        display: flex !important;
        gap: var(--space-2) !important;
        margin-top: var(--space-2) !important;
        margin-bottom: var(--space-3) !important;
        padding: 0 !important;
    }
    
    .stock-movement-actions .ds-btn {
        min-height: 44px !important;
        border-radius: var(--border-radius) !important;
        font-weight: var(--font-weight-medium) !important;
    }
    
    /* Empty States */
    .ds-empty-state {
        text-align: center !important;
        padding: var(--space-8) var(--space-4) !important;
        color: var(--color-text-secondary) !important;
    }
    
    .ds-empty-state p {
        font-size: var(--font-size-base) !important;
        margin: 0 !important;
    }
    
    /* ========================================
       TABLE SECTIONS - Edge to Edge
       ======================================== */
    .economy-table-section {
        margin: 0 calc(var(--space-3) * -1) !important;
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
    }
    
    .economy-table-section .table-section-title {
        padding: var(--space-3) var(--space-4) !important;
        font-size: var(--font-size-base) !important;
        background: var(--color-surface) !important;
        border-bottom: 1px solid var(--color-border) !important;
    }
    
    /* ========================================
       FILTER BUTTON - Full Width Touch Target
       ======================================== */
    #mobileFilterToggle,
    #workLogsMobileFilterToggle {
        margin: var(--space-3) !important;
        margin-left: calc(var(--space-3) * -1) !important;
        margin-right: calc(var(--space-3) * -1) !important;
        width: calc(100% + var(--space-6)) !important;
        border-radius: 0 !important;
        min-height: var(--space-12) !important;
    }
    
    /* ========================================
       ADD BUTTON - Full Width Touch Target
       ======================================== */
    .tab-header-with-action .ds-btn--primary {
        width: 100% !important;
        min-height: var(--space-12) !important;
        border-radius: var(--border-radius) !important;
        font-size: var(--font-size-base) !important;
    }
    
    /* ========================================
       MOBILE CARDS - Larger Touch Targets
       ======================================== */
    .ds-mobile-card {
        border-radius: var(--border-radius-lg) !important;
        padding: var(--space-4) !important;
        background: var(--color-surface) !important;
        box-shadow: var(--shadow-xs) !important;
        margin-bottom: var(--space-3) !important;
    }
    
    .ds-mobile-card-actions {
        display: flex !important;
        gap: var(--space-2) !important;
        margin-top: var(--space-3) !important;
        padding-top: var(--space-3) !important;
        border-top: 1px solid var(--color-border) !important;
    }
    
    .ds-mobile-card-actions .ds-btn {
        min-height: 44px !important;
        flex: 1 !important;
        border-radius: var(--border-radius) !important;
    }
}

/* ========================================
   TABLET ADJUSTMENTS (769px - 1024px)
   Keep horizontal layout but optimize spacing
   ======================================== */
@media (min-width: 769px) {
    .economy-layout .ds-section-subnav--sidebar,
    .economy-layout .ds-section-subnav--segmented,
    #economySubnav {
        position: sticky !important;
        bottom: auto !important;
        top: 0 !important;
    }
}


/* ========== pages/projects-forms.css ========== */
/* ========================================
   ECONOMY TAB COMPONENTS
   ======================================== */

.economy-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-5);
    margin-bottom: var(--space-8);
}

.summary-card {
    background: var(--color-surface);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--border-radius-lg);
    padding: var(--space-6);
    text-align: center;
    box-shadow: var(--shadow-xs);
    transition: var(--transition-shadow);
}

.summary-card:hover {
    box-shadow: var(--shadow-sm);
}

.summary-label {
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    margin-bottom: var(--space-3);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
}

.summary-label i {
    font-size: var(--font-size-xs);
    opacity: 0.6;
}

.summary-value {
    color: var(--color-text-primary);
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
}

.summary-unit {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    margin-left: var(--space-1);
}

/* ========================================
   ECONOMY TABLE
   ======================================== */

.time-tracking-section {
    background: var(--color-surface);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-xs);
}

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

.economy-table th {
    background: var(--color-surface-secondary);
    padding: var(--space-4) var(--space-5);
    text-align: left;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    border-bottom: var(--border-width) solid var(--color-border);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
}

.economy-table th i {
    margin-left: var(--space-1);
    font-size: var(--font-size-xs);
    opacity: 0.6;
}

.economy-table td {
    padding: var(--space-4) var(--space-5);
    border-bottom: var(--border-width) solid var(--color-border-light);
    color: var(--color-text-primary);
}

.economy-table tbody tr {
    transition: var(--transition-colors);
}

.economy-table tbody tr:hover {
    background-color: var(--color-hover);
}

.type-badge {
    padding: var(--space-1-5) var(--space-3);
    border-radius: var(--border-radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    display: inline-block;
}

.type-badge.work {
    background: var(--color-success-bg);
    color: var(--color-success-dark);
    border: var(--border-width) solid var(--color-success-border);
}

.type-badge.trip {
    background: var(--color-info-bg);
    color: var(--color-info);
    border: var(--border-width) solid var(--color-info-border);
}

/* ========================================
   ECONOMY TAB CONTENT VISIBILITY
   (Button styles moved to projects-economy-subnav.css)
   ======================================== */

.economy-tabs {
    margin-bottom: var(--space-6);
}

.economy-tab-nav {
    display: flex;
    gap: var(--space-1);
    border-bottom: var(--border-width) solid var(--color-border);
    background: var(--color-surface);
    border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
    overflow-x: auto;
    padding: var(--space-2) var(--space-2) 0;
}

.economy-tab-content {
    display: none !important;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.economy-tab-content.active {
    display: block !important;
    width: 100%;
}



/* ========== pages/projects-navigation.css ========== */
/* ========================================
   PROJECT CONTAINER LAYOUT
   ======================================== */

.ds-project-container {
    display: block;
    background: var(--color-background);
    min-height: calc(100vh - 200px);
}

/* ========================================
   DESKTOP SIDEBAR NAVIGATION (≥1024px)
   ======================================== */

.ds-project-sidebar {
    width: var(--sidebar-project-width);
    background: var(--color-surface);
    border-right: var(--border-width) solid var(--color-border);
    flex-shrink: 0;
    position: sticky;
    top: 0;
    max-height: 100vh;
    min-height: calc(100vh - 100px);
    overflow-y: auto;
    padding-top: 0;
}

/* Default: Show horizontal tabs, hide sidebar */
.ds-project-sidebar {
    display: none;
}

.ds-project-tabs-container {
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--color-surface);
    background-color: var(--color-surface);
    border-bottom: var(--border-width) solid var(--color-border);
    margin-bottom: var(--space-4);
    padding-right: var(--space-4);
}

.ds-project-tabs-mobile {
    display: flex;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-7);
    overflow-x: auto;
    flex: 1;
}

/* Sidebar layout: Show sidebar, hide horizontal tabs */
.ds-project-container.layout-sidebar {
    display: flex;
    align-items: stretch;
    margin-top: var(--space-6);
}

.ds-project-container.layout-sidebar .ds-project-sidebar {
    display: block;
}

.ds-project-container.layout-sidebar .ds-project-tabs-container {
    display: none;
}

.ds-project-container.layout-sidebar .ds-project-tabs-mobile {
    display: none;
}

.ds-project-container.layout-sidebar .ds-project-content {
    flex: 1;
    min-width: 0;
    width: auto;
    max-width: none;
    padding-left: var(--space-6);
    padding-right: var(--space-4);
    padding-top: 0;
}

.ds-project-container.layout-sidebar .ds-project-sidebar__nav {
    padding-top: 0;
}

.ds-project-container.layout-sidebar .ds-project-tab {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
}

/* ========================================
   MOBILE RESPONSIVE LAYOUT (≤768px)
   ======================================== */
@media (max-width: 768px) {
    /* Force horizontal tabs layout (sidebar doesn't fit on small screens) */
    .ds-project-container,
    .ds-project-container.layout-sidebar {
        display: block !important;
        flex-direction: column !important;
    }
    
    /* HIDE desktop sidebar navigation completely on mobile */
    .ds-project-sidebar,
    .ds-project-container.layout-sidebar .ds-project-sidebar {
        display: none !important;
    }
    
    /* SHOW mobile tabs container with scrollable tabs */
    .ds-project-tabs-container,
    .ds-project-container.layout-sidebar .ds-project-tabs-container {
        display: block !important;
        position: sticky;
        top: 0;
        z-index: var(--z-sticky-local);
        background: var(--color-surface);
        border-bottom: var(--border-width) solid var(--color-border);
        padding: 0;
        margin-bottom: 0;
        width: 100%;
        overflow: visible;
    }
    
    /* Scrollable horizontal mobile tabs - MUST scroll horizontally */
    .ds-project-tabs-mobile,
    .ds-project-container.layout-sidebar .ds-project-tabs-mobile {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: scroll !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE/Edge */
        padding: var(--space-2) var(--space-3);
        gap: var(--space-2);
        width: 100%;
        max-width: 100vw;
    }
    
    /* Hide scrollbar for Chrome/Safari */
    .ds-project-tabs-mobile::-webkit-scrollbar {
        display: none;
    }
    
    /* Hide layout toggle on mobile (use horizontal only) */
    .ds-project-tabs-container .layout-toggle-icon {
        display: none !important;
    }
    
    /* Content takes full width with no padding */
    .ds-project-content,
    .ds-project-container.layout-sidebar .ds-project-content {
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-top: 0 !important;
        width: 100% !important;
        flex: none !important;
    }
    
    .ds-project-tab,
    .ds-project-container.layout-sidebar .ds-project-tab {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* Mobile tab button styles - MUST NOT shrink or wrap */
    .ds-project-tab-mobile {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: var(--space-1);
        white-space: nowrap !important;
        padding: var(--space-2) var(--space-3) !important;
        min-height: 44px !important;
        min-width: var(--space-14);
        font-size: var(--font-size-xs);
        color: var(--color-text-secondary);
        text-decoration: none;
        border-radius: var(--border-radius);
        transition: var(--transition-all);
        flex-shrink: 0 !important;
        flex-grow: 0 !important;
    }
    
    .ds-project-tab-mobile i {
        font-size: var(--font-size-base);
    }
    
    .ds-project-tab-mobile span {
        font-size: var(--font-size-xs);
        font-weight: var(--font-weight-medium);
    }
    
    .ds-project-tab-mobile:hover,
    .ds-project-tab-mobile:focus {
        background: var(--color-hover);
        color: var(--color-primary);
    }
    
    .ds-project-tab-mobile.active {
        background: var(--color-primary);
        color: var(--color-text-inverse) !important;
        font-weight: var(--font-weight-semibold);
    }
    
    .ds-project-tab-mobile.active i,
    .ds-project-tab-mobile.active span {
        color: var(--color-text-inverse) !important;
    }
}

.ds-project-sidebar__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-6);
    margin-bottom: var(--space-6);
    border-bottom: var(--border-width) solid var(--color-border);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.ds-project-sidebar__nav {
    display: flex;
    flex-direction: column;
    padding: var(--space-6) 0 var(--space-4) 0;
}

.ds-project-nav-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-6);
    text-decoration: none;
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    transition: var(--transition-all);
    position: relative;
    border-left: var(--border-width-4) solid transparent;
    margin: var(--space-1) 0;
    border-radius: var(--border-radius);
}

.ds-project-nav-item i {
    width: var(--space-5);
    text-align: center;
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    transition: var(--transition-colors);
}

.ds-project-nav-item span {
    flex: 1;
}

.ds-project-nav-item:hover {
    background-color: var(--color-hover);
    color: var(--color-primary);
}

.ds-project-nav-item:hover i {
    color: var(--color-primary);
}

.ds-project-nav-item.active {
    background-color: var(--color-info-bg-lighter, #eff6ff);
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
    border-left-color: var(--color-primary);
}

.ds-project-nav-item.active i {
    color: var(--color-primary);
}

.ds-project-nav-item:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: -2px;
}


/* ========== pages/projects-chat.css ========== */
/* =============================================================================
   Project Chat Styles

   Styles for the real-time team chat within projects.
   ============================================================================= */

/* Main Chat Container */
.chat-container {
    display: flex;
    height: calc(100vh - 220px);
    min-height: 400px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

/* Chat Sidebar - Participants */
.chat-sidebar {
    width: 280px;
    min-width: 280px;
    background: var(--color-surface-secondary);
    border-right: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
}

.chat-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
}

.chat-sidebar-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.chat-sidebar-title i {
    color: var(--color-primary);
}

/* Participants List */
.chat-participants-list {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-2);
}

.chat-participant {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    cursor: default;
    transition: background var(--transition-fast);
}

.chat-participant:hover {
    background: var(--color-surface);
}

.chat-participant-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--color-text-on-primary) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    flex-shrink: 0;
}

.chat-participant-info {
    flex: 1;
    min-width: 0;
}

.chat-participant-name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-participant-role {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

.chat-participant-status {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-text-tertiary);
    flex-shrink: 0;
}

.chat-participant-status.online {
    background: var(--color-success);
}

/* Main Chat Area */
.chat-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

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

.chat-header-info {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.chat-header-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0;
}

.chat-header-subtitle {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

/* Messages Area */
.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    background: var(--color-background);
}

.chat-messages-loading,
.chat-messages-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--color-text-secondary);
    text-align: center;
    padding: var(--space-8);
}

.chat-messages-empty i {
    font-size: 48px;
    margin-bottom: var(--space-4);
    opacity: 0.5;
}

/* Message Bubble */
.chat-message {
    display: flex;
    gap: var(--space-3);
    max-width: 85%;
}

.chat-message.own-message {
    flex-direction: row-reverse;
    align-self: flex-end;
}

.chat-message-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-primary-light);
    color: var(--color-text-on-primary) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    flex-shrink: 0;
}

.chat-message.own-message .chat-message-avatar {
    background: var(--color-primary);
}

.chat-message-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.chat-message-header {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
}

.chat-message.own-message .chat-message-header {
    flex-direction: row-reverse;
}

.chat-message-author {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.chat-message-time {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
}

.chat-message-bubble {
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    border-top-left-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    line-height: 1.5;
    word-wrap: break-word;
}

.chat-message.own-message .chat-message-bubble {
    background: var(--color-primary);
    color: var(--color-text-on-primary) !important;
    border-color: var(--color-primary);
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-sm);
}

.chat-message-edited {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    font-style: italic;
}

.chat-message.own-message .chat-message-edited {
    color: rgba(255, 255, 255, 0.7);
}

/* Message Actions (on hover) */
.chat-message-actions {
    display: none;
    gap: var(--space-1);
    margin-top: var(--space-1);
}

.chat-message:hover .chat-message-actions {
    display: flex;
}

.chat-message.own-message .chat-message-actions {
    justify-content: flex-end;
}

.chat-message-action-btn {
    padding: var(--space-1) var(--space-2);
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    background: none;
    border: none;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}

.chat-message-action-btn:hover {
    background: var(--color-surface-secondary);
    color: var(--color-text-primary);
}

.chat-message-action-btn.delete:hover {
    color: var(--color-danger);
}

/* Date Separator */
.chat-date-separator {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4) 0;
}

.chat-date-separator span {
    padding: var(--space-1) var(--space-3);
    background: var(--color-surface-secondary);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

/* System Message */
.chat-system-message {
    text-align: center;
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    font-style: italic;
}

/* Input Area */
.chat-input-area {
    padding: var(--space-4);
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
}

.chat-input-container {
    display: flex;
    align-items: flex-end;
    gap: var(--space-3);
    background: var(--color-surface-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-3);
    transition: border-color var(--transition-fast);
}

.chat-input-container:focus-within {
    border-color: var(--color-primary);
}

.chat-input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    resize: none;
    min-height: 24px;
    max-height: 120px;
    outline: none;
    font-family: inherit;
}

.chat-input::placeholder {
    color: var(--color-text-tertiary);
}

.chat-send-btn {
    padding: var(--space-2) var(--space-3);
    background: var(--color-primary);
    color: var(--color-text-on-primary) !important;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition-fast);
}

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

.chat-send-btn:disabled {
    background: var(--color-text-tertiary);
    cursor: not-allowed;
}

/* Typing Indicator */
.chat-typing-indicator {
    display: none;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

.chat-typing-indicator.visible {
    display: flex;
}

.chat-typing-dots {
    display: flex;
    gap: 3px;
}

.chat-typing-dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-text-tertiary);
    animation: typingDot 1.4s infinite;
}

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

.chat-typing-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes typingDot {
    0%, 60%, 100% {
        opacity: 0.3;
        transform: translateY(0);
    }
    30% {
        opacity: 1;
        transform: translateY(-3px);
    }
}

/* Tablet Responsive */
@media (max-width: 992px) {
    .chat-container {
        height: calc(100vh - 220px);
        max-height: none;
    }

    .chat-sidebar {
        width: 220px;
        min-width: 220px;
    }
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .chat-container {
        display: flex;
        flex-direction: column;
        height: calc(100vh - 180px);
        min-height: 400px;
        max-height: none;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }

    .chat-main {
        flex: 1;
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .chat-header {
        padding: var(--space-3);
        flex-shrink: 0;
    }

    .chat-header-title {
        font-size: var(--font-size-base);
    }

    .chat-messages {
        flex: 1;
        min-height: 200px;
        padding: var(--space-3);
        gap: var(--space-2);
        overflow-y: auto;
    }

    .chat-message {
        max-width: 90%;
    }

    .chat-message-bubble {
        padding: var(--space-2) var(--space-3);
        font-size: var(--font-size-xs);
    }

    .chat-typing-indicator {
        flex-shrink: 0;
    }

    .chat-input-area {
        flex-shrink: 0;
        padding: var(--space-3);
        background: var(--color-surface);
        border-top: 1px solid var(--color-border);
    }

    .chat-input-container {
        padding: var(--space-2);
    }

    .chat-input {
        font-size: var(--font-size-sm);
        min-height: 40px;
    }

    .chat-send-btn {
        min-width: 44px;
        min-height: 44px;
    }
}

/* Small Mobile Responsive */
@media (max-width: 480px) {
    .chat-container {
        border-radius: 0;
        height: calc(100vh - 160px);
    }

    .chat-messages {
        flex: 1;
    }

    .chat-message-avatar {
        width: 28px;
        height: 28px;
        font-size: 10px;
    }

    .chat-message-author {
        font-size: 11px;
    }

    .chat-message-time {
        font-size: 10px;
    }

    .chat-message-bubble {
        padding: var(--space-2);
        border-radius: var(--radius-md);
    }

    .chat-input-area {
        padding: var(--space-2);
    }

    .chat-send-btn {
        min-width: 44px;
        min-height: 44px;
    }
}

/* Scrollbar styling */
.chat-messages::-webkit-scrollbar,
.chat-participants-list::-webkit-scrollbar {
    width: 6px;
}

.chat-messages::-webkit-scrollbar-track,
.chat-participants-list::-webkit-scrollbar-track {
    background: transparent;
}

.chat-messages::-webkit-scrollbar-thumb,
.chat-participants-list::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 3px;
}

.chat-messages::-webkit-scrollbar-thumb:hover,
.chat-participants-list::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-tertiary);
}

/* Mobile Header Participant Chips */
.chat-header-participants-mobile {
    display: none;
}

.chat-header-chips-wrapper {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    background: var(--color-surface-secondary);
    padding: 4px 8px;
    border-radius: var(--radius-full);
}

.chat-header-chip {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--color-text-on-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: var(--font-weight-semibold);
    margin-left: -8px;
    border: 2px solid var(--color-surface);
}

.chat-header-chip:first-child {
    margin-left: 0;
}

.chat-header-chip-more {
    background: var(--color-text-secondary);
    cursor: pointer;
    font-size: 9px;
}

.chat-header-chip-more:hover {
    background: var(--color-primary);
}

/* Participants Modal */
.chat-participants-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1050;
    align-items: flex-end;
    justify-content: center;
}

.chat-participants-modal[aria-hidden="false"] {
    display: flex;
}

.chat-participants-modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
}

.chat-participants-modal-content {
    position: relative;
    z-index: 1;
    background: #ffffff !important;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    width: 100%;
    max-width: 500px;
    max-height: 60vh;
    display: flex;
    flex-direction: column;
    animation: slideUp 0.2s ease-out;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

.chat-participants-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4);
    border-bottom: 1px solid var(--color-border);
    background: #ffffff !important;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.chat-participants-modal-header h4 {
    margin: 0;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.chat-participants-modal-header h4 i {
    color: var(--color-primary);
}

.chat-participants-modal-close {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-participants-modal-close:hover {
    background: var(--color-surface-secondary);
    color: var(--color-text-primary);
}

.chat-participants-modal-body {
    padding: var(--space-3);
    overflow-y: auto;
    flex: 1;
    background: #ffffff !important;
}

.chat-modal-participant {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius-md);
}

.chat-modal-participant:hover {
    background: var(--color-surface-secondary);
}

.chat-modal-participant-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--color-text-on-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    flex-shrink: 0;
}

.chat-modal-participant-info {
    flex: 1;
    min-width: 0;
}

.chat-modal-participant-name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
}

.chat-modal-participant-role {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

/* Mobile: Show chips, hide sidebar */
@media (max-width: 768px) {
    .chat-container > .chat-sidebar,
    .chat-sidebar-desktop,
    .chat-sidebar {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        min-width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        position: absolute !important;
        pointer-events: none !important;
    }

    .chat-header-participants-mobile {
        display: flex;
        align-items: center;
        margin-right: var(--space-2);
    }
}


/* ========== pages/projects-uploads-display.css ========== */
/* Uploads Empty State */
.uploads-empty-state-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--min-height-panel);
    background: var(--color-surface);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--border-radius-lg);
    padding: var(--space-8);
}

.empty-state-content {
    text-align: center;
    max-width: var(--max-width-sm);
}

.empty-state-icon {
    font-size: var(--icon-size-xl);
    color: var(--color-text-tertiary);
    margin-bottom: var(--space-5);
}

.empty-state-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-2);
}

.empty-state-subtitle {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-5);
}

/* ========================================
   GRID VIEW
   ======================================== */

.uploads-grid-view {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-5);
}

/* ========================================
   FILE CARDS - Using Design System Tokens
   High specificity to override any competing rules
   ======================================== */
.uploads-grid-view .file-card {
    /* Use design system card tokens for consistent styling */
    background: var(--card-bg, var(--color-card-bg, #ffffff)) !important;
    border: none !important;  /* No borders - use shadow for depth (ds-card pattern) */
    border-radius: var(--card-border-radius, var(--border-radius-lg, 0.75rem)) !important;
    padding: var(--card-padding, var(--space-6, 1.5rem)) !important;
    box-shadow: var(--shadow-card, 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04)) !important;
    transition: box-shadow 200ms ease, transform 150ms ease, background-color 200ms ease;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 320px;
}

.uploads-grid-view .file-card:hover {
    box-shadow: var(--shadow-card-hover, 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.05)) !important;
    background: var(--card-bg-hover, var(--color-card-bg-hover, var(--card-bg, #ffffff)));
}

.uploads-grid-view .file-card-thumbnail {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 150px !important;
    max-height: 150px !important;
    min-height: 150px !important;
    background: var(--color-surface-secondary, #f8fafc) !important;
    border-radius: var(--border-radius, 0.5rem) !important;
    margin-bottom: var(--space-3, 0.75rem) !important;
    overflow: hidden !important;
    flex-shrink: 0;
}

.uploads-grid-view .file-card-thumbnail i {
    font-size: var(--icon-size-lg, 3rem);
    color: var(--color-text-tertiary, #9ca3af);
}

.uploads-grid-view .file-card-thumbnail img,
.uploads-grid-view .file-card-thumbnail-img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 150px !important;
    object-fit: cover !important;
    border-radius: var(--border-radius, 0.5rem);
}

/* Force all images inside file cards to be contained */
.uploads-grid-view .file-card img {
    max-width: 100% !important;
    max-height: 150px !important;
    object-fit: cover !important;
}

.uploads-grid-view .file-card-thumbnail-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface-secondary, #f8fafc);
}

.uploads-grid-view .file-card-thumbnail-fallback i {
    font-size: var(--icon-size-lg, 3rem);
    color: var(--color-text-tertiary, #9ca3af);
}

.uploads-grid-view .file-card-info {
    margin-bottom: var(--space-3, 0.75rem);
}

.uploads-grid-view .file-card-name {
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-medium, 500);
    color: var(--color-text-primary, #1f2937);
    margin-bottom: var(--space-1, 0.25rem);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.uploads-grid-view .file-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
    font-size: var(--font-size-xs, 0.75rem);
    color: var(--color-text-secondary, #6b7280);
    margin-top: var(--space-1, 0.25rem);
}

.uploads-grid-view .file-card-size {
    display: inline-flex;
    align-items: center;
}

.uploads-grid-view .file-card-date {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1, 4px);
}

.uploads-grid-view .file-card-date i {
    font-size: var(--font-size-xs, 12px);
    opacity: 0.8;
}

.uploads-grid-view .file-card-actions {
    display: flex;
    gap: var(--space-2, 8px);
    margin-top: var(--space-2, 8px);
}

.uploads-grid-view .file-action-btn {
    padding: var(--space-2, 8px);
    min-width: var(--space-9, 36px);
    min-height: var(--space-9, 36px);
    background: var(--color-surface-secondary, #f1f5f9);
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: var(--border-radius, 8px);
    color: var(--color-text-secondary, #64748b);
    font-size: var(--font-size-sm, 14px);
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.uploads-grid-view .file-action-btn:hover {
    background: var(--color-primary, #3b82f6);
    color: var(--color-text-inverse, #ffffff);
    border-color: var(--color-primary, #3b82f6);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
}

.uploads-grid-view .file-action-btn.file-action-delete:hover {
    background: var(--color-danger, #ef4444);
    color: var(--color-text-inverse, #ffffff);
    border-color: var(--color-danger, #ef4444);
}

.uploads-grid-view .file-action-btn:focus-visible {
    outline: 2px solid var(--color-focus, #3b82f6);
    outline-offset: 2px;
}

/* Increase touch targets on mobile */
@media (max-width: 768px) {
    .uploads-grid-view .file-action-btn {
        min-width: 44px;
        min-height: var(--space-11, 44px);
        padding: var(--space-3, 12px);
    }
    
    /* Uploads filter tabs - ensure proper touch targets */
    .uploads-tab-btn {
        min-height: var(--space-12);
        padding: var(--space-3) var(--space-4);
    }
}

/* ========================================
   FILE PREVIEW MODAL - OVERLAY & CONTAINER
   ======================================== */

.file-preview-modal {
    position: fixed;
    inset: 0;
    z-index: 9999 !important;
    display: none;
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(4px);
}

.file-preview-modal.active {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.file-preview-modal__container {
    position: relative;
    display: flex;
    width: calc(100% - var(--space-8));
    height: calc(100vh - var(--space-8));
    max-width: 1600px;
    max-height: 95vh;
    margin: auto;
    background: var(--color-surface);
    border-radius: var(--border-radius-xl);
    box-shadow: var(--shadow-2xl);
    overflow: hidden;
    animation: modalSlideIn 0.3s ease-out;
}

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

/* ========================================
   MODAL CLOSE BUTTON
   ======================================== */

.file-preview-modal__close {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    z-index: 10;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    border: none;
    border-radius: var(--border-radius-full);
    color: var(--color-text-inverse);
    font-size: var(--font-size-xl);
    cursor: pointer;
    transition: var(--transition-all);
}

.file-preview-modal__close:hover {
    background: rgba(0, 0, 0, 0.7);
    transform: scale(1.05);
}

/* ========================================
   NAVIGATION ARROWS
   ======================================== */

.file-preview-modal__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: var(--btn-size-nav);
    height: var(--btn-size-nav);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    border: none;
    border-radius: var(--border-radius-full);
    color: var(--color-text-inverse);
    font-size: var(--font-size-xl);
    cursor: pointer;
    transition: var(--transition-all);
}

.file-preview-modal__nav:hover {
    background: rgba(0, 0, 0, 0.7);
    transform: translateY(-50%) scale(1.05);
}

.file-preview-modal__nav:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.file-preview-modal__nav:disabled:hover {
    transform: translateY(-50%);
}

.file-preview-modal__nav--prev {
    left: var(--space-4);
}

.file-preview-modal__nav--next {
    right: calc(38% + var(--space-4));
}

/* ========================================
   MEDIA PANEL (LEFT SIDE)
   ======================================== */

.file-preview-modal__media {
    flex: 0 0 62%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface-secondary);
    position: relative;
    overflow: hidden;
    min-height: 0;
    min-width: 0;
    height: 100%;
}

.file-preview-modal__media-content {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    min-width: 0;
    padding: var(--space-8);
    position: relative;
    overflow: hidden;
}

/* Photo Preview */
.file-preview-modal__image {
    max-width: 100%;
    max-height: calc(100% - var(--space-16));
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: var(--border-radius);
    transition: opacity 0.3s ease;
}

.file-preview-modal__image.loading {
    opacity: 0;
}

/* Loading Spinner */
.file-preview-modal__loader {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    color: var(--color-text-secondary);
}

.file-preview-modal__loader i {
    font-size: var(--icon-size-lg);
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* File Preview (non-image) */
.file-preview-modal__file {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-5);
    padding: var(--space-8);
    text-align: center;
}

.file-preview-modal__file-icon {
    font-size: var(--icon-size-2xl);
    color: var(--color-text-tertiary);
}

.file-preview-modal__file-icon.pdf {
    color: var(--color-danger);
}

.file-preview-modal__file-icon.doc {
    color: var(--color-primary);
}

.file-preview-modal__file-icon.excel {
    color: var(--color-success);
}

.file-preview-modal__file-name {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    word-break: break-word;
    max-width: var(--max-width-sm);
}

.file-preview-modal__file-download {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    background: var(--color-primary);
    color: var(--color-text-inverse);
    border: none;
    border-radius: var(--border-radius);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: var(--transition-all);
}

.file-preview-modal__file-download:hover {
    background: var(--color-primary-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* PDF Embed */
.file-preview-modal__pdf-embed {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: var(--border-radius);
}

/* Audio Preview */
.file-preview-modal__audio {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-6);
    width: 100%;
    max-width: 600px;
    padding: var(--space-8);
}

.file-preview-modal__waveform {
    width: 100%;
    height: var(--height-waveform);
    background: linear-gradient(to right, 
        var(--color-primary) 0%, 
        var(--color-primary) var(--progress, 0%), 
        var(--color-border) var(--progress, 0%), 
        var(--color-border) 100%);
    border-radius: var(--border-radius);
    position: relative;
    cursor: pointer;
}

.file-preview-modal__waveform::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Cpath fill='%23ffffff' opacity='0.3' d='M0 20 Q5 10 10 20 T20 20 T30 20 T40 20 T50 20 T60 20 T70 20 T80 20 T90 20 T100 20 V40 H0 Z'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-size: auto 100%;
}

.file-preview-modal__audio-player {
    width: 100%;
}

.file-preview-modal__audio-controls {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    width: 100%;
}

.file-preview-modal__play-btn {
    width: var(--btn-size-lg);
    height: var(--btn-size-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary);
    border: none;
    border-radius: var(--border-radius-full);
    color: var(--color-text-inverse);
    font-size: var(--font-size-xl);
    cursor: pointer;
    transition: var(--transition-all);
    flex-shrink: 0;
}

.file-preview-modal__play-btn:hover {
    background: var(--color-primary-hover);
    transform: scale(1.05);
}

.file-preview-modal__time {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
    min-width: 100px;
}

.file-preview-modal__volume {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-left: auto;
}

.file-preview-modal__volume-btn {
    background: none;
    border: none;
    color: var(--color-text-secondary);
    font-size: var(--font-size-lg);
    cursor: pointer;
    padding: var(--space-2);
}

.file-preview-modal__volume-btn:hover {
    color: var(--color-text-primary);
}

.file-preview-modal__volume-slider {
    width: var(--space-20);
    height: var(--height-scrollbar);
    background: var(--color-border);
    border-radius: var(--border-radius-full);
    appearance: none;
    cursor: pointer;
}

.file-preview-modal__volume-slider::-webkit-slider-thumb {
    appearance: none;
    width: var(--space-3-5);
    height: var(--space-3-5);
    background: var(--color-primary);
    border-radius: var(--border-radius-full);
    cursor: pointer;
}

/* ========================================
   DETAILS PANEL (RIGHT SIDE)
   ======================================== */

.file-preview-modal__details {
    flex: 0 0 38%;
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border-left: var(--border-width) solid var(--color-border);
    overflow-y: auto;
    overflow-x: hidden;
    min-width: 0;
    max-width: 38%;
}

.file-preview-modal__details-header {
    padding: var(--space-5);
    border-bottom: var(--border-width) solid var(--color-border);
}

.file-preview-modal__title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-2);
    word-break: break-word;
}

.file-preview-modal__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.file-preview-modal__meta-item {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.file-preview-modal__meta-item i {
    font-size: var(--font-size-xs);
}

/* Description Section */
.file-preview-modal__section {
    padding: var(--space-5);
    border-bottom: var(--border-width) solid var(--color-border);
}

.file-preview-modal__section-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-3);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
}

.file-preview-modal__description {
    width: 100%;
    min-height: var(--space-20);
    padding: var(--space-3);
    background: var(--color-surface-secondary);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--border-radius);
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    resize: vertical;
    transition: var(--transition-all);
}

.file-preview-modal__description:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.file-preview-modal__save-status {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    margin-top: var(--space-2);
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.file-preview-modal__save-status.saving {
    color: var(--color-warning);
}

.file-preview-modal__save-status.saved {
    color: var(--color-success);
}

/* Toolbar Section */
.file-preview-modal__toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-5);
    border-bottom: var(--border-width) solid var(--color-border);
    align-items: center;
    position: relative;
    overflow: visible;
}

.file-preview-modal__toolbar-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--color-surface-secondary);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--border-radius);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: var(--transition-all);
    position: relative;
}

.file-preview-modal__toolbar-btn:hover {
    background: var(--color-hover);
    color: var(--color-text-primary);
    border-color: var(--color-border-dark);
}

.file-preview-modal__toolbar-btn.active {
    background: var(--color-primary-light);
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.file-preview-modal__toolbar-btn.active.liked {
    background: var(--color-danger-bg);
    color: var(--color-danger);
    border-color: var(--color-danger);
}

.file-preview-modal__toolbar-btn.active.favorited {
    background: var(--color-warning-bg);
    color: var(--color-warning);
    border-color: var(--color-warning);
}

.file-preview-modal__toolbar-btn.active.flagged {
    background: var(--color-danger-bg);
    color: var(--color-danger);
    border-color: var(--color-danger);
}

.file-preview-modal__count {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
}

/* Likes Tooltip */
.file-preview-modal__likes-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: var(--space-2);
    padding: var(--space-3);
    background: var(--color-text-primary);
    color: var(--color-surface);
    font-size: var(--font-size-xs);
    border-radius: var(--border-radius);
    opacity: 0;
    visibility: hidden;
    transition: var(--transition-all);
    z-index: 10;
    min-width: 200px;
    max-width: 280px;
}

.file-preview-modal__likes-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--color-text-primary);
}

.file-preview-modal__like-wrapper {
    position: relative;
}

.file-preview-modal__like-wrapper:hover .file-preview-modal__likes-tooltip {
    opacity: 1;
    visibility: visible;
}

.likes-tooltip-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.likes-tooltip-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-1) 0;
    border-bottom: 1px solid color-mix(in srgb, var(--color-text-inverse) 10%, transparent);
}

.likes-tooltip-item:last-child {
    border-bottom: none;
}

.likes-tooltip-name {
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
}

.likes-tooltip-time {
    font-size: var(--font-size-xs);
    opacity: 0.7;
    white-space: nowrap;
}

.likes-tooltip-more {
    font-style: italic;
    opacity: 0.7;
    margin-top: var(--space-1);
    text-align: center;
}

.likes-tooltip-empty {
    text-align: center;
    opacity: 0.7;
    font-style: italic;
}

/* Flag Reason Input */
.file-preview-modal__toolbar-item {
    position: relative;
    flex-shrink: 0;
}

.file-preview-modal__flag-reason {
    position: fixed;
    padding: var(--space-3);
    background: var(--color-surface);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg);
    width: 280px;
    max-width: 90vw;
    z-index: 10000;
    display: none;
}

.file-preview-modal__flag-reason.show {
    display: block;
}

.file-preview-modal__flag-input {
    width: 100%;
    padding: 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    margin-bottom: 12px;
    resize: vertical;
    min-height: 80px;
    background: #f9fafb;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.file-preview-modal__flag-input:focus {
    outline: none;
    border-color: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
    background: #ffffff;
}

.file-preview-modal__flag-input::placeholder {
    color: #9ca3af;
}

.file-preview-modal__flag-submit {
    width: 100%;
    padding: 10px 16px;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
    box-shadow: 0 2px 4px rgba(245, 158, 11, 0.3);
}

.file-preview-modal__flag-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(245, 158, 11, 0.4);
}

.file-preview-modal__flag-submit:active {
    transform: translateY(0);
}

/* Tags Section */
.file-preview-modal__tags-section {
    padding: var(--space-4) var(--space-5);
    overflow: visible;
    position: relative;
    z-index: 10;
}

.file-preview-modal__tags-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-3);
    position: relative;
    overflow: visible;
}

.file-preview-modal__tags-header .file-preview-modal__section-title {
    margin-bottom: 0;
}

.file-preview-modal__add-tag-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: #f3f4f6;
    border: 1px dashed #9ca3af;
    border-radius: 20px;
    font-size: 12px;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.15s;
}

.file-preview-modal__add-tag-btn:hover {
    background: #e5e7eb;
    border-color: #6b7280;
    color: #374151;
}

.file-preview-modal__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    min-height: 28px;
}

.file-preview-modal__tags:empty::after {
    content: 'No tags yet';
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    font-style: italic;
}

.file-preview-modal__tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: #ffffff;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
    transition: transform 0.15s, box-shadow 0.15s;
}

.file-preview-modal__tag:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(59, 130, 246, 0.4);
}

.file-preview-modal__tag-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 50%;
    padding: 0;
    margin-left: 2px;
    color: #ffffff;
    font-size: 10px;
    cursor: pointer;
    transition: background 0.15s;
}

.file-preview-modal__tag-remove:hover {
    background: rgba(255, 255, 255, 0.4);
}

.file-preview-modal__tag-add {
    position: relative;
}

.file-preview-modal__tag-dropdown {
    position: fixed;
    min-width: 220px;
    max-width: 300px;
    max-height: 200px;
    overflow-y: auto;
    background: var(--color-surface);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg);
    z-index: 10000;
    display: none;
}

.file-preview-modal__tag-dropdown .file-preview-modal__no-comments {
    padding: var(--space-3);
    white-space: nowrap;
}

.file-preview-modal__tag-dropdown.show {
    display: block;
}

.file-preview-modal__tag-option {
    display: block;
    width: 100%;
    padding: 10px 16px;
    background: none;
    border: none;
    text-align: left;
    font-size: 14px;
    color: #374151;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.file-preview-modal__tag-option:hover {
    background: #f3f4f6;
    color: #1f2937;
}

.file-preview-modal__tag-option:first-child {
    border-radius: 4px 4px 0 0;
}

.file-preview-modal__tag-option:last-child {
    border-radius: 0 0 4px 4px;
}

.file-preview-modal__tag-option:only-child {
    border-radius: 4px;
}

/* Comments Section */
.file-preview-modal__comments {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}

.file-preview-modal__comments-list {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--space-4) var(--space-5);
}

.file-preview-modal__comment {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-bottom: var(--border-width) solid var(--color-border);
    max-width: 100%;
    min-width: 0;
}

.file-preview-modal__comment:last-child {
    border-bottom: none;
}

.file-preview-modal__comment-avatar {
    width: 36px;
    height: 36px;
    border-radius: var(--border-radius-full);
    background: var(--color-primary-light);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    flex-shrink: 0;
}

.file-preview-modal__comment-content {
    flex: 1;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

.file-preview-modal__comment-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: var(--space-1);
}

.file-preview-modal__comment-author {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
}

.file-preview-modal__comment-date {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
}

.file-preview-modal__comment-text {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0;
    line-height: 1.5;
    overflow-wrap: break-word;
    word-break: break-word;
    white-space: pre-wrap;
    max-width: 100%;
}

.file-preview-modal__no-comments {
    text-align: center;
    padding: var(--space-6);
    color: var(--color-text-tertiary);
    font-size: var(--font-size-sm);
}

.file-preview-modal__no-comments i {
    font-size: var(--space-8);
    margin-bottom: var(--space-2);
    display: block;
}

/* Add Comment Form */
.file-preview-modal__add-comment {
    display: flex;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-5);
    border-top: var(--border-width) solid var(--color-border);
    background: var(--color-surface-secondary);
}

.file-preview-modal__comment-input {
    flex: 1;
    padding: var(--space-2) var(--space-3);
    background: var(--color-surface);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--border-radius);
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    resize: none;
}

.file-preview-modal__comment-input:focus {
    outline: none;
    border-color: var(--color-primary);
}

.file-preview-modal__comment-submit {
    padding: var(--space-2) var(--space-4);
    background: var(--color-primary);
    color: var(--color-text-inverse);
    border: none;
    border-radius: var(--border-radius);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: var(--transition-all);
}

.file-preview-modal__comment-submit:hover {
    background: var(--color-primary-hover);
}

.file-preview-modal__comment-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ========================================
   LOADING & ERROR STATES
   ======================================== */

.file-preview-modal__loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-8);
    color: var(--color-text-secondary);
}

.file-preview-modal__loading i {
    font-size: var(--space-8);
    animation: spin 1s linear infinite;
    margin-bottom: var(--space-3);
}

.file-preview-modal__error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-8);
    text-align: center;
    color: var(--color-danger);
}

.file-preview-modal__error i {
    font-size: var(--icon-size-lg);
    margin-bottom: var(--space-3);
}

.file-preview-modal__error-text {
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-4);
}

.file-preview-modal__retry-btn {
    padding: var(--space-2) var(--space-4);
    background: var(--color-surface-secondary);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--border-radius);
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    cursor: pointer;
}

.file-preview-modal__retry-btn:hover {
    background: var(--color-hover);
}

/* ========================================
   MOBILE RESPONSIVE STYLES
   ======================================== */

@media (max-width: 768px) {
    .file-preview-modal__container {
        flex-direction: column;
        max-height: 100vh;
        border-radius: 0;
    }

    .file-preview-modal__media {
        flex: 0 0 auto;
        height: 50vh;
        min-height: 300px;
    }

    .file-preview-modal__media-content {
        padding: var(--space-4);
    }

    .file-preview-modal__details {
        flex: 1;
        border-left: none;
        border-top: var(--border-width) solid var(--color-border);
        border-radius: var(--border-radius-xl) var(--border-radius-xl) 0 0;
        margin-top: calc(-1 * var(--space-4));
        position: relative;
        z-index: 5;
    }

    .file-preview-modal__details::before {
        content: '';
        position: absolute;
        top: var(--space-3);
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: var(--space-1);
        background: var(--color-border);
        border-radius: var(--border-radius-full);
    }

    .file-preview-modal__details-header {
        padding-top: var(--space-6);
    }

    .file-preview-modal__nav--prev {
        left: var(--space-2);
    }

    .file-preview-modal__nav--next {
        right: var(--space-2);
    }

    .file-preview-modal__close {
        top: var(--space-2);
        right: var(--space-2);
    }

    .file-preview-modal__toolbar {
        overflow-x: auto;
        flex-wrap: nowrap;
        gap: var(--space-2);
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .file-preview-modal__toolbar::-webkit-scrollbar {
        display: none;
    }

    .file-preview-modal__toolbar-btn {
        flex-shrink: 0;
    }
}

/* ========================================
   CLICKABLE FILE CARDS
   ======================================== */

.file-card {
    cursor: pointer;
}

.file-card:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
}

.uploads-list-view tbody tr {
    cursor: pointer;
}

.uploads-list-view tbody tr:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: -2px;
}


/* ========== pages/projects-uploads-filters.css ========== */
/* ========================================
   CONTENT SECTIONS
   ======================================== */

.section {
    background: var(--color-surface);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--border-radius-lg);
    padding: var(--space-5);
    margin-bottom: var(--space-5);
    box-shadow: var(--shadow-xs);
}

.section-header {
    display: flex;
    align-items: center;
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: var(--border-width) solid var(--color-border);
}

.section-header h3 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.section-header h3 i {
    color: var(--color-primary);
    font-size: var(--font-size-base);
}

/* ========================================
   TAB CONTENT VISIBILITY
   ======================================== */

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

/* ========================================
/* ========================================
   UPLOADS SECTION STYLES
   ======================================== */

/* Uploads Header - Filter Tabs and Actions */
.uploads-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
    padding: var(--space-4);
    background: var(--color-surface);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--border-radius-lg);
}

/* Filter Tabs - Pill Style */
.uploads-filter-tabs {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.uploads-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2-5) var(--space-4);
    min-height: var(--space-11);
    background: transparent;
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--border-radius-full);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: var(--transition-all);
    white-space: nowrap;
}

.uploads-tab-btn i {
    font-size: var(--font-size-sm);
}

.uploads-tab-btn:hover {
    background: var(--color-hover);
    color: var(--color-primary);
    border-color: var(--color-primary);
    transform: translateY(-1px);
}

.uploads-tab-btn.active {
    background: var(--color-primary);
    color: var(--color-text-inverse);
    border-color: var(--color-primary);
}

.uploads-tab-btn.active i,
.uploads-tab-btn.active span {
    color: var(--color-text-inverse);
}

.uploads-tab-btn:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
}

/* Actions Container */
.uploads-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

/* View Toggle Buttons */
.view-toggle-group {
    display: inline-flex;
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--border-radius);
    overflow: hidden;
}

.view-toggle-btn {
    padding: var(--space-2-5) var(--space-4);
    min-height: var(--space-11);
    background: var(--color-surface);
    border: none;
    border-right: var(--border-width) solid var(--color-border);
    color: var(--color-text-secondary);
    font-size: var(--font-size-base);
    cursor: pointer;
    transition: var(--transition-all);
}

.view-toggle-btn:last-child {
    border-right: none;
}

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

.view-toggle-btn.active {
    background: var(--color-primary);
    color: var(--color-text-inverse);
}

.view-toggle-btn:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: -2px;
    z-index: var(--z-focus-state);
}

/* ========================================
   EMPTY STATE
   ======================================== */

.uploads-empty-state {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    min-height: 300px;
    text-align: center;
    padding: var(--space-8);
    color: var(--color-text-secondary);
    background: var(--color-surface);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--border-radius-lg);
}

.uploads-empty-state .empty-state-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
}

.uploads-empty-state .empty-state-icon {
    font-size: var(--font-size-4xl);
    color: var(--color-text-tertiary);
    margin-bottom: var(--space-2);
}

.uploads-empty-state .empty-state-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0;
}

.uploads-empty-state .empty-state-subtitle {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-4);
}


/* ========== pages/projects-tabs-mobile.css ========== */
/* ========================================
   PROJECT TABS - MOBILE RESPONSIVE STYLES
   Common mobile patterns for all project tabs
   ======================================== */

/* ========================================
   SECTION HEADERS - MOBILE STACKING
   Applies to: Tasks, Milestones, Sub-Projects, 
   Construction Logs, and similar tabs
   ======================================== */
@media (max-width: 576px) {
    .project-section > div[style*="display: flex"][style*="justify-content: space-between"] {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: var(--space-3);
    }
    
    .project-section .project-section-title {
        margin-bottom: 0;
        font-size: var(--font-size-lg);
        text-align: center;
    }
    
    .project-section > div[style*="display: flex"] > .ds-btn {
        width: 100%;
        justify-content: center;
        min-height: 44px;
    }
}

/* ========================================
   UPLOADS TAB - MOBILE LAYOUT
   ======================================== */
@media (max-width: 576px) {
    .uploads-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: var(--space-3);
    }
    
    .uploads-filter-tabs {
        display: flex;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: var(--space-1);
        padding-bottom: var(--space-2);
        scrollbar-width: none;
    }
    
    .uploads-filter-tabs::-webkit-scrollbar {
        display: none;
    }
    
    .uploads-tab-btn {
        flex: 0 0 auto;
        min-height: 44px;
        white-space: nowrap;
        padding: var(--space-2) var(--space-3);
    }
    
    .uploads-actions {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2);
        width: 100%;
    }
    
    .uploads-actions .view-toggle-group {
        order: 2;
        width: 100%;
        display: flex;
        justify-content: center;
    }
    
    .uploads-actions .ds-btn {
        flex: 1;
        min-height: 44px;
        font-size: var(--font-size-sm);
    }
    
    .view-toggle-btn {
        min-width: 44px;
        min-height: 44px;
    }
}

/* ========================================
   DS-CARD HEADERS - MOBILE LAYOUT
   Applies to calendar navigation, filters, etc.
   ======================================== */
@media (max-width: 576px) {
    .ds-card-header > div[style*="display: flex"][style*="justify-content: space-between"] {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: var(--space-3);
    }
    
    .ds-card-header h4 {
        text-align: center;
        font-size: var(--font-size-xl);
        margin-bottom: 0;
    }
    
    .ds-card-header .ds-btn-group {
        justify-content: center;
        width: 100%;
    }
    
    .ds-card-header .ds-btn-group .ds-btn {
        flex: 0 0 auto;
        min-width: 44px;
        min-height: 44px;
    }
}

/* ========================================
   BUTTON GROUPS - MOBILE
   ======================================== */
@media (max-width: 576px) {
    .project-section .ds-btn-group,
    .project-main-card .ds-btn-group {
        display: flex;
        width: 100%;
    }
    
    .project-section .ds-btn-group .ds-btn,
    .project-main-card .ds-btn-group .ds-btn {
        flex: 1;
        min-height: 44px;
    }
}

/* ========================================
   TABLES - MOBILE ADJUSTMENTS
   ======================================== */
@media (max-width: 576px) {
    .ds-table-container {
        margin: 0 calc(-1 * var(--space-4));
        width: calc(100% + var(--space-8));
        border-radius: 0;
    }
    
    .ds-table {
        font-size: var(--font-size-sm);
    }
    
    .ds-table th,
    .ds-table td {
        padding: var(--space-2) var(--space-1-5);
    }
    
    .ds-table .btn-group-sm .btn {
        padding: var(--space-1) var(--space-2);
        min-height: var(--space-9);
    }
}

/* ========================================
   EMPTY STATES - MOBILE
   ======================================== */
@media (max-width: 576px) {
    .uploads-empty-state,
    .ds-empty-state {
        padding: var(--space-8) var(--space-4) !important;
    }
    
    .empty-state-icon,
    .ds-empty-state i {
        font-size: var(--font-size-4xl) !important;
    }
    
    .empty-state-title,
    .ds-empty-state h4 {
        font-size: var(--font-size-lg);
    }
    
    .empty-state-subtitle,
    .ds-empty-state p {
        font-size: var(--font-size-sm);
    }
    
    .uploads-empty-state .ds-btn,
    .ds-empty-state .ds-btn {
        width: 100%;
        min-height: 44px;
    }
}

/* ========================================
   CHAT TAB - MOBILE LAYOUT
   ======================================== */
@media (max-width: 768px) {
    .chat-container {
        flex-direction: column !important;
    }
    
    .chat-sidebar {
        width: 100% !important;
        max-height: var(--chat-sidebar-max-height);
        border-right: none !important;
        border-bottom: 1px solid var(--color-border);
    }
    
    .chat-main {
        width: 100% !important;
        flex: 1;
    }
    
    .chat-sidebar-header {
        padding: var(--space-3) var(--space-4);
    }
    
    .chat-sidebar-title {
        font-size: var(--font-size-base);
    }
}

/* ========================================
   SCHEDULE TAB - VIEW CONTROLS MOBILE
   ======================================== */
@media (max-width: 576px) {
    .ds-calendar-view-controls {
        flex-direction: column !important;
        gap: var(--space-3) !important;
        padding: var(--space-3) !important;
    }
    
    .ds-calendar-view-buttons,
    .ds-calendar-action-buttons,
    .ds-calendar-filter-buttons {
        width: 100%;
        justify-content: center !important;
    }
    
    .ds-calendar-view-buttons .ds-btn,
    .ds-calendar-action-buttons .ds-btn,
    .ds-calendar-filter-buttons .ds-btn {
        flex: 1;
        min-height: 44px;
    }
}

/* ========================================
   FILTER CONTROLS - MOBILE
   ======================================== */
@media (max-width: 576px) {
    .project-filters-content,
    .filters-content {
        padding: var(--space-3);
    }
    
    .project-filters-content .row,
    .filters-content .row {
        gap: var(--space-3);
    }
    
    .project-filters-content [class*="col-"],
    .filters-content [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
        padding: 0;
    }
    
    .project-filters-content .ds-btn,
    .filters-content .ds-btn {
        width: 100%;
        min-height: 44px;
    }
}

/* ========================================
   FORM INPUTS - 44PX TOUCH TARGETS
   ======================================== */
@media (max-width: 576px) {
    .project-section .ds-input,
    .project-section .ds-label,
    .project-section .form-select,
    .project-section .form-control {
        min-height: 44px;
        font-size: var(--font-size-md);
    }
    
    .project-section textarea.ds-input {
        min-height: var(--space-20);
    }
}

/* ========================================
   MOBILE CARD VIEWS
   ======================================== */
@media (max-width: 576px) {
    .mobile-card-view--project {
        padding: 0;
    }
    
    .mobile-card-view--project .project-card {
        border-radius: 0;
        margin: 0 calc(-1 * var(--space-4));
        width: calc(100% + var(--space-8));
        border-left: none;
        border-right: none;
    }
}


/* ========== pages/projects-detail-mobile.css ========== */
/* ==============================================
   PROJECT DETAIL PAGE - MOBILE ENHANCEMENTS
   Following workzone design patterns:
   - Edge-to-edge layouts
   - 44px minimum touch targets
   - Collapsible sections
   - Horizontal scrolling for tabs
   - White backgrounds
   - Border-radius: 6px (small), 8px (default), 12px (cards)
   ============================================== */

/* ==============================================
   HEADER SECTION - Enhanced Mobile Layout
   ============================================== */
@media (max-width: 768px) {
    .project-detail-header,
    .ds-project-header {
        margin: 0 calc(-1 * var(--space-3));
        padding: var(--space-3) var(--space-4);
        border-radius: 0;
        background: var(--color-surface);
        border-bottom: var(--border-width) solid var(--color-border);
    }
    
    .ds-project-header__container {
        flex-direction: column;
        gap: var(--space-2);
        align-items: stretch;
    }
    
    /* Back button - Compact, left-aligned */
    .ds-project-header__back {
        width: auto;
        align-self: flex-start;
        justify-content: flex-start;
        min-height: 36px;
        padding: var(--space-1) var(--space-2);
        border-radius: var(--border-radius);
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-medium);
        color: var(--color-text-secondary);
        background: var(--color-surface-secondary);
        margin-bottom: var(--space-1);
    }
    
    .ds-project-header__back i {
        font-size: 0.75rem;
    }
    
    .ds-project-header__back span {
        font-size: var(--font-size-sm);
    }
    
    /* Title and Options Row */
    .project-detail-header__content {
        width: 100%;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        gap: var(--space-3);
    }
    
    /* Project Title - Allow wrapping */
    .ds-project-header__title {
        font-size: 1.125rem !important;
        line-height: 1.3 !important;
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        white-space: normal;
        word-break: break-word;
        margin: 0 !important;
    }
    
    .ds-project-header__title .badge {
        display: none;
    }
    
    /* Project Options Button - Icon only */
    #project-options-btn {
        flex-shrink: 0;
        min-width: 44px;
        min-height: 44px;
        width: 44px;
        height: 44px;
        padding: 0 !important;
        border-radius: var(--border-radius);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    #project-options-btn .mobile-hidden {
        display: none !important;
    }
    
    #project-options-btn i {
        margin: 0 !important;
        font-size: 1rem;
    }
    
    /* Project Options Dropdown - Fix z-index and positioning on mobile */
    .project-detail-header__content .dropdown,
    .ds-project-header .dropdown {
        position: static !important;
    }
    
    .project-detail-header__content .dropdown-menu,
    .ds-project-header .dropdown-menu {
        position: fixed !important;
        top: auto !important;
        bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
        left: var(--space-3) !important;
        right: var(--space-3) !important;
        width: auto !important;
        max-width: calc(100vw - var(--space-6)) !important;
        z-index: 1100 !important;
        border-radius: var(--border-radius-lg) !important;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15) !important;
        border: var(--border-width) solid var(--color-border) !important;
        padding: var(--space-2) 0 !important;
        background: var(--color-surface) !important;
        transform: none !important;
    }
    
    .project-detail-header__content .dropdown-menu.show,
    .ds-project-header .dropdown-menu.show {
        display: block !important;
    }
    
    .project-detail-header__content .dropdown-item,
    .ds-project-header .dropdown-item {
        min-height: 48px !important;
        padding: var(--space-3) var(--space-4) !important;
        display: flex !important;
        align-items: center !important;
        gap: var(--space-3) !important;
        font-size: var(--font-size-base) !important;
        font-weight: var(--font-weight-medium) !important;
        color: var(--color-text-primary) !important;
        border-radius: 0 !important;
    }
    
    .project-detail-header__content .dropdown-item:active,
    .ds-project-header .dropdown-item:active {
        background: var(--color-surface-secondary) !important;
        color: var(--color-text-primary) !important;
    }
    
    .project-detail-header__content .dropdown-item i,
    .ds-project-header .dropdown-item i {
        width: var(--space-5) !important;
        text-align: center !important;
        color: var(--color-text-secondary) !important;
    }
    
    .project-detail-header__content .dropdown-divider,
    .ds-project-header .dropdown-divider {
        margin: var(--space-1) 0 !important;
        border-color: var(--color-border) !important;
    }
}

/* ==============================================
   TAB NAVIGATION - Edge-to-edge enhancement
   (Base mobile styles in projects-navigation.css)
   ============================================== */
@media (max-width: 768px) {
    .ds-project-tabs-container {
        margin: 0 calc(-1 * var(--space-3));
        width: calc(100% + var(--space-6));
    }
}

/* ==============================================
   FORM SECTIONS - Collapsible cards
   ============================================== */
@media (max-width: 768px) {
    .ds-project-content {
        padding: 0;
    }
    
    .project-main-card {
        margin: 0 calc(-1 * var(--space-3));
        padding: 0;
        background: transparent;
        box-shadow: none;
        border: none;
        border-radius: 0;
    }
    
    .project-section {
        background: var(--color-surface);
        margin-bottom: var(--space-2);
        border-radius: 0;
        border: none;
        border-bottom: var(--border-width) solid var(--color-border);
        overflow: hidden;
    }
    
    .project-section-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: var(--space-4);
        margin: 0;
        font-size: var(--font-size-base);
        font-weight: var(--font-weight-semibold);
        color: var(--color-text-primary);
        background: var(--color-surface-secondary);
        cursor: pointer;
        min-height: 44px;
        border-bottom: var(--border-width) solid var(--color-border);
    }
    
    .project-section-title::after {
        content: '\f078';
        font-family: 'Font Awesome 6 Free';
        font-weight: 900;
        font-size: var(--font-size-xs);
        color: var(--color-text-secondary);
        transition: var(--transition-slow);
    }
    
    .project-section.collapsed .project-section-title::after {
        transform: rotate(-90deg);
    }
    
    .project-section.collapsed .project-form-grid {
        display: none;
    }
    
    .project-form-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--space-4);
        padding: var(--space-4);
    }
    
    .project-form-grid [class*="field-span-"] {
        grid-column: span 1 !important;
    }
}

/* ==============================================
   FORM INPUTS - 44px touch targets
   ============================================== */
@media (max-width: 768px) {
    .project-section label {
        font-size: var(--font-size-xs);
        font-weight: var(--font-weight-semibold);
        color: var(--color-text-secondary);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: var(--space-1-5);
        display: block;
    }
    
    .project-section input,
    .project-section select,
    .project-section textarea,
    .project-section .form-select,
    .project-section .form-control {
        width: 100%;
        min-height: 44px;
        padding: var(--space-2-5) var(--space-3-5);
        font-size: var(--font-size-base);
        border: var(--border-width) solid var(--color-border);
        border-radius: var(--border-radius);
        background: var(--color-surface);
        color: var(--color-text-primary);
        transition: var(--transition-colors);
    }
    
    .project-section input:focus,
    .project-section select:focus,
    .project-section textarea:focus {
        outline: none;
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px rgba(30, 58, 138, 0.1);
    }
    
    .project-section input[readonly] {
        background: var(--color-surface-secondary);
        color: var(--color-text-secondary);
    }
    
    .project-section textarea {
        min-height: 100px;
        resize: vertical;
    }
    
    .project-section select {
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right var(--space-3-5) center;
        padding-right: var(--space-10);
    }
}

/* ==============================================
   SAVE BUTTON - Full width sticky footer
   ============================================== */
@media (max-width: 768px) {
    .project-form-actions {
        position: sticky;
        bottom: 0;
        left: 0;
        right: 0;
        margin: 0 calc(-1 * var(--space-3));
        padding: var(--space-4);
        background: var(--color-surface);
        border-top: var(--border-width) solid var(--color-border);
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
        z-index: 50;
    }
    
    .project-form-actions .ds-btn {
        width: 100%;
        min-height: 48px;
        font-size: var(--font-size-base);
        font-weight: var(--font-weight-semibold);
        border-radius: var(--border-radius);
        justify-content: center;
    }
}

/* ==============================================
   DROPDOWN MENUS - Mobile optimized
   ============================================== */
@media (max-width: 768px) {
    .project-detail-header .dropdown-menu {
        position: fixed !important;
        left: var(--space-3) !important;
        right: var(--space-3) !important;
        bottom: var(--space-4) !important;
        top: auto !important;
        transform: none !important;
        width: auto !important;
        max-height: 60vh;
        overflow-y: auto;
        border-radius: var(--border-radius-lg);
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
        padding: var(--space-2);
    }
    
    .project-detail-header .dropdown-item {
        min-height: 48px;
        display: flex;
        align-items: center;
        gap: var(--space-3);
        padding: var(--space-3) var(--space-4);
        border-radius: var(--border-radius);
        font-size: var(--font-size-base);
    }
    
    .project-detail-header .dropdown-item:active {
        background: var(--color-primary);
        color: var(--color-surface);
    }
    
    .project-detail-header .dropdown-divider {
        margin: var(--space-2) 0;
    }
}

/* ==============================================
   DATE PICKER INTEGRATION
   ============================================== */
@media (max-width: 768px) {
    .schedule-picker-container {
        width: 100%;
    }
    
    .schedule-picker-container input {
        min-height: 44px;
    }
    
    .schedule-picker-container .schedule-time-inputs {
        flex-direction: column;
        gap: var(--space-2);
    }
    
    .schedule-picker-container .schedule-time-inputs input {
        width: 100%;
    }
}

/* ==============================================
   CUSTOMER LINK BUTTON
   ============================================== */
@media (max-width: 768px) {
    .project-section [style*="display: flex"][style*="gap"] {
        flex-direction: column !important;
    }
    
    .project-section .ds-button--sm,
    .project-section a[href*="customer"] {
        width: 100%;
        min-height: 44px;
        justify-content: center;
        margin-top: var(--space-2);
    }
}

/* ==============================================
   COPY ADDRESS BUTTON
   ============================================== */
@media (max-width: 768px) {
    .copy-address-btn {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* ==============================================
   INFO ICONS - Better touch on mobile
   ============================================== */
@media (max-width: 768px) {
    .project-section label .fa-circle-info {
        font-size: var(--font-size-base);
        padding: var(--space-1);
        margin-left: var(--space-1);
    }
}

/* ==============================================
   LOADING STATES
   ============================================== */
@media (max-width: 768px) {
    .ds-loading-placeholder {
        padding: var(--space-8) var(--space-4);
        text-align: center;
        color: var(--color-text-secondary);
    }
}

/* ==============================================
   TAB CONTENT PANELS
   ============================================== */
@media (max-width: 768px) {
    .tab-content {
        padding: 0;
    }
    
    .tab-content.active {
        animation: fadeIn var(--transition-base);
    }
    
    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }
}


/* ========== pages/projects-list-mobile.css ========== */
/* ========================================
   PROJECTS LIST - MOBILE RESPONSIVE STYLES
   Ensures proper touch targets and mobile layout
   ======================================== */

/* ========================================
   STICKY TABS SOLID BACKGROUND FIX
   Prevents content from showing through
   ======================================== */
@media (max-width: 768px) {
    /* Projects/Schedule/Gantt tab container - SOLID BACKGROUND */
    .projects-list-page .ds-project-tabs-container,
    .ds-project-tabs-container,
    .ds-project-tabs-mobile,
    .projects-list-page .ds-project-tabs-mobile {
        background: var(--color-surface, #ffffff) !important;
        background-color: var(--color-surface, #ffffff) !important;
    }
    
    /* Ensure the sticky container stays opaque */
    .ds-project-tabs-container {
        position: sticky !important;
        top: 0 !important;
        z-index: 100 !important;
        background: var(--color-surface, #ffffff) !important;
    }
    
    /* Scrollable tab row needs solid background too */
    .ds-project-tabs-mobile.scroll-fade-container,
    .ds-project-tabs-mobile.scroll-x {
        background: var(--color-surface, #ffffff) !important;
    }
    
    /* Hide layout toggle (hamburger) button on mobile - not useful on small screens */
    .ds-project-tabs-container .layout-toggle-icon,
    .layout-toggle-icon {
        display: none !important;
    }
}

/* ========================================
   ALPHABET FILTER - MOBILE HORIZONTAL SCROLL
   ======================================== */
@media (max-width: 768px) {
    .alphabet-filter-wrapper {
        margin: 0 calc(-1 * var(--space-3)) var(--space-4);
        padding: var(--space-3);
        background: var(--color-surface);
        overflow: hidden;
    }
    
    .alphabet-filter-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    
    .alphabet-filter-container::-webkit-scrollbar {
        display: none;
    }
    
    .alphabet-filter {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: var(--space-1);
        padding-bottom: var(--space-1);
        min-width: max-content;
    }
    
    .alphabet-btn {
        min-width: 36px !important;
        min-height: 44px !important;
        padding: var(--space-2) var(--space-1-5) !important;
        font-size: var(--font-size-sm) !important;
        flex-shrink: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

/* ========================================
   PROJECT CARDS GRID - MOBILE
   Enhanced rounded card design
   ======================================== */
@media (max-width: 768px) {
    /* Remove outer card container on mobile */
    .projects-list__table > .ds-card {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }
    
    .projects-list__table > .ds-card > .ds-card__body {
        background: transparent !important;
        padding: 0 !important;
    }
    
    .projects-cards-grid {
        display: flex !important;
        flex-direction: column;
        gap: var(--space-3);
        padding: var(--space-3) 0 !important;
    }
    
    .projects-cards-grid .mobile-card {
        margin: 0 !important;
        border-radius: var(--border-radius-lg) !important;
        border: 1px solid var(--color-border) !important;
        background: var(--color-surface) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
        padding: var(--space-4) !important;
        transition: box-shadow 0.2s ease, transform 0.2s ease !important;
    }
    
    .projects-cards-grid .mobile-card:active {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
        transform: scale(0.99);
    }
    
    /* Status badge positioning */
    .projects-cards-grid .mobile-card__status-badge {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        display: inline-block;
        margin-bottom: var(--space-2);
    }
    
    /* Card title styling */
    .projects-cards-grid .mobile-card__title {
        font-size: 1.1rem !important;
        font-weight: 600 !important;
        color: var(--color-text-primary) !important;
        margin-bottom: var(--space-2) !important;
    }
    
    /* Meta info row */
    .projects-cards-grid .mobile-card__meta {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-3);
        margin: var(--space-2) 0 var(--space-3) 0;
        padding-bottom: var(--space-3);
        border-bottom: 1px solid var(--color-border-light, #f0f0f0);
    }
    
    /* Quick actions row */
    .projects-cards-grid .mobile-card__quick-actions {
        display: flex;
        gap: var(--space-2);
        margin-bottom: var(--space-3);
    }
    
    .projects-cards-grid .mobile-card__quick-btn {
        border-radius: var(--border-radius) !important;
        background: var(--color-surface-secondary, #f8f9fa) !important;
        border: 1px solid var(--color-border) !important;
    }
    
    /* View Project button */
    .projects-cards-grid .mobile-card .ds-btn--primary {
        border-radius: var(--border-radius) !important;
        width: 100%;
        font-weight: 600;
    }
    
    /* Meta item styling */
    .projects-cards-grid .mobile-card__meta-item {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.875rem;
        color: var(--color-text-secondary, #6b7280);
    }
    
    .projects-cards-grid .mobile-card__meta-item i {
        width: 16px;
        text-align: center;
        color: var(--color-text-tertiary, #9ca3af);
    }
}

/* ========================================
   QUICK ACTION BUTTONS - TOUCH TARGETS
   ======================================== */
@media (max-width: 768px) {
    .mobile-card__quick-actions {
        display: flex !important;
        width: 100%;
        gap: var(--space-2) !important;
    }
    
    .mobile-card__quick-btn {
        flex: 1 !important;
        min-width: 0 !important;
        min-height: 44px !important;
        padding: var(--space-2) !important;
        justify-content: center;
    }
    
    /* Quick action button icons inherit color from parent */
    .mobile-card__quick-btn i {
        color: inherit !important;
    }
    
    .mobile-card__quick-btn--disabled {
        opacity: 0.4;
        cursor: not-allowed;
    }
}

/* ========================================
   VIEW TOGGLE BUTTONS - MOBILE
   ======================================== */
@media (max-width: 576px) {
    .project-view-btn,
    .view-toggle-btn {
        min-height: 44px !important;
        min-width: 44px !important;
        padding: var(--space-2) var(--space-3) !important;
    }
    
    .ds-btn-group .ds-btn {
        min-height: 44px !important;
    }
}

/* ========================================
   PROJECT TABS - MOBILE NAVIGATION
   ======================================== */
@media (max-width: 576px) {
    .ds-project-tabs-container {
        margin: 0 calc(-1 * var(--space-3));
        width: calc(100% + var(--space-6));
        border-radius: 0;
    }
    
    .ds-project-tabs-mobile {
        padding: var(--space-2) var(--space-3) !important;
        gap: var(--space-2) !important;
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    
    .ds-project-tabs-mobile::-webkit-scrollbar {
        display: none;
    }
    
    .ds-project-tab-mobile {
        min-height: 52px !important;
        min-width: 70px;
        padding: var(--space-2) !important;
        flex-shrink: 0;
    }
}

/* ========================================
   PAGINATION - MOBILE LAYOUT
   ======================================== */
@media (max-width: 576px) {
    .ds-pagination {
        flex-direction: column !important;
        gap: var(--space-3) !important;
        padding: var(--space-3) !important;
    }
    
    .ds-pagination > div:first-child {
        flex-direction: column;
        gap: var(--space-2);
        width: 100%;
        text-align: center;
    }
    
    .ds-pagination-controls {
        width: 100%;
        justify-content: center !important;
        flex-wrap: wrap;
        gap: var(--space-1-5) !important;
    }
    
    .ds-pagination-controls .ds-btn {
        min-height: 44px !important;
        padding: var(--space-2) var(--space-3) !important;
    }
    
    .ds-pagination-controls .ds-btn--sm {
        min-width: 40px;
    }
}

/* ========================================
   FILTER CONTROLS - MOBILE
   ======================================== */
@media (max-width: 576px) {
    .project-filters-primary {
        padding: var(--space-3) !important;
        margin: 0 calc(-1 * var(--space-3)) var(--space-3) !important;
        width: calc(100% + var(--space-6));
        border-radius: 0 !important;
    }
    
    .project-filters-primary .ds-btn,
    .project-filters-primary .btn {
        min-height: 44px !important;
    }
    
    .project-filters-primary .form-control,
    .project-filters-primary .form-select {
        min-height: 44px !important;
        font-size: 16px !important;
    }
}

/* ========================================
   DROPDOWN MENUS - MOBILE TOUCH TARGETS
   ======================================== */
@media (max-width: 768px) {
    .dropdown-item {
        min-height: 44px !important;
        padding: 0.625rem var(--space-4) !important;
        display: flex;
        align-items: center;
        gap: var(--space-2);
    }
}

/* Fix dropdown background on projects list page */
.projects-list-page .mobile-import-dropdown .dropdown-menu,
.projects-list-page .mobile-actions-row .dropdown-menu {
    --bs-dropdown-bg: var(--color-surface);
    --bs-dropdown-border-color: var(--color-border, #e5e7eb);
    background: var(--color-surface) !important;
    background-color: var(--color-surface) !important;
    border: 1px solid var(--color-border, #e5e7eb) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* ========================================
   BULK ACTION TOOLBAR - MOBILE
   ======================================== */
@media (max-width: 576px) {
    .bulk-action-toolbar {
        padding: var(--space-3) !important;
    }
    
    .bulk-action-toolbar__content {
        flex-direction: column;
        gap: var(--space-3);
        align-items: stretch;
    }
    
    .bulk-actions {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2);
    }
    
    .bulk-actions .ds-btn {
        flex: 1;
        min-width: calc(50% - var(--space-1));
        min-height: 44px !important;
        justify-content: center;
    }
}

/* ========================================
   EMPTY STATE - MOBILE
   ======================================== */
@media (max-width: 576px) {
    .ds-empty-state {
        padding: var(--space-8) var(--space-4) !important;
        min-height: 300px;
    }
    
    .ds-empty-state__icon {
        width: 64px;
        height: 64px;
    }
    
    .ds-empty-state__icon i {
        font-size: 28px;
    }
    
    .ds-empty-state__title {
        font-size: var(--font-size-lg);
    }
    
    .ds-empty-state__message {
        font-size: var(--font-size-sm);
    }
    
    .ds-empty-state__actions .ds-btn {
        min-height: 44px !important;
        width: 100%;
    }
}

/* ========================================
   MOBILE CARDS GRID VISIBILITY
   ======================================== */
@media (max-width: 768px) {
    .projects-cards-grid {
        display: flex !important;
    }
}

@media (min-width: 769px) {
    .projects-cards-grid {
        display: none !important;
    }
}

/* ========================================
   MOBILE/DESKTOP VISIBILITY
   (Migrated from inline template styles)
   ======================================== */
@media (max-width: 768px) {
    .mobile-only { display: block !important; }
    .desktop-only { display: none !important; }
}

@media (min-width: 769px) {
    .mobile-only { display: none !important; }
    .desktop-only { display: block !important; }
}

/* ========================================
   MOBILE FILTER DRAWER - POSITIONING FIX
   Ensure drawer is hidden off-screen by default
   and only shows when .show class is added
   ======================================== */
@media (max-width: 768px) {
    #projectFiltersDrawer.mobile-drawer {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        transform: translateY(100%) !important;
        z-index: 1050 !important;
        max-height: 85vh;
        background: var(--color-surface) !important;
        background-color: var(--color-surface) !important;
        border-radius: var(--border-radius-lg) 16px 0 0;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
        transition: transform 0.3s ease-out;
    }

    #projectFiltersDrawer.mobile-drawer.show {
        transform: translateY(0) !important;
    }

    /* Drawer backdrop overlay */
    #projectFiltersDrawer .mobile-drawer-backdrop {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: rgba(0, 0, 0, 0.5) !important;
        z-index: -1 !important;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    #projectFiltersDrawer.show .mobile-drawer-backdrop {
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Drawer panel content */
    #projectFiltersDrawer .mobile-drawer__panel {
        background: var(--color-surface) !important;
        background-color: var(--color-surface) !important;
        border-radius: var(--border-radius-lg) 16px 0 0;
        max-height: 85vh;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    #projectFiltersDrawer .mobile-drawer__header {
        background: var(--color-surface) !important;
        padding: 1rem 1.5rem;
        border-bottom: 1px solid var(--color-border);
    }

    #projectFiltersDrawer .mobile-drawer__content {
        background: var(--color-surface) !important;
        padding: 1.5rem;
        overflow-y: auto;
        flex: 1;
    }

    #projectFiltersDrawer .mobile-drawer__footer {
        background: var(--color-surface) !important;
        padding: 1rem 1.5rem;
        border-top: 1px solid var(--color-border);
    }
}

/* ========================================
   HIDE SETTINGS BUTTON ON MOBILE
   Settings is for table columns, not applicable for card view
   ======================================== */
@media (max-width: 768px) {
    #displayProjectSettingsBtn {
        display: none !important;
    }
}

/* ========================================
   ALPHABET FILTER - MOBILE SCROLL
   ======================================== */
@media (max-width: 768px) {
    .alphabet-filter-wrapper {
        margin: 0 calc(-1 * var(--space-3)) var(--space-4);
        padding: var(--space-3);
        overflow: hidden;
    }

    .alphabet-filter-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .alphabet-filter-container::-webkit-scrollbar { display: none; }

    .alphabet-filter {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: var(--space-1);
        min-width: max-content;
    }

    .alphabet-btn {
        min-width: 36px !important;
        min-height: 44px !important;
        padding: var(--space-2) var(--space-1-5) !important;
        font-size: var(--font-size-sm) !important;
        flex-shrink: 0 !important;
    }
}

/* ========================================
   MOBILE ACTIONS ROW - GRID LAYOUT
   ======================================== */
@media (max-width: 768px) {
    .mobile-actions-row {
        display: grid !important;
        grid-template-columns: 44px minmax(0, 1fr);
        grid-template-rows: auto auto;
        gap: var(--space-2);
        width: 100%;
    }

    .mobile-actions-row button {
        min-height: 44px;
        padding: var(--space-2) var(--space-3);
        white-space: nowrap;
    }

    .mobile-import-dropdown {
        grid-column: 1;
        grid-row: 1;
        min-width: 0;
    }

    .mobile-import-dropdown .dropdown-toggle {
        width: 44px;
        min-width: 44px;
        padding: var(--space-2);
        justify-content: center;
    }

    .mobile-filters-btn {
        grid-column: 2;
        grid-row: 1;
    }

    .mobile-new-btn {
        grid-column: 1 / -1;
        grid-row: 2;
    }
}

/* ========================================
   PROJECTS CALENDAR POPOVER
   ======================================== */
#projects-calendar .fc-popover {
    z-index: 1050 !important;
    max-height: 70vh !important;
    overflow: visible !important;
    box-shadow: var(--shadow-lg) !important;
}

#projects-calendar .fc-popover-body {
    max-height: 65vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
}

/* Style week numbers for projects calendar */
#projects-calendar .fc-daygrid-week-number,
#projects-calendar .fc-week-number {
    background-color: var(--color-surface-secondary) !important;
    color: var(--color-text-secondary) !important;
    font-weight: var(--font-weight-bold) !important;
    font-size: var(--font-size-sm) !important;
    padding: var(--space-2) !important;
    border-right: 2px solid var(--color-border) !important;
    text-align: center !important;
}

#projects-calendar .fc-daygrid-week-number a,
#projects-calendar .fc-week-number a {
    color: var(--color-text-secondary) !important;
}

/* ========================================
   PROJECTS PAGE HEADER - MOBILE ENHANCED
   Cleaner layout with buttons below title
   ======================================== */
@media (max-width: 768px) {
    .projects-list-page .ds-page-header {
        flex-direction: column;
        align-items: stretch;
        padding: var(--space-4);
        gap: var(--space-3);
    }
    
    .projects-list-page .ds-page-header__content {
        text-align: left;
    }
    
    .projects-list-page .ds-page-header__title {
        font-size: var(--font-size-xl);
        margin-bottom: var(--space-1);
    }
    
    .projects-list-page .ds-page-header__subtitle {
        font-size: var(--font-size-sm);
        margin-top: var(--space-1);
    }
    
    .projects-list-page .ds-page-header__actions {
        width: 100%;
    }
    
    .projects-list-page .mobile-actions-row {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap;
        gap: var(--space-2);
        width: 100%;
    }
    
    .projects-list-page .mobile-actions-row .mobile-import-dropdown,
    .projects-list-page .mobile-actions-row .mobile-filters-btn {
        flex: 0 0 auto;
    }
    
    .projects-list-page .mobile-actions-row .mobile-new-btn {
        flex: 1;
        min-width: 0;
    }
}

/* ========================================
   VIEW TOGGLE - ICON ONLY ON MOBILE
   List / Map / Calendar views
   ======================================== */
@media (max-width: 768px) {
    .projects-list-page .project-view-toggle-left .project-view-btn span {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }
    
    .projects-list-page .project-view-toggle-left .project-view-btn {
        padding: var(--space-2) var(--space-3) !important;
        min-width: 44px !important;
        min-height: 44px !important;
        justify-content: center;
        position: relative;
    }
    
    .projects-list-page .project-view-toggle-left .project-view-btn i {
        margin: 0 !important;
        font-size: 1rem;
    }
    
    .projects-list-page .project-view-toggle-container {
        flex-direction: row !important;
        justify-content: flex-start;
        gap: var(--space-2);
    }
    
    .projects-list-page .project-view-toggle-left {
        width: auto;
        flex-wrap: nowrap;
    }
    
    .projects-list-page .project-view-toggle-left .ds-btn {
        flex: 0 0 auto;
    }
    
    .projects-list-page .project-view-toggle-right {
        display: none !important;
    }
}

/* ========================================
   PROJECTS/SCHEDULE/GANTT TABS - FULL WIDTH
   ======================================== */
@media (max-width: 768px) {
    .projects-list-page .ds-project-tabs-container {
        padding: var(--space-2) var(--space-3);
        margin: 0 calc(-1 * var(--space-3));
        width: calc(100% + (var(--space-3) * 2));
    }
    
    .projects-list-page .ds-project-tabs-mobile {
        display: flex !important;
        width: 100%;
        gap: var(--space-2);
        padding: 0;
        overflow-x: visible;
    }
    
    .projects-list-page .ds-project-tab-mobile {
        flex: 1;
        justify-content: center;
        text-align: center;
        padding: var(--space-3) var(--space-2);
        min-height: 48px;
        border-radius: var(--border-radius);
        background: var(--color-gray-100);
        border: 1px solid var(--color-border);
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-medium);
        color: var(--color-text-secondary);
        transition: all 0.15s ease;
        white-space: nowrap;
    }
    
    .projects-list-page .ds-project-tab-mobile:hover {
        background: var(--color-gray-200);
        color: var(--color-text-primary);
    }
    
    .projects-list-page .ds-project-tab-mobile.active {
        background: var(--color-primary);
        color: white;
        border-color: var(--color-primary);
    }
    
    .projects-list-page .ds-project-tab-mobile i {
        margin-right: var(--space-1);
    }
}


/* ========== pages/projects-inline.css ========== */
/* ==========================================================================
   Projects Partials - Extracted Inline Styles
   ========================================================================== */

/* ==========================================================================
   Project List Styles (_project_list.html)
   ========================================================================== */

.checkbox-cell {
    width: 40px;
}

.project-checkbox-input {
    cursor: pointer;
    width: 18px;
    height: 18px;
}

.badge-sm {
    font-size: 0.65rem;
    padding: 0.2rem 0.4rem;
}

.badge-invoice-origin {
    font-size: 0.65rem;
    padding: 0.2rem 0.4rem;
    background-color: var(--color-purple, #6f42c1);
}

.badge-archived {
    font-size: 0.7rem;
    padding: 0.25rem 0.5rem;
}

.shimmer-wrapper {
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.shimmer-line {
    width: 60px;
    height: var(--space-4);
    background: linear-gradient(90deg, var(--color-gray-100, #f0f0f0) 25%, var(--color-gray-200, #e0e0e0) 50%, var(--color-gray-100, #f0f0f0) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--space-1);
}

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

.touch-target-btn {
    min-width: 44px;
    min-height: 44px;
}

.pagination-border-top {
    border-top: 1px solid var(--color-border);
}

.per-page-label {
    color: var(--color-text-secondary);
    font-size: 14px;
    white-space: nowrap;
}

.per-page-select {
    width: auto;
    padding: 6px 32px 6px 12px;
    cursor: pointer;
}

.pagination-page-btn {
    min-width: 40px;
}

.pagination-ellipsis {
    padding: 0 var(--space-2);
    display: flex;
    align-items: center;
    color: var(--color-text-secondary);
}

.pagination-info-text {
    color: var(--color-text-secondary);
    font-size: 14px;
}

/* ==========================================================================
   Schedule Tab Styles (_tab_schedule.html)
   ========================================================================== */

.schedule-filters-card {
    background: var(--color-surface);
    margin-bottom: var(--space-4);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.schedule-filters-toggle-btn {
    width: 100%;
    padding: var(--space-3);
    background: var(--color-surface);
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.2s;
}

.icon-primary {
    color: var(--color-primary);
}

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

.toggle-icon {
    color: var(--color-text-secondary);
    transition: transform 0.3s;
}

.schedule-filters-content {
    padding: 0 var(--space-4) var(--space-4) var(--space-4);
    border-top: 1px solid var(--color-border);
}

.multi-select-tall {
    height: auto;
    min-height: 140px;
}

.section-divider-top {
    border-top: 1px solid var(--color-border);
}

.section-divider-bottom {
    border-bottom: 1px solid var(--color-border);
}

.calendar-controls-card {
    background: var(--color-surface);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    flex-wrap: wrap;
    gap: var(--space-2);
}

.calendar-container {
    background: var(--color-surface);
    padding: var(--space-4);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    min-height: 600px;
    overflow: visible;
}

/* ==========================================================================
   QC Template Assignment Styles (_qc_template_assignment.html)
   ========================================================================== */

.modal-container-md {
    max-width: 700px;
}

.input-bordered {
    border: 2px solid var(--color-border);
}

.employee-checkbox-container {
    max-height: 280px;
    overflow-y: auto;
    border: 2px solid var(--color-border);
    border-radius: var(--border-radius);
}

.exemption-form-warning {
    margin: 0;
    color: var(--color-warning-text, #856404);
}

.exemption-form-container {
    background: var(--color-warning-bg, #fff9e6);
    border-radius: var(--border-radius);
    border: 2px solid var(--color-warning, #ffc107);
}

.template-preview-panel {
    background: var(--color-surface-secondary);
    border-radius: var(--border-radius);
}

/* ==========================================================================
   Add Project Modal Styles (_add_project_modal.html)
   ========================================================================== */

.modal-body-scrollable {
    max-height: 70vh;
    overflow-y: auto;
}

.icon-xs {
    font-size: 0.75rem;
}

.input-readonly {
    background-color: var(--color-surface-secondary);
    cursor: not-allowed;
    padding-right: 48px;
}

.input-action-btn {
    position: absolute;
    right: var(--space-2);
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--color-primary);
    cursor: pointer;
    padding: var(--space-2);
    border-radius: var(--border-radius);
    transition: all 0.2s;
}

.input-action-btn:hover {
    background: var(--color-surface-secondary);
}

.input-with-icon-left {
    padding-left: var(--space-10);
}

.input-icon-left {
    position: absolute;
    left: var(--space-3);
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-secondary);
}

.text-nowrap {
    white-space: nowrap;
}

.selected-item-display {
    background: var(--color-surface-secondary);
    border-radius: var(--border-radius);
    border: 1px solid var(--color-border);
}

.position-relative {
    position: relative;
}

/* ==========================================================================
   Construction Logs Tab Styles (_tab_construction_logs.html)
   ========================================================================== */

.calendar-min-height {
    min-height: 400px;
}

.empty-state-icon-lg {
    font-size: 4rem;
    color: var(--color-text-tertiary);
}

.modal-body-construction-log {
    min-height: 400px;
    overflow: visible !important;
}

.tab-content-visible {
    min-height: 300px;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.tab-pane-visible {
    padding: var(--space-5);
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
}

.tab-pane-padding {
    padding: var(--space-5);
    visibility: visible !important;
    opacity: 1 !important;
}

.card-header-highlight {
    background: var(--color-primary-light);
    border-bottom: 1px solid var(--color-border);
}

/* ==========================================================================
   Economy Modal Styles (Shared across _modal_price_lists.html, 
   _modal_other_items.html, _modal_transport.html, _modal_stock.html)
   ========================================================================== */

.economy-modal-container {
    border: none;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-xl, 0 10px 40px rgba(0,0,0,0.15));
    max-width: 720px;
    width: calc(100% - 2rem);
    background: var(--color-surface);
}

.economy-modal-header {
    border-bottom: 1px solid var(--color-border);
    padding: 1.25rem 1.5rem;
    background: var(--color-surface);
    border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

/* Modal Header with Icon - Premium Design */
.economy-modal-header .modal-header-content {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.economy-modal-header .modal-header-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--color-primary, #3b82f6) 0%, #1d4ed8 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 1.25rem;
    flex-shrink: 0;
}

/* Icon Color Variants */
.economy-modal-header .modal-header-icon--purple {
    background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
}

.economy-modal-header .modal-header-icon--teal {
    background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);
}

.economy-modal-header .modal-header-icon--orange {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
}

.economy-modal-header .modal-header-icon--gray {
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
}

.economy-modal-header .modal-header-icon--green {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
}

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

.economy-modal-header .modal-subtitle {
    margin: 0.25rem 0 0 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.economy-modal-body {
    padding: var(--space-8);
    max-height: 70vh;
    overflow-y: auto;
    background: var(--color-surface);
}

.economy-modal-footer {
    background: var(--color-background-secondary);
    padding: var(--space-6) var(--space-8);
    border-top: 1px solid var(--color-border);
}

.save-to-master-section {
    background-color: var(--color-surface-secondary);
    border-radius: var(--border-radius);
    border-left: 4px solid var(--color-success);
}

.save-to-master-title {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.save-to-master-text {
    margin: 0;
    font-size: 13px;
    color: var(--color-text-secondary);
}

.icon-success {
    color: var(--color-success);
}

/* Table column widths for stock modal - 3 columns (no stock column) */
.table-col-name {
    width: 45%;
}

.table-col-location {
    width: 30%;
}

.table-col-quantity {
    width: 25%;
    min-width: 140px;
}

/* Quantity Stepper Component - Horizontal Layout (enforced) */
.quantity-stepper {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    overflow: hidden;
    background: var(--color-surface);
}

.quantity-stepper__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    background: var(--color-gray-100);
    color: var(--color-text);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
    flex-shrink: 0;
}

.quantity-stepper__btn--minus {
    border-right: 1px solid var(--color-border);
}

.quantity-stepper__btn--plus {
    border-left: 1px solid var(--color-border);
}

.quantity-stepper__btn:hover:not(:disabled) {
    background: var(--color-gray-200);
}

.quantity-stepper__btn:active:not(:disabled) {
    background: var(--color-gray-300);
}

.quantity-stepper__btn:disabled {
    color: var(--color-text-tertiary);
    cursor: not-allowed;
    opacity: 0.5;
}

.quantity-stepper__btn i {
    font-size: 12px;
}

.quantity-stepper__input {
    width: 50px !important;
    min-width: 50px;
    text-align: center;
    border: none !important;
    border-radius: 0 !important;
    padding: var(--space-2) var(--space-1) !important;
    height: 36px;
    font-size: var(--font-size-sm);
    -moz-appearance: textfield;
}

.quantity-stepper__input::-webkit-outer-spin-button,
.quantity-stepper__input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.quantity-stepper__input:focus {
    outline: none;
    background: var(--color-surface-hover);
}

/* Stock item/location links - white text in dark mode */
a.stock-item-link,
a.stock-location-link,
.stock-item-link,
.stock-location-link {
    color: var(--color-text) !important;
    text-decoration: none !important;
    transition: color 0.15s ease;
}

a.stock-item-link:hover,
a.stock-location-link:hover,
.stock-item-link:hover,
.stock-location-link:hover {
    color: var(--color-primary) !important;
    text-decoration: underline !important;
}

/* Dark mode link visibility - force white text */
html[data-theme="dark"] a.stock-item-link,
html[data-theme="dark"] a.stock-location-link,
html[data-theme="dark"] .stock-item-link,
html[data-theme="dark"] .stock-location-link,
[data-theme="dark"] a.stock-item-link,
[data-theme="dark"] a.stock-location-link {
    color: #ffffff !important;
}

html[data-theme="dark"] a.stock-item-link:hover,
html[data-theme="dark"] a.stock-location-link:hover,
[data-theme="dark"] a.stock-item-link:hover,
[data-theme="dark"] a.stock-location-link:hover {
    color: #60a5fa !important;
}

/* Dark mode stepper input background */
html[data-theme="dark"] .quantity-stepper__input,
html[data-theme="dark"] input.quantity-stepper__input,
[data-theme="dark"] .quantity-stepper__input {
    background: #1e293b !important;
    color: #ffffff !important;
}

/* Mobile adjustments for stepper */
@media (max-width: 576px) {
    .quantity-stepper {
        width: 100%;
    }
    
    .quantity-stepper__btn {
        width: 48px;
        height: 44px;
    }
    
    .quantity-stepper__input {
        flex: 1;
        width: auto !important;
        height: 44px;
    }
    
    .table-col-quantity {
        width: auto;
        min-width: 120px;
    }
}

.input-qty {
    width: 120px;
}

/* ==========================================================================
   Stock Modal Responsive
   ========================================================================== */

/* Desktop: button wrapper displays as row */
.stock-modal-actions {
    display: flex;
    gap: var(--space-3);
    align-items: center;
}

/* Stock modal - hide mobile badge on desktop */
.stock-mobile-badge {
    display: none;
}

@media (max-width: 768px) {
    /* Compact modal on mobile */
    .economy-modal-container {
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
        border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0 !important;
        max-height: 90vh !important;
    }
    
    .economy-modal-header {
        padding: var(--space-3) var(--space-4) !important;
    }
    
    .economy-modal-header .modal-header-icon {
        width: 36px !important;
        height: 36px !important;
        font-size: 1rem !important;
    }
    
    .economy-modal-header .modal-title {
        font-size: var(--font-size-base) !important;
    }
    
    .economy-modal-header .modal-subtitle {
        font-size: var(--font-size-xs) !important;
    }
    
    .economy-modal-body {
        padding: var(--space-3) !important;
        max-height: 55vh !important;
    }
    
    /* Show mobile stock badge, hide desktop stock column */
    .stock-mobile-badge {
        display: block;
        margin-top: var(--space-1);
    }
    
    .stock-desktop-cell {
        display: none !important;
    }
    
    /* Card-based mobile layout for stock items */
    #stock-items-table {
        display: block;
    }
    
    #stock-items-table thead {
        display: none !important;
    }
    
    #stock-items-table tbody {
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
    }
    
    #stock-items-table .stock-item-row {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        padding: var(--space-3);
        border: 1px solid var(--color-border);
        border-radius: var(--border-radius);
        background: var(--color-surface);
        gap: var(--space-2);
    }
    
    #stock-items-table .stock-item-row.table-active {
        border-color: var(--color-primary);
        background: var(--color-primary-bg);
    }
    
    /* Item name cell - full width */
    #stock-items-table .stock-item-name-cell {
        width: 100%;
        padding: 0 !important;
        border: none !important;
    }
    
    /* Hide location column on mobile (now 2nd column after stock removal) */
    #stock-items-table td:nth-child(2) {
        display: none !important;
    }
    
    /* Quantity stepper - full width below item info */
    #stock-items-table .table-col-quantity {
        width: 100%;
        padding: var(--space-2) 0 0 0 !important;
        border: none !important;
    }
    
    /* Make stepper span full width and horizontal */
    #stock-items-table .quantity-stepper {
        display: flex !important;
        flex-direction: row !important;
        width: 100%;
        justify-content: space-between;
    }
    
    #stock-items-table .quantity-stepper__btn {
        width: 56px;
        height: 48px;
        flex-shrink: 0;
    }
    
    #stock-items-table .quantity-stepper__input {
        flex: 1;
        width: auto !important;
        min-width: 0 !important;
        height: 48px;
        font-size: var(--font-size-lg);
    }
    
    /* Footer layout - stack vertically */
    .stock-modal-footer {
        padding: var(--space-3) var(--space-4) !important;
        flex-direction: column !important;
        gap: var(--space-3) !important;
    }
    
    /* Selected count on top */
    .stock-modal-footer > div:first-child {
        text-align: center !important;
    }
    
    /* Button wrapper - stack vertically with Allocate on top */
    .stock-modal-actions {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: var(--space-2) !important;
    }
    
    .stock-modal-actions .ds-btn {
        width: 100% !important;
        min-height: 48px !important;
    }
    
    /* Cancel button becomes ghost style on mobile */
    .stock-modal-actions .ds-btn--secondary {
        background: transparent !important;
        border: none !important;
        color: var(--color-text-secondary) !important;
        text-decoration: underline !important;
        min-height: 40px !important;
    }
    
    .stock-modal-actions .ds-btn--secondary:hover {
        color: var(--color-text-primary) !important;
    }
}

/* ==========================================================================
   Mobile Card Styles
   ========================================================================== */

.mobile-card-padding {
    padding: var(--space-3);
}

/* ==========================================================================
   Stock Allocation Mobile Card View
   ========================================================================== */

/* Desktop: show table, hide cards */
.stock-desktop-view {
    display: block;
}

.stock-mobile-view {
    display: none;
}

/* Mobile: hide table, show cards */
@media (max-width: 768px) {
    .stock-desktop-view {
        display: none !important;
    }
    
    .stock-mobile-view {
        display: block !important;
    }
}

/* Stock item cards container */
.stock-items-cards {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-2) 0;
}

/* ==========================================================================
   Stock Item Card - Mobile One-Row Layout
   Structure: [Info Column] [Stepper Column]
   ========================================================================== */

/* Card container - flex row for one-line layout */
.stock-item-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    padding: var(--space-3);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.stock-item-card--selected {
    border-color: var(--color-primary);
    background: var(--color-primary-bg);
    box-shadow: 0 0 0 2px var(--color-primary-bg);
}

/* Left column: item info - takes remaining space, truncates */
.stock-item-card__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Item name - single line with ellipsis */
.stock-item-card__name {
    font-weight: 600;
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Secondary info row: SKU and stock badge inline */
.stock-item-card__meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.stock-item-card__sku {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    white-space: nowrap;
}

/* Stock badge - inline pill */
.stock-item-card__stock {
    display: inline-flex;
    align-items: center;
    padding: 1px var(--space-2);
    background: var(--color-success-bg);
    color: var(--color-success);
    font-weight: 600;
    font-size: var(--font-size-xs);
    border-radius: var(--border-radius-pill, 9999px);
    white-space: nowrap;
    flex-shrink: 0;
}

.stock-item-card__stock--low {
    background: var(--color-warning-bg);
    color: var(--color-warning);
}

.stock-item-card__stock--empty {
    background: var(--color-danger-bg);
    color: var(--color-danger);
}

/* Right column: stepper - fixed width, inline-flex */
.stock-item-card__stepper {
    display: inline-flex;
    flex-direction: row;
    align-items: stretch;
    background: var(--color-surface-secondary);
    border-radius: var(--border-radius-md);
    overflow: hidden;
    border: 1px solid var(--color-border);
    flex-shrink: 0;
}

/* Touch-friendly stepper buttons */
.stock-item-card__stepper-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    background: var(--color-gray-100);
    color: var(--color-text-primary);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
    flex-shrink: 0;
    font-size: var(--font-size-base);
}

.stock-item-card__stepper-btn:first-child {
    border-right: 1px solid var(--color-border);
}

.stock-item-card__stepper-btn:last-child {
    border-left: 1px solid var(--color-border);
}

.stock-item-card__stepper-btn:hover:not(:disabled) {
    background: var(--color-gray-200);
}

.stock-item-card__stepper-btn:active:not(:disabled) {
    background: var(--color-primary);
    color: var(--color-surface);
}

.stock-item-card__stepper-btn:disabled {
    color: var(--color-text-tertiary);
    cursor: not-allowed;
    opacity: 0.4;
}

.stock-item-card__stepper-btn i {
    font-size: 16px;
    font-weight: 600;
}

/* Quantity input - compact */
.stock-item-card__stepper-input {
    width: 44px;
    height: 40px;
    text-align: center;
    border: none;
    background: var(--color-surface);
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-text-primary);
    -moz-appearance: textfield;
}

.stock-item-card__stepper-input::-webkit-outer-spin-button,
.stock-item-card__stepper-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.stock-item-card__stepper-input:focus {
    outline: none;
    background: var(--color-primary-bg);
}

.stock-item-card__stepper-input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ==========================================================================
   Shimmer Variations
   ========================================================================== */

.shimmer-line--md {
    width: 100px;
    height: var(--space-4);
}

/* ==========================================================================
   Status Badge Styles (Card Views)
   ========================================================================== */

.badge-status-not-started {
    background-color: var(--color-gray-bg, rgba(107, 114, 128, 0.125));
    color: var(--color-gray-600, #6b7280);
    border: 1px solid var(--color-gray-600, #6b7280);
}

.badge-status-in-progress {
    background-color: var(--color-primary-bg, rgba(59, 130, 246, 0.125));
    color: var(--color-primary, #3b82f6);
    border: 1px solid var(--color-primary, #3b82f6);
}

.badge-status-completed {
    background-color: var(--color-success-bg, rgba(16, 185, 129, 0.125));
    color: var(--color-success, #10b981);
    border: 1px solid var(--color-success, #10b981);
}

.badge-status-on-hold {
    background-color: var(--color-warning-bg, rgba(245, 158, 11, 0.125));
    color: var(--color-warning, #f59e0b);
    border: 1px solid var(--color-warning, #f59e0b);
}

.badge-status-to-do {
    background-color: var(--color-gray-bg, rgba(107, 114, 128, 0.125));
    color: var(--color-gray-600, #6b7280);
    border: 1px solid var(--color-gray-600, #6b7280);
}

.badge-status-review {
    background-color: var(--color-warning-bg, rgba(245, 158, 11, 0.125));
    color: var(--color-warning, #f59e0b);
    border: 1px solid var(--color-warning, #f59e0b);
}

.badge-status-done {
    background-color: var(--color-success-bg, rgba(16, 185, 129, 0.125));
    color: var(--color-success, #10b981);
    border: 1px solid var(--color-success, #10b981);
}

/* ==========================================================================
   Priority Badge Styles
   ========================================================================== */

.badge-priority-low {
    background-color: var(--color-gray-bg, rgba(107, 114, 128, 0.125));
    color: var(--color-gray-600, #6b7280);
    border: 1px solid var(--color-gray-600, #6b7280);
    font-size: var(--font-size-xs);
}

.badge-priority-medium {
    background-color: var(--color-primary-bg, rgba(59, 130, 246, 0.125));
    color: var(--color-primary, #3b82f6);
    border: 1px solid var(--color-primary, #3b82f6);
    font-size: var(--font-size-xs);
}

.badge-priority-high {
    background-color: var(--color-warning-bg, rgba(245, 158, 11, 0.125));
    color: var(--color-warning, #f59e0b);
    border: 1px solid var(--color-warning, #f59e0b);
    font-size: var(--font-size-xs);
}

.badge-priority-critical {
    background-color: var(--color-danger-bg, rgba(239, 68, 68, 0.125));
    color: var(--color-danger, #ef4444);
    border: 1px solid var(--color-danger, #ef4444);
    font-size: var(--font-size-xs);
}

/* ==========================================================================
   Payment Status Badges
   ========================================================================== */

.badge-payment-received {
    background-color: var(--color-success-bg, rgba(16, 185, 129, 0.125));
    color: var(--color-success, #10b981);
    border: 1px solid var(--color-success, #10b981);
}

.badge-payment-pending {
    background-color: var(--color-warning-bg, rgba(245, 158, 11, 0.125));
    color: var(--color-warning, #f59e0b);
    border: 1px solid var(--color-warning, #f59e0b);
}

/* ==========================================================================
   Milestone Badge
   ========================================================================== */

.badge-milestone {
    background-color: var(--color-purple-bg, rgba(139, 92, 246, 0.125));
    color: var(--color-purple, #8b5cf6);
    border: 1px solid var(--color-purple, #8b5cf6);
}

/* ==========================================================================
   Icon Styles
   ========================================================================== */

.icon-text-secondary {
    color: var(--color-text-secondary);
}

/* ==========================================================================
   Collapsible/Interactive Elements
   ========================================================================== */

.collapsible-summary {
    cursor: pointer;
    color: var(--color-primary);
}

.cursor-pointer {
    cursor: pointer;
}

/* ==========================================================================
   Section Header Styles
   ========================================================================== */

.section-header-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-4);
}

/* ==========================================================================
   Table Column Width Classes
   ========================================================================== */

.table-col-actions {
    width: 120px;
}

.table-col-checkbox {
    width: 40px;
}

.table-col-size {
    width: 100px;
}

.table-col-date-sm {
    width: 120px;
}

/* ==========================================================================
   Empty State Styles
   ========================================================================== */

.empty-state-icon-xl {
    font-size: 64px;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-4);
}

/* ==========================================================================
   Layout Utility Classes
   ========================================================================== */

.overflow-visible {
    overflow: visible;
}

.list-indent {
    padding-left: 1.5rem;
}

.flex-column {
    flex-direction: column;
}

.flex-wrap-gap {
    flex-wrap: wrap;
    gap: var(--space-4);
}

.flex-wrap {
    flex-wrap: wrap;
}

/* ==========================================================================
   Customer Search Dropdown Styles (_add_project_modal.html, _customer_search_scripts.html)
   ========================================================================== */

.customer-search-dropdown {
    position: absolute;
    width: 100%;
    background: var(--color-surface);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg);
    max-height: 300px;
    overflow-y: auto;
    margin-top: var(--space-1);
}

.customer-result-item {
    padding: var(--space-3);
    cursor: pointer;
    border-bottom: 1px solid var(--color-border);
    transition: background 0.2s;
}

.customer-result-item:hover {
    background: var(--color-surface-secondary);
}

.customer-result-name {
    font-weight: 600;
}

.customer-result-info {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.customer-search-empty {
    padding: var(--space-4);
    text-align: center;
    color: var(--color-text-secondary);
}

.customer-search-empty-icon {
    font-size: 2rem;
    margin-bottom: var(--space-2);
}

/* ==========================================================================
   Tracked Hours Breakdown Tooltip Styles (_project_modal_scripts.html)
   ========================================================================== */

.hours-breakdown-header {
    border-bottom: 1px solid var(--color-border);
}

.hours-breakdown-row {
    border-bottom: 1px solid var(--color-border-light);
}

.hours-breakdown-value {
    white-space: nowrap;
}

/* ==========================================================================
   Project Stats Cell Styles (_project_stats_cell.html)
   ========================================================================== */

.tracked-hours-display {
    color: var(--tracked-hours-color, var(--color-primary));
    line-height: 1;
}

/* Dark mode: Override tracked hours color variable */
[data-theme="dark"] {
    --tracked-hours-color: #f1f5f9;
}

html[data-theme="dark"] {
    --tracked-hours-color: #f1f5f9;
}

/* ==========================================================================
   Work Log Modal Enhanced Styles (_modal_work_logs.html)
   ========================================================================== */

.work-log-modal-container {
    max-width: 720px !important;
}

#work-logs-modal .modal-header {
    background: var(--color-surface);
    flex-shrink: 0;
}

#work-logs-modal .modal-body {
    flex: 1 1 auto;
    overflow-y: auto;
}

#work-logs-modal .modal-footer {
    background: var(--color-surface-secondary);
    flex-shrink: 0;
}

.modal-header-content {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.modal-header-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--color-info) 0%, var(--color-blue-dark) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-inverse);
    font-size: 1.25rem;
    flex-shrink: 0;
}

.work-log-section {
    background: var(--color-surface-secondary);
    border-radius: 12px;
    padding: 1.25rem;
    margin-bottom: 1rem;
}

.work-log-section:last-child {
    margin-bottom: 0;
}

.work-log-section-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 1rem;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.work-log-section-header i {
    color: var(--color-info);
    font-size: 1rem;
}

.work-log-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

@media (max-width: 576px) {
    .work-log-grid {
        grid-template-columns: 1fr;
    }
}

.work-log-mode-toggle {
    display: flex;
    gap: 0.5rem;
    background: var(--color-card-bg);
    padding: 0.25rem;
    border-radius: 10px;
    border: 1px solid var(--color-border);
}

.mode-btn {
    flex: 1;
    padding: 0.75rem 1rem;
    border: none;
    background: transparent;
    border-radius: 8px;
    font-weight: 500;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.mode-btn:hover {
    background: var(--color-surface-secondary);
    color: var(--color-gray-700);
}

.mode-btn.active {
    background: var(--color-info);
    color: var(--color-text-inverse);
    box-shadow: 0 2px 8px var(--color-focus-ring);
}

.calculated-hours-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    background: linear-gradient(135deg, var(--color-info-bg) 0%, var(--color-indigo-bg) 100%);
    border: 2px solid var(--color-info-border);
    border-radius: 12px;
    padding: 1rem;
    margin-top: 1rem;
}

.calculated-hours-box i {
    color: var(--color-info);
    font-size: 1.25rem;
}

.calculated-hours-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-info);
}

.ds-form-help {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    margin-top: 0.375rem;
}

.footer-summary {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.summary-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.summary-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
}

.summary-icon.hours {
    background: var(--color-info-bg);
    color: var(--color-info);
}

.summary-icon.type {
    background: var(--color-primary-bg);
    color: var(--color-primary);
}

.summary-label {
    font-size: 0.6875rem;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

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

@media (max-width: 768px) {
    .work-log-modal-footer {
        flex-direction: column;
        gap: 1rem;
    }
    
    .footer-summary {
        width: 100%;
        justify-content: center;
    }
    
    .footer-actions {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .footer-actions .ds-btn {
        width: 100%;
    }
}

@media (max-width: 576px) {
    .work-log-modal-container {
        max-width: 100% !important;
        margin: 0.5rem !important;
    }
    
    .work-log-section {
        padding: 1rem;
    }
    
    .modal-header-icon {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
    
    .summary-item {
        flex: 1 1 45%;
    }
    
    .footer-left {
        order: 2;
    }
    
    .footer-right {
        order: 1;
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .footer-right .ds-btn {
        width: 100%;
        justify-content: center;
    }
}

.work-log-section .ds-form-input,
.work-log-section .ds-form-select,
.work-log-section .ds-form-textarea {
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.work-log-section .ds-form-input:focus,
.work-log-section .ds-form-select:focus,
.work-log-section .ds-form-textarea:focus {
    border-color: var(--color-info);
    box-shadow: 0 0 0 3px var(--color-focus-ring);
    outline: none;
}

.work-log-section .ds-form-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-gray-600);
    text-transform: uppercase;
    letter-spacing: 0.025em;
    margin-bottom: 0.5rem;
}

.work-log-section .required {
    color: var(--color-danger);
    margin-left: 0.125rem;
}

/* ==========================================================================
   Stock Modal - Mobile Responsive Styles
   ========================================================================== */

@media (max-width: 576px) {
    /* Stack footer buttons vertically */
    #stock-logs-modal .modal-footer,
    #stock-logs-modal .economy-modal-footer {
        flex-direction: column !important;
        gap: var(--space-3) !important;
        padding: var(--space-3) !important;
    }
    
    #stock-logs-modal .modal-footer > div,
    #stock-logs-modal .economy-modal-footer > div {
        width: 100% !important;
    }
    
    #stock-logs-modal .modal-footer .ds-flex,
    #stock-logs-modal .economy-modal-footer .ds-flex {
        flex-direction: column-reverse !important;
        gap: var(--space-2) !important;
        width: 100% !important;
    }
    
    #stock-logs-modal .modal-footer .ds-btn,
    #stock-logs-modal .economy-modal-footer .ds-btn {
        width: 100% !important;
        justify-content: center !important;
    }
    
    /* Primary button on top (visually), Cancel as link below */
    #stock-logs-modal .ds-btn--primary {
        order: -1 !important;
        min-height: 48px !important;
    }
    
    #stock-logs-modal .ds-btn--secondary {
        background: transparent !important;
        border: none !important;
        color: var(--color-text-secondary) !important;
        font-weight: 500 !important;
        padding: var(--space-2) !important;
        min-height: 40px !important;
    }
    
    /* Hide location column on mobile when single location */
    #stock-logs-modal.single-location .table-col-location,
    #stock-logs-modal.single-location td:nth-child(3) {
        display: none !important;
    }
    
    /* Compact table layout */
    #stock-logs-modal .table th,
    #stock-logs-modal .table td {
        padding: var(--space-2) var(--space-1) !important;
        font-size: var(--font-size-sm) !important;
    }
    
    /* Smaller inputs */
    #stock-logs-modal .ds-form-input {
        font-size: var(--font-size-sm) !important;
        padding: var(--space-2) !important;
    }
    
    #stock-logs-modal input[type="number"] {
        width: 60px !important;
        text-align: center !important;
    }
    
    /* Compact modal body */
    #stock-logs-modal .modal-body,
    #stock-logs-modal .economy-modal-body {
        padding: var(--space-3) !important;
    }
    
    /* Compact header */
    #stock-logs-modal .modal-header,
    #stock-logs-modal .economy-modal-header {
        padding: var(--space-3) !important;
    }
}


/* ========== pages/project-details-enhanced.css ========== */
/**
 * Project Details - Enhanced Visual Design
 * bIDMIO
 * 
 * Modern, polished styling for the project details tab with:
 * - Elevated section cards with shadows
 * - Section icons with color coding
 * - Status color indicators
 * - Improved input styling
 * - Schedule grid layout
 * - Priority visual indicators
 */

/* ========================================
   ENHANCED MAIN CARD
   ======================================== */

.project-main-card--enhanced {
    background: var(--color-surface);
    border: none;
    border-radius: var(--border-radius-lg);
    padding: var(--space-3);
    margin-bottom: var(--space-4);
    box-shadow: var(--shadow-xs);
    position: relative;
}

.project-main-card--enhanced::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--space-1);
    border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
    background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
    opacity: 0;
    transition: var(--transition-slow);
}

.project-main-card--enhanced.status--planning::before {
    opacity: 1;
    background: linear-gradient(90deg, var(--color-warning), var(--color-warning-light));
}

.project-main-card--enhanced.status--active::before {
    opacity: 1;
    background: linear-gradient(90deg, var(--color-success), var(--color-success-light));
}

.project-main-card--enhanced.status--completed::before {
    opacity: 1;
    background: linear-gradient(90deg, var(--color-info), var(--color-info-light));
}

.project-main-card--enhanced.status--on-hold::before {
    opacity: 1;
    background: linear-gradient(90deg, var(--color-purple), var(--color-purple-light));
}

.project-main-card--enhanced.status--cancelled::before {
    opacity: 1;
    background: linear-gradient(90deg, var(--color-danger), var(--color-danger-light));
}

/* ========================================
   ENHANCED SECTIONS
   Override projects-core-layout.css specificity
   ======================================== */

#project-details .project-section.project-section--enhanced {
    background: var(--color-surface) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--border-radius-lg) !important;
    padding: var(--space-3) !important;
    margin-bottom: var(--space-3) !important;
    transition: var(--transition-base);
    box-shadow: var(--shadow-xs) !important;
}

#project-details .project-section.project-section--enhanced:hover {
    border-color: var(--color-border-hover) !important;
    box-shadow: var(--shadow-sm) !important;
}

#project-details .project-section.project-section--enhanced:last-of-type {
    margin-bottom: 0 !important;
}

/* Section Header with Icon */
.project-section__header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--color-border-light);
}

.project-section__icon {
    width: calc(var(--space-6) + var(--space-1));
    height: calc(var(--space-6) + var(--space-1));
    border-radius: var(--border-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-sm);
    flex-shrink: 0;
}

.project-section__icon i {
    color: var(--color-text-inverse) !important;
}

.project-section__icon--overview {
    background: linear-gradient(135deg, var(--color-indigo), var(--color-purple)) !important;
}

.project-section__icon--info {
    background: linear-gradient(135deg, var(--color-info), var(--color-info-light)) !important;
}

.project-section__icon--schedule {
    background: linear-gradient(135deg, var(--color-warning), var(--color-warning-light)) !important;
}

.project-section__icon--team {
    background: linear-gradient(135deg, var(--color-success), var(--color-success-light)) !important;
}

.project-section__icon--financial {
    background: linear-gradient(135deg, var(--color-pink), var(--color-pink-light)) !important;
}

.project-section__title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    color: var(--color-text-primary);
    letter-spacing: var(--letter-spacing-wider);
    margin: 0;
    border: none;
    padding: 0;
}

/* ========================================
   SCHEDULE DATES ROW (Side-by-Side)
   ======================================== */

.schedule-dates-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

@media (max-width: 768px) {
    .schedule-dates-row {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }
}

.schedule-date-field {
    background: var(--color-surface-secondary);
    border-radius: var(--border-radius);
    padding: var(--space-3);
    border: 1px solid var(--color-border-light);
    border-left: 3px solid var(--color-border);
}

.schedule-date-field--start {
    border-left-color: var(--color-success);
}

.schedule-date-field--end {
    border-left-color: var(--color-danger);
}

.schedule-date-label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wider);
    margin-bottom: var(--space-2);
}

.schedule-date-field--start .schedule-date-label i {
    color: var(--color-success);
}

.schedule-date-field--end .schedule-date-label i {
    color: var(--color-danger);
}

/* Hide schedule picker's own label since we have custom labels */
.schedule-date-field .schedule-picker-label {
    display: none !important;
}

/* Schedule notes below dates */
.schedule-notes-section {
    background: var(--color-surface-secondary);
    border-radius: var(--border-radius);
    padding: var(--space-3);
    border: 1px solid var(--color-border-light);
}

.schedule-notes-section .field-sublabel {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wider);
    margin-bottom: var(--space-2);
}

.schedule-notes-section .field-sublabel i {
    color: var(--color-text-tertiary);
}

.schedule-notes-section .ds-form-textarea {
    width: 100%;
    resize: vertical;
    min-height: 60px;
}

/* ========================================
   ENHANCED INPUT STYLING
   ======================================== */

.project-section--enhanced input,
.project-section--enhanced select,
.project-section--enhanced textarea {
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: var(--space-3) var(--space-4);
    font-size: var(--font-size-base);
    background: var(--color-surface);
    transition: var(--transition-base);
    width: 100%;
    min-height: 44px;
}

.project-section--enhanced input:focus,
.project-section--enhanced select:focus,
.project-section--enhanced textarea:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-focus-ring);
    outline: none;
}

.project-section--enhanced input:hover:not(:focus):not(:disabled):not([readonly]),
.project-section--enhanced select:hover:not(:focus):not(:disabled),
.project-section--enhanced textarea:hover:not(:focus):not(:disabled) {
    border-color: var(--color-border-hover);
}

.project-section--enhanced textarea {
    resize: vertical;
    min-height: calc(var(--space-12) + var(--space-12) + var(--space-1));
}

/* Readonly inputs */
.project-section--enhanced input.input--readonly,
.project-section--enhanced input[readonly] {
    background: var(--color-surface-tertiary);
    color: var(--color-text-secondary);
    cursor: default;
    border-style: dashed;
}

/* Title input - slightly larger */
.project-section--enhanced input.input--title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
}

/* ========================================
   INPUT WITH ACTION BUTTON
   ======================================== */

.input-with-action {
    display: flex;
    gap: var(--space-2);
    align-items: stretch;
}

.input-with-action select {
    flex: 1;
}

.input-action-btn {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--color-surface-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    text-decoration: none;
    transition: var(--transition-base);
    white-space: nowrap;
}

.input-action-btn:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-text-inverse);
}

/* ========================================
   CUSTOMER FIELD ROW
   ======================================== */

.customer-field-row {
    display: flex;
    align-items: stretch;
    gap: var(--space-2);
}

.customer-field-row .customer-select {
    flex: 1;
    min-width: 0;
}

.customer-view-btn {
    display: inline-flex !important;
    align-items: center;
    gap: var(--space-1);
    white-space: nowrap;
    min-height: 44px;
    flex-shrink: 0;
}

.customer-view-btn i {
    font-size: var(--font-size-sm);
}

@media (max-width: 768px) {
    .customer-view-btn .btn-text {
        display: none;
    }
    
    .customer-view-btn {
        min-width: 44px;
        padding: var(--space-2) !important;
        justify-content: center;
    }
}

/* ========================================
   INPUT WITH ICON (Address copy button)
   ======================================== */

.input-with-icon {
    position: relative;
}

.input-with-icon input {
    padding-right: 44px;
}

.input-icon-btn {
    position: absolute;
    right: var(--space-2);
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--color-text-tertiary);
    cursor: pointer;
    padding: var(--space-2);
    border-radius: var(--border-radius-sm);
    transition: var(--transition-base);
    display: flex;
    align-items: center;
    justify-content: center;
}

.input-icon-btn:hover {
    background: var(--color-surface-secondary);
    color: var(--color-primary);
}

/* ========================================
   INPUT WITH PREFIX/SUFFIX (Currency, Hours)
   ======================================== */

.input-with-prefix,
.input-with-suffix {
    position: relative;
    display: flex;
    align-items: stretch;
}

.input-prefix,
.input-suffix {
    display: flex;
    align-items: center;
    padding: 0 var(--space-3);
    background: var(--color-surface-tertiary);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    border: 1px solid var(--color-border);
    white-space: nowrap;
}

.input-prefix {
    border-radius: var(--border-radius) 0 0 var(--border-radius);
    border-right: none;
}

.input-suffix {
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
    border-left: none;
}

.input-with-prefix input {
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
    flex: 1;
}

.input-with-suffix input {
    border-radius: var(--border-radius) 0 0 var(--border-radius);
    flex: 1;
}

/* ========================================
   INFO TOOLTIP ICON
   ======================================== */

.info-tooltip {
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
    cursor: help;
    margin-left: var(--space-1);
    opacity: 0.6;
    transition: var(--transition-base);
}

.info-tooltip:hover {
    opacity: 1;
    color: var(--color-primary);
}

/* ========================================
   PRIORITY SELECT STYLING
   ======================================== */

#priority-select.priority--low {
    border-left: 3px solid var(--color-success);
}

#priority-select.priority--normal {
    border-left: 3px solid var(--color-info);
}

#priority-select.priority--medium {
    border-left: 3px solid var(--color-warning);
}

#priority-select.priority--high {
    border-left: 3px solid var(--color-orange);
}

#priority-select.priority--critical {
    border-left: 3px solid var(--color-danger);
    background: var(--color-danger-bg);
}

/* ========================================
   ENHANCED FORM ACTIONS
   ======================================== */

.project-section--enhanced ~ .project-form-actions {
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border-light);
    text-align: center;
}

.project-form-actions .ds-btn--lg {
    padding: var(--space-3) var(--space-6);
    font-size: var(--font-size-base);
    min-height: var(--space-12);
}

/* ========================================
   MOBILE RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
    /* Enhanced card styling on mobile - use global padding from mobile-tablet.css */
    .project-main-card--enhanced {
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
    }
    
    /* Minimal section padding on mobile */
    #project-details .project-section.project-section--enhanced {
        padding: var(--space-3) !important;
        border-radius: var(--border-radius) !important;
        margin-bottom: var(--space-2) !important;
    }
    
    /* Remove form grid internal padding - fields use full width */
    .project-section--enhanced .project-form-grid {
        padding: 0 !important;
        gap: var(--space-3) !important;
    }
    
    /* Full width inputs */
    .project-section--enhanced input,
    .project-section--enhanced select,
    .project-section--enhanced textarea {
        width: 100% !important;
        padding: var(--space-2) var(--space-3) !important;
    }
    
    /* Compact section headers */
    .project-section__header {
        gap: var(--space-2);
        margin-bottom: var(--space-3);
        padding-bottom: var(--space-2);
    }
    
    .project-section__icon {
        width: var(--space-6);
        height: var(--space-6);
        font-size: var(--font-size-xs);
    }
    
    .project-section__title {
        font-size: var(--font-size-sm);
    }
    
    /* Compact schedule date fields on mobile */
    .schedule-dates-row {
        gap: var(--space-2) !important;
        margin-bottom: var(--space-2) !important;
    }
    
    .schedule-date-field {
        padding: var(--space-2) !important;
    }
    
    .schedule-date-label {
        font-size: var(--font-size-xs);
        margin-bottom: var(--space-1);
    }
    
    .schedule-notes-section {
        padding: var(--space-2) !important;
    }
    
    .schedule-notes-section .field-sublabel {
        font-size: var(--font-size-xs);
    }
    
    /* Hide action button text on mobile */
    .input-action-btn span {
        display: none;
    }
    
    .input-action-btn {
        padding: var(--space-2);
        min-width: 44px;
        min-height: 44px;
    }
    
    /* Input prefix/suffix compact on mobile */
    .input-prefix,
    .input-suffix {
        padding: 0 var(--space-2);
        font-size: var(--font-size-xs);
    }
}

/* ========================================
   DARK MODE ADJUSTMENTS
   ======================================== */

@media (prefers-color-scheme: dark) {
    .project-section--enhanced {
        background: var(--color-surface);
    }
    
    .schedule-date-field,
    .schedule-notes-section {
        background: var(--color-surface-tertiary);
    }
    
    .project-section__header {
        border-bottom-color: var(--color-border);
    }
}

/* Dark mode class-based (if using toggle) */
[data-theme="dark"] .project-section--enhanced {
    background: var(--color-surface);
}

[data-theme="dark"] .schedule-date-field,
[data-theme="dark"] .schedule-notes-section {
    background: var(--color-surface-tertiary);
}

[data-theme="dark"] .project-section__header {
    border-bottom-color: var(--color-border);
}


/* ========== pages/finance-mobile.css ========== */
/* ========================================
   FINANCE PAGES - MOBILE RESPONSIVE STYLES
   Consistent mobile patterns for all finance sections
   ======================================== */

/* ========================================
   PAGE HEADER - MOBILE STACKING
   Applies to: Dashboard, Invoices, Expenses, etc.
   ======================================== */
@media (max-width: 576px) {
    .ds-page-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: var(--space-4);
        padding: var(--space-4) !important;
        text-align: center;
    }
    
    .ds-page-header__content {
        text-align: center;
    }
    
    .ds-page-header__title {
        font-size: var(--font-size-2xl) !important;
        line-height: 1.2;
    }
    
    .ds-page-header__subtitle {
        font-size: var(--font-size-sm);
        margin-top: var(--space-1);
    }
    
    .ds-page-header__actions {
        flex-direction: column;
        width: 100%;
        gap: var(--space-2);
    }
    
    .ds-page-header__actions .ds-btn {
        width: 100%;
        justify-content: center;
        min-height: 44px;
    }
    
    .ds-page-header__actions .ds-flex {
        flex-direction: column;
        width: 100%;
        gap: var(--space-2);
    }
    
    .ds-page-header__actions .ds-flex .ds-btn {
        width: 100%;
    }
}

/* ========================================
   FINANCE NAVIGATION TABS - MOBILE
   ======================================== */
@media (max-width: 576px) {
    .ds-project-tabs-container {
        margin: 0 calc(var(--space-4) * -1);
        width: calc(100% + var(--space-8));
    }
    
    .ds-project-tabs-mobile {
        padding: var(--space-2) var(--space-3) !important;
        gap: var(--space-1-5) !important;
    }
    
    .ds-project-tab-mobile {
        flex: 0 0 auto;
        /* Mobile tab dimensions - layout-specific for navigation grid */
        min-width: calc(var(--space-12) + var(--space-3));
        min-height: calc(var(--space-12) + var(--space-2));
        padding: var(--space-1-5) var(--space-2) !important;
        /* Mobile navigation tabs use smaller text for space efficiency */
        font-size: var(--font-size-xs) !important;
        border-radius: var(--border-radius);
    }
    
    .ds-project-tab-mobile i {
        font-size: var(--font-size-md);
        margin-bottom: var(--space-0-5);
    }
    
    .ds-project-tab-mobile span {
        display: block;
        line-height: 1.1;
        white-space: nowrap;
    }
}

/* ========================================
   FILTER FORMS - MOBILE STACKING
   ======================================== */
@media (max-width: 576px) {
    .ds-flex.ds-gap-2.ds-items-center {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: var(--space-2) !important;
    }
    
    .ds-flex.ds-gap-2.ds-items-center > * {
        width: 100% !important;
    }
    
    .ds-flex.ds-gap-2.ds-items-center .form-select,
    .ds-flex.ds-gap-2.ds-items-center select {
        width: 100% !important;
        min-height: 44px;
        /* 16px prevents iOS zoom on focus */
        font-size: var(--font-size-base);
    }
    
    .ds-flex.ds-gap-2.ds-items-center .ds-btn {
        width: 100%;
        min-height: 44px;
        justify-content: center;
    }
    
    .ds-max-w-md {
        max-width: 100%;
    }
}

/* ========================================
   SUMMARY CARDS GRID - MOBILE
   ======================================== */
@media (max-width: 576px) {
    .ds-grid.ds-grid--md-cols-2.ds-grid--xl-cols-4 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--space-3) !important;
    }
    
    .ds-grid.ds-grid--md-cols-2.ds-grid--xl-cols-4 .ds-card {
        padding: 0;
    }
    
    .ds-grid.ds-grid--md-cols-2.ds-grid--xl-cols-4 .ds-card__body {
        padding: var(--space-3) !important;
    }
    
    .ds-grid.ds-grid--md-cols-2.ds-grid--xl-cols-4 .ds-text-2xl {
        font-size: var(--font-size-xl) !important;
    }
    
    .ds-grid.ds-grid--md-cols-2.ds-grid--xl-cols-4 .ds-text-xs {
        /* Compact mobile cards use smaller text */
        font-size: var(--font-size-xs) !important;
        letter-spacing: 0.025em;
    }
    
    .ds-grid.ds-grid--md-cols-2.ds-grid--xl-cols-4 .ds-icon-2xl {
        font-size: var(--font-size-2xl) !important;
    }
}

/* ========================================
   QUICK LINKS GRID - MOBILE
   ======================================== */
@media (max-width: 576px) {
    .ds-grid.ds-grid--md-cols-4 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--space-2) !important;
    }
    
    .ds-grid.ds-grid--md-cols-4 .ds-btn--xl {
        padding: var(--space-3) var(--space-2) !important;
        font-size: var(--font-size-xs) !important;
        min-height: var(--height-bottom-nav);
    }
    
    .ds-grid.ds-grid--md-cols-4 .ds-btn--xl .ds-icon-2xl {
        font-size: var(--font-size-2xl) !important;
        margin-bottom: var(--space-1-5) !important;
    }
}

/* ========================================
   ACTIVITY CARDS GRID - MOBILE
   ======================================== */
@media (max-width: 576px) {
    .ds-grid.ds-grid--md-cols-2.ds-gap-4 {
        grid-template-columns: 1fr !important;
        gap: var(--space-4) !important;
    }
}

/* ========================================
   CARD HEADERS - MOBILE
   ======================================== */
@media (max-width: 576px) {
    .ds-card__header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: var(--space-2);
        padding: var(--space-3) var(--space-4) !important;
    }
    
    .ds-card__header .ds-card__title {
        text-align: center;
        font-size: var(--font-size-md);
    }
    
    .ds-card__header .ds-card__header-actions {
        display: flex;
        justify-content: center;
    }
    
    .ds-card__header .ds-card__header-actions .ds-btn {
        min-height: var(--space-9);
    }
}

/* ========================================
   TABLES - MOBILE HIDDEN (USE CARD VIEW)
   ======================================== */
@media (max-width: 576px) {
    .ds-table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .ds-table {
        font-size: var(--font-size-xs);
    }
    
    .ds-table th,
    .ds-table td {
        padding: var(--space-2) var(--space-1-5);
        white-space: nowrap;
    }
}

/* ========================================
   MOBILE CARDS - ENHANCED STYLING
   ======================================== */
@media (max-width: 576px) {
    .ds-mobile-card {
        padding: var(--space-3-5) var(--space-4) !important;
        border-radius: 0 !important;
        margin: 0;
        width: 100%;
        border-left: none;
        border-right: none;
        border-bottom: 1px solid var(--color-border);
        background: var(--color-surface);
    }
    
    .ds-mobile-card:last-child {
        border-bottom: none;
    }
    
    .ds-mobile-card__header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: var(--space-2);
        margin-bottom: var(--space-2);
    }
    
    .ds-mobile-card__title {
        font-size: var(--font-size-md);
        font-weight: 600;
        line-height: 1.3;
    }
    
    .ds-mobile-card__title a {
        color: var(--color-primary);
        text-decoration: none;
    }
    
    .ds-mobile-card__subtitle {
        font-size: var(--font-size-xs);
        color: var(--color-text-secondary);
        margin-top: var(--space-0-5);
    }
    
    .ds-mobile-card__info {
        display: flex;
        flex-direction: column;
        gap: var(--space-1);
        margin-bottom: var(--space-2-5);
        padding: var(--space-2) 0;
        border-top: none;
        background: var(--color-surface-secondary);
        margin-left: calc(var(--space-4) * -1);
        margin-right: calc(var(--space-4) * -1);
        padding-left: var(--space-4);
        padding-right: var(--space-4);
    }
    
    .ds-mobile-card__info-row {
        display: flex;
        align-items: center;
        font-size: var(--font-size-sm);
        color: var(--color-text-primary);
        gap: var(--space-2);
    }
    
    .ds-mobile-card__info-row i,
    .ds-mobile-card__icon {
        width: var(--space-4);
        color: var(--color-text-tertiary);
        font-size: var(--font-size-xs);
        flex-shrink: 0;
    }
    
    .ds-mobile-card__actions {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-2);
        padding-top: 0;
        border-top: none;
    }
    
    .ds-mobile-card__actions .ds-btn {
        min-height: var(--space-10);
        justify-content: center;
        font-size: var(--font-size-xs);
        padding: var(--space-1-5) var(--space-2);
        font-weight: 500;
        border-radius: var(--border-radius-sm);
    }
    
    .ds-mobile-card__actions .ds-btn i {
        margin-right: var(--space-1);
    }
}

/* ========================================
   PAGINATION - MOBILE
   ======================================== */
@media (max-width: 576px) {
    .ds-flex.ds-justify-center.ds-items-center.ds-p-3 {
        padding: var(--space-3) !important;
    }
    
    .ds-flex.ds-gap-2.ds-items-center.ds-flex-wrap .ds-btn--sm {
        padding: var(--space-2) var(--space-3);
        min-height: var(--space-10); /* 40px - compact button */
        font-size: var(--font-size-sm);
    }
    
    .ds-text-sm.ds-text-secondary {
        font-size: var(--font-size-xs);
        white-space: nowrap;
    }
}

/* ========================================
   EMPTY STATES - MOBILE
   ======================================== */
@media (max-width: 576px) {
    .ds-card__body[style*="padding: 4rem"] {
        padding: var(--space-8) var(--space-4) !important;
    }
    
    .ds-card__body[style*="padding: 4rem"] i[style*="font-size: 3.5rem"] {
        font-size: var(--font-size-4xl) !important;
    }
    
    .ds-card__body[style*="padding: 4rem"] h5 {
        font-size: var(--font-size-lg) !important;
    }
    
    .ds-card__body[style*="padding: 4rem"] p {
        font-size: var(--font-size-sm) !important;
    }
    
    .ds-card__body[style*="padding: 4rem"] .ds-btn {
        width: 100%;
        min-height: 44px;
    }
}

/* ========================================
   MODAL - MOBILE OPTIMIZATIONS
   ======================================== */
@media (max-width: 576px) {
    .modal-dialog.modal-lg {
        margin: var(--space-2);
        max-width: calc(100% - var(--space-4));
    }
    
    .modal-header {
        padding: var(--space-4) !important;
    }
    
    .modal-header h5 {
        font-size: var(--font-size-xl) !important;
    }
    
    .modal-body {
        padding: var(--space-4) !important;
        max-height: 60vh !important;
    }
    
    .modal-footer {
        padding: var(--space-4) !important;
        flex-direction: column;
        gap: var(--space-2);
    }
    
    .modal-footer .ds-btn {
        width: 100%;
        min-height: 44px;
        justify-content: center;
    }
}

/* ========================================
   ALERTS - MOBILE
   ======================================== */
@media (max-width: 576px) {
    .ds-alert {
        padding: var(--space-3) !important;
        font-size: var(--font-size-sm);
    }
    
    .ds-alert i {
        margin-right: var(--space-2);
    }
}

/* ========================================
   FORM INPUTS - 44PX TOUCH TARGETS
   ======================================== */
@media (max-width: 576px) {
    .ds-form-input,
    .ds-form-select,
    .form-select,
    .form-control {
        min-height: 44px !important;
        /* 16px prevents iOS zoom on focus */
        font-size: var(--font-size-base) !important;
    }
    
    .ds-form-group {
        margin-bottom: var(--space-4);
    }
    
    .ds-form-label {
        font-size: var(--font-size-sm);
        margin-bottom: var(--space-1-5);
    }
}

/* ========================================
   CONTENT PADDING - MOBILE
   ======================================== */
@media (max-width: 576px) {
    .ds-project-content {
        padding: var(--space-3) !important;
    }
    
    .ds-mb-4 {
        margin-bottom: var(--space-4) !important;
    }
    
    .ds-gap-4 {
        gap: var(--space-3) !important;
    }
}

/* ========================================
   INVOICES/EXPENSES LIST - MOBILE
   ======================================== */
@media (max-width: 576px) {
    .ds-card__body--no-padding {
        padding: 0 !important;
    }
    
    .ds-card__body--no-padding .ds-desktop-hidden {
        padding: 0;
    }
    
    .ds-card {
        border-radius: var(--border-radius);
        overflow: hidden;
    }
}

/* ========================================
   INVOICE FILTER - MOBILE HORIZONTAL
   ======================================== */
@media (max-width: 576px) {
    .ds-mb-4 > form.ds-flex.ds-gap-2.ds-items-center {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
    }
    
    .ds-mb-4 > form.ds-flex.ds-gap-2.ds-items-center .form-select {
        flex: 1;
        min-width: 0;
    }
    
    .ds-mb-4 > form.ds-flex.ds-gap-2.ds-items-center .ds-btn {
        flex: 0 0 auto;
        width: auto !important;
        padding: var(--space-2) var(--space-4);
    }
}

/* ========================================
   BADGES - MOBILE SIZING
   ======================================== */
@media (max-width: 576px) {
    .ds-badge {
        /* Compact badge text for mobile */
        font-size: var(--font-size-xs);
        padding: var(--space-1) var(--space-2);
        white-space: nowrap;
    }
}


/* ========== pages/stock-mobile.css ========== */
/* ==============================================
   STOCK PAGE - MOBILE ENHANCEMENTS
   Native app-like feel with edge-to-edge sections
   ============================================== */

@media (max-width: 768px) {
    /* ==============================================
       PAGE CONTAINER - Reset padding
       ============================================== */
    .main-content:has(.stock-stats-grid),
    .content-area:has(.stock-stats-grid) {
        padding: 0 !important;
    }
    
    /* Fallback for Safari without :has() */
    body.stock-page .main-content,
    body.stock-page .content-area {
        padding: 0 !important;
    }
    
    /* Add top spacing after header */
    .stock-stats-grid {
        margin-top: 16px !important;
    }
    
    /* ==============================================
       PAGE HEADER - Optimize for mobile
       ============================================== */
    .ds-page-header {
        padding: 16px !important;
        margin-bottom: 0 !important;
        background: var(--color-surface) !important;
    }
    
    .ds-page-header__title {
        font-size: 1.375rem !important;
        margin-bottom: 4px !important;
    }
    
    .ds-page-header__subtitle {
        font-size: 0.8125rem !important;
        line-height: 1.4 !important;
    }
    
    /* Header action buttons - Stack vertically */
    .ds-page-header__actions {
        flex-direction: column !important;
        gap: 8px !important;
        margin-top: 16px !important;
        width: 100% !important;
    }
    
    .ds-page-header__actions .ds-btn {
        width: 100% !important;
        min-height: 48px !important;
        justify-content: center !important;
        font-size: 0.9375rem !important;
        font-weight: 600 !important;
        border-radius: var(--border-radius-md) !important;
    }
    
    /* Primary action emphasis */
    .ds-page-header__actions .ds-btn--success {
        order: -1 !important;
    }
    
    /* ==============================================
       STAT CARDS - Edge-to-edge with dividers
       ============================================== */
    .stock-stats-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        background: var(--color-gray-100) !important;
    }
    
    .stock-overview-card {
        border-radius: 0 !important;
        border: none !important;
        border-bottom: 8px solid var(--color-gray-100) !important;
        box-shadow: none !important;
        padding: 16px !important;
        margin: 0 !important;
        background: var(--color-surface) !important;
    }
    
    .stock-overview-card:last-child {
        border-bottom: 8px solid var(--color-gray-100) !important;
    }
    
    .stock-overview-card:hover {
        transform: none !important;
        box-shadow: none !important;
    }
    
    .stock-overview-card:active {
        background: var(--color-surface-secondary) !important;
    }
    
    .stock-overview-card__header {
        gap: 14px !important;
        margin-bottom: 12px !important;
    }
    
    .stock-overview-card__icon {
        width: 52px !important;
        height: 52px !important;
        border-radius: var(--border-radius-lg) !important;
        font-size: 22px !important;
    }
    
    .stock-overview-card__label {
        font-size: 0.8125rem !important;
        color: var(--color-gray-500) !important;
        margin-bottom: 4px !important;
    }
    
    .stock-overview-card__value {
        font-size: 2rem !important;
        font-weight: 700 !important;
    }
    
    .stock-overview-card__footer {
        padding-top: 12px !important;
        border-top: 1px solid var(--color-gray-100) !important;
    }
    
    .stock-overview-card__link {
        font-size: 0.875rem !important;
        font-weight: 600 !important;
        color: var(--color-primary-light) !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }
    
    /* ==============================================
       QUICK START GUIDE - Mobile optimization
       ============================================== */
    .ds-card--info {
        margin: 0 !important;
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        border-bottom: 8px solid var(--color-gray-100) !important;
    }
    
    .ds-card--info .ds-card__body {
        padding: 16px !important;
    }
    
    .ds-card--info .ds-flex.ds-items-start {
        flex-direction: column !important;
        gap: 12px !important;
    }
    
    .ds-card--info .ds-text-primary {
        font-size: 2rem !important;
    }
    
    .ds-card--info .ds-grid--md-cols-3 {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    
    .ds-card--info .ds-bg-white {
        padding: 14px !important;
        border-radius: var(--border-radius-md) !important;
    }
    
    .ds-card--info .ds-btn--sm {
        min-height: 44px !important;
        font-size: 0.875rem !important;
    }
    
    /* ==============================================
       LOW STOCK ALERTS - Edge-to-edge cards
       ============================================== */
    #low-stock-alerts {
        margin: 0 !important;
        border-radius: 0 !important;
        border: none !important;
        border-bottom: 8px solid var(--color-gray-100) !important;
    }
    
    #low-stock-alerts .ds-card__header {
        padding: 14px 16px !important;
        min-height: 52px !important;
        border-bottom: 1px solid var(--color-border) !important;
    }
    
    #low-stock-alerts .ds-card__title {
        font-size: 1rem !important;
        font-weight: 600 !important;
    }
    
    #low-stock-alerts .ds-btn--sm {
        min-height: 40px !important;
        padding: 0 14px !important;
        font-size: 0.8125rem !important;
    }
    
    /* Hide desktop table on mobile */
    #low-stock-alerts .ds-table-container {
        display: none !important;
    }
    
    /* Show mobile cards */
    #low-stock-alerts .mobile-card-view {
        display: block !important;
    }
    
    .ds-mobile-card {
        padding: 14px 16px !important;
        border-bottom: 1px solid var(--color-gray-100) !important;
    }
    
    .ds-mobile-card:last-child {
        border-bottom: none !important;
    }
    
    .ds-mobile-card__header {
        margin-bottom: 10px !important;
    }
    
    .ds-mobile-card__title {
        font-size: 0.9375rem !important;
        font-weight: 600 !important;
    }
    
    .ds-mobile-card__actions {
        display: flex !important;
        gap: 10px !important;
        margin-top: 12px !important;
    }
    
    .ds-mobile-card__actions .ds-btn {
        flex: 1 !important;
        min-height: 44px !important;
        justify-content: center !important;
        border-radius: var(--border-radius) !important;
    }
    
    /* ==============================================
       BOTTOM GRID - Stack sections
       ============================================== */
    .stock-bottom-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
    }
    
    .stock-bottom-grid .ds-card {
        border-radius: 0 !important;
        border: none !important;
        margin: 0 !important;
        box-shadow: none !important;
        border-bottom: 8px solid var(--color-gray-100) !important;
    }
    
    .stock-bottom-grid .ds-card:last-child {
        border-bottom: none !important;
        margin-bottom: 80px !important;
    }
    
    .stock-bottom-grid .ds-card__header {
        padding: 14px 16px !important;
        min-height: 52px !important;
        border-bottom: 1px solid var(--color-border) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }
    
    .stock-bottom-grid .ds-card__title {
        font-size: 1rem !important;
        font-weight: 600 !important;
        color: var(--color-gray-800) !important;
    }
    
    .stock-bottom-grid .ds-btn--outline {
        min-height: 40px !important;
        padding: 0 14px !important;
        font-size: 0.8125rem !important;
        border-radius: var(--border-radius) !important;
    }
    
    /* ==============================================
       LOCATION LIST - Touch-friendly items
       ============================================== */
    .location-list-item {
        padding: 14px 16px !important;
        min-height: 64px !important;
        display: flex !important;
        align-items: center !important;
        border-bottom: 1px solid var(--color-gray-100) !important;
    }
    
    .location-list-item:last-child {
        border-bottom: none !important;
    }
    
    .location-list-item:active {
        background: var(--color-surface-secondary) !important;
    }
    
    .location-list-item__main {
        width: 100% !important;
    }
    
    .location-list-item__name {
        font-size: 0.9375rem !important;
        font-weight: 600 !important;
        color: var(--color-gray-800) !important;
    }
    
    .location-list-item__name .ds-badge {
        font-size: 0.6875rem !important;
        padding: 2px 6px !important;
    }
    
    .location-list-item__meta {
        font-size: 0.8125rem !important;
        color: var(--color-gray-500) !important;
        margin-top: 2px !important;
    }
    
    .location-list-item__amount {
        font-size: 0.9375rem !important;
        font-weight: 600 !important;
        color: var(--color-gray-800) !important;
    }
    
    .location-list-item__action {
        color: var(--color-gray-400) !important;
        font-size: 1rem !important;
        margin-left: 8px !important;
    }
    
    /* ==============================================
       RECENT MOVEMENTS LIST - Touch-friendly
       ============================================== */
    .stock-bottom-grid .ds-list__item {
        min-height: 64px !important;
        display: flex !important;
        align-items: center !important;
    }
    
    .stock-bottom-grid .ds-list__item > a {
        width: 100% !important;
        padding: 14px 16px !important;
        min-height: 64px !important;
        display: flex !important;
        align-items: center !important;
    }
    
    .stock-bottom-grid .ds-list__item:active {
        background: var(--color-surface-secondary) !important;
    }
    
    .stock-bottom-grid .ds-font-semibold {
        font-size: 0.9375rem !important;
    }
    
    .stock-bottom-grid .ds-text-sm {
        font-size: 0.8125rem !important;
    }
    
    .stock-bottom-grid .ds-text-right > div:first-child {
        font-size: 0.9375rem !important;
        font-weight: 600 !important;
    }
    
    /* ==============================================
       EMPTY STATES - Compact mobile design
       ============================================== */
    .stock-empty-state {
        padding: 32px 20px !important;
    }
    
    .stock-empty-state__icon {
        width: 56px !important;
        height: 56px !important;
        font-size: 22px !important;
    }
    
    .stock-empty-state__title {
        font-size: 1rem !important;
    }
    
    .stock-empty-state__text {
        font-size: 0.875rem !important;
        line-height: 1.5 !important;
        max-width: 280px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    .stock-empty-state .ds-btn {
        min-height: 44px !important;
        padding: 0 20px !important;
        font-size: 0.875rem !important;
        border-radius: var(--border-radius) !important;
    }
    
    /* ==============================================
       GENERAL UTILITIES
       ============================================== */
    .ds-mb-4 {
        margin-bottom: 0 !important;
    }
    
    /* Hide desktop table view */
    .mobile-card-view {
        display: block !important;
    }
    
    .ds-table-container {
        display: none !important;
    }
}

/* ==============================================
   TABLET ADJUSTMENTS (768px - 991px)
   ============================================== */
@media (min-width: 769px) and (max-width: 991px) {
    .stock-stats-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 1rem !important;
        padding: 0 1rem !important;
    }
    
    .stock-bottom-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
        padding: 0 1rem !important;
    }
}


/* ========== pages/accounting-mobile.css ========== */
/* ========================================
   ACCOUNTING PAGES - MOBILE RESPONSIVE STYLES
   Consistent mobile patterns for accounting sections
   ======================================== */

/* ========================================
   PAGE CONTENT - CONSISTENT PADDING WITH HEADER
   ======================================== */
.accounting-page-content {
    padding-left: 2rem;
    padding-right: 2rem;
}

@media (max-width: 576px) {
    .accounting-page-content {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* ========================================
   PAGE HEADER - MOBILE STACKING
   ======================================== */
@media (max-width: 576px) {
    .ds-page-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 1rem;
        padding: 1rem !important;
        text-align: center;
    }
    
    .ds-page-header__content {
        text-align: center;
    }
    
    .ds-page-header__title {
        font-size: 1.375rem !important;
        line-height: 1.2;
    }
    
    .ds-page-header__subtitle {
        font-size: 0.8125rem;
        margin-top: 0.25rem;
    }
    
    .ds-page-header__actions {
        flex-direction: column;
        width: 100%;
        gap: 0.5rem;
    }
    
    .ds-page-header__actions .ds-btn {
        width: 100%;
        justify-content: center;
        min-height: 44px;
    }
}

/* ========================================
   STATISTICS CARDS - 2x2 GRID ON MOBILE
   ======================================== */
@media (max-width: 576px) {
    .row.mb-4 {
        margin-left: -0.375rem;
        margin-right: -0.375rem;
        display: flex;
        flex-wrap: wrap;
    }
    
    .row.mb-4 > .col-md-3 {
        flex: 0 0 50%;
        max-width: 50%;
        padding-left: 0.375rem;
        padding-right: 0.375rem;
        margin-bottom: 0.75rem !important;
    }
    
    .row.mb-4 > .col-md-3 .card {
        border-radius: var(--border-radius);
    }
    
    .row.mb-4 > .col-md-3 .card-body {
        padding: 0.75rem !important;
    }
    
    .row.mb-4 > .col-md-3 .d-flex.align-items-center {
        flex-direction: column;
        text-align: center;
        gap: 0.5rem;
    }
    
    .row.mb-4 > .col-md-3 .flex-grow-1.ms-3 {
        margin-left: 0 !important;
    }
    
    .row.mb-4 > .col-md-3 .avatar {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .row.mb-4 > .col-md-3 .avatar i {
        font-size: 1rem !important;
    }
    
    .row.mb-4 > .col-md-3 h6.small {
        font-size: 0.625rem !important;
        letter-spacing: 0.02em;
        margin-bottom: 0.125rem !important;
    }
    
    .row.mb-4 > .col-md-3 h3 {
        font-size: 1.25rem !important;
    }
}

/* ========================================
   CHART OF ACCOUNTS OVERVIEW - MOBILE
   ======================================== */
@media (max-width: 576px) {
    .row > .col-lg-8 {
        padding-left: 0;
        padding-right: 0;
    }
    
    .row > .col-lg-8 .card {
        border-radius: 0;
        margin-left: -0.75rem;
        margin-right: -0.75rem;
        width: calc(100% + 1.5rem);
    }
    
    .row > .col-lg-8 .card-header {
        padding: 0.75rem 1rem;
    }
    
    .row > .col-lg-8 .card-header h5 {
        font-size: 1rem;
    }
    
    .row > .col-lg-8 .card-body {
        padding: 0.75rem !important;
    }
    
    .row > .col-lg-8 h6.text-uppercase {
        font-size: 0.6875rem;
        margin-bottom: 0.5rem !important;
    }
    
    .row > .col-lg-8 .table-responsive {
        margin: 0 -0.75rem;
        width: calc(100% + 1.5rem);
    }
    
    .row > .col-lg-8 .table {
        font-size: 0.75rem;
        margin-bottom: 0;
    }
    
    .row > .col-lg-8 .table th,
    .row > .col-lg-8 .table td {
        padding: var(--space-2);
        vertical-align: middle;
    }
    
    .row > .col-lg-8 .table th:first-child,
    .row > .col-lg-8 .table td:first-child {
        padding-left: 0.75rem;
    }
    
    .row > .col-lg-8 .table th:last-child,
    .row > .col-lg-8 .table td:last-child {
        padding-right: 0.75rem;
    }
    
    .row > .col-lg-8 .table code {
        font-size: 0.6875rem;
        padding: 0.125rem 0.25rem;
    }
    
    .row > .col-lg-8 .table .badge {
        font-size: 0.5625rem;
        padding: 0.2rem 0.375rem;
    }
    
    .row > .col-lg-8 .table .btn-sm {
        padding: 0.25rem;
        min-width: var(--space-8);
        min-height: var(--space-8);
    }
    
    .row > .col-lg-8 .mb-4:last-child {
        margin-bottom: 0 !important;
    }
}

/* ========================================
   RECENT AI SUGGESTIONS SIDEBAR - MOBILE
   ======================================== */
@media (max-width: 576px) {
    .row > .col-lg-4 {
        padding-left: 0;
        padding-right: 0;
    }
    
    .row > .col-lg-4 .card {
        border-radius: 0;
        margin-left: -0.75rem;
        margin-right: -0.75rem;
        width: calc(100% + 1.5rem);
    }
    
    .row > .col-lg-4 .card-header {
        padding: 0.75rem 1rem;
    }
    
    .row > .col-lg-4 .card-header h5 {
        font-size: 1rem;
    }
    
    .row > .col-lg-4 .card-body {
        padding: 0.75rem 1rem !important;
    }
    
    .row > .col-lg-4 .list-group-item {
        padding: 0.75rem 0 !important;
    }
    
    .row > .col-lg-4 .list-group-item code {
        font-size: 0.75rem;
    }
    
    .row > .col-lg-4 .list-group-item .badge {
        font-size: 0.625rem;
    }
    
    .row > .col-lg-4 .list-group-item .small {
        font-size: 0.6875rem;
    }
}

/* ========================================
   FULL CHART VIEW - MOBILE OPTIMIZATIONS
   ======================================== */
@media (max-width: 576px) {
    .table-responsive {
        border: none;
    }
    
    .table-responsive .table {
        min-width: auto;
    }
    
    .table-hover tbody tr:hover {
        background-color: transparent;
    }
}

/* ========================================
   BUTTONS IN TABLES - 44PX TOUCH TARGETS
   ======================================== */
@media (max-width: 576px) {
    .table .btn-link,
    .table .btn-sm {
        min-width: 36px;
        min-height: 36px;
        padding: 0.375rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* ========================================
   EMPTY STATES - MOBILE
   ======================================== */
@media (max-width: 576px) {
    .text-center.py-5 {
        padding: 2rem 1rem !important;
    }
    
    .text-center.py-5 .fa-3x {
        font-size: 2rem !important;
    }
    
    .text-center.py-5 h5 {
        font-size: 1rem;
    }
    
    .text-center.py-5 p {
        font-size: 0.875rem;
    }
    
    .text-center.py-4 {
        padding: 1.5rem 1rem !important;
    }
    
    .text-center.py-4 .fa-2x {
        font-size: 1.5rem !important;
    }
}

/* ========================================
   CHART OF ACCOUNTS PAGE - MOBILE
   ======================================== */
@media (max-width: 576px) {
    .d-flex.justify-content-between.align-items-center {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 1rem;
        text-align: center;
    }
    
    .d-flex.justify-content-between.align-items-center h1.h3 {
        font-size: 1.375rem !important;
    }
    
    .d-flex.justify-content-between.align-items-center p.text-muted {
        font-size: 0.8125rem;
    }
    
    .d-flex.justify-content-between.align-items-center .btn {
        width: 100%;
        min-height: 44px;
        justify-content: center;
    }
    
    .card.border-0.shadow-sm.mb-4 {
        border-radius: 0 !important;
        margin-left: -0.75rem;
        margin-right: -0.75rem;
        width: calc(100% + 1.5rem);
    }
    
    .card.border-0.shadow-sm.mb-4 .card-header {
        padding: 0.75rem 1rem;
    }
    
    .card.border-0.shadow-sm.mb-4 .card-header h5 {
        font-size: 0.9375rem;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    .card.border-0.shadow-sm.mb-4 .card-header .badge {
        font-size: 0.625rem;
    }
    
    .card.border-0.shadow-sm.mb-4 .table-responsive {
        border: none;
    }
    
    .card.border-0.shadow-sm.mb-4 .table {
        font-size: 0.75rem;
    }
    
    .card.border-0.shadow-sm.mb-4 .table th,
    .card.border-0.shadow-sm.mb-4 .table td {
        padding: var(--space-2) 0.625rem;
        vertical-align: middle;
    }
    
    .card.border-0.shadow-sm.mb-4 .table th.ps-4,
    .card.border-0.shadow-sm.mb-4 .table td.ps-4 {
        padding-left: 0.75rem !important;
    }
    
    .card.border-0.shadow-sm.mb-4 .table th.pe-4,
    .card.border-0.shadow-sm.mb-4 .table td.pe-4 {
        padding-right: 0.75rem !important;
    }
    
    .card.border-0.shadow-sm.mb-4 .table .badge {
        font-size: 0.5625rem;
        padding: 0.2rem 0.375rem;
    }
    
    .card.border-0.shadow-sm.mb-4 .table .font-monospace {
        font-size: 0.625rem;
    }
    
    .card.border-0.shadow-sm.mb-4 .table strong {
        font-size: 0.75rem;
    }
    
    .card.border-0.shadow-sm.mb-4 .table small.text-muted {
        font-size: 0.625rem;
        display: block;
        margin-top: 0.125rem;
    }
}

/* ========================================
   ALERTS - MOBILE
   ======================================== */
@media (max-width: 576px) {
    .alert {
        padding: 0.75rem 1rem !important;
        font-size: 0.875rem;
        margin-left: -0.75rem;
        margin-right: -0.75rem;
        border-radius: 0;
    }
}


/* ========== pages/crm-mobile.css ========== */
/* ========================================
   CRM PAGES - MOBILE RESPONSIVE STYLES
   Consistent mobile patterns for CRM sections
   ======================================== */

/* ========================================
   PAGE HEADER - MOBILE STACKING
   ======================================== */
@media (max-width: 576px) {
    .ds-page-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 1rem;
        padding: 1rem !important;
        text-align: center;
    }
    
    .ds-page-header__content {
        text-align: center;
    }
    
    .ds-page-header__title {
        font-size: 1.25rem !important;
        line-height: 1.2;
    }
    
    .ds-page-header__subtitle {
        font-size: 0.8125rem;
        margin-top: 0.25rem;
    }
    
    .ds-page-header__actions {
        flex-direction: row;
        width: 100%;
        gap: var(--space-2);
        justify-content: center;
    }
    
    .ds-page-header__actions .btn-group {
        flex: 0 0 auto;
    }
    
    .ds-page-header__actions .btn-group .ds-btn {
        min-height: 44px;
        min-width: 44px;
    }
    
    .ds-page-header__actions > .ds-btn {
        flex: 1;
        justify-content: center;
        min-height: 44px;
    }
}

/* ========================================
   ALPHABET FILTER - MOBILE OPTIMIZATION
   ======================================== */
@media (max-width: 576px) {
    /* Target the correct alphabet filter classes from alphabet_filter.html */
    .alphabet-filter-wrapper {
        margin: 0 -1rem 1rem -1rem;
        padding: 0;
        width: calc(100% + 2rem);
    }
    
    .alphabet-filter-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: var(--space-2) var(--space-4);
    }
    
    .alphabet-filter-container::-webkit-scrollbar {
        display: none;
    }
    
    .alphabet-filter {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 0.25rem !important;
        justify-content: flex-start;
    }
    
    .alphabet-filter .ds-btn,
    .alphabet-filter .alphabet-btn {
        min-width: var(--space-8);
        min-height: 36px;
        padding: var(--space-1) var(--space-2);
        font-size: 0.75rem;
        flex-shrink: 0;
        white-space: nowrap;
    }
    
    /* Legacy selector for backwards compatibility */
    .ds-alphabet-filter {
        margin: 0 -1rem 1rem;
        padding: var(--space-2) var(--space-3);
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    
    .ds-alphabet-filter::-webkit-scrollbar {
        display: none;
    }
    
    .ds-alphabet-filter .ds-flex {
        gap: 0.25rem !important;
        flex-wrap: nowrap;
        justify-content: flex-start;
    }
    
    .ds-alphabet-filter .ds-btn {
        min-width: var(--space-8);
        min-height: var(--space-8);
        padding: 0.25rem 0.375rem;
        font-size: 0.75rem;
        flex-shrink: 0;
    }
}

/* ========================================
   CUSTOMER NAVIGATION TABS - MOBILE
   ======================================== */
@media (max-width: 576px) {
    .ds-project-tabs-container {
        margin: 0 -1rem;
        width: calc(100% + 2rem);
    }
    
    .ds-project-tabs-mobile {
        padding: var(--space-2) 0.75rem !important;
        gap: 0.375rem !important;
    }
    
    .ds-project-tab-mobile {
        flex: 0 0 auto;
        min-width: 70px;
        min-height: 52px;
        padding: 0.375rem 0.5rem !important;
        font-size: 0.65rem !important;
        border-radius: var(--border-radius);
    }
    
    .ds-project-tab-mobile i {
        font-size: 1rem;
        margin-bottom: 0.125rem;
    }
    
    .ds-project-tab-mobile span {
        display: block;
        line-height: 1.1;
        white-space: nowrap;
    }
}

/* ========================================
   CUSTOMER FILTERS - MOBILE STACKING
   ======================================== */
@media (max-width: 576px) {
    .customer-filters-primary.ds-flex {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.5rem !important;
    }
    
    .customer-filters-primary .ds-form-input {
        width: 100% !important;
        min-height: 44px;
        font-size: var(--space-4);
    }
    
    .customer-filters-primary .ds-form-input.ds-flex-1 {
        flex: none !important;
    }
    
    .customer-filters-primary select.ds-form-input {
        width: 100% !important;
    }
    
    .customer-filters-primary .ds-btn {
        width: 100%;
        min-height: 44px;
        justify-content: center;
    }
    
    .customer-filters-primary #displaySettingsBtn {
        order: 10;
    }
}

/* ========================================
   MOBILE CARDS - ENHANCED STYLING
   ======================================== */
@media (max-width: 576px) {
    #customerMobileCards .ds-mobile-card,
    .ds-desktop-hidden .ds-mobile-card {
        padding: 1rem !important;
        border-radius: 0 !important;
        margin: 0;
        width: 100%;
        border-left: none;
        border-right: none;
        border-bottom: 1px solid var(--color-border);
        background: var(--color-surface);
    }
    
    #customerMobileCards .ds-mobile-card:last-child,
    .ds-desktop-hidden .ds-mobile-card:last-child {
        border-bottom: none;
    }
    
    #customerMobileCards .ds-mobile-card__header,
    .ds-desktop-hidden .ds-mobile-card__header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 0.5rem;
        margin-bottom: 0.75rem;
    }
    
    #customerMobileCards .ds-mobile-card__title,
    .ds-desktop-hidden .ds-mobile-card__title {
        font-size: 1.0625rem;
        font-weight: 600;
        line-height: 1.3;
        color: var(--color-blue-darker);
    }
    
    #customerMobileCards .ds-mobile-card__subtitle,
    .ds-desktop-hidden .ds-mobile-card__subtitle {
        font-size: 0.75rem;
        color: var(--color-text-secondary);
        margin-top: 0.25rem;
    }
    
    #customerMobileCards .ds-mobile-card__info,
    .ds-desktop-hidden .ds-mobile-card__info {
        display: flex;
        flex-direction: column;
        gap: 0.375rem;
        margin-bottom: 0.75rem;
        padding: 0.625rem 0.75rem;
        background: var(--color-gray-100);
        border-radius: var(--border-radius);
        margin-left: 0;
        margin-right: 0;
    }
    
    #customerMobileCards .ds-mobile-card__info-row,
    .ds-desktop-hidden .ds-mobile-card__info-row {
        display: flex;
        align-items: center;
        font-size: 0.8125rem;
        color: var(--color-gray-700);
        gap: 0.5rem;
    }
    
    #customerMobileCards .ds-mobile-card__info-row i,
    #customerMobileCards .ds-mobile-card__icon,
    .ds-desktop-hidden .ds-mobile-card__info-row i,
    .ds-desktop-hidden .ds-mobile-card__icon {
        width: 1.125rem;
        color: var(--color-text-tertiary);
        font-size: 0.75rem;
        flex-shrink: 0;
        text-align: center;
    }
    
    #customerMobileCards .ds-mobile-card__actions,
    .ds-desktop-hidden .ds-mobile-card__actions {
        padding-top: 0;
        border-top: none;
    }
    
}

/* CRM Mobile View Button - Full width, 44px touch target */
/* Outside media query to ensure it applies on all mobile devices */
.crm-mobile-view-btn {
    display: flex !important;
    width: 100% !important;
    min-height: 44px !important;
    height: auto !important;
    justify-content: center !important;
    align-items: center !important;
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
    border-radius: var(--border-radius) !important;
    background: var(--color-blue-darker) !important;
    color: white !important;
    border: none !important;
    text-decoration: none !important;
    padding: 0.75rem 1rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

.crm-mobile-view-btn:hover,
.crm-mobile-view-btn:active {
    background: var(--color-primary) !important;
    color: white !important;
}

.crm-mobile-view-btn i {
    margin-right: 0.5rem;
    flex-shrink: 0;
}

/* Mobile card info section with gray background */
#customerMobileCards .ds-mobile-card__info {
    background: var(--color-gray-100) !important;
    border-radius: var(--border-radius) !important;
    padding: 0.625rem 0.75rem !important;
    margin-bottom: 0.75rem !important;
}

/* ========================================
   PAGINATION - MOBILE OPTIMIZATION
   ======================================== */
@media (max-width: 576px) {
    .ds-pagination {
        flex-direction: column !important;
        gap: var(--space-3) !important;
        padding: 0.75rem !important;
    }
    
    .ds-pagination > div:first-child {
        width: 100%;
        justify-content: space-between !important;
    }
    
    .ds-pagination > div:first-child > div:first-child {
        flex: 0 0 auto;
    }
    
    .ds-pagination-info {
        font-size: 0.75rem !important;
        text-align: right;
        flex: 1;
    }
    
    .ds-pagination-controls {
        width: 100%;
        justify-content: center !important;
    }
    
    .ds-pagination-controls .ds-btn {
        min-height: 40px;
        min-width: 40px;
        padding: 0.375rem 0.5rem;
    }
    
    .ds-pagination-controls .ds-btn--sm {
        font-size: 0.75rem;
    }
    
    .ds-pagination-controls > div {
        gap: 0.25rem !important;
    }
}

/* ========================================
   CONTENT AREA - MOBILE PADDING
   ======================================== */
@media (max-width: 576px) {
    .ds-project-content {
        padding: 0.75rem !important;
    }
    
    .ds-card__body--no-padding {
        padding: 0 !important;
    }
}

/* ========================================
   EMPTY STATES - MOBILE
   ======================================== */
@media (max-width: 576px) {
    .ds-empty-state {
        padding: 2rem 1rem !important;
    }
    
    .ds-empty-state__icon i {
        font-size: 2.5rem !important;
    }
    
    .ds-empty-state__title {
        font-size: 1.1rem !important;
    }
    
    .ds-empty-state__message {
        font-size: 0.875rem !important;
    }
    
    .ds-empty-state__actions .ds-btn {
        width: 100%;
        min-height: 44px;
    }
}

/* ========================================
   BADGES - MOBILE SIZING
   ======================================== */
@media (max-width: 576px) {
    .ds-badge {
        font-size: 0.6875rem;
        padding: 0.25rem 0.5rem;
        white-space: nowrap;
    }
}

/* ========================================
   DROPDOWN MENUS - MOBILE
   ======================================== */
@media (max-width: 576px) {
    .dropdown-menu {
        min-width: 200px;
    }
    
    .dropdown-item {
        padding: 0.625rem 1rem;
        font-size: 0.875rem;
    }
    
    .dropdown-header {
        font-size: 0.75rem;
        padding: var(--space-2) var(--space-4);
    }
}

/* ========================================
   MODALS - MOBILE OPTIMIZATION
   ======================================== */
@media (max-width: 576px) {
    .modal-dialog {
        margin: 0.5rem;
        max-width: calc(100% - 1rem);
    }
    
    .modal-header {
        padding: 1rem !important;
    }
    
    .modal-header h5 {
        font-size: 1.125rem !important;
    }
    
    .modal-body {
        padding: 1rem !important;
        max-height: 60vh !important;
        overflow-y: auto;
    }
    
    .modal-footer {
        padding: 1rem !important;
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .modal-footer .ds-btn,
    .modal-footer .btn {
        width: 100%;
        min-height: 44px;
        justify-content: center;
    }
}

/* ========================================
   FORM INPUTS - 44PX TOUCH TARGETS
   ======================================== */
@media (max-width: 576px) {
    .ds-form-input,
    .ds-form-select,
    .form-select,
    .form-control {
        min-height: 44px !important;
        font-size: 16px !important;
    }
    
    .ds-form-group {
        margin-bottom: 1rem;
    }
    
    .ds-form-label {
        font-size: 0.875rem;
        margin-bottom: 0.375rem;
    }
}

/* ========================================
   CUSTOMER DETAIL PAGE - HEADER
   ======================================== */
@media (max-width: 576px) {
    .ds-project-header {
        padding: 0.75rem 1rem !important;
    }
    
    .ds-project-header__container {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .ds-project-header__back {
        font-size: 0.8125rem;
        padding: 0.375rem 0;
    }
    
    .ds-project-header__back span {
        display: inline;
    }
    
    .ds-project-header__title {
        font-size: 1.25rem !important;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    
    .ds-project-header__title i {
        font-size: 1rem;
    }
    
    .ds-project-header + p,
    .ds-project-header__container > div > p {
        font-size: 0.75rem !important;
        padding-left: 0 !important;
        margin-top: 0.25rem;
    }
}

/* ========================================
   CUSTOMER DETAIL - FORM GRID
   ======================================== */
@media (max-width: 576px) {
    .project-form-grid {
        display: grid;
        grid-template-columns: 1fr !important;
        gap: var(--space-3) !important;
    }
    
    .project-form-grid .field-span-6,
    .project-form-grid .field-span-12,
    .project-form-grid [class*="field-span"] {
        grid-column: span 1 !important;
    }
    
    .project-form-grid label {
        font-size: 0.6875rem;
        letter-spacing: 0.03em;
        margin-bottom: 0.25rem;
    }
    
    .project-form-grid input,
    .project-form-grid select,
    .project-form-grid textarea {
        min-height: 44px;
        font-size: var(--space-4);
        padding: var(--space-2) 0.75rem;
    }
    
    .project-form-grid textarea {
        min-height: 88px;
    }
}

/* ========================================
   CUSTOMER DETAIL - SECTIONS
   ======================================== */
@media (max-width: 576px) {
    .project-main-card {
        margin: 0 -0.75rem;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }
    
    .project-section {
        padding: 1rem !important;
    }
    
    .project-section-title {
        font-size: 1rem !important;
        margin-bottom: 0.25rem;
    }
    
    .project-section .ds-text-secondary {
        font-size: 0.75rem !important;
    }
    
    .ds-divider-container {
        margin: 0.5rem 0 !important;
    }
}

/* ========================================
   CUSTOMER DETAIL - ACTION BUTTONS
   ======================================== */
@media (max-width: 576px) {
    .project-section .ds-btn,
    .project-main-card .ds-btn {
        min-height: 44px;
    }
    
    .project-section .ds-flex.ds-justify-end,
    .project-main-card .ds-flex.ds-justify-end {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .project-section .ds-flex.ds-justify-end .ds-btn,
    .project-main-card .ds-flex.ds-justify-end .ds-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ========================================
   CUSTOMER TABS - MOBILE NAVIGATION
   ======================================== */
@media (max-width: 576px) {
    .tab-content {
        padding: 0 !important;
    }
    
    .tab-content .project-main-card:first-child {
        margin-top: 0;
    }
}

/* ========================================
   CUSTOMER CONTACTS/PROJECTS LISTS
   ======================================== */
@media (max-width: 576px) {
    .ds-table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .ds-table {
        font-size: 0.75rem;
        min-width: 500px;
    }
    
    .ds-table th,
    .ds-table td {
        padding: var(--space-2);
        white-space: nowrap;
    }
}

/* ========================================
   CUSTOMER DETAIL PAGE - MOBILE ENHANCED
   ======================================== */

/* Hero Section Mobile */
@media (max-width: 576px) {
    .crm-detail-header {
        padding: 0.75rem 1rem 1rem 1rem !important;
        background: var(--color-surface) !important;
        border-bottom: none;
        margin: 0 !important;
    }
    
    .crm-detail-header .ds-project-header__container {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.5rem;
    }
    
    .crm-detail-back {
        display: inline-flex !important;
        align-items: center;
        gap: 0.375rem;
        color: var(--color-text-secondary) !important;
        font-size: 0.8125rem;
        font-weight: 500;
        padding: 0.25rem 0;
        min-height: 36px;
        text-decoration: none;
        background: none !important;
        border: none !important;
        box-shadow: none !important;
    }
    
    .crm-detail-back:hover {
        color: var(--color-blue-darker) !important;
    }
    
    .crm-detail-back i {
        font-size: 0.75rem;
    }
    
    .crm-detail-title-section {
        flex: 1;
    }
    
    .crm-detail-title-row {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .crm-detail-title {
        font-size: 1.375rem !important;
        color: var(--color-gray-900) !important;
        margin: 0;
        padding-left: 0 !important;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        flex: 1;
        min-width: 0;
    }
    
    .crm-detail-title i {
        font-size: 1.125rem;
        color: var(--color-blue-darker);
    }
    
    .crm-detail-title span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    .crm-detail-status-badge {
        padding: 0.25rem 0.625rem;
        border-radius: var(--border-radius-lg);
        font-size: 0.6875rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.025em;
        flex-shrink: 0;
    }
    
    .crm-status--success {
        background: var(--color-success-bg-alt);
        color: var(--color-green-dark);
        border: 1px solid var(--color-success-border);
    }
    
    .crm-status--warning {
        background: var(--color-warning-bg);
        color: var(--color-warning-dark-brown);
        border: 1px solid var(--color-warning-border);
    }
    
    .crm-status--info {
        background: var(--color-info-bg);
        color: var(--color-blue-darker);
        border: 1px solid var(--color-info-border);
    }
    
    .crm-status--neutral {
        background: var(--color-gray-100);
        color: var(--color-gray-600);
        border: 1px solid var(--color-border);
    }
    
    .crm-detail-subtitle {
        margin: 0.25rem 0 0 0 !important;
        padding-left: 0 !important;
        font-size: 0.8125rem !important;
        color: var(--color-text-secondary) !important;
        display: flex;
        align-items: center;
        gap: 0.25rem;
        flex-wrap: wrap;
    }
    
    .crm-detail-subtitle i {
        font-size: 0.6875rem;
        color: var(--color-text-tertiary);
    }
    
    .crm-detail-divider {
        margin: 0 0.25rem;
        color: var(--color-border-strong);
    }
    
    .crm-detail-quick-actions {
        display: flex;
        gap: 0.5rem;
        padding-top: 0.75rem;
        margin-top: 0.25rem;
    }
    
    .crm-quick-action {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        border-radius: var(--border-radius);
        text-decoration: none;
        font-size: 1rem;
        transition: all 0.2s;
        border: 1px solid;
    }
    
    .crm-quick-action--call {
        background: var(--color-success-bg-light);
        border-color: var(--color-success-border);
        color: var(--color-green-dark);
    }
    
    .crm-quick-action--call:hover,
    .crm-quick-action--call:active {
        background: var(--color-success-bg-alt);
        color: var(--color-green-dark);
    }
    
    .crm-quick-action--email {
        background: var(--color-info-bg-lighter);
        border-color: var(--color-info-border);
        color: var(--color-blue-darker);
    }
    
    .crm-quick-action--email:hover,
    .crm-quick-action--email:active {
        background: var(--color-info-bg);
        color: var(--color-blue-darker);
    }
    
    .crm-quick-action--map {
        background: var(--color-warning-bg-lighter);
        border-color: var(--color-warning-border);
        color: var(--color-warning-dark-brown);
    }
    
    .crm-quick-action--map:hover,
    .crm-quick-action--map:active {
        background: var(--color-warning-bg);
        color: var(--color-warning-dark-brown);
    }
}

/* Tabs Section - Full Width */
@media (max-width: 576px) {
    .crm-detail-header + .ds-project-container .ds-project-tabs-container,
    .ds-project-container .ds-project-tabs-container {
        margin: 0 !important;
        width: 100% !important;
        padding: 0 !important;
        background: var(--color-gray-50);
        border-top: 1px solid var(--color-border);
        border-bottom: 1px solid var(--color-border);
    }
    
    .ds-project-tabs-mobile {
        padding: var(--space-2) var(--space-4) !important;
        margin: 0 !important;
        gap: var(--space-2) !important;
    }
}

/* Full-Width Cards - Edge to Edge - Remove Double Container */
@media (max-width: 576px) {
    .ds-project-container {
        padding: 0 !important;
        margin: 0 !important;
        background: var(--color-surface) !important;
    }
    
    .ds-project-content {
        padding: 0 !important;
        background: var(--color-surface) !important;
    }
    
    /* Remove the outer card wrapper completely */
    .project-main-card {
        border-radius: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        box-shadow: none !important;
        background: var(--color-surface) !important;
    }
    
    .project-section {
        padding: 1rem !important;
        background: var(--color-surface) !important;
        border-bottom: 1px solid var(--color-border);
    }
    
    .project-section:last-child {
        border-bottom: none;
    }
    
    .project-section-title {
        font-size: 0.8125rem !important;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--color-gray-700);
        font-weight: 600;
        margin-bottom: 0.25rem !important;
    }
    
    .project-section .ds-text-secondary {
        font-size: 0.75rem !important;
        margin-bottom: 1rem !important;
    }
    
    /* All form fields full width on mobile */
    .project-form-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
    }
    
    .project-form-grid .field-span-6,
    .project-form-grid .field-span-4,
    .project-form-grid .field-span-3 {
        width: 100% !important;
        grid-column: span 12 !important;
    }
    
    .project-form-grid label {
        font-size: 0.6875rem !important;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--color-text-secondary);
        margin-bottom: 0.375rem;
        font-weight: 600;
        display: block;
    }
    
    .project-form-grid input,
    .project-form-grid select,
    .project-form-grid textarea {
        width: 100% !important;
        min-height: 48px !important;
        font-size: 16px !important;
        padding: 0.75rem 1rem !important;
        border-radius: var(--border-radius) !important;
        border: 1px solid var(--color-border-strong) !important;
        background: var(--color-surface) !important;
    }
    
    .project-form-grid input:focus,
    .project-form-grid select:focus,
    .project-form-grid textarea:focus {
        border-color: var(--color-info) !important;
        box-shadow: var(--shadow-focus) !important;
        outline: none !important;
    }
    
    /* Save button full width */
    .project-form-actions {
        padding: 1rem !important;
        margin: 0 !important;
        background: var(--color-surface) !important;
        border-top: 1px solid var(--color-border);
    }
    
    .project-form-actions .ds-btn {
        width: 100% !important;
        min-height: 48px !important;
        font-size: 0.9375rem !important;
        font-weight: 600 !important;
        border-radius: var(--border-radius) !important;
        justify-content: center !important;
    }
    
    .project-form-actions .ds-btn--primary {
        background: var(--color-blue-darker) !important;
    }
    
    /* Divider styling */
    .ds-divider-container {
        margin: 0.75rem 0 !important;
        padding: 0 !important;
    }
    
    .ds-divider-gradient {
        height: 1px;
        background: var(--color-border);
    }
    
    /* Tab content */
    .tab-content {
        background: var(--color-surface) !important;
    }
}

/* Phone picker mobile adjustments */
@media (max-width: 576px) {
    .phone-picker-container {
        width: 100% !important;
    }
    
    .phone-picker-container .ds-flex {
        flex-direction: row !important;
    }
    
    .phone-picker-container select {
        min-width: 80px !important;
        max-width: 90px !important;
    }
    
    .phone-picker-container input[type="tel"] {
        flex: 1 !important;
    }
}

/* Input with actions (address field) */
@media (max-width: 576px) {
    .ds-input-with-actions {
        display: flex;
        gap: 0.375rem;
    }
    
    .ds-input-with-actions input {
        flex: 1;
        min-width: 0;
    }
    
    .ds-input-action-btn {
        min-width: 44px !important;
        min-height: 44px !important;
        padding: 0 !important;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--border-radius);
        border: 1px solid var(--color-border-strong);
        background: var(--color-surface);
        color: var(--color-text-secondary);
    }
    
    .ds-input-action-btn--primary {
        background: var(--color-blue-darker);
        border-color: var(--color-blue-darker);
        color: var(--color-surface);
    }
}


/* ========== pages/hr-mobile.css ========== */
/* ========================================
   HR/EMPLOYEES MOBILE STYLES
   Edge-to-edge cards, clickable contacts
   ======================================== */

/* Page Container - Remove Padding */
@media (max-width: 576px) {
    .container-fluid.ds-px-4.d-md-none {
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* Remove outer card wrapper */
    .container-fluid.ds-px-4.d-md-none > .ds-card {
        border-radius: 0 !important;
        border: none !important;
        box-shadow: none !important;
        margin: 0 !important;
    }
    
    .container-fluid.ds-px-4.d-md-none > .ds-card > .ds-card__body--no-padding {
        padding: 0 !important;
    }
}

/* Section Spacing */
@media (max-width: 576px) {
    .container-fluid.ds-px-4.d-md-none {
        margin-top: var(--space-3) !important;
    }
}

/* Employee Cards - Edge to Edge */
@media (max-width: 576px) {
    #employeeMobileCards {
        display: flex;
        flex-direction: column;
        gap: 0;
        background: var(--color-surface);
    }
    
    .ds-mobile-card {
        background: var(--color-surface);
        padding: var(--space-4);
        border: none !important;
        border-radius: 0 !important;
        border-bottom: 1px solid var(--color-border) !important;
        border-left: var(--space-1) solid var(--color-text-tertiary) !important;
        margin: 0 !important;
    }
    
    .ds-mobile-card:last-child {
        border-bottom: none !important;
    }
    
    /* Status-based left border colors */
    .ds-mobile-card[data-status="Active"],
    .ds-mobile-card:has(.ds-badge--success) {
        border-left-color: var(--color-success) !important;
    }
    
    .ds-mobile-card[data-status="Inactive"],
    .ds-mobile-card:has(.ds-badge--neutral) {
        border-left-color: var(--color-text-tertiary) !important;
    }
    
    /* Card Header */
    .ds-mobile-card__header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: var(--space-3);
        margin-bottom: var(--space-3);
    }
    
    .ds-mobile-card__title {
        font-size: var(--font-size-base);
        font-weight: 600;
        color: var(--color-text-primary);
        margin: 0;
        line-height: 1.3;
    }
    
    .ds-mobile-card__subtitle {
        font-size: var(--font-size-sm);
        color: var(--color-text-secondary);
        margin-top: var(--space-0-5);
    }
    
    /* Status Badge */
    .ds-mobile-card .ds-badge {
        padding: var(--space-1) var(--space-2);
        font-size: var(--font-size-xs);
        font-weight: 600;
        border-radius: var(--border-radius-md);
        flex-shrink: 0;
    }
    
    .ds-mobile-card .ds-badge--success {
        background: var(--color-success-bg);
        color: var(--color-success-darker);
    }
    
    .ds-mobile-card .ds-badge--neutral {
        background: var(--color-surface-secondary);
        color: var(--color-text-secondary);
    }
    
    /* Info Rows */
    .ds-mobile-card__info {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
    }
    
    .ds-mobile-card__info-row {
        display: flex;
        align-items: center;
        gap: var(--space-2-5);
        font-size: var(--font-size-sm);
        color: var(--color-text-primary);
        min-height: var(--space-7);
    }
    
    .ds-mobile-card__icon {
        width: var(--space-4);
        color: var(--color-text-tertiary);
        flex-shrink: 0;
        text-align: center;
    }
    
    .ds-mobile-card__info-row .ds-text-secondary {
        color: var(--color-text-secondary);
    }
    
    /* Clickable Contact Links */
    .ds-mobile-card__info-row a {
        color: var(--color-primary);
        text-decoration: none;
        display: flex;
        align-items: center;
        gap: var(--space-2);
        min-height: 44px;
        padding: var(--space-2) 0;
        margin: calc(var(--space-2) * -1) 0;
        flex: 1;
    }
    
    .ds-mobile-card__info-row a:active {
        background: rgba(59, 130, 246, 0.1);
    }
    
    /* Phone link - green accent */
    .ds-mobile-card__info-row a[href^="tel:"] {
        color: var(--color-success-dark);
    }
    
    /* Email link - blue accent */
    .ds-mobile-card__info-row a[href^="mailto:"] {
        color: var(--color-primary);
    }
}

/* Alphabet Filter Mobile - Full Width */
@media (max-width: 576px) {
    .alphabet-filter-container {
        padding: var(--space-3) var(--space-4) !important;
        margin: 0 !important;
        background: var(--color-surface-secondary);
        border-bottom: 1px solid var(--color-border);
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .alphabet-filter {
        display: flex;
        gap: var(--space-1);
        min-width: max-content;
    }
    
    .alphabet-btn {
        min-width: var(--space-9) !important;
        min-height: var(--space-9) !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: var(--font-size-xs) !important;
        border-radius: var(--space-1-5) !important;
        background: var(--color-surface) !important;
        border: 1px solid var(--color-border) !important;
        color: var(--color-text-primary) !important;
    }
    
    .alphabet-btn.active,
    .alphabet-btn:active {
        background: var(--color-primary) !important;
        color: var(--color-text-inverse) !important;
        border-color: var(--color-primary) !important;
    }
}

/* Filter Section - Full Width with Spacing */
@media (max-width: 576px) {
    .customer-filters-primary {
        flex-direction: column !important;
        gap: var(--space-3) !important;
        padding: var(--space-4) !important;
        margin: 0 !important;
        background: var(--color-surface);
        border-bottom: 1px solid var(--color-border);
    }
    
    .customer-filters-primary input[type="text"],
    .customer-filters-primary select {
        width: 100% !important;
        min-height: 48px !important;
        font-size: var(--font-size-base) !important;
        padding: var(--space-3) var(--space-4) !important;
        border-radius: var(--border-radius) !important;
        border: 1px solid var(--color-border) !important;
        background: var(--color-surface) !important;
    }
    
    .customer-filters-primary .ds-btn {
        width: 100% !important;
        min-height: 48px !important;
        justify-content: center !important;
        font-size: var(--font-size-base) !important;
        border-radius: var(--border-radius) !important;
    }
    
    .customer-filters-primary .ds-btn--secondary {
        background: var(--color-surface) !important;
        border: 1px solid var(--color-border) !important;
        color: var(--color-text-primary) !important;
    }
}

/* Page Header Mobile - Clean White */
@media (max-width: 576px) {
    .ds-page-header {
        padding: var(--space-4) !important;
        margin: 0 !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: var(--space-3);
        background: var(--color-surface) !important;
        border-bottom: 1px solid var(--color-border);
    }
    
    .ds-page-header__title {
        font-size: var(--font-size-xl) !important;
        text-align: left;
        color: var(--color-text-primary) !important;
    }
    
    .ds-page-header__subtitle {
        text-align: left;
        font-size: var(--font-size-sm) !important;
        color: var(--color-text-secondary) !important;
    }
    
    .ds-page-header__actions {
        width: 100%;
        display: flex;
        flex-direction: row;
        gap: var(--space-2);
        margin-top: var(--space-2);
    }
    
    .ds-page-header__actions .btn-group {
        display: flex;
    }
    
    .ds-page-header__actions .ds-btn--primary {
        flex: 1;
        min-height: 48px;
        justify-content: center;
        font-weight: 600;
    }
    
    .ds-page-header__actions .ds-btn--outline {
        background: var(--color-surface) !important;
        border-color: var(--color-border) !important;
        color: var(--color-text-primary) !important;
    }
}

/* Pagination Mobile */
@media (max-width: 576px) {
    .container-fluid.ds-px-4.d-md-none .p-3.ds-border-top {
        padding: var(--space-4) !important;
        background: var(--color-surface-secondary);
        border-top: 1px solid var(--color-border) !important;
    }
    
    .container-fluid.ds-px-4.d-md-none .ds-btn {
        min-height: 48px !important;
        font-size: var(--font-size-base) !important;
    }
}

/* View Details Button - Full Width */
@media (max-width: 576px) {
    .ds-mobile-card__actions {
        margin-top: var(--space-3);
        padding-top: var(--space-3);
        border-top: 1px solid var(--color-surface-secondary);
    }
    
    .ds-mobile-card__actions .ds-btn {
        width: 100%;
        min-height: 44px;
        justify-content: center;
        background: var(--color-surface-secondary);
        color: var(--color-text-primary);
        border: none;
        border-radius: var(--border-radius);
        font-weight: 500;
    }
    
    .ds-mobile-card__actions .ds-btn:active {
        background: var(--color-border);
    }
}


/* ========== pages/hr-contract-modal.css ========== */
/**
 * HR Contract Form Modal Styles
 *
 * Extracted from templates/hr/contract_form_modal.html for better caching
 * and maintainability. Contains enhanced modal styles, form sections,
 * working hours grid, and responsive design for contract management.
 */

/* ============================================
   CONTRACT MODAL BASE STYLES
   ============================================ */
.modal-content.ds-contract-modal {
    border: none;
    border-radius: var(--border-radius-xl);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

/* ============================================
   WHITE HEADER WITH COLORED ICON
   ============================================ */
.ds-modal-header-white {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-6) var(--space-8);
    border-radius: var(--border-radius-xl) var(--border-radius-xl) 0 0;
}

.ds-modal-header-content {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex: 1;
}

.ds-modal-icon {
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    border-radius: var(--border-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xl);
    flex-shrink: 0;
}

.ds-modal-icon--primary {
    background: var(--color-info-bg);
    color: var(--color-primary);
}

.ds-modal-icon--warning {
    background: var(--color-warning-bg-gradient-end);
    color: var(--color-warning);
}

.ds-modal-header-white .modal-title {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0;
}

.ds-modal-header-white .btn-close {
    padding: var(--space-3);
    margin: calc(-1 * var(--space-3)) calc(-1 * var(--space-3)) calc(-1 * var(--space-3)) auto;
    opacity: 0.5;
}

.ds-modal-header-white .btn-close:hover {
    opacity: 1;
}

/* Warning Header Variant */
.ds-modal-header-warning {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-5) var(--space-6);
}

/* ============================================
   ENHANCED MODAL BODY
   ============================================ */
.ds-modal-body-enhanced {
    padding: var(--space-8);
    background: var(--color-surface-secondary);
    max-height: calc(100vh - 300px);
    overflow-y: auto;
}

/* ============================================
   CONTRACT SECTIONS
   ============================================ */
.ds-contract-section {
    background: var(--color-surface);
    border-radius: var(--border-radius-lg);
    margin-bottom: var(--space-6);
    border: 1px solid var(--color-border);
    transition: all 0.2s ease;
}

.ds-contract-section:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.ds-contract-section--last {
    margin-bottom: 0;
}

/* ============================================
   SECTION HEADER
   ============================================ */
.ds-section-header {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-6);
    border-bottom: 1px solid var(--color-surface-secondary);
}

.ds-section-header-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--border-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-lg);
    flex-shrink: 0;
}

/* Background Color Variants */
.ds-bg-primary-light {
    background: var(--color-info-bg);
}

.ds-bg-success-light {
    background: var(--color-success-bg);
}

.ds-bg-warning-light {
    background: var(--color-warning-bg-gradient-end);
}

.ds-bg-info-light {
    background: var(--color-info-bg);
}

.ds-bg-purple-light {
    background: var(--color-purple-bg);
}

.ds-bg-secondary-light {
    background: var(--color-surface-secondary);
}

/* Text Color Variants */
.ds-text-primary { color: var(--color-primary); }
.ds-text-success { color: var(--color-success); }
.ds-text-warning { color: var(--color-warning); }
.ds-text-info { color: var(--color-info); }
.ds-text-purple { color: var(--color-purple); }
.ds-text-secondary { color: var(--color-text-secondary); }

.ds-section-header-content {
    flex: 1;
}

.ds-section-title {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 var(--space-1) 0;
}

.ds-section-subtitle {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0;
}

/* ============================================
   SECTION BODY
   ============================================ */
.ds-section-body {
    padding: var(--space-6);
}

/* ============================================
   FORM LABELS WITH ICONS
   ============================================ */
.ds-form-label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: var(--space-2);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.ds-label-icon {
    color: var(--color-text-tertiary);
    font-size: var(--font-size-xs);
}

.ds-label--required::after {
    content: '*';
    color: var(--color-danger);
    margin-left: var(--space-1);
}

/* ============================================
   FORM INPUTS
   ============================================ */
.ds-form-input,
.ds-form-select,
.ds-form-textarea {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    font-size: var(--font-size-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    transition: all 0.2s ease;
    background: var(--color-surface);
    color: var(--color-text-primary);
}

.ds-form-input:focus,
.ds-form-select:focus,
.ds-form-textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.1);
}

.ds-form-input::placeholder,
.ds-form-textarea::placeholder {
    color: var(--color-text-tertiary);
}

.ds-input--readonly {
    background: var(--color-surface-secondary);
    color: var(--color-text-secondary);
    cursor: not-allowed;
}

.ds-form-textarea {
    resize: vertical;
    min-height: 100px;
    font-family: inherit;
}

/* Form Helper Text */
.ds-form-helper {
    display: block;
    margin-top: var(--space-1-5);
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    line-height: 1.4;
}

/* ============================================
   ENHANCED CHECKBOXES
   ============================================ */
.ds-checkbox-enhanced {
    position: relative;
    display: block;
    padding: var(--space-4);
    background: var(--color-surface-secondary);
    border: 2px solid var(--color-border);
    border-radius: var(--border-radius-md);
    transition: all 0.2s ease;
    cursor: pointer;
}

.ds-checkbox-enhanced:hover {
    background: var(--color-surface-secondary);
    border-color: var(--color-border);
}

.ds-checkbox-input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.ds-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    cursor: pointer;
    margin: 0;
}

.ds-checkbox-box {
    width: var(--space-5);
    height: var(--space-5);
    border: 2px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--color-surface);
    transition: all 0.2s ease;
    margin-top: var(--space-0-5);
}

.ds-checkbox-box i {
    font-size: var(--font-size-xs);
    color: var(--color-text-inverse);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.ds-checkbox-input:checked + .ds-checkbox-label .ds-checkbox-box {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.ds-checkbox-input:checked + .ds-checkbox-label .ds-checkbox-box i {
    opacity: 1;
}

.ds-checkbox-text {
    flex: 1;
}

.ds-checkbox-title {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: var(--space-1);
}

.ds-checkbox-description {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

/* ============================================
   WORKING HOURS GRID
   ============================================ */
.ds-working-hours-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-0-5);
    background: var(--color-border);
    border-radius: var(--border-radius);
    overflow: hidden;
}

.ds-hours-grid-header {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: var(--space-0-5);
    background: var(--color-surface-secondary);
    padding: var(--space-3) var(--space-4);
    font-size: var(--font-size-xs);
    font-weight: 700;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ds-hours-grid-row {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: var(--space-0-5);
    background: var(--color-surface);
    padding: var(--space-3) var(--space-4);
    align-items: center;
    transition: background 0.2s ease;
}

.ds-hours-grid-row:hover {
    background: var(--color-surface-secondary);
}

.ds-hours-day-name {
    display: flex;
    align-items: center;
    gap: var(--space-2-5);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-primary);
}

.ds-day-indicator {
    font-size: var(--space-1-5);
    color: var(--color-text-tertiary);
}

.ds-hours-toggle {
    display: flex;
    align-items: center;
    gap: var(--space-2-5);
    justify-content: center;
}

.ds-toggle-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.ds-hours-time {
    display: flex;
    align-items: center;
}

.ds-hours-time input {
    margin: 0;
}

/* ============================================
   MODERN SWITCH TOGGLE
   ============================================ */
.modern-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: var(--space-6);
    flex-shrink: 0;
}

.modern-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.switch-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-border);
    transition: 0.3s;
    border-radius: var(--border-radius-2xl);
}

.switch-slider:before {
    position: absolute;
    content: "";
    height: var(--space-4-5, 18px);
    width: var(--space-4-5, 18px);
    left: 3px;
    bottom: 3px;
    background-color: var(--color-surface);
    transition: 0.3s;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

input:checked + .switch-slider {
    background-color: var(--color-primary);
}

input:checked + .switch-slider:before {
    transform: translateX(var(--space-5));
}

input:focus + .switch-slider {
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.1);
}

/* ============================================
   MODAL FOOTER
   ============================================ */
.ds-modal-footer-enhanced {
    padding: var(--space-5) var(--space-8);
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
    gap: var(--space-3);
}

/* ============================================
   INFO CARD (WARNING MODAL)
   ============================================ */
.ds-info-card {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--color-info-gradient-start);
    border: 1px solid var(--color-info-border);
    border-radius: var(--border-radius);
    margin: var(--space-4) 0;
}

.ds-info-card i {
    color: var(--color-cyan);
    font-size: var(--font-size-xl);
}

.ds-info-card strong {
    display: block;
    margin-bottom: var(--space-1);
    color: var(--color-primary-dark);
}

/* ============================================
   FLATPICKR INTEGRATION
   ============================================ */
.flatpickr-wrap {
    position: relative;
}

.flatpickr-trigger-btn {
    position: absolute;
    right: var(--space-3);
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--color-text-secondary);
    cursor: pointer;
    padding: var(--space-1);
    transition: color 0.2s ease;
}

.flatpickr-trigger-btn:hover {
    color: var(--color-primary);
}

/* ============================================
   UTILITY CLASSES
   ============================================ */
.ds-hidden {
    display: none;
}

.ds-w-full {
    width: 100%;
}

.ds-m-0 {
    margin: 0;
}

.ds-mb-0 {
    margin-bottom: 0;
}

.ds-mt-3 {
    margin-top: var(--space-3);
}

.ds-text-muted {
    color: var(--color-text-secondary);
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */
@media (max-width: 768px) {
    .ds-modal-header-white {
        padding: var(--space-5);
    }

    .ds-modal-body-enhanced {
        padding: var(--space-5);
    }

    .ds-section-header {
        padding: var(--space-4);
    }

    .ds-section-body {
        padding: var(--space-4);
    }

    .ds-modal-footer-enhanced {
        padding: var(--space-4) var(--space-5);
        flex-direction: column;
    }

    .ds-modal-footer-enhanced button {
        width: 100%;
    }

    .ds-hours-grid-header,
    .ds-hours-grid-row {
        grid-template-columns: 1fr;
        gap: var(--space-2);
    }

    .ds-hours-grid-header {
        display: none;
    }

    .ds-hours-grid-row {
        padding: var(--space-4);
        gap: var(--space-3);
    }

    .ds-hours-day-name,
    .ds-hours-toggle,
    .ds-hours-time {
        justify-content: flex-start;
    }

    .ds-hours-time {
        width: 100%;
    }

    .ds-hours-time input {
        width: 100%;
    }
}


/* ========== pages/hr-employment-tab.css ========== */
/**
 * HR Employment Tab Styles
 *
 * Extracted from templates/hr/partials/tab_employment.html for better caching
 * and maintainability. Contains styles for employment relationship management,
 * working hours grid, schedule sections, and responsive design.
 */

/* ============================================
   EMPLOYMENT WRAPPER
   ============================================ */
.ds-employment-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

/* ============================================
   ENHANCED HEADER
   ============================================ */
.ds-employment-header {
    background: var(--color-surface);
    padding: var(--space-6) var(--space-7);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--color-border);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

.ds-employment-header-content {
    display: flex;
    align-items: center;
    gap: var(--space-5);
}

.ds-employment-header-icon {
    width: var(--space-14);
    height: var(--space-14);
    background: var(--color-info-bg);
    border-radius: var(--border-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-2xl);
    color: var(--color-primary);
    flex-shrink: 0;
}

.ds-employment-header-text {
    flex: 1;
}

.ds-employment-title {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0 0 var(--space-1-5) 0;
    letter-spacing: -0.3px;
}

.ds-employment-subtitle {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0;
    line-height: 1.5;
}

/* ============================================
   SECTION CARDS
   ============================================ */
.ds-employment-section-card {
    background: var(--color-surface);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--color-border);
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

.ds-section-card-header {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-6);
    background: var(--color-surface-secondary);
    border-bottom: 1px solid var(--color-border);
}

.ds-section-card-icon {
    width: var(--space-10);
    height: var(--space-10);
    background: var(--color-info-bg);
    border-radius: var(--border-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-lg);
    color: var(--color-info);
    flex-shrink: 0;
}

.ds-section-card-title {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0;
}

.ds-section-card-body {
    padding: var(--space-6);
}

/* ============================================
   ENHANCED LABELS WITH ICONS
   ============================================ */
.ds-enhanced-label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--space-2);
}

.ds-label-icon {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
}

/* ============================================
   ENHANCED BUTTONS
   ============================================ */
.ds-btn--enhanced {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    font-size: var(--font-size-sm);
    font-weight: 600;
    border-radius: var(--border-radius);
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
    white-space: nowrap;
}

.ds-btn--primary.ds-btn--enhanced {
    background: var(--color-primary);
    color: var(--color-text-inverse);
}

.ds-btn--primary.ds-btn--enhanced:hover {
    background: var(--color-primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(13, 110, 253, 0.25);
}

.ds-form-actions {
    margin-top: var(--space-6);
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-surface-secondary);
    display: flex;
    justify-content: flex-end;
}

/* ============================================
   WORKING HOURS HEADER
   ============================================ */
.ds-working-hours-header-special {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
}

.ds-working-hours-header-left {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex: 1;
}

.ds-working-hours-info-text {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: var(--space-1-5) 0 0 0;
    line-height: 1.5;
}

.ds-working-hours-info-text i {
    margin-right: var(--space-1-5);
    color: var(--color-text-tertiary);
    font-size: var(--font-size-xs);
}

.ds-working-hours-toggle {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-shrink: 0;
}

.ds-working-hours-label {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-primary);
    white-space: nowrap;
}

.ds-text-tertiary-help {
    color: var(--color-text-tertiary);
    font-size: var(--font-size-base);
    cursor: help;
}

/* ============================================
   HOURS OVERVIEW SECTION
   ============================================ */
.ds-hours-overview-section {
    margin-bottom: var(--space-8);
}

.ds-hours-overview-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
}

.ds-hours-summary-card-enhanced {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    padding: var(--space-5);
    display: flex;
    align-items: center;
    gap: var(--space-4);
    transition: all 0.2s ease;
}

.ds-hours-summary-card-enhanced:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.ds-hours-card-icon {
    width: 52px;
    height: 52px;
    border-radius: var(--border-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xl);
    flex-shrink: 0;
}

.ds-bg-primary-light {
    background: var(--color-info-bg);
    color: var(--color-primary);
}

.ds-bg-success-light {
    background: var(--color-success-bg);
    color: var(--color-success);
}

.ds-bg-info-light {
    background: var(--color-info-bg);
    color: var(--color-info);
}

.ds-hours-card-content {
    flex: 1;
}

.ds-hours-value {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0 0 var(--space-1) 0;
    line-height: 1;
}

.ds-hours-label {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-1) 0;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.ds-hours-helper {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    display: block;
}

/* ============================================
   SCHEDULE SECTION
   ============================================ */
.ds-schedule-section {
    margin-top: var(--space-8);
}

.ds-schedule-header-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr 0.9fr 0.9fr 0.7fr 1.2fr 0.6fr 0.6fr 1fr;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    background: var(--color-surface-secondary);
    border-radius: var(--border-radius) var(--border-radius) 0 0;
    border: 1px solid var(--color-border);
    border-bottom: 2px solid var(--color-border);
}

.ds-label-semibold-sm,
.ds-label-semibold-sm-center {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ds-label-semibold-sm-center {
    text-align: center;
}

.ds-schedule-days-container {
    border: 1px solid var(--color-border);
    border-top: none;
    border-radius: 0 0 var(--space-2) var(--space-2);
    overflow: hidden;
}

.ds-employee-hours-row {
    display: grid;
    grid-template-columns: 1.2fr 1fr 0.9fr 0.9fr 0.7fr 1.2fr 0.6fr 0.6fr 1fr;
    gap: var(--space-3);
    padding: 18px var(--space-5);
    align-items: center;
    border-bottom: 1px solid var(--color-surface-secondary);
    transition: background 0.15s ease;
}

.ds-employee-hours-row:hover {
    background: var(--color-surface-secondary);
}

.ds-employee-hours-row:last-child {
    border-bottom: none;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */
.ds-font-medium-primary {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0;
}

.ds-block {
    display: block;
}

.ds-text-xs-tertiary-mt {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    margin-top: var(--space-1);
}

.ds-flex {
    display: flex;
}

.ds-justify-center {
    justify-content: center;
}

.ds-justify-end {
    justify-content: flex-end;
}

.ds-items-center {
    align-items: center;
}

.ds-gap-2 {
    gap: var(--space-2);
}

.ds-text-sm-secondary {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.ds-text-center {
    text-align: center;
}

.ds-text-lg-semibold {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-text-primary);
}

.ds-hidden {
    display: none !important;
}

.ds-text-muted {
    color: var(--color-border);
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */
@media (max-width: 1200px) {
    .ds-hours-overview-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .ds-schedule-header-grid,
    .ds-employee-hours-row {
        grid-template-columns: 1.5fr repeat(8, 1fr);
        font-size: var(--font-size-xs);
    }
}

@media (max-width: 992px) {
    .ds-employment-header {
        padding: var(--space-5);
    }

    .ds-employment-header-content {
        gap: var(--space-4);
    }

    .ds-employment-header-icon {
        width: var(--icon-size-lg);
        height: var(--icon-size-lg);
        font-size: var(--font-size-xl);
    }

    .ds-employment-title {
        font-size: var(--font-size-lg);
    }

    .ds-employment-subtitle {
        font-size: var(--font-size-sm);
    }

    .ds-working-hours-header-special {
        flex-direction: column;
        align-items: stretch;
    }

    .ds-working-hours-toggle {
        justify-content: space-between;
        width: 100%;
    }

    .ds-schedule-header-grid {
        display: none;
    }

    .ds-employee-hours-row {
        grid-template-columns: 1fr;
        gap: var(--space-4);
        padding: var(--space-5);
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--border-radius);
        margin-bottom: var(--space-3);
    }

    .ds-schedule-days-container {
        border: none;
        background: transparent;
        padding: var(--space-2) 0;
    }

    .ds-employee-hours-row > div {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .ds-employee-hours-row > div:first-child {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 768px) {
    .ds-employment-wrapper {
        gap: var(--space-4);
    }

    .ds-employment-header {
        padding: var(--space-4);
    }

    .ds-employment-header-icon {
        width: 44px;
        height: 44px;
        font-size: var(--font-size-lg);
    }

    .ds-employment-title {
        font-size: var(--font-size-base);
    }

    .ds-section-card-header {
        padding: var(--space-4) var(--space-5);
    }

    .ds-section-card-body {
        padding: var(--space-5);
    }

    .ds-section-card-icon {
        width: 36px;
        height: 36px;
        font-size: var(--font-size-base);
    }

    .ds-section-card-title {
        font-size: var(--font-size-base);
    }

    .ds-hours-card-icon {
        width: 44px;
        height: 44px;
        font-size: var(--font-size-lg);
    }

    .ds-hours-value {
        font-size: var(--font-size-2xl);
    }
}

@media (max-width: 480px) {
    .ds-employment-wrapper {
        gap: var(--space-3);
    }

    .ds-employment-header {
        padding: var(--space-3-5);
    }

    .ds-employment-header-content {
        gap: var(--space-3);
    }

    .ds-employment-header-icon {
        width: var(--space-10);
        height: var(--space-10);
        font-size: var(--font-size-base);
    }

    .ds-section-card-header {
        padding: var(--space-3-5) var(--space-4);
    }

    .ds-section-card-body {
        padding: var(--space-4);
    }

    .ds-btn--enhanced {
        width: 100%;
        justify-content: center;
    }
}


/* ========== pages/hr-cost-sales.css ========== */
/**
 * HR Cost/Sales Prices Tab Styles
 *
 * Extracted from templates/hr/partials/tab_cost_sales.html for better caching
 * and maintainability. Contains styles for rates management, tables, modals,
 * and responsive design.
 */

/* ============================================
   COST/SALES PRICES ENHANCED STYLES
   ============================================ */

/* Wrapper */
.ds-rates-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

/* Enhanced Header */
.ds-rates-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    background: var(--color-surface);
    padding: var(--space-6) var(--space-7);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--color-border);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

.ds-rates-header-content {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    flex: 1;
}

.ds-rates-header-icon {
    width: var(--space-14);
    height: var(--space-14);
    border-radius: var(--border-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-2xl);
    flex-shrink: 0;
}

.ds-rates-icon-green {
    background: var(--color-success-bg);
    color: var(--color-success);
}

.ds-rates-icon-blue {
    background: var(--color-info-bg);
    color: var(--color-info);
}

.ds-rates-icon-orange {
    background: linear-gradient(135deg, var(--color-warning) 0%, var(--color-warning-dark) 100%);
    color: var(--color-text-inverse);
}

.ds-rates-icon-gray {
    background: linear-gradient(135deg, var(--color-gray-500) 0%, var(--color-gray-600) 100%);
    color: var(--color-text-inverse);
}

.ds-info-bullet-warning {
    background-color: var(--color-warning-bg);
}

.ds-info-bullet-warning i {
    color: var(--color-warning-dark);
}

.ds-rates-header-text {
    flex: 1;
}

.ds-rates-title {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0 0 var(--space-1-5) 0;
    letter-spacing: -0.3px;
}

.ds-rates-subtitle {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0;
    line-height: 1.5;
}

/* Enhanced Buttons */
.ds-btn--enhanced {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    font-size: var(--font-size-sm);
    font-weight: 600;
    border-radius: var(--border-radius);
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
    white-space: nowrap;
}

.ds-btn--primary.ds-btn--enhanced {
    background: var(--color-primary);
    color: var(--color-text-inverse);
}

.ds-btn--primary.ds-btn--enhanced:hover {
    background: var(--color-primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(13, 110, 253, 0.25);
}

.ds-btn--secondary.ds-btn--enhanced {
    background: var(--color-gray-600);
    color: var(--color-text-inverse) !important;
}

.ds-btn--secondary.ds-btn--enhanced:hover {
    background: var(--color-gray-700);
    color: var(--color-text-inverse) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(75, 85, 99, 0.25);
}

.ds-btn--lg {
    padding: var(--space-3-5) var(--space-8);
    font-size: var(--font-size-base);
}

/* Info Card */
.ds-rates-info-card {
    background: var(--color-surface);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--color-border);
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

.ds-info-card-header {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-6);
    background: var(--color-surface-secondary);
    border-bottom: 1px solid var(--color-border);
}

.ds-info-card-icon {
    width: var(--space-10);
    height: var(--space-10);
    border-radius: var(--border-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-lg);
    flex-shrink: 0;
}

.ds-info-card-title {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0;
}

.ds-info-card-body {
    padding: var(--space-6);
}

.ds-info-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.ds-info-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3-5);
}

.ds-info-bullet {
    width: var(--space-8);
    height: var(--space-8);
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: var(--font-size-sm);
}

.ds-bg-primary-light {
    background: var(--color-info-bg);
}

.ds-bg-success-light {
    background: var(--color-success-bg);
}

.ds-bg-warning-light {
    background: var(--color-warning-bg-gradient-end);
}

.ds-bg-danger-light {
    background: var(--color-danger-bg);
}

.ds-bg-info-light {
    background: var(--color-info-bg);
}

.ds-text-primary { color: var(--color-primary); }
.ds-text-success { color: var(--color-success); }
.ds-text-warning { color: var(--color-warning); }
.ds-text-danger { color: var(--color-danger); }
.ds-text-info { color: var(--color-info); }

.ds-info-content {
    flex: 1;
    padding-top: var(--space-1);
}

.ds-info-content strong {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: var(--space-1);
}

.ds-info-content span {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.5;
}

/* Table Section */
.ds-rates-table-section {
    background: var(--color-surface);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--color-border);
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

/* Desktop Table */
.ds-rates-table-desktop {
    overflow-x: auto;
}

.ds-overflow-x-auto {
    overflow-x: auto;
}

.ds-rates-table,
.ds-table {
    width: 100%;
    border-collapse: collapse;
}

.ds-rates-table thead {
    background: var(--color-surface-secondary);
    border-bottom: 2px solid var(--color-border);
}

.ds-rates-table th {
    padding: var(--space-4) var(--space-5);
    text-align: left;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.ds-th-icon {
    margin-right: var(--space-1-5);
    color: var(--color-text-tertiary);
    font-size: var(--font-size-xs);
}

.ds-rates-table tbody tr {
    border-bottom: 1px solid var(--color-surface-secondary);
    transition: background 0.15s ease;
}

.ds-rates-table tbody tr:hover {
    background: var(--color-surface-secondary);
}

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

.ds-rates-table td {
    padding: 18px var(--space-5);
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    vertical-align: middle;
}

.ds-table-loading {
    text-align: center;
    padding: 60px var(--space-5) !important;
}

/* Loading Spinner */
.ds-loading-spinner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: 60px var(--space-5);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.ds-loading-spinner i {
    font-size: var(--font-size-xl);
    color: var(--color-primary);
}

/* Mobile View */
.ds-rates-mobile,
.mobile-card-view {
    display: none;
    padding: var(--space-6);
}

/* Empty State */
.ds-rates-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 80px var(--space-8);
}

.ds-empty-icon {
    width: var(--space-20);
    height: var(--space-20);
    background: var(--color-surface-secondary);
    border-radius: var(--border-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--space-8);
    color: var(--color-text-tertiary);
    margin-bottom: var(--space-6);
}

.ds-empty-title {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 var(--space-2) 0;
}

.ds-empty-text {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-6) 0;
    max-width: 400px;
}

/* Utility */
.ds-hidden {
    display: none !important;
}

/* ============================================
   RATE MODAL ENHANCED STYLES
   ============================================ */

.ds-rate-modal {
    border: none;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
}

.ds-rate-modal-header {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-6) var(--space-7);
}

.ds-rate-modal-header-content {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex: 1;
}

.ds-rate-modal-icon {
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    background: var(--color-success-bg);
    border-radius: var(--border-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xl);
    color: var(--color-success);
    flex-shrink: 0;
}

.ds-rate-modal-title {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0;
}

.ds-rate-modal-body {
    padding: var(--space-7);
    background: var(--color-surface-secondary);
}

/* Form Sections */
.ds-rate-form-section {
    background: var(--color-surface);
    border-radius: var(--border-radius-md);
    padding: var(--space-5) var(--space-6);
    margin-bottom: var(--space-4);
    border: 1px solid var(--color-border);
}

.ds-rate-form-section:last-child {
    margin-bottom: 0;
}

.ds-rate-section-header {
    display: flex;
    align-items: center;
    gap: var(--space-2-5);
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 2px solid var(--color-surface-secondary);
}

.ds-rate-section-header i {
    color: var(--color-text-secondary);
    font-size: var(--font-size-base);
}

.ds-rate-modal-footer {
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    padding: var(--space-5) var(--space-7);
    display: flex;
    gap: var(--space-3);
    justify-content: flex-end;
}

/* Form Inputs */
.ds-form-label {
    display: block;
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: var(--space-2);
    letter-spacing: 0.3px;
}

.ds-form-input,
.ds-form-textarea,
.form-select {
    width: 100%;
    padding: var(--space-2-5) var(--space-3-5);
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--space-1-5);
    transition: all 0.15s ease;
}

.ds-form-input:focus,
.ds-form-textarea:focus,
.form-select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.1);
}

.ds-form-textarea {
    resize: vertical;
    font-family: inherit;
}

/* Form Check */
.ds-form-check {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.ds-form-check__input {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.ds-form-check__label {
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    cursor: pointer;
    margin: 0;
}

.ds-mb-3 {
    margin-bottom: var(--space-4);
}

.ds-mt-3 {
    margin-top: var(--space-4);
}

.ds-text-danger {
    color: var(--color-danger);
}

.gap-3 {
    gap: var(--space-3);
}

.ds-flex {
    display: flex;
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */
@media (max-width: 992px) {
    .ds-rates-header {
        flex-direction: column;
        align-items: stretch;
    }

    .ds-btn--enhanced {
        width: 100%;
        justify-content: center;
    }

    .ds-rates-table-desktop {
        display: none;
    }

    .ds-rates-mobile {
        display: block;
    }
}

@media (max-width: 768px) {
    .ds-rates-header {
        padding: var(--space-5);
    }

    .ds-rates-header-content {
        gap: var(--space-4);
    }

    .ds-rates-header-icon {
        width: var(--icon-size-lg);
        height: var(--icon-size-lg);
        font-size: var(--font-size-xl);
    }

    .ds-rates-title {
        font-size: var(--font-size-lg);
    }

    .ds-rates-subtitle {
        font-size: var(--font-size-sm);
    }

    .ds-info-card-header {
        padding: var(--space-4) var(--space-5);
    }

    .ds-info-card-body {
        padding: var(--space-5);
    }

    .ds-info-list {
        gap: var(--space-3-5);
    }

    .ds-info-item {
        gap: var(--space-3);
    }

    .ds-info-bullet {
        width: var(--space-7);
        height: var(--space-7);
        font-size: var(--font-size-xs);
    }

    .ds-info-content strong {
        font-size: var(--font-size-sm);
    }

    .ds-info-content span {
        font-size: var(--font-size-xs);
    }

    .ds-empty-icon {
        width: var(--icon-size-xl);
        height: var(--icon-size-xl);
        font-size: var(--space-7);
    }

    .ds-empty-title {
        font-size: var(--font-size-lg);
    }

    .ds-rate-modal-header {
        padding: var(--space-5);
    }

    .ds-rate-modal-body {
        padding: var(--space-5);
    }

    .ds-rate-modal-footer {
        padding: var(--space-4) var(--space-5);
        flex-direction: column;
    }

    .ds-rate-modal-footer .ds-btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .ds-rates-wrapper {
        gap: var(--space-4);
    }

    .ds-rates-header {
        padding: var(--space-4);
    }

    .ds-rates-header-icon {
        width: 44px;
        height: 44px;
        font-size: var(--font-size-lg);
    }

    .ds-rates-title {
        font-size: var(--font-size-base);
    }

    .ds-info-card-header {
        padding: var(--space-3-5) var(--space-4);
    }

    .ds-info-card-body {
        padding: var(--space-4);
    }

    .ds-rates-empty-state {
        padding: 60px var(--space-6);
    }

    .ds-rate-modal-icon {
        width: var(--space-10);
        height: var(--space-10);
        font-size: var(--font-size-lg);
    }

    .ds-rate-modal-title {
        font-size: var(--font-size-lg);
    }

    .ds-rate-form-section {
        padding: var(--space-4) 18px;
    }
}


/* ========== pages/hr-employees-list.css ========== */
/**
 * HR Employees List Page Styles
 *
 * Extracted from templates/hr/partials/employee_styles.html
 * for better caching and maintainability.
 */

/* ============================================
   SORTABLE TABLE HEADERS
   ============================================ */
.sortable-header {
    cursor: pointer;
}

.employee-row {
    cursor: pointer;
}

/* ============================================
   MOBILE RESPONSIVE STYLES
   ============================================ */
@media (max-width: 768px) {
    /* Search bar - full width on mobile */
    .search-input-group {
        max-width: 100% !important;
    }

    /* Alphabet filter button sizing on mobile */
    .alphabet-btn {
        min-width: 44px;
        min-height: 44px;
    }

    /* Header spacing on mobile */
    .container-fluid.px-4.py-3 {
        padding-left: var(--space-4) !important;
        padding-right: var(--space-4) !important;
    }

    /* Page header stacking on mobile */
    .ds-page-header {
        flex-direction: column;
        align-items: stretch !important;
        gap: var(--space-3);
    }

    .ds-page-header__actions {
        width: 100%;
    }

    .ds-page-header__actions button {
        width: 100%;
    }

    /* Controls row on mobile */
    .ds-flex.ds-justify-between.ds-items-center.ds-mb-2 {
        flex-direction: column;
        align-items: flex-start !important;
        gap: var(--space-2);
    }

    /* Modal optimizations for mobile */
    .modal-dialog {
        margin: var(--space-2);
    }

    .modal-content {
        max-height: calc(100vh - var(--space-4));
        overflow-y: auto;
    }
}

/* ============================================
   SMALL MOBILE DEVICES
   ============================================ */
@media (max-width: 480px) {
    .alphabet-btn {
        min-width: 36px;
        font-size: var(--font-size-xs);
    }
}


/* ========== pages/hr-employee-detail.css ========== */
/**
 * HR Employee Detail Page Styles
 *
 * Extracted from templates/hr/partials/styles_custom.html
 * and templates/hr/partials/styles_calendar.html
 * for better caching and maintainability.
 */

/* ============================================
   COPY ADDRESS BUTTON (from styles_custom.html)
   ============================================ */
.copy-address-btn:hover {
    background: var(--color-hover) !important;
    color: var(--color-primary) !important;
}

.copy-address-btn:active {
    transform: translateY(-50%) scale(0.95) !important;
}

/* Read-only styling for working hours */
.day-card.read-only {
    opacity: 0.9;
    background: var(--color-surface-secondary);
}

.day-card.read-only .modern-time-input:disabled,
.day-card.read-only .modern-select:disabled,
.day-card.read-only .modern-switch input:disabled + .switch-slider {
    opacity: 0.7;
    cursor: not-allowed;
}

/* ============================================
   CALENDAR VIEW TOGGLE (from styles_calendar.html)
   ============================================ */
.ds-btn-group {
    display: inline-flex;
    border-radius: var(--border-radius);
    overflow: hidden;
}

.ds-btn-group .ds-btn {
    border-radius: 0;
    margin: 0;
    border-right: none;
}

.ds-btn-group .ds-btn:first-child {
    border-top-left-radius: var(--border-radius);
    border-bottom-left-radius: var(--border-radius);
}

.ds-btn-group .ds-btn:last-child {
    border-top-right-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
    border-right: 1px solid var(--color-border);
}

.ds-btn-group .ds-btn.active {
    background: var(--color-primary);
    color: var(--color-text-inverse);
    border-color: var(--color-primary);
}

/* ============================================
   FULLCALENDAR CUSTOM STYLING
   ============================================ */
#employee-calendar-container {
    min-height: 750px !important;
    height: auto !important;
}

#employee-calendar-container .fc {
    font-family: var(--font-family-base);
    height: 700px !important;
}

#employee-calendar-container .fc-toolbar-title {
    font-size: var(--font-size-2xl);
    font-weight: 600;
}

#employee-calendar-container .fc-button {
    background: var(--color-primary);
    border-color: var(--color-primary);
    text-transform: capitalize;
}

#employee-calendar-container .fc-button:hover {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
}

#employee-calendar-container .fc-button-active {
    background: var(--color-primary-dark) !important;
    border-color: var(--color-primary-dark) !important;
}

#employee-calendar-container .fc-event {
    cursor: pointer;
    border-radius: var(--space-1);
    padding: var(--space-0-5) var(--space-1);
}

#employee-calendar-container .fc-event:hover {
    opacity: 0.8;
}

/* ============================================
   RESPONSIVE CALENDAR
   ============================================ */
@media (max-width: 768px) {
    #employee-calendar-container .fc-toolbar {
        flex-direction: column;
        gap: var(--space-2);
    }

    #employee-calendar-container .fc-toolbar-chunk {
        margin-bottom: var(--space-2);
    }
}

/* ============================================
   ADD EMPLOYEE MODAL STYLES
   (from templates/hr/partials/employee_create_modal.html)
   ============================================ */
#addEmployeeModal {
    pointer-events: auto !important;
}

#addEmployeeModal .modal-content {
    pointer-events: auto !important;
}

#addEmployeeModal .modal-body::-webkit-scrollbar {
    width: var(--space-2);
}

#addEmployeeModal .modal-body::-webkit-scrollbar-track {
    background: var(--color-background-secondary);
    border-radius: var(--space-1);
}

#addEmployeeModal .modal-body::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: var(--space-1);
}

#addEmployeeModal .modal-body::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-tertiary);
}

#addEmployeeModal .ds-btn-icon--absolute-right {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    color: var(--color-text-secondary);
    border-radius: var(--space-1);
    transition: all 0.2s;
    z-index: 10;
}

#addEmployeeModal .ds-btn-icon--absolute-right:hover {
    background: var(--color-background-secondary);
    color: var(--color-primary);
}

#addEmployeeModal .ds-btn-copy {
    position: absolute;
    right: 3rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    color: var(--color-text-secondary);
    border-radius: var(--space-1);
    transition: all 0.2s;
    z-index: 10;
}

#addEmployeeModal .ds-btn-copy:hover {
    background: var(--color-background-secondary);
    color: var(--color-primary);
}

#addEmployeeModal input,
#addEmployeeModal select,
#addEmployeeModal textarea,
#addEmployeeModal button {
    pointer-events: auto !important;
    cursor: text !important;
}

#addEmployeeModal button {
    cursor: pointer !important;
}

.pac-container {
    z-index: var(--z-alert-toast);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg);
}

/* ============================================
   INVITATION MODAL STYLES
   (from templates/hr/employee_detail.html)
   ============================================ */
#sendInvitationModal .btn-secondary,
#sendInvitationModal .btn-primary,
#invitationSuccessModal .btn-primary {
    color: var(--color-text-inverse) !important;
    -webkit-text-fill-color: var(--color-text-inverse) !important;
}


/* ========== pages/workzone-mobile.css ========== */
/* Workzone Mobile Styles - Native App Experience */
/* Mobile-first design with bottom navigation, visual cards, and FAB */

@media (max-width: 768px) {
    /* ========================================
       ROOT SCROLL & LAYOUT FIXES
       ======================================== */
    body.workzone-route {
        overflow-x: hidden !important;
        overflow-y: auto !important;
        height: auto !important;
        min-height: 100vh !important;
        padding-bottom: var(--space-20) !important;
    }
    
    body.workzone-route .main-content {
        overflow: visible !important;
        height: auto !important;
        min-height: auto !important;
        padding-bottom: 0 !important;
    }
    
    body.workzone-route .settings-page {
        padding: 0 !important;
        background: var(--color-surface-secondary) !important;
        overflow: visible !important;
        height: auto !important;
        min-height: 100vh !important;
    }
    
    body.workzone-route .settings-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        position: static !important;
        height: auto !important;
        min-height: auto !important;
        overflow: visible !important;
    }
    
    /* ========================================
       SIDEBAR TRANSFORMED TO BOTTOM NAVIGATION
       ======================================== */
    body.workzone-route .settings-sidebar {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        z-index: 1000 !important;
        background: var(--color-surface) !important;
        border-top: 1px solid var(--color-border) !important;
        border-right: none !important;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08) !important;
        padding: 0 !important;
        width: 100% !important;
        min-width: unset !important;
        max-width: unset !important;
        height: auto !important;
        overflow: visible !important;
    }
    
    /* Hide the header in sidebar on mobile */
    body.workzone-route .settings-sidebar .workzone-header {
        display: none !important;
    }
    
    /* ========================================
       BOTTOM NAVIGATION BAR - Native App Style
       ======================================== */
    body.workzone-route .settings-sidebar .settings-nav {
        display: flex !important;
        position: static !important;
        background: #ffffff !important;
        border: none !important;
        box-shadow: none !important;
        padding: var(--space-2) var(--space-2) env(safe-area-inset-bottom, var(--space-2)) !important;
        margin: 0 !important;
        list-style: none !important;
        flex-direction: row !important;
        justify-content: flex-start !important;
        align-items: stretch !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        gap: var(--space-1) !important;
    }
    
    body.workzone-route .settings-sidebar .settings-nav::-webkit-scrollbar {
        display: none !important;
    }
    
    body.workzone-route .settings-sidebar .settings-nav li {
        flex: 0 0 auto !important;
        display: flex !important;
        justify-content: center !important;
        min-width: var(--space-16) !important;
    }
    
    body.workzone-route .settings-sidebar .settings-tab-link {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: var(--space-1) !important;
        padding: var(--space-2) var(--space-2) !important;
        min-height: var(--space-14) !important;
        min-width: var(--space-16) !important;
        font-size: 0.625rem !important;
        font-weight: 500 !important;
        color: var(--color-text-secondary) !important;
        text-decoration: none !important;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        white-space: nowrap !important;
        transition: color 0.2s ease !important;
        position: relative !important;
        text-align: center !important;
    }
    
    body.workzone-route .settings-sidebar .settings-tab-link i {
        font-size: var(--font-size-xl) !important;
        margin: 0 !important;
        display: block !important;
        text-align: center !important;
    }
    
    body.workzone-route .settings-sidebar .settings-tab-link span {
        display: block !important;
        text-align: center !important;
        line-height: 1.1 !important;
        margin-top: var(--space-0-5) !important;
    }
    
    body.workzone-route .settings-sidebar .settings-tab-link.active {
        color: var(--color-primary) !important;
        background: transparent !important;
    }
    
    body.workzone-route .settings-sidebar .settings-tab-link.active::after {
        content: '' !important;
        position: absolute !important;
        top: 0 !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: var(--space-6) !important;
        height: 3px !important;
        background: var(--color-primary) !important;
        border-radius: 0 0 var(--border-radius-sm) var(--border-radius-sm) !important;
    }
    
    /* ========================================
       MAIN CONTENT AREA
       ======================================== */
    body.workzone-route .settings-content {
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        flex: 1 !important;
    }
    
    /* ========================================
       PAGE HEADER - Polished Native Style
       ======================================== */
    body.workzone-route .ds-page-header {
        background: var(--color-surface) !important;
        padding: var(--space-6) var(--space-4) var(--space-5) !important;
        margin: 0 !important;
        border-bottom: 1px solid var(--color-border) !important;
        border-radius: 0 !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: var(--space-5) !important;
        color: var(--color-text-primary) !important;
        box-shadow: none !important;
        position: relative !important;
        overflow: visible !important;
    }
    
    /* Remove pattern overlay for standard header */
    body.workzone-route .ds-page-header::before {
        display: none !important;
    }
    
    body.workzone-route .ds-page-header__title-section {
        width: 100% !important;
        position: relative !important;
        z-index: 1 !important;
        text-align: center !important;
    }
    
    body.workzone-route .ds-page-header__title {
        font-size: var(--font-size-2xl) !important;
        font-weight: 700 !important;
        color: var(--color-text-primary) !important;
        margin-bottom: var(--space-1-5) !important;
        text-shadow: none !important;
        text-align: center !important;
        -webkit-text-fill-color: var(--color-text-primary) !important;
    }
    
    body.workzone-route .ds-page-header__subtitle {
        color: var(--color-text-secondary) !important;
        font-size: var(--font-size-base) !important;
        font-weight: 400 !important;
        text-align: center !important;
        -webkit-text-fill-color: var(--color-text-secondary) !important;
    }
    
    /* Action Buttons in Header - Polished */
    body.workzone-route .ds-page-header__actions {
        display: flex !important;
        flex-direction: row !important;
        gap: var(--space-3) !important;
        width: 100% !important;
        position: relative !important;
        z-index: 1 !important;
    }
    
    /* Note: 52px has no exact token (--space-12=48px, --space-14=56px), kept as literal for design intent */
    body.workzone-route .ds-page-header__actions .ds-btn {
        flex: 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: var(--space-2) !important;
        min-height: 52px !important;
        font-size: var(--font-size-base) !important;
        font-weight: 600 !important;
        border-radius: var(--border-radius) !important;
        transition: transform 0.15s ease, box-shadow 0.15s ease !important;
    }
    
    body.workzone-route .ds-page-header__actions .ds-btn:active {
        transform: scale(0.97) !important;
    }
    
    body.workzone-route .ds-page-header__actions .ds-btn--primary,
    body.workzone-route .ds-page-header__actions button.ds-btn--primary {
        background: var(--color-primary) !important;
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
        border: none !important;
        box-shadow: 0 2px 8px rgba(30, 64, 175, 0.3) !important;
        text-overflow: clip !important;
        overflow: visible !important;
        white-space: nowrap !important;
    }
    
    body.workzone-route .ds-page-header__actions .ds-btn--primary i,
    body.workzone-route .ds-page-header__actions button.ds-btn--primary i {
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
    }
    
    body.workzone-route .ds-page-header__actions .ds-btn--outline-primary {
        background: transparent !important;
        color: var(--color-primary) !important;
        border: 1px solid var(--color-border) !important;
        box-shadow: none !important;
        -webkit-text-fill-color: var(--color-primary) !important;
    }
    
    body.workzone-route .ds-page-header__actions .ds-btn--outline-primary i {
        color: var(--color-primary) !important;
        -webkit-text-fill-color: var(--color-primary) !important;
    }
    
    /* ========================================
       TAB NAVIGATION - Horizontal Pills
       ======================================== */
    body.workzone-route .workzone-tabs {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        gap: var(--space-2) !important;
        padding: var(--space-4) !important;
        background: transparent !important;
        border-bottom: none !important;
        scrollbar-width: none !important;
        margin-top: calc(-1 * var(--space-2-5)) !important;
    }
    
    body.workzone-route .workzone-tabs::-webkit-scrollbar {
        display: none !important;
    }
    
    body.workzone-route .workzone-tab {
        flex-shrink: 0 !important;
        padding: var(--space-2-5) var(--space-4) !important;
        min-height: var(--space-10) !important;
        font-size: var(--font-size-sm) !important;
        font-weight: 600 !important;
        color: var(--color-text-secondary) !important;
        background: var(--color-surface) !important;
        border: none !important;
        border-radius: var(--border-radius) !important;
        white-space: nowrap !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
        transition: all 0.2s ease !important;
    }
    
    body.workzone-route .workzone-tab--active,
    body.workzone-route .workzone-tab.active {
        background: var(--color-primary) !important;
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
        box-shadow: 0 2px 8px rgba(30, 64, 175, 0.3) !important;
    }
    
    /* ========================================
       STATS CARDS GRID - Visual Dashboard
       ======================================== */
    body.workzone-route .workzone-stats-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        padding: 12px 16px 16px !important;
        margin-top: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Individual Stat Cards - Premium Compact Style */
    body.workzone-route .workzone-card {
        background: #ffffff !important;
        border: none !important;
        border-radius: 12px !important;
        padding: 12px !important;
        margin: 0 !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: 90px !important;
        position: relative !important;
        overflow: hidden !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Card Color Accents - Premium gradient left border */
    body.workzone-route .workzone-card:nth-child(1) {
        border-left: 4px solid var(--color-primary) !important;
        background: linear-gradient(135deg, rgba(30, 58, 138, 0.03) 0%, var(--color-surface) 100%) !important;
    }
    body.workzone-route .workzone-card:nth-child(2) {
        border-left: 4px solid var(--color-purple, #8b5cf6) !important;
        background: linear-gradient(135deg, rgba(139, 92, 246, 0.03) 0%, var(--color-surface) 100%) !important;
    }
    body.workzone-route .workzone-card:nth-child(3) {
        border-left: 4px solid var(--color-success) !important;
        background: linear-gradient(135deg, rgba(34, 197, 94, 0.03) 0%, var(--color-surface) 100%) !important;
    }
    body.workzone-route .workzone-card:nth-child(4) {
        border-left: 4px solid var(--color-warning) !important;
        background: linear-gradient(135deg, rgba(245, 158, 11, 0.03) 0%, var(--color-surface) 100%) !important;
    }
    body.workzone-route .workzone-card:nth-child(5) {
        border-left: 4px solid var(--color-pink, #ec4899) !important;
        background: linear-gradient(135deg, rgba(236, 72, 153, 0.03) 0%, var(--color-surface) 100%) !important;
    }
    body.workzone-route .workzone-card:nth-child(6) {
        border-left: 4px solid var(--color-indigo, #6366f1) !important;
        background: linear-gradient(135deg, rgba(99, 102, 241, 0.03) 0%, var(--color-surface) 100%) !important;
    }
    
    body.workzone-route .workzone-card__header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: flex-start !important;
        margin-bottom: var(--space-2) !important;
    }
    
    body.workzone-route .workzone-card__title {
        font-size: var(--font-size-xs) !important;
        font-weight: 600 !important;
        color: var(--color-text-tertiary) !important;
        text-transform: uppercase !important;
        letter-spacing: 0.05em !important;
        margin: 0 !important;
    }
    
    body.workzone-route .workzone-card__expand {
        display: none !important;
    }
    
    body.workzone-route .workzone-card__body {
        padding: 0 !important;
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }
    
    body.workzone-route .workzone-stat {
        margin-bottom: var(--space-0-5) !important;
    }
    
    body.workzone-route .workzone-stat__value {
        font-size: var(--font-size-xl) !important;
        font-weight: 700 !important;
        color: var(--color-text-primary) !important;
        line-height: 1.1 !important;
    }
    
    body.workzone-route .workzone-stat__value--large {
        font-size: var(--font-size-lg) !important;
    }
    
    body.workzone-route .workzone-stat__label {
        font-size: 0.65rem !important;
        color: var(--color-text-tertiary) !important;
        margin-top: 2px !important;
        text-transform: uppercase !important;
        letter-spacing: 0.02em !important;
    }
    
    body.workzone-route .workzone-stat--secondary {
        margin-top: var(--space-1-5) !important;
        padding-top: var(--space-1-5) !important;
        border-top: 1px solid var(--color-gray-100) !important;
    }
    
    body.workzone-route .workzone-stat--secondary .workzone-stat__value {
        font-size: var(--font-size-base) !important;
        color: var(--color-text-secondary) !important;
    }
    
    body.workzone-route .workzone-stat-row {
        display: flex !important;
        flex-direction: column !important;
        gap: var(--space-1-5) !important;
        margin-top: var(--space-1) !important;
    }
    
    body.workzone-route .workzone-stat-item {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
    }
    
    body.workzone-route .workzone-stat-item__label {
        color: var(--color-text-secondary) !important;
        font-size: var(--font-size-xs) !important;
    }
    
    body.workzone-route .workzone-stat-item__value {
        font-weight: 600 !important;
        color: var(--color-text-primary) !important;
        font-size: var(--font-size-sm) !important;
    }
    
    /* ========================================
       PENDING REQUESTS & APPROVALS SECTION
       ======================================== */
    body.workzone-route .row.ds-mt-4 {
        margin-top: var(--space-2) !important;
        padding: 0 var(--space-4) var(--space-4) !important;
    }
    
    body.workzone-route .row.ds-mt-4 > [class*="col-"] {
        padding: 0 !important;
        margin-bottom: var(--space-3) !important;
    }
    
    body.workzone-route .ds-card {
        border-radius: var(--border-radius-lg) !important;
        border: none !important;
        margin: 0 !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
        overflow: hidden !important;
    }
    
    body.workzone-route .ds-card__header {
        padding: var(--space-4) !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        background: var(--color-surface-secondary) !important;
        border-bottom: 1px solid var(--color-border) !important;
    }
    
    body.workzone-route .ds-card__title {
        font-size: var(--font-size-base) !important;
        font-weight: 600 !important;
        color: var(--color-text-primary) !important;
    }
    
    body.workzone-route .ds-card__body {
        padding: var(--space-4) !important;
    }
    
    /* Empty States */
    body.workzone-route .ds-empty-state {
        padding: var(--space-6) var(--space-4) !important;
        text-align: center !important;
    }
    
    body.workzone-route .ds-empty-state__icon {
        font-size: var(--space-8) !important;
        color: var(--color-border) !important;
        margin-bottom: var(--space-3) !important;
    }
    
    body.workzone-route .ds-empty-state__message {
        color: var(--color-text-secondary) !important;
        font-size: var(--font-size-sm) !important;
    }
    
    body.workzone-route .ds-empty-state__message a {
        color: var(--color-primary) !important;
        font-weight: 500 !important;
    }
    
    /* ========================================
       CALENDAR TAB - Full Width Edge-to-Edge
       ======================================== */
    
    /* Remove all padding from container hierarchy for calendar tab */
    body.workzone-route .workzone-tab-content {
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* Flatten project-main-card wrapper */
    body.workzone-route #calendar-tab .project-main-card {
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Flatten project-section wrapper */
    body.workzone-route #calendar-tab .project-section {
        padding: var(--space-2) !important;
        margin: 0 !important;
    }
    
    /* Hide calendar header text on mobile to save space */
    body.workzone-route #calendar-tab .project-section-title,
    body.workzone-route #calendar-tab .project-section > .ds-flex {
        display: none !important;
    }
    
    /* Also flatten ds-card if present */
    body.workzone-route .workzone-tab-content .ds-card {
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        margin: 0 !important;
        background: transparent !important;
    }
    
    body.workzone-route .workzone-tab-content .ds-card__body {
        padding: var(--space-2) !important;
    }
    
    /* Calendar container - full width */
    body.workzone-route #workzone-calendar-container {
        padding: 0 !important;
        border: none !important;
        border-radius: 0 !important;
        min-height: auto !important;
        margin: 0 !important;
        box-shadow: none !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        position: relative !important;
        background: var(--color-surface) !important;
        width: 100% !important;
    }
    
    /* Calendar itself - auto height, scrollable */
    body.workzone-route #workzone-calendar-container .fc {
        height: auto !important;
        min-height: 400px !important;
    }
    
    body.workzone-route #workzone-calendar-container .fc-view-harness {
        min-height: 350px !important;
    }
    
    /* Stack toolbar vertically for better mobile fit */
    body.workzone-route #workzone-calendar-container .fc-header-toolbar {
        flex-direction: column !important;
        gap: var(--space-2) !important;
        margin-bottom: var(--space-2) !important;
        padding: var(--space-2) !important;
        background: var(--color-surface) !important;
    }
    
    body.workzone-route #workzone-calendar-container .fc-toolbar-chunk {
        display: flex !important;
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: var(--space-2) !important;
    }
    
    body.workzone-route #workzone-calendar-container .fc-toolbar-title {
        font-size: var(--font-size-base) !important;
        font-weight: 600 !important;
        text-align: center !important;
    }
    
    body.workzone-route #workzone-calendar-container .fc-toolbar {
        flex-wrap: wrap !important;
        gap: var(--space-2) !important;
    }
    
    /* Compact touch targets for buttons */
    body.workzone-route #workzone-calendar-container .fc-button {
        padding: var(--space-2) var(--space-3) !important;
        font-size: var(--font-size-sm) !important;
        border-radius: var(--border-radius) !important;
        min-height: 40px !important;
        min-width: 40px !important;
    }
    
    /* Better day header readability */
    body.workzone-route #workzone-calendar-container .fc-col-header-cell-cushion {
        font-size: var(--font-size-xs) !important;
        padding: var(--space-1) !important;
        font-weight: 600 !important;
    }
    
    /* Improve time slot labels */
    body.workzone-route #workzone-calendar-container .fc-timegrid-slot-label {
        font-size: var(--font-size-xs) !important;
    }
    
    /* Calendar legend compact */
    body.workzone-route #calendar-tab .calendar-legend,
    body.workzone-route #calendar-tab .work-log-legend {
        padding: var(--space-2) !important;
        margin: 0 !important;
        font-size: var(--font-size-xs) !important;
        flex-wrap: wrap !important;
        gap: var(--space-2) !important;
    }
    
    /* ========================================
       TABLE STYLES
       ======================================== */
    body.workzone-route .table-responsive {
        margin: 0 !important;
        padding: 0 !important;
        border-radius: var(--border-radius-lg) !important;
        overflow: hidden !important;
    }
    
    body.workzone-route .ds-table {
        font-size: var(--font-size-sm) !important;
    }
    
    body.workzone-route .ds-table th,
    body.workzone-route .ds-table td {
        padding: var(--space-3) var(--space-2) !important;
        white-space: nowrap !important;
    }
    
    /* ========================================
       BUTTONS - Touch Friendly & Polished
       ======================================== */
    body.workzone-route .ds-btn {
        min-height: 48px !important;
        border-radius: var(--border-radius) !important;
        font-weight: 600 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: var(--space-2) !important;
        transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease !important;
    }
    
    body.workzone-route .ds-btn:active {
        transform: scale(0.97) !important;
    }
    
    body.workzone-route .ds-btn--primary {
        background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-blue-dark) 100%) !important;
        border: none !important;
        box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3) !important;
    }
    
    body.workzone-route .ds-btn--sm {
        min-height: 44px !important;
        padding: var(--space-2) var(--space-4) !important;
        font-size: var(--font-size-sm) !important;
        border-radius: var(--border-radius) !important;
    }
    
    body.workzone-route .btn-group-sm .ds-btn {
        min-width: 44px !important;
        min-height: 44px !important;
    }
    
    /* View All Links */
    body.workzone-route .ds-card__header .ds-btn--outline {
        font-size: var(--font-size-sm) !important;
        padding: var(--space-2) var(--space-4) !important;
        min-height: var(--space-9) !important;
        border-radius: var(--border-radius) !important;
        font-weight: 500 !important;
    }
    
    /* Large Action Buttons (like Create First Request) */
    /* Note: 52px has no exact token (--space-12=48px, --space-14=56px), kept as literal for design intent */
    body.workzone-route .ds-empty-state .ds-btn,
    body.workzone-route .ds-btn--lg {
        min-height: 52px !important;
        padding: var(--space-3-5) var(--space-6) !important;
        font-size: var(--font-size-base) !important;
        font-weight: 600 !important;
        border-radius: var(--border-radius) !important;
        box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25) !important;
    }
    
    /* ========================================
       PROJECT/MAIN CARDS
       ======================================== */
    body.workzone-route .project-main-card {
        background: var(--color-surface) !important;
        border: none !important;
        border-radius: var(--border-radius-lg) !important;
        margin: 0 var(--space-4) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    }
    
    body.workzone-route .project-section {
        padding: var(--space-4) !important;
    }
    
    body.workzone-route .project-section-title {
        font-size: var(--font-size-lg) !important;
        color: var(--color-text-primary) !important;
        font-weight: 600 !important;
    }
    
    /* ========================================
       TAB CONTENT AREAS
       ======================================== */
    body.workzone-route .workzone-tab-content .ds-card {
        margin: 0 var(--space-4) !important;
    }
    
    /* ========================================
       OUTLAYS CARDS - Native App Style
       ======================================== */
    
    /* Outlay Card Container */
    body.workzone-route .outlay-card.ds-card {
        background: var(--color-surface) !important;
        border: none !important;
        border-radius: var(--border-radius-lg) !important;
        margin: 0 var(--space-4) var(--space-3) !important;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
        overflow: hidden !important;
    }
    
    body.workzone-route .outlay-card .ds-card__body {
        padding: var(--space-5) !important;
    }
    
    /* Stack layout on mobile */
    body.workzone-route .outlay-card .row {
        display: flex !important;
        flex-direction: column !important;
    }
    
    body.workzone-route .outlay-card .row > [class*="col-"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        margin-bottom: var(--space-4) !important;
    }
    
    body.workzone-route .outlay-card .row > [class*="col-"]:last-child {
        margin-bottom: 0 !important;
    }
    
    /* Outlay Info Section */
    body.workzone-route .outlay-card .outlay-info {
        display: flex !important;
        flex-direction: column !important;
        gap: var(--space-3) !important;
    }
    
    body.workzone-route .outlay-card .outlay-date {
        font-size: var(--font-size-sm) !important;
        color: var(--color-text-secondary) !important;
        display: flex !important;
        align-items: center !important;
        gap: var(--space-2) !important;
    }
    
    body.workzone-route .outlay-card .outlay-date i {
        color: var(--color-text-tertiary) !important;
    }
    
    body.workzone-route .outlay-card .outlay-description {
        font-size: var(--font-size-base) !important;
        color: var(--color-text-primary) !important;
        font-weight: 500 !important;
        line-height: 1.5 !important;
    }
    
    body.workzone-route .outlay-card .outlay-category {
        display: inline-flex !important;
        align-items: center !important;
        gap: var(--space-1-5) !important;
        padding: var(--space-1-5) var(--space-3) !important;
        background: var(--color-surface-secondary) !important;
        border-radius: var(--space-5) !important;
        font-size: var(--font-size-xs) !important;
        color: var(--color-text-secondary) !important;
        font-weight: 500 !important;
    }
    
    /* Amount Display */
    body.workzone-route .outlay-card .outlay-amount {
        font-size: var(--font-size-2xl) !important;
        font-weight: 700 !important;
        color: var(--color-text-primary) !important;
        text-align: left !important;
        padding: var(--space-4) !important;
        background: var(--color-surface-secondary) !important;
        border-radius: var(--space-3) !important;
        margin-bottom: var(--space-4) !important;
    }
    
    /* Status Badge */
    body.workzone-route .outlay-card .outlay-status {
        display: inline-flex !important;
        align-items: center !important;
        gap: var(--space-2) !important;
        padding: var(--space-2) var(--space-4) !important;
        border-radius: var(--space-5) !important;
        font-size: var(--font-size-sm) !important;
        font-weight: 600 !important;
    }
    
    body.workzone-route .outlay-card .outlay-status--pending {
        background: var(--color-warning-bg) !important;
        color: var(--color-warning-dark-brown) !important;
    }
    
    body.workzone-route .outlay-card .outlay-status--approved {
        background: var(--color-success-bg) !important;
        color: var(--color-success-darker) !important;
    }
    
    body.workzone-route .outlay-card .outlay-status--rejected {
        background: var(--color-danger-bg) !important;
        color: var(--color-danger-darker) !important;
    }
    
    /* Actions */
    body.workzone-route .outlay-card .outlay-actions {
        display: flex !important;
        gap: var(--space-2) !important;
        margin-top: var(--space-4) !important;
    }
    
    body.workzone-route .outlay-card .outlay-actions .ds-btn {
        flex: 1 !important;
        min-height: 44px !important;
    }
    
    /* Image thumbnail */
    body.workzone-route .outlay-card .outlay-image {
        width: 100% !important;
        height: 160px !important;
        object-fit: cover !important;
        border-radius: var(--border-radius) !important;
        background: var(--color-surface-secondary) !important;
    }
    
    /* ========================================
       ABSENCE REQUEST CARDS
       ======================================== */
    body.workzone-route .absence-card.ds-card {
        background: var(--color-surface) !important;
        border: none !important;
        border-radius: var(--border-radius-lg) !important;
        margin: 0 var(--space-4) var(--space-3) !important;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
        overflow: hidden !important;
        border-left: var(--space-1) solid var(--color-primary) !important;
    }
    
    body.workzone-route .absence-card .ds-card__body {
        padding: var(--space-5) !important;
    }
    
    body.workzone-route .absence-card .absence-type {
        font-size: var(--font-size-lg) !important;
        font-weight: 600 !important;
        color: var(--color-text-primary) !important;
        margin-bottom: var(--space-3) !important;
    }
    
    body.workzone-route .absence-card .absence-dates {
        display: flex !important;
        align-items: center !important;
        gap: var(--space-3) !important;
        padding: var(--space-3) !important;
        background: var(--color-surface-secondary) !important;
        border-radius: var(--border-radius) !important;
        margin-bottom: var(--space-3) !important;
    }
    
    body.workzone-route .absence-card .absence-dates i {
        color: var(--color-primary) !important;
        font-size: var(--font-size-xl) !important;
    }
    
    body.workzone-route .absence-card .absence-date-range {
        font-size: var(--font-size-sm) !important;
        color: var(--color-text-primary) !important;
        font-weight: 500 !important;
    }
    
    body.workzone-route .absence-card .absence-duration {
        font-size: var(--font-size-xs) !important;
        color: var(--color-text-secondary) !important;
    }
    
    /* ========================================
       FORM ELEMENTS
       ======================================== */
    body.workzone-route .ds-form-control,
    body.workzone-route .form-control,
    body.workzone-route input[type="text"],
    body.workzone-route input[type="number"],
    body.workzone-route input[type="date"],
    body.workzone-route select,
    body.workzone-route textarea {
        min-height: 48px !important;
        font-size: var(--font-size-base) !important;
        padding: var(--space-3) var(--space-4) !important;
        border-radius: var(--border-radius) !important;
        border: 1px solid var(--color-border) !important;
    }
    
    body.workzone-route .ds-form-control:focus,
    body.workzone-route .form-control:focus {
        border-color: var(--color-primary) !important;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important;
    }
    
    /* ========================================
       MODAL OVERRIDES
       ======================================== */
    body.workzone-route .modal-dialog {
        margin: var(--space-4) !important;
        max-width: calc(100% - var(--space-8)) !important;
    }
    
    body.workzone-route .modal-content {
        border-radius: var(--space-4) !important;
        border: none !important;
        box-shadow: 0 var(--space-5) 60px rgba(0, 0, 0, 0.3) !important;
    }
    
    body.workzone-route .modal-header {
        padding: var(--space-5) !important;
        border-bottom: 1px solid var(--color-border) !important;
    }
    
    body.workzone-route .modal-body {
        padding: var(--space-5) !important;
    }
    
    body.workzone-route .modal-footer {
        padding: var(--space-4) var(--space-5) !important;
        border-top: 1px solid var(--color-border) !important;
        gap: var(--space-2) !important;
    }
    
    body.workzone-route .modal-footer .ds-btn {
        flex: 1 !important;
    }
}

/* ========================================
   EXTRA SMALL SCREENS (< 480px)
   ======================================== */
@media (max-width: 480px) {
    body.workzone-route .workzone-stats-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }
    
    body.workzone-route .workzone-card {
        min-height: auto !important;
        padding: var(--space-3-5) !important;
    }
    
    body.workzone-route .workzone-stat__value {
        font-size: var(--font-size-xl) !important;
    }
    
    body.workzone-route .ds-page-header__actions {
        flex-direction: column !important;
    }
    
    body.workzone-route .ds-page-header__actions .ds-btn {
        width: 100% !important;
    }
    
    /* Bottom nav - maintain readable size, scrollable handles overflow */
    body.workzone-route .settings-sidebar .settings-tab-link {
        font-size: 0.5625rem !important;
        padding: var(--space-1-5) var(--space-1-5) !important;
        min-width: var(--space-14) !important;
    }
    
    body.workzone-route .settings-sidebar .settings-tab-link i {
        font-size: var(--font-size-lg) !important;
    }
    
    body.workzone-route .settings-sidebar .settings-nav li {
        min-width: var(--space-14) !important;
    }
}

/* ========================================
   FLOATING ACTION BUTTON (FAB)
   ======================================== */
@media (max-width: 768px) {
    body.workzone-route .workzone-fab {
        position: fixed !important;
        bottom: 90px !important;
        right: var(--space-4) !important;
        z-index: 999 !important;
        width: var(--space-14) !important;
        height: var(--space-14) !important;
        border-radius: 50% !important;
        background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-blue-dark) 100%) !important;
        color: var(--color-text-inverse) !important;
        border: none !important;
        box-shadow: 0 4px 16px rgba(37, 99, 235, 0.4) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: var(--font-size-2xl) !important;
        cursor: pointer !important;
        transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    }
    
    body.workzone-route .workzone-fab:active {
        transform: scale(0.95) !important;
        box-shadow: 0 2px 8px rgba(37, 99, 235, 0.4) !important;
    }
}


/* ========== pages/invoice-accounting.css ========== */
/* ========================================
   INVOICE ACCOUNTING PAGE STYLES
   ======================================== */

.invoice-accounting-container {
    max-width: 100%;
    padding: 0;
    background: var(--color-surface-secondary);
    min-height: 100vh;
}

/* ========================================
   HEADER
   ======================================== */
.accounting-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: var(--space-4) var(--space-6);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    flex-wrap: wrap;
    gap: var(--space-4);
}

.header-left {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: var(--font-size-sm);
    transition: color 0.2s;
}

.back-link:hover {
    color: var(--color-primary);
}

.header-title {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0;
}

.header-right {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6);
}

.header-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-0-5);
}

.info-label {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.info-value {
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    font-weight: 500;
}

.info-value.amount {
    color: var(--color-primary);
    font-weight: 600;
}

/* ========================================
   FORM SECTION
   ======================================== */
.accounting-form-section {
    padding: var(--space-6);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}

.form-container {
    max-width: 100%;
}

.form-section {
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--color-surface-secondary);
}

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

.section-title {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 var(--space-4) 0;
}

.form-row-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1-5);
}

.field-label {
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.form-input,
.form-select {
    width: 100%;
    padding: var(--space-2-5) var(--space-3-5);
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-input:focus,
.form-select:focus {
    outline: none;
    border-color: var(--color-primary);
    /* Focus ring - rgba() documented exception */
    box-shadow: 0 0 0 var(--space-0-5) rgba(59, 130, 246, 0.1);
}

/* ========================================
   RADIO GROUP
   ======================================== */
.radio-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.radio-option {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.radio-option input[type="radio"] {
    width: var(--space-5);
    height: var(--space-5);
    margin-right: var(--space-3);
    cursor: pointer;
}

.radio-label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.radio-text {
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
}

/* ========================================
   LINE ITEMS SECTION
   ======================================== */
.line-items-section {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}

.line-items-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-4) var(--space-6);
    border-bottom: 1px solid var(--color-surface-secondary);
}

.line-items-title {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-text-primary);
}

.add-line-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    padding: var(--space-2) var(--space-3-5);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-primary);
    /* Primary button background - rgba() documented exception for hover states */
    background: rgba(59, 130, 246, 0.1);
    border: none;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: background 0.2s;
}

.add-line-btn:hover {
    background: rgba(59, 130, 246, 0.15);
}

#lineItemsContainer {
    padding: var(--space-4) var(--space-6);
}

.loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-8);
    color: var(--color-text-secondary);
    text-align: center;
    gap: var(--space-2);
}

/* ========================================
   TAGS & DESCRIPTION
   ======================================== */
.tags-section {
    padding: var(--space-6);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}

.tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.tag-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    padding: var(--space-1-5) var(--space-3);
    font-size: var(--font-size-sm);
    background: var(--color-surface-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-full);
    color: var(--color-text-primary);
}

.tag-badge.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-surface);
}

.notes-textarea {
    width: 100%;
    padding: var(--space-3);
    font-size: var(--font-size-base);
    font-family: inherit;
    color: var(--color-text-primary);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    resize: vertical;
    min-height: var(--height-bottom-nav);
}

/* ========================================
   TOTALS SECTION
   ======================================== */
.totals-section {
    padding: var(--space-4) var(--space-6);
    background: var(--color-surface-secondary);
}

.totals-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
}

.total-row {
    display: flex;
    justify-content: space-between;
    color: var(--color-text-secondary);
}

.total-row.grand-total {
    font-weight: 600;
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
    padding-top: var(--space-2);
    margin-top: var(--space-2);
    border-top: 1px solid var(--color-border);
}

/* ========================================
   ACTION BUTTONS
   ======================================== */
.action-buttons {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-6);
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    position: sticky;
    bottom: 0;
    z-index: 100;
}

.btn-save-draft {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    font-size: var(--font-size-base);
    font-weight: 500;
    color: var(--color-text-primary);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    cursor: pointer;
    transition: background 0.2s;
}

.btn-save-draft:hover {
    background: var(--color-surface-secondary);
}

.btn-approve {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    flex: 1;
    padding: var(--space-3) var(--space-5);
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-surface);
    background: var(--color-success);
    border: none;
    border-radius: var(--border-radius-md);
    cursor: pointer;
    transition: background 0.2s;
}

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

/* ========================================
   PDF VIEWER SECTION
   ======================================== */
.pdf-viewer-section {
    padding: var(--space-4);
    background: var(--color-surface-secondary);
}

/* Hide mobile toggle button on desktop */
.pdf-toggle-btn {
    display: none;
}

.pdf-viewer-container {
    background: var(--color-surface);
    border-radius: var(--border-radius-md);
    overflow: hidden;
    /* Box-shadow - rgba() documented exception */
    box-shadow: 0 1px var(--space-0-5) rgba(0, 0, 0, 0.1);
}

.pdf-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-3) var(--space-4);
    background: var(--color-text-primary);
    gap: var(--space-2);
    flex-wrap: wrap;
}

.pdf-navigation {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.pdf-nav-btn {
    padding: var(--space-2) var(--space-3);
    /* PDF toolbar uses dark theme - color-text-primary is dark */
    background: var(--color-text-primary);
    color: var(--color-surface);
    border: none;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    font-size: var(--font-size-sm);
    transition: background 0.2s;
}

.pdf-nav-btn:hover {
    background: var(--color-text-secondary);
}

.page-indicator,
.pdf-page-info {
    color: var(--color-surface-secondary);
    font-size: var(--font-size-sm);
    font-weight: 500;
    padding: 0 var(--space-2);
}

.pdf-canvas-wrapper {
    background: var(--color-text-tertiary);
    min-height: var(--min-height-panel);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: auto;
}

#pdfCanvas {
    max-width: 100%;
    height: auto;
    display: block;
}

.no-pdf-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-12);
    color: var(--color-text-tertiary);
    text-align: center;
    gap: var(--space-3);
}

.no-pdf-message i {
    font-size: var(--font-size-4xl);
}

/* ========================================
   MOBILE RESPONSIVE - COMPLETE REDESIGN
   Native app-like experience
   ======================================== */
@media (max-width: 768px) {
    /* ========================================
       MOBILE SHELL - Single scroll document
       ======================================== */
    .invoice-accounting-container {
        background: var(--color-surface-secondary);
        min-height: 100vh;
        /* Extra padding for fixed action buttons */
        padding-bottom: calc(var(--height-bottom-nav) + var(--space-5));
    }
    
    /* ========================================
       HEADER - Stacked summary card
       ======================================== */
    .accounting-header {
        background: var(--color-surface);
        padding: 0;
        margin: 0;
        border-bottom: none;
        flex-direction: column;
        gap: 0;
    }
    
    .header-left {
        padding: var(--space-4);
        border-bottom: 1px solid var(--color-border);
    }
    
    .back-link {
        font-size: var(--font-size-sm);
        padding: var(--space-2) 0;
        min-height: 44px;
        display: flex;
        align-items: center;
    }
    
    .header-title {
        font-size: var(--font-size-lg);
        font-weight: 600;
        line-height: 1.3;
        margin-top: var(--space-1);
    }
    
    .header-right {
        width: 100%;
        padding: var(--space-4);
        background: linear-gradient(135deg, var(--color-info-gradient-start) 0%, var(--color-info-gradient-end) 100%);
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-3);
    }
    
    .header-info {
        background: var(--color-surface);
        padding: var(--space-3) var(--space-3-5);
        border-radius: var(--border-radius-lg);
        /* Card shadow - rgba() documented exception */
        box-shadow: 0 var(--space-0-5) var(--space-1) rgba(0, 0, 0, 0.08);
    }
    
    .header-info:first-child {
        grid-column: 1 / -1;
    }
    
    .info-label {
        font-size: var(--font-size-xs);
        color: var(--color-text-secondary);
        margin-bottom: var(--space-1);
    }
    
    .info-value {
        font-size: var(--font-size-base);
        font-weight: 600;
        color: var(--color-text-primary);
    }
    
    .info-value.amount {
        font-size: var(--font-size-lg);
        color: var(--color-primary);
    }
    
    /* ========================================
       MOBILE SECTIONS - Edge-to-edge cards
       ======================================== */
    .accounting-form-section,
    .line-items-section,
    .tags-section,
    .pdf-viewer-section {
        background: var(--color-surface);
        margin: 0;
        padding: 0;
        border-radius: 0;
        border-bottom: var(--space-2) solid var(--color-surface-secondary);
    }
    
    .form-section {
        padding: var(--space-4);
        margin: 0;
        border-bottom: 1px solid var(--color-surface-secondary);
    }
    
    .form-section:last-child {
        border-bottom: none;
    }
    
    .section-title {
        font-size: var(--font-size-base);
        font-weight: 600;
        color: var(--color-text-primary);
        margin-bottom: var(--space-4);
        display: flex;
        align-items: center;
        gap: var(--space-2);
    }
    
    .section-title i {
        color: var(--color-primary);
    }
    
    /* ========================================
       FORM FIELDS - Full width, touch-friendly
       ======================================== */
    .form-row-2 {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }
    
    .form-field {
        gap: var(--space-2);
    }
    
    .field-label {
        font-size: var(--font-size-xs);
        font-weight: 600;
        color: var(--color-text-secondary);
        text-transform: uppercase;
        letter-spacing: 0.03em;
    }
    
    .form-input,
    .form-select {
        width: 100%;
        height: 52px; /* Slightly larger than 44px touch target */
        padding: var(--space-3-5) var(--space-4);
        font-size: var(--font-size-md);
        color: var(--color-text-primary);
        background: var(--color-surface-secondary);
        border: 2px solid var(--color-border);
        border-radius: var(--border-radius-lg);
        transition: all 0.2s;
        -webkit-appearance: none;
    }
    
    .form-input:focus,
    .form-select:focus {
        background: var(--color-surface);
        border-color: var(--color-primary);
        /* Focus ring - rgba() documented exception */
        box-shadow: 0 0 0 var(--space-1) rgba(59, 130, 246, 0.1);
    }
    
    .form-input::placeholder {
        color: var(--color-text-tertiary);
    }
    
    /* Date input icon */
    .form-field input[type="text"][name*="date"] {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2394a3b8' viewBox='0 0 24 24'%3E%3Cpath d='M19 4h-1V2h-2v2H8V2H6v2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right var(--space-3-5) center;
        background-size: var(--space-5);
        padding-right: 44px;
    }
    
    /* Auto-fill checkbox */
    .form-field label[style*="cursor: pointer"] {
        min-height: var(--space-12);
        padding: var(--space-3) var(--space-4);
        background: var(--color-success-bg);
        border: 1px solid var(--color-success-border);
        border-radius: var(--border-radius-lg);
        display: flex !important;
        align-items: center;
    }
    
    .form-field label input[type="checkbox"] {
        /* Checkbox size - slightly smaller than touch target */
        width: calc(var(--space-5) + var(--space-0-5)) !important;
        height: calc(var(--space-5) + var(--space-0-5)) !important;
        margin-right: var(--space-3) !important;
    }
    
    /* ========================================
       PAYMENT STATUS - Large segmented buttons
       ======================================== */
    .radio-group {
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
    }
    
    .radio-option {
        display: flex;
        align-items: center;
        /* Large touch target - 56px */
        min-height: calc(var(--space-12) + var(--space-2));
        padding: var(--space-3-5) var(--space-4);
        background: var(--color-surface-secondary);
        border: 2px solid var(--color-border);
        border-radius: var(--border-radius-lg);
        cursor: pointer;
        transition: all 0.2s;
    }
    
    .radio-option:has(input:checked),
    .radio-option.is-checked {
        background: var(--color-info-bg-lighter);
        border-color: var(--color-primary);
    }
    
    .radio-option input[type="radio"] {
        width: var(--space-6);
        height: var(--space-6);
        margin-right: var(--space-3-5);
        accent-color: var(--color-primary);
    }
    
    .radio-text {
        font-size: var(--font-size-base);
        font-weight: 500;
        color: var(--color-text-primary);
    }
    
    /* ========================================
       LINE ITEMS - Card-based layout
       ======================================== */
    .line-items-section {
        background: var(--color-surface);
    }
    
    .line-items-header {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: var(--space-4);
        background: var(--color-surface-secondary);
        border-bottom: 1px solid var(--color-border);
        gap: var(--space-3);
    }
    
    .line-items-title {
        font-size: var(--font-size-base);
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: var(--space-2);
    }
    
    .line-items-title i {
        color: var(--color-primary);
    }
    
    .add-line-btn {
        min-height: 44px;
        padding: var(--space-2-5) var(--space-4);
        font-size: var(--font-size-sm);
        font-weight: 600;
        background: var(--color-primary);
        color: var(--color-surface);
        border-radius: var(--border-radius-lg);
    }
    
    .add-line-btn:hover {
        background: var(--color-primary-dark);
    }
    
    #lineItemsContainer {
        padding: var(--space-4);
    }
    
    /* Line item cards */
    .line-item-card,
    #lineItemsContainer > div {
        background: var(--color-surface-secondary);
        border: 1px solid var(--color-border);
        border-radius: var(--border-radius-lg);
        padding: var(--space-4);
        margin-bottom: var(--space-3);
    }
    
    .line-item-card:last-child,
    #lineItemsContainer > div:last-child {
        margin-bottom: 0;
    }
    
    .line-item-card input,
    .line-item-card select,
    #lineItemsContainer input,
    #lineItemsContainer select {
        width: 100%;
        height: var(--space-12); /* 48px - large touch target */
        padding: var(--space-3) var(--space-3-5);
        font-size: var(--font-size-base);
        border: 2px solid var(--color-border);
        border-radius: var(--border-radius-lg);
        background: var(--color-surface);
        margin-bottom: var(--space-3);
    }
    
    .line-item-card input:focus,
    .line-item-card select:focus,
    #lineItemsContainer input:focus,
    #lineItemsContainer select:focus {
        border-color: var(--color-primary);
        outline: none;
    }
    
    .line-item-card button,
    #lineItemsContainer button {
        min-height: 44px;
        min-width: 44px;
        border-radius: var(--border-radius-lg);
    }
    
    /* Loading state */
    .loading-state {
        padding: var(--space-8) var(--space-4);
        text-align: center;
    }
    
    .loading-state i {
        font-size: var(--font-size-3xl);
        color: var(--color-primary);
        margin-bottom: var(--space-3);
    }
    
    /* ========================================
       TAGS & DESCRIPTION
       ======================================== */
    .tags-section {
        padding: var(--space-4);
    }
    
    .tags-section h3 {
        font-size: var(--font-size-base);
        font-weight: 600;
        color: var(--color-text-primary);
        margin-bottom: var(--space-4);
    }
    
    .tags-container {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2-5);
        margin-bottom: var(--space-4);
    }
    
    .tag-badge {
        min-height: 44px;
        padding: var(--space-2-5) var(--space-4);
        font-size: var(--font-size-sm);
        font-weight: 500;
        background: var(--color-surface-secondary);
        border: 2px solid var(--color-border);
        border-radius: var(--border-radius-full);
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        cursor: pointer;
        transition: all 0.2s;
    }
    
    .tag-badge:active,
    .tag-badge.active {
        background: var(--color-primary);
        border-color: var(--color-primary);
        color: var(--color-surface);
    }
    
    .notes-textarea {
        width: 100%;
        /* Textarea height - layout-specific */
        min-height: calc(var(--space-12) * 2 + var(--space-1));
        padding: var(--space-3-5) var(--space-4);
        font-size: var(--font-size-base);
        border: 2px solid var(--color-border);
        border-radius: var(--border-radius-lg);
        background: var(--color-surface-secondary);
        resize: vertical;
    }
    
    .notes-textarea:focus {
        background: var(--color-surface);
        border-color: var(--color-primary);
        outline: none;
    }
    
    /* ========================================
       TOTALS SECTION
       ======================================== */
    .totals-section {
        padding: var(--space-4);
        background: var(--color-surface-secondary);
        border-top: 1px solid var(--color-border);
    }
    
    .totals-grid {
        gap: var(--space-2);
    }
    
    .total-row {
        display: flex;
        justify-content: space-between;
        padding: var(--space-2) 0;
        font-size: var(--font-size-base);
    }
    
    .total-row.grand-total {
        font-size: var(--font-size-lg);
        font-weight: 700;
        color: var(--color-text-primary);
        padding-top: var(--space-3);
        margin-top: var(--space-2);
        border-top: 2px solid var(--color-border);
    }
    
    /* ========================================
       PDF VIEWER - Collapsible section
       ======================================== */
    .pdf-viewer-section {
        padding: 0;
        border-bottom: none;
    }
    
    .pdf-toggle-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-2-5);
        width: 100%;
        /* Large touch target - 56px */
        min-height: calc(var(--space-12) + var(--space-2));
        padding: var(--space-4) var(--space-5);
        font-size: var(--font-size-base);
        font-weight: 600;
        color: var(--color-primary);
        background: var(--color-primary-bg);
        border: none;
        cursor: pointer;
    }
    
    .pdf-toggle-btn i:last-child {
        transition: transform 0.3s ease;
    }
    
    .pdf-toggle-btn.expanded i:last-child {
        transform: rotate(180deg);
    }
    
    /* PDF container collapsed by default on mobile */
    .pdf-viewer-container {
        display: none;
        border-radius: 0;
        max-height: 60vh;
        overflow: auto;
    }
    
    .pdf-viewer-container.is-expanded {
        display: block;
    }
    
    .pdf-toolbar {
        padding: var(--space-3) var(--space-4);
        justify-content: center;
        gap: var(--space-2-5);
        position: sticky;
        top: 0;
        z-index: 10;
        flex-wrap: wrap;
    }
    
    .pdf-nav-btn {
        min-height: var(--space-12);
        min-width: var(--space-12);
        padding: var(--space-3) var(--space-4);
        border-radius: var(--border-radius-lg);
        font-size: var(--font-size-base);
    }
    
    .pdf-page-info {
        min-height: var(--space-12);
        display: flex;
        align-items: center;
        padding: 0 var(--space-3);
        font-size: var(--font-size-base);
    }
    
    .pdf-canvas-wrapper {
        /* PDF viewer min-height - layout-specific for document viewing */
        min-height: calc(var(--min-height-panel) - var(--space-12) * 2);
        max-height: 50vh;
        overflow: auto;
    }
    
    #pdfCanvas {
        width: 100% !important;
        height: auto !important;
    }
    
    /* ========================================
       STICKY ACTION BAR - Bottom fixed
       ======================================== */
    .action-buttons {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        gap: var(--space-3);
        padding: var(--space-4);
        padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0));
        background: var(--color-surface);
        border-top: 1px solid var(--color-border);
        /* Shadow - rgba() documented exception */
        box-shadow: 0 calc(var(--space-1) * -1) var(--space-3) rgba(0, 0, 0, 0.08);
        z-index: 1000;
    }
    
    .btn-save-draft {
        flex: 0 0 auto;
        min-height: 52px; /* Slightly larger than 44px touch target */
        padding: var(--space-3-5) var(--space-5);
        font-size: var(--font-size-base);
        font-weight: 600;
        color: var(--color-text-secondary);
        background: var(--color-surface-secondary);
        border: none;
        border-radius: var(--border-radius-lg);
    }
    
    .btn-save-draft:active {
        background: var(--color-border);
    }
    
    .btn-approve {
        flex: 1;
        min-height: 52px; /* Slightly larger than 44px touch target */
        padding: var(--space-3-5) var(--space-5);
        font-size: var(--font-size-base);
        font-weight: 600;
        color: var(--color-surface);
        background: linear-gradient(135deg, var(--color-success) 0%, var(--color-success-dark) 100%);
        border: none;
        border-radius: var(--border-radius-lg);
        /* Success button glow - rgba() documented exception */
        box-shadow: 0 var(--space-1) var(--space-3) rgba(34, 197, 94, 0.3);
    }
    
    .btn-approve:active {
        transform: scale(0.98);
    }
    
    /* ========================================
       UTILITY CLASSES
       ======================================== */
    .mobile-hidden {
        display: none !important;
    }
    
    .mobile-section-divider {
        height: var(--space-2);
        background: var(--color-surface-secondary);
        margin: 0;
        border: none;
    }
}


/* ========== pages/quote-editor-full.css ========== */
/**
 * Quote Editor Full Page Styles
 *
 * Extracted from templates/finance/quotes/editor_full.html
 * for better caching and maintainability. Contains styles for
 * mode toggle, edit mode inputs, auto-save bar, and print styles.
 */

/* ============================================
   MODE TOGGLE STYLES
   ============================================ */
[data-mode="preview"] .edit-mode {
    display: none !important;
}

[data-mode="edit"] .preview-mode {
    display: none !important;
}

/* Smooth transitions for mode switching */
#quote-editor-container {
    transition: all 0.2s ease-in-out;
}

/* ============================================
   EDIT MODE INPUT STYLING
   ============================================ */
.edit-mode input[type="date"],
.edit-mode .flatpickr-input,
.edit-mode select {
    border: 1px solid var(--color-border);
    background-color: var(--color-surface);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-sm);
}

/* Date picker minimum width to fit full date format
   Note: These specific widths are layout-critical for date picker display */
.edit-mode .flatpickr-wrap {
    min-width: 220px; /* Layout-specific for date format display */
    display: inline-flex;
}

.edit-mode .flatpickr-wrap input.flatpickr-input {
    width: 180px !important; /* Layout-specific for date input */
    min-width: 180px !important;
    padding-right: var(--space-10) !important;
}

.edit-mode input[type="date"]:focus,
.edit-mode .flatpickr-input:focus,
.edit-mode select:focus,
.edit-mode textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    /* Focus ring with primary color - documented exception for rgba() */
    box-shadow: 0 0 0 var(--space-0-5) rgba(0, 123, 255, 0.25);
}

/* Preview mode cleaner display - box-shadow rgba is documented exception */
[data-mode="preview"] #quote-preview {
    box-shadow: 0 var(--space-0-5) var(--space-2) rgba(0,0,0,0.1) !important;
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
    .ds-page-header,
    .btn,
    .navbar,
    .sidebar,
    .edit-mode {
        display: none !important;
    }

    .preview-mode {
        display: block !important;
    }

    #quote-preview {
        box-shadow: none !important;
        padding: 0 !important;
    }
}

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

/* ============================================
   AUTO-SAVE STATUS BAR (MATCHES INVOICE EDITOR)
   ============================================ */
.auto-save-bar {
    background: linear-gradient(135deg, var(--color-surface-secondary) 0%, var(--color-border) 100%);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-2-5) var(--space-6);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    border-radius: var(--border-radius) var(--border-radius) 0 0;
}

.auto-save-bar__content {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.auto-save-bar.saving {
    background: linear-gradient(135deg, var(--color-warning-bg) 0%, var(--color-warning-border) 100%);
}

.auto-save-bar.saving #save-status-icon i {
    animation: spin 1s linear infinite;
}

.auto-save-bar.saved {
    background: linear-gradient(135deg, var(--color-success-bg) 0%, var(--color-success-border) 100%);
}

.auto-save-bar.error {
    background: linear-gradient(135deg, var(--color-danger-bg) 0%, var(--color-danger-border) 100%);
}

.auto-save-bar.unsaved {
    background: linear-gradient(135deg, var(--color-warning-bg) 0%, var(--color-warning-border) 100%);
}


/* ========== pages/organization.css ========== */
/**
 * Organization Management Page Styles
 *
 * Extracted from templates/organization/index.html for maintainability.
 * Contains responsive styles for team members, companies, mobile cards,
 * and modal forms.
 */

html {
    scroll-behavior: smooth;
}

/* ============================================
   INFO BANNER TOGGLE
   ============================================ */
.info-toggle {
    cursor: pointer;
    margin-left: var(--space-2);
    color: var(--color-text-secondary);
    transition: transform 0.2s ease;
}

.info-toggle:hover {
    color: var(--color-primary);
}

.info-toggle i.fa-chevron-up {
    transform: rotate(180deg);
}

/* On desktop, info collapse is visible by default */
#infoCollapse {
    display: block;
}

/* Hide toggle icon rotation styles */
.info-toggle .fa-chevron-down,
.info-toggle .fa-chevron-up {
    transition: transform 0.2s ease;
}

/* ============================================
   ORGANIZATION SETTINGS GRID
   ============================================ */
.org-settings-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
}

@media (min-width: 992px) {
    .org-settings-grid {
        grid-template-columns: 300px 1fr;
    }
}

/* ============================================
   STAT CARDS
   ============================================ */
.stat-card-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    background: var(--color-surface) !important;
    cursor: pointer;
}

.stat-card-link:active {
    transform: translateY(0);
}

/* ============================================
   MOBILE/DESKTOP TABLE SWITCHING
   ============================================ */
/* Desktop: Show table view, hide mobile cards */
@media (min-width: 769px) {
    .ds-table-container {
        display: block !important;
    }
    .mobile-card-view {
        display: none !important;
    }
}

/* Mobile: Hide table, show mobile cards */
@media (max-width: 768px) {
    .ds-table-container {
        display: none !important;
    }
    .mobile-card-view {
        display: block !important;
    }
}

/* ============================================
   MOBILE CARD STYLING
   ============================================ */
.mobile-card-view {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.member-card, .company-card {
    padding: var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    transition: all 0.2s ease;
}

.member-card:hover, .company-card:hover {
    box-shadow: var(--shadow-sm);
    border-color: var(--color-border-strong);
}

.member-card-header, .company-card-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border-light);
}

.member-card-body, .company-card-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-2-5);
}

.info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-size-sm);
}

.info-row span:first-child {
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-medium);
}

.member-card-actions, .company-card-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border-light);
}

/* Full-width buttons in mobile cards */
.member-card-actions .ds-btn,
.company-card-actions .ds-btn,
.member-card-actions form,
.company-card-actions form {
    width: 100%;
}

.member-card-actions .ds-btn,
.company-card-actions .ds-btn {
    justify-content: center;
    min-height: 44px;
}

.company-logo, .company-info {
    display: flex;
    flex-direction: column;
}

.company-card-header .company-logo {
    flex-shrink: 0;
}

.company-card-header .company-info {
    flex: 1;
}

/* ============================================
   STATS BAR RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    /* Make stats bar stack better on mobile */
    .ds-flex.ds-flex-wrap.ds-gap-4 {
        gap: var(--space-2) !important;
    }

    /* Reduce padding on stat cards for mobile */
    .ds-flex.ds-flex-wrap.ds-gap-4 > div,
    .ds-flex.ds-flex-wrap.ds-gap-4 > a {
        padding: var(--space-2) var(--space-3) !important;
        font-size: var(--font-size-sm);
        flex: 1 1 calc(50% - var(--space-2));
        min-width: 0;
    }
    
    /* Hide verbose labels on mobile - show just icon + value */
    .ds-flex.ds-flex-wrap.ds-gap-4 .ds-text-secondary:not(.ds-badge) {
        display: none;
    }
}

/* Very small screens - full width stat cards */
@media (max-width: 400px) {
    .ds-flex.ds-flex-wrap.ds-gap-4 > div,
    .ds-flex.ds-flex-wrap.ds-gap-4 > a {
        flex: 1 1 100%;
    }
}

/* ============================================
   MODAL FORM GRID RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    /* Stack 2-column grids on mobile */
    .modal-body .ds-grid.ds-grid--cols-2,
    .modal-body .ds-grid--cols-2 {
        grid-template-columns: 1fr !important;
    }

    /* Full width buttons in modals on mobile */
    .modal-footer {
        flex-direction: column-reverse;
    }

    .modal-footer .ds-btn {
        width: 100%;
    }
}

/* ============================================
   PAGE HEADER RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    .ds-card__header.ds-flex.ds-justify-between {
        flex-direction: column;
        align-items: flex-start !important;
        gap: var(--space-3);
    }

    .ds-card__header .ds-btn {
        width: 100%;
    }
}

/* ============================================
   TOUCH TARGET SIZES
   ============================================ */
@media (max-width: 768px) {
    .ds-btn {
        min-height: 44px;
        padding: var(--space-2-5) var(--space-3);
    }

    .ds-btn--sm {
        min-height: 44px;
        padding: var(--space-2) var(--space-3);
    }
}

/* ============================================
   OVERFLOW PREVENTION & TEXT WRAPPING
   ============================================ */
@media (max-width: 768px) {
    /* Prevent horizontal overflow */
    .ds-page-container {
        overflow-x: hidden;
    }

    /* Wrap long text in cards */
    .member-card, .company-card {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    /* Handle long email addresses */
    .member-card td,
    .company-card td,
    .info-row span {
        word-break: break-word;
        overflow-wrap: break-word;
    }

    /* Reduce font sizes for better fit */
    h2 {
        font-size: var(--font-size-xl);
    }

    h5 {
        font-size: var(--font-size-base);
    }

    /* Better spacing for alert info banner */
    .ds-alert.ds-alert--info ul,
    .ds-alert.ds-alert--info ol {
        padding-left: var(--space-4);
        font-size: var(--font-size-sm);
    }
    
    /* Collapse info banner content on mobile by default */
    .ds-alert.ds-alert--info #infoCollapse {
        display: none;
    }
    
    .ds-alert.ds-alert--info #infoCollapse.show {
        display: block;
    }
    
    /* Show toggle chevron on mobile */
    .ds-alert.ds-alert--info .info-toggle {
        display: inline-block !important;
        cursor: pointer;
    }
    
    /* Minimal page container padding on mobile for maximum width */
    .ds-page-container {
        padding: var(--space-2) var(--space-2) !important;
    }
    
    /* Reduce card body padding */
    .ds-card__body {
        padding: var(--space-3) !important;
    }
    
    /* Reduce card header padding */
    .ds-card__header {
        padding: var(--space-3) !important;
    }
    
    /* Smaller heading on mobile */
    .ds-page-container > .ds-mb-3 h2 {
        font-size: var(--font-size-lg);
    }
    
    .ds-page-container > .ds-mb-3 p {
        font-size: var(--font-size-sm);
    }
    
    /* Logo preview compact on mobile */
    .logo-preview-container {
        padding: var(--space-3) !important;
    }
    
    .logo-preview-img {
        max-width: 120px !important;
        max-height: 100px !important;
    }
    
    .logo-placeholder {
        width: 100px !important;
        height: 100px !important;
    }
    
    /* Reduce stats bar bottom margin */
    .ds-flex.ds-flex-wrap.ds-gap-4.ds-mb-5.ds-pb-5 {
        margin-bottom: var(--space-3) !important;
        padding-bottom: var(--space-3) !important;
    }
    
    /* Mobile-optimized stat cards - use CSS grid for predictable layout */
    .stats-bar {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--space-2) !important;
    }
    
    .stats-bar > * {
        padding: var(--space-2) !important;
        gap: var(--space-2) !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        min-width: 0 !important;
    }
    
    /* Hide stat labels on mobile - just show icon + value */
    .stats-bar .ds-text-secondary {
        display: none !important;
    }
    
    .stats-bar strong {
        font-size: var(--font-size-sm) !important;
        word-break: break-word !important;
    }
    
    /* Make info banner more compact */
    .ds-alert.ds-alert--info {
        padding: var(--space-3) !important;
    }
    
    .ds-alert.ds-alert--info .ds-alert__title {
        font-size: var(--font-size-sm) !important;
    }

    /* Fix modal dialog on small screens */
    .modal-dialog.modal-lg {
        max-width: 95%;
        margin: var(--space-2);
    }

    /* Better icon sizes on mobile */
    .fas.ds-icon-xl {
        font-size: 1.5rem;
    }

    /* Fix archive/delete modal statistics grid */
    #archiveDeleteStatistics .ds-grid.ds-grid--cols-2 {
        grid-template-columns: 1fr !important;
        gap: var(--space-2);
    }

    /* Compact modal footer on mobile */
    .modal-footer form {
        width: 100%;
    }

    .modal-footer .ds-inline-block {
        display: block !important;
        width: 100%;
    }
}

/* ============================================
   ORGANIZATION MODALS
   ============================================ */
.org-modal .modal-content {
    border: none;
    border-radius: var(--space-3);
    box-shadow: var(--shadow-2xl);
}

.org-modal .modal-header {
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-6) var(--space-8);
    background: var(--color-surface);
    border-radius: var(--border-radius-lg) 12px 0 0;
}

.org-modal .modal-title {
    font-size: var(--font-size-2xl);
    font-weight: 600;
    margin: 0;
    color: var(--color-text-primary);
}

.org-modal .modal-subtitle {
    margin: var(--space-1) 0 0 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.org-modal .modal-body {
    padding: var(--space-8);
    max-height: 70vh;
    overflow-y: auto;
}

.org-modal .modal-footer {
    background: var(--color-surface-secondary);
    padding: var(--space-6) var(--space-8);
    border-top: 1px solid var(--color-border);
}

/* ============================================
   COMPANY TABLE COLUMN WIDTHS
   ============================================ */
.company-table {
    width: 100%;
    table-layout: fixed;
}

.company-table th.col-name { width: 20%; }
.company-table th.col-id { width: 6%; }
.company-table th.col-vat { width: 12%; }
.company-table th.col-status { width: 8%; }
.company-table th.col-created { width: 10%; }
.company-table th.col-creator { width: 14%; }
.company-table th.col-actions { width: 30%; text-align: right; }

.company-table td.col-actions {
    text-align: right;
    white-space: nowrap;
}

/* ============================================
   STAT CARD LINK STYLES
   ============================================ */
.stat-card-link {
    color: inherit;
    transition: all 0.2s;
}

/* ============================================
   LOGO PREVIEW
   ============================================ */
.logo-preview-container {
    background: var(--color-surface-secondary);
    border-radius: var(--border-radius);
    border: var(--border-width) solid var(--color-border);
}

.logo-preview-img {
    max-width: 200px;
    max-height: 150px;
    object-fit: contain;
}

.logo-placeholder {
    width: 150px;
    height: 150px;
    margin: 0 auto;
    background: var(--color-surface);
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    border: var(--border-width-2) dashed var(--color-border);
}

.logo-placeholder i {
    font-size: var(--font-size-5xl);
    color: var(--color-text-tertiary);
}

/* ============================================
   FORM VALIDATION FEEDBACK
   ============================================ */
.form-feedback {
    margin-top: var(--space-2);
    font-size: var(--font-size-sm);
}

.form-feedback i {
    margin-right: var(--space-1);
}

.form-feedback--error {
    color: var(--color-danger);
}

.form-feedback--success {
    color: var(--color-success);
}

.form-feedback--warning {
    color: var(--color-warning);
}

/* ============================================
   INPUT WITH BUTTON
   ============================================ */
.input-with-buttons {
    position: relative;
}

.input-with-buttons input {
    padding-right: 88px;
}

.input-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--space-2);
    border-radius: var(--border-radius);
    transition: all 0.2s;
}

.input-btn i {
    font-size: var(--font-size-base);
}

.input-btn--copy {
    right: 48px;
    color: var(--color-text-secondary);
}

.input-btn--search {
    right: var(--space-2);
    color: var(--color-primary);
}

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

/* ============================================
   READONLY INPUT STYLING
   ============================================ */
.ds-form-input--readonly {
    background-color: var(--color-surface-secondary);
    cursor: not-allowed;
}

.readonly-indicator {
    font-size: var(--font-size-xs);
}

.readonly-indicator i {
    margin-right: var(--space-1);
}

/* ============================================
   INFO BOX FOR MODALS
   ============================================ */
.org-info-box {
    background: var(--color-info-bg);
    border-left: var(--border-width-4) solid var(--color-info);
    border-radius: var(--border-radius);
    padding: var(--space-3);
}

.org-info-box ul {
    padding-left: var(--space-6);
    margin-bottom: var(--space-2);
}

/* ============================================
   STAT INFO BOX
   ============================================ */
.stat-info-box {
    background: var(--color-surface-secondary);
    border-radius: var(--border-radius);
    padding: var(--space-3);
}

/* ============================================
   BUTTON ACTION GROUP
   ============================================ */
.btn-action-group {
    justify-content: flex-end;
    white-space: nowrap;
}

/* ============================================
   ORGANIZATION MEMBER LINK
   ============================================ */
.org-member-link {
    text-decoration: none;
    color: var(--color-primary);
}

.org-member-link:hover {
    text-decoration: underline;
}

/* ============================================
   ICON COLORS
   ============================================ */
.org-icon--warning {
    color: var(--color-warning);
}

.org-icon--success {
    color: var(--color-success);
}

.org-icon--danger {
    color: var(--color-danger);
}

/* ============================================
   LOCK ICON (FOR READONLY FIELDS)
   ============================================ */
.org-lock-icon {
    font-size: var(--font-size-xs);
}

/* ============================================
   ADDRESS INPUT WITH INLINE BUTTONS
   ============================================ */
.address-input-wrapper {
    position: relative;
}

.address-input-wrapper .ds-form-input {
    padding-right: 88px;
}


/* ========== pages/import-wizard.css ========== */
/**
 * Import Wizard Page Styles
 *
 * Extracted from templates/import_export/wizard.html for maintainability.
 * Contains wizard steps, field mapping, and import preview styles.
 */

/* ============================================
   PAGE HEADER
   ============================================ */
.import-page-header {
    margin-bottom: var(--space-6);
}

.import-page-title {
    margin-bottom: var(--space-2);
}

/* ============================================
   WIZARD CARD
   ============================================ */
.wizard-progress-card {
    margin-bottom: var(--space-6);
}

/* ============================================
   WIZARD STEPS PROGRESS
   ============================================ */
.wizard-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4) 0;
}

.wizard-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0.5;
}

.wizard-step.active {
    opacity: 1;
}

.wizard-step.completed {
    opacity: 0.8;
}

.wizard-step-number {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: var(--color-surface-tertiary);
    color: var(--color-text-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-2);
    transition: all 0.3s ease;
}

.wizard-step.active .wizard-step-number {
    background-color: var(--color-primary);
    color: var(--color-text-inverse);
    transform: scale(1.1);
}

.wizard-step.completed .wizard-step-number {
    background-color: var(--color-success);
    color: var(--color-text-inverse);
}

.wizard-step-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
}

.wizard-step-connector {
    width: 120px;
    height: 2px;
    background-color: var(--color-border-light);
    margin: 0 var(--space-4);
    margin-bottom: var(--space-8);
}

/* ============================================
   STEP CARD HEADERS
   ============================================ */
.wizard-card-title {
    margin-bottom: 0;
}

/* ============================================
   ICON SPACING
   ============================================ */
.icon-inline {
    margin-right: var(--space-2);
}

/* ============================================
   FORM ACTIONS
   ============================================ */
.wizard-form-actions {
    margin-top: var(--space-6);
}

.wizard-btn-spacing {
    margin-left: var(--space-2);
}

/* ============================================
   ALERT SPACING
   ============================================ */
.wizard-alert {
    margin-bottom: var(--space-4);
}

.wizard-alert-list {
    margin-top: var(--space-2);
    margin-bottom: 0;
}

/* ============================================
   INFO SECTIONS
   ============================================ */
.wizard-file-info {
    margin-bottom: var(--space-4);
}

.wizard-sample-data {
    margin-top: var(--space-6);
}

.wizard-preview-data {
    margin-top: var(--space-4);
}

/* ============================================
   FIELD MAPPING TABLE
   ============================================ */
.mapping-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: var(--space-4);
}

.mapping-table th {
    background-color: var(--color-surface-secondary);
    padding: var(--space-3);
    text-align: left;
    font-weight: var(--font-weight-semibold);
    border-bottom: 2px solid var(--color-border);
}

.mapping-table td {
    padding: var(--space-3);
    border-bottom: 1px solid var(--color-border-light);
}

.mapping-table th.col-source { width: 25%; }
.mapping-table th.col-target { width: 30%; }
.mapping-table th.col-confidence { width: 15%; }
.mapping-table th.col-sample { width: 30%; }

.mapping-row.low-confidence {
    background-color: var(--color-warning-bg);
}

.mapping-row.unmapped {
    background-color: var(--color-surface-secondary);
    opacity: 0.7;
}

/* ============================================
   CONFIDENCE BADGES
   ============================================ */
.confidence-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: var(--border-radius);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
}

.confidence-high {
    background-color: var(--color-success-bg);
    color: var(--color-success-dark);
}

.confidence-medium {
    background-color: var(--color-warning-bg);
    color: var(--color-warning-dark);
}

.confidence-low {
    background-color: var(--color-danger-bg);
    color: var(--color-danger-dark);
}

/* ============================================
   SUCCESS STEP
   ============================================ */
.wizard-success-body {
    padding: var(--space-8);
}

.wizard-success-icon {
    font-size: 4rem;
    color: var(--color-success);
    margin-bottom: var(--space-4);
}

.wizard-success-title {
    margin-bottom: var(--space-2);
}

.wizard-success-message {
    margin-bottom: var(--space-6);
}

.wizard-success-actions .ds-btn {
    margin-right: var(--space-2);
}

/* ============================================
   SAMPLE DATA TABLE HEADER
   ============================================ */
.sample-data-header {
    margin-top: var(--space-6);
    margin-bottom: var(--space-3);
}

/* ============================================
   RELATIONSHIP ISSUES
   ============================================ */
.relationship-issue-box {
    padding: var(--space-3);
    background-color: var(--color-warning-bg);
    border-left: 4px solid var(--color-warning);
    border-radius: var(--border-radius);
}

.relationship-issue-title {
    color: var(--color-warning-dark);
    margin-bottom: var(--space-2);
}

.relationship-issue-count {
    margin-bottom: var(--space-2);
}

.relationship-issue-samples {
    margin-bottom: var(--space-3);
}

.relationship-issue-samples ul {
    margin-bottom: var(--space-3);
}

.sample-value-code {
    background-color: var(--color-surface);
    padding: 2px 6px;
    border-radius: var(--border-radius-sm);
}

/* ============================================
   PREVIEW SUMMARY
   ============================================ */
.preview-summary-list {
    margin-bottom: 0;
}

/* ============================================
   CARD HEADER ICON
   ============================================ */
.card-header-icon {
    margin-right: var(--space-2);
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    .wizard-steps {
        flex-wrap: wrap;
        gap: var(--space-2);
    }

    .wizard-step-connector {
        width: 40px;
        margin: 0 var(--space-2);
    }

    .wizard-step-number {
        width: 40px;
        height: 40px;
        font-size: var(--font-size-base);
    }

    .wizard-step-title {
        font-size: var(--font-size-xs);
    }

    .mapping-table {
        font-size: var(--font-size-sm);
    }

    .mapping-table th,
    .mapping-table td {
        padding: var(--space-2);
    }

    .wizard-form-actions {
        flex-direction: column;
        gap: var(--space-2);
    }

    .wizard-form-actions .ds-btn {
        width: 100%;
        margin-left: 0;
    }
}


/* ========== pages/invoice-preview.css ========== */
/**
 * Invoice Preview Styles
 *
 * Extracted from templates/inbox/partials/_invoice_preview.html
 * Read-only preview matching invoice_editor.html style
 */

/* ============================================
   INVOICE PREVIEW CONTAINER
   ============================================ */
.invoice-preview-container {
    background: var(--color-surface);
    box-shadow: var(--shadow-md);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
}

.invoice-preview-body {
    padding: var(--space-8);
}

/* ============================================
   INVOICE HEADER SECTION
   ============================================ */
.invoice-header-section {
    margin-bottom: var(--space-8);
}

.invoice-company-logo {
    max-width: 165px;
    max-height: 80px;
    margin-bottom: var(--space-4);
}

.invoice-company-name {
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin-bottom: var(--space-3);
}

.invoice-company-details {
    font-size: var(--font-size-sm);
    line-height: 1.8;
    color: var(--color-text-secondary);
}

.invoice-title {
    color: var(--color-text-primary);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--space-5);
}

.invoice-meta {
    font-size: var(--font-size-sm);
    line-height: 1.8;
}

.invoice-status-row {
    margin-top: var(--space-2);
}

/* ============================================
   BILL TO & PROJECT SECTION
   ============================================ */
.invoice-bill-section {
    margin-bottom: var(--space-8);
}

.invoice-section-title {
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin-bottom: var(--space-3);
}

.invoice-customer-details {
    font-size: var(--font-size-sm);
    line-height: 1.8;
}

.invoice-no-customer {
    font-size: var(--font-size-sm);
}

.invoice-project-details {
    font-size: var(--font-size-sm);
    line-height: 1.8;
}

/* ============================================
   LINE ITEMS TABLE
   ============================================ */
.invoice-line-items-table {
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-6);
}

.invoice-line-items-table thead {
    background-color: var(--color-surface-secondary);
}

.invoice-line-items-table th,
.invoice-line-items-table td {
    padding: 10px 12px;
}

.invoice-line-items-table th.col-description { width: 45%; }
.invoice-line-items-table th.col-quantity { width: 12%; }
.invoice-line-items-table th.col-unit { width: 10%; }
.invoice-line-items-table th.col-unit-price { width: 16%; }
.invoice-line-items-table th.col-total { width: 17%; }

/* ============================================
   EMPTY STATE
   ============================================ */
.invoice-empty-items {
    background: var(--color-surface-secondary);
    border-radius: var(--border-radius);
    margin-bottom: var(--space-6);
}

.invoice-empty-icon {
    font-size: var(--space-6);
    margin-bottom: var(--space-2);
}

/* ============================================
   TOTALS SECTION
   ============================================ */
.invoice-totals-table {
    font-size: var(--font-size-sm);
}

.invoice-totals-table td {
    border: none;
    padding: 6px 0;
}

.invoice-totals-table td.totals-amount {
    width: 120px;
}

.invoice-total-row {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    border-top: 2px solid var(--color-text-primary);
}

.invoice-total-row td {
    padding: 10px 0;
}

.invoice-total-amount {
    color: var(--color-primary);
}

/* ============================================
   BANK & PAYMENT INFO
   ============================================ */
.invoice-bank-info {
    margin-top: var(--space-6);
    background-color: var(--color-info-bg);
    border-radius: var(--border-radius);
    border-left: 4px solid var(--color-info);
    padding: var(--space-4);
}

.invoice-bank-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-2);
}

.invoice-bank-title {
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-sm);
    margin: 0;
}

.invoice-bank-details {
    font-size: var(--font-size-xs);
    line-height: 1.8;
}

/* ============================================
   INVOICE FOOTER
   ============================================ */
.invoice-footer-section {
    margin-top: var(--space-6);
    background-color: var(--color-surface-secondary);
    border-radius: var(--border-radius);
    padding: var(--space-4);
}

.invoice-footer-title {
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-2);
}

.invoice-footer-content {
    font-size: var(--font-size-xs);
    text-align: center;
    color: var(--color-text-secondary);
}


/* ========== responsive/mobile-cards.css ========== */
/**
 * Mobile Cards & Drawer Components
 * Responsive card layouts and bottom drawer/sheet components
 */

/* ============================================
   MOBILE DRAWER CLOSE BUTTON
   ============================================ */

.mobile-drawer__close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--color-text-secondary);
    cursor: pointer;
    padding: var(--mobile-spacing-sm);
    min-height: var(--touch-target-min);
    min-width: var(--touch-target-min);
}

/* Drawer content */
.mobile-drawer__content {
    flex: 1;
    overflow-y: auto;
    padding: var(--mobile-spacing-lg);
    -webkit-overflow-scrolling: touch;
}

/* Drawer footer (sticky actions) */
.mobile-drawer__footer {
    padding: var(--mobile-spacing-md) var(--mobile-spacing-lg);
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
    display: flex;
    gap: var(--mobile-spacing-md);
}

.mobile-drawer__footer button {
    flex: 1;
    min-height: var(--touch-target-min);
}

/* ============================================
   RESPONSIVE CARDS
   ============================================ */

/* Compact card for mobile lists */
.mobile-card {
    background: var(--color-surface, #ffffff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: var(--border-radius-lg);
    padding: 16px;
    margin-bottom: 16px;
    margin-top: 8px;
    transition: box-shadow 0.2s ease;
    overflow: visible;
    width: 100%;
    box-sizing: border-box;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
}

.mobile-card:active {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.mobile-card__header {
    position: relative;
    margin-bottom: var(--mobile-spacing-sm);
}

.mobile-card__status-badge {
    position: absolute;
    top: -28px;
    right: 8px;
    z-index: 2;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border: 2px solid var(--color-surface, #ffffff);
}

.mobile-card__title {
    font-weight: 600;
    font-size: 1rem;
    margin: 0;
    color: var(--color-text-primary, #1f2937);
}

.mobile-card__title--clamp {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
    max-height: 2.8em;
}

.mobile-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 8px 0;
    font-size: 0.875rem;
    color: var(--color-text-secondary, #6b7280);
}

.mobile-card__stats-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin: var(--mobile-spacing-sm) 0;
    gap: var(--mobile-spacing-md);
}

.mobile-card__stats-row .project-card-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    flex: 1;
    padding: 0;
    margin: 0;
    line-height: 1;
}

.mobile-card__quick-actions {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    flex-shrink: 0;
}

.mobile-card__quick-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: var(--space-2);
    background: var(--color-surface, #ffffff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: var(--border-radius);
    color: var(--color-text-secondary, #6b7280);
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.mobile-card__quick-btn:hover,
.mobile-card__quick-btn:focus {
    background: var(--color-primary);
    color: var(--color-surface);
    border-color: var(--color-primary);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.mobile-card__quick-btn:active {
    transform: translateY(0);
}

.mobile-card__quick-btn i {
    font-size: 1rem;
}

.mobile-card__actions {
    display: flex;
    gap: var(--mobile-spacing-sm);
    margin-top: var(--mobile-spacing-md);
    padding-top: var(--mobile-spacing-md);
    border-top: 1px solid var(--color-border);
}

.mobile-card__action-btn {
    flex: 1;
    min-height: var(--touch-target-min);
}

/* ============================================
   PERFORMANCE OPTIMIZATIONS
   ============================================ */

/* GPU-accelerated animations */
.gpu-accelerated {
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================
   SAFE AREA (for notched devices)
   ============================================ */

@supports (padding: max(0px)) {
    .safe-area-inset-top {
        padding-top: max(var(--mobile-spacing-md), env(safe-area-inset-top));
    }
    
    .safe-area-inset-bottom {
        padding-bottom: max(var(--mobile-spacing-md), env(safe-area-inset-bottom));
    }
    
    .safe-area-inset-left {
        padding-left: max(var(--mobile-spacing-md), env(safe-area-inset-left));
    }
    
    .safe-area-inset-right {
        padding-right: max(var(--mobile-spacing-md), env(safe-area-inset-right));
    }
}

.mobile-card__stats-row .project-card-stats * {
    line-height: 1;
    padding: 0;
    margin: 0;
    vertical-align: middle;
}


/* ========== responsive/navigation-drawer.css ========== */
/**
 * Navigation Drawer & Scrollable Containers
 * Mobile navigation patterns and scroll utilities
 */

/* ============================================
   SCROLLABLE CONTAINERS
   ============================================ */

/* Horizontal scroll with momentum (mobile) */
.scroll-x {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* iOS momentum scrolling */
    scrollbar-width: thin;
}

.scroll-x::-webkit-scrollbar {
    height: 6px;
}

.scroll-x::-webkit-scrollbar-track {
    background: var(--color-background-secondary);
}

.scroll-x::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: var(--border-radius-sm);
}

/* Hide scrollbar but keep functionality */
.scroll-x-hidden {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.scroll-x-hidden::-webkit-scrollbar {
    display: none;
}

/* Scroll indicators (fade edges) */
.scroll-fade-container {
    position: relative;
    overflow: hidden;
}

.scroll-fade-container::before,
.scroll-fade-container::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 30px;
    pointer-events: none;
    z-index: 1;
}

.scroll-fade-container::before {
    left: 0;
    background: linear-gradient(to right, var(--color-surface), transparent);
}

.scroll-fade-container::after {
    right: 0;
    background: linear-gradient(to left, var(--color-surface), transparent);
}

/* ============================================
   RESPONSIVE TYPOGRAPHY
   ============================================ */

/* Mobile typography scale */
@media (max-width: 480px) {
    .mobile-text-xs { font-size: 0.75rem !important; }   /* 12px */
    .mobile-text-sm { font-size: 0.875rem !important; }  /* 14px */
    .mobile-text-base { font-size: 1rem !important; }    /* 16px */
    .mobile-text-lg { font-size: 1.125rem !important; }  /* 18px */
    .mobile-text-xl { font-size: 1.25rem !important; }   /* 20px */
    .mobile-text-2xl { font-size: 1.5rem !important; }   /* 24px */
    
    .mobile-text-center { text-align: center !important; }
    .mobile-text-left { text-align: left !important; }
    .mobile-text-right { text-align: right !important; }
    
    /* Truncate text on mobile */
    .mobile-truncate {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
}

/* ============================================
   MOBILE NAVIGATION
   ============================================ */

/* Sticky bottom navigation (native app feel) */
.mobile-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    display: flex;
    justify-content: space-around;
    padding: var(--mobile-spacing-sm) 0;
}

.mobile-bottom-nav__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--mobile-spacing-sm);
    min-height: var(--touch-target-min);
    min-width: var(--touch-target-min);
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.mobile-bottom-nav__item.active {
    color: var(--color-primary);
}

.mobile-bottom-nav__item i {
    font-size: 1.25rem;
    margin-bottom: 0.25rem;
}

.mobile-bottom-nav__item span {
    font-size: 0.75rem;
}

/* ============================================
   MOBILE DRAWER / BOTTOM SHEET
   ============================================ */

/* Overlay backdrop */
.mobile-drawer-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1040;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.mobile-drawer-backdrop.show {
    opacity: 1;
    visibility: visible;
}

/* Mobile drawer container */
.mobile-drawer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--color-surface);
    border-radius: var(--border-radius-lg) 16px 0 0;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    z-index: 1050;
    max-height: 85vh;
    transform: translateY(100%);
    transition: transform 0.3s ease-out;
    display: flex;
    flex-direction: column;
}

.mobile-drawer.show {
    transform: translateY(0);
}

/* Drawer handle (for dragging) */
.mobile-drawer__handle {
    width: 40px;
    height: var(--space-1);
    background: var(--color-border);
    border-radius: var(--border-radius-sm);
    margin: var(--mobile-spacing-md) auto var(--mobile-spacing-sm);
}

/* Drawer header */
.mobile-drawer__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--mobile-spacing-md) var(--mobile-spacing-lg);
    border-bottom: 1px solid var(--color-border);
}

.mobile-drawer__title {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
}

.mobile-drawer__close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--color-text-secondary);
    cursor: pointer;
    padding: var(--mobile-spacing-sm);
    min-height: var(--touch-target-min);
    min-width: var(--touch-target-min);
}

/* Drawer content */
.mobile-drawer__content {
    flex: 1;
    overflow-y: auto;
    padding: var(--mobile-spacing-lg);
    -webkit-overflow-scrolling: touch;
}

/* Drawer footer (sticky actions) */
.mobile-drawer__footer {
    padding: var(--mobile-spacing-md) var(--mobile-spacing-lg);
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
    display: flex;
    gap: var(--mobile-spacing-md);
}

.mobile-drawer__footer button {
    flex: 1;
    min-height: var(--touch-target-min);
}

/* ============================================
   RESPONSIVE GRID HELPER
   ============================================ */

@media (max-width: 768px) {
    .mobile-stack {
        display: flex;
        flex-direction: column;
        gap: var(--mobile-spacing-lg);
    }
}


/* ========== responsive/visibility-spacing.css ========== */
/**
 * Responsive Utilities
 * Mobile-first responsive design utilities for bIDMIO ERP
 * 
 * Breakpoints (Bootstrap-aligned):
 * - Mobile: ≤768px (phones and tablets in portrait)
 * - Desktop: ≥769px (tablets in landscape and desktops)
 * - Large Desktop: ≥1025px
 */

/* ============================================
   BREAKPOINT VARIABLES (CSS Custom Properties)
   ============================================ */
:root {
    --breakpoint-mobile-max: 768px;
    --breakpoint-desktop-min: 769px;
    --breakpoint-large-min: 1025px;
    
    /* Touch target minimum (WCAG 2.1 AA) */
    --touch-target-min: 44px;
    
    /* Mobile-specific spacing */
    --mobile-spacing-xs: 0.25rem;  /* 4px */
    --mobile-spacing-sm: 0.5rem;   /* 8px */
    --mobile-spacing-md: 1rem;     /* 16px */
    --mobile-spacing-lg: 1.5rem;   /* 24px */
    --mobile-spacing-xl: 2rem;     /* 32px */
}

/* ============================================
   VISIBILITY UTILITIES
   ============================================ */

/* Show only on mobile (≤768px) - visible by default, hidden on desktop */
.mobile-only {
    display: block !important;
}

/* Hide on desktop by default (shown only on desktop ≥769px) */
.desktop-only {
    display: none !important;
}

/* Hide on mobile (≤768px) - hidden by default, shown on desktop */
.mobile-hidden {
    display: none !important;
}

/* Desktop breakpoint: ≥769px */
@media (min-width: 769px) {
    .mobile-only {
        display: none !important;
    }
    
    .desktop-only {
        display: block !important;
    }
    
    .mobile-hidden {
        display: block !important;
    }
    
    .tablet-up {
        display: block !important;
    }
    
    .tablet-hidden {
        display: none !important;
    }
}

/* Show only on large desktop (>1024px) */
@media (min-width: 1025px) {
    .large-desktop-only {
        display: block !important;
    }
}

/* ============================================
   TOUCH TARGET UTILITIES
   ============================================ */

/* Ensure minimum touch target size */
.touch-target,
.touch-target-min {
    min-height: var(--touch-target-min);
    min-width: var(--touch-target-min);
}

/* Touch-friendly button spacing */
.touch-spacing {
    margin: var(--mobile-spacing-sm);
}

/* Touch-friendly padding for interactive elements */
.touch-padding {
    padding: var(--mobile-spacing-md);
}

/* ============================================
   RESPONSIVE SPACING UTILITIES
   ============================================ */

/* Mobile spacing overrides (≤768px) */
@media (max-width: 768px) {
    .mobile-p-0 { padding: 0 !important; }
    .mobile-p-1 { padding: var(--mobile-spacing-xs) !important; }
    .mobile-p-2 { padding: var(--mobile-spacing-sm) !important; }
    .mobile-p-3 { padding: var(--mobile-spacing-md) !important; }
    .mobile-p-4 { padding: var(--mobile-spacing-lg) !important; }
    .mobile-p-5 { padding: var(--mobile-spacing-xl) !important; }
    
    .mobile-px-0 { padding-left: 0 !important; padding-right: 0 !important; }
    .mobile-px-1 { padding-left: var(--mobile-spacing-xs) !important; padding-right: var(--mobile-spacing-xs) !important; }
    .mobile-px-2 { padding-left: var(--mobile-spacing-sm) !important; padding-right: var(--mobile-spacing-sm) !important; }
    .mobile-px-3 { padding-left: var(--mobile-spacing-md) !important; padding-right: var(--mobile-spacing-md) !important; }
    .mobile-px-4 { padding-left: var(--mobile-spacing-lg) !important; padding-right: var(--mobile-spacing-lg) !important; }
    
    .mobile-py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
    .mobile-py-1 { padding-top: var(--mobile-spacing-xs) !important; padding-bottom: var(--mobile-spacing-xs) !important; }
    .mobile-py-2 { padding-top: var(--mobile-spacing-sm) !important; padding-bottom: var(--mobile-spacing-sm) !important; }
    .mobile-py-3 { padding-top: var(--mobile-spacing-md) !important; padding-bottom: var(--mobile-spacing-md) !important; }
    .mobile-py-4 { padding-top: var(--mobile-spacing-lg) !important; padding-bottom: var(--mobile-spacing-lg) !important; }
    
    .mobile-m-0 { margin: 0 !important; }
    .mobile-m-1 { margin: var(--mobile-spacing-xs) !important; }
    .mobile-m-2 { margin: var(--mobile-spacing-sm) !important; }
    .mobile-m-3 { margin: var(--mobile-spacing-md) !important; }
    .mobile-m-4 { margin: var(--mobile-spacing-lg) !important; }
    
    .mobile-mx-auto { margin-left: auto !important; margin-right: auto !important; }
    .mobile-my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
}

/* ============================================
   RESPONSIVE FLEXBOX UTILITIES
   ============================================ */

/* Stack on mobile */
@media (max-width: 768px) {
    .mobile-flex-column {
        flex-direction: column !important;
    }
    
    .mobile-flex-wrap {
        flex-wrap: wrap !important;
    }
    
    .mobile-justify-center {
        justify-content: center !important;
    }
    
    .mobile-items-center {
        align-items: center !important;
    }
    
    .mobile-items-stretch {
        align-items: stretch !important;
    }
    
    .mobile-flex-1 {
        flex: 1 !important;
    }
    
    .mobile-w-full {
        width: 100% !important;
    }
}

/* ============================================
   RESPONSIVE GRID UTILITIES
   ============================================ */

/* Mobile grid - single column (≤768px) */
@media (max-width: 768px) {
    .mobile-grid-1 {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: var(--mobile-spacing-md);
    }
}

/* Desktop grid - 3 columns (≥769px) */
@media (min-width: 769px) {
    .desktop-grid-3 {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: var(--space-4, 1rem);
    }
}


/* ========== fixes/forms-buttons.css ========== */
/**
 * BOOTSTRAP COLOR FIXES
 *
 * This file fixes Bootstrap form controls and buttons that are displaying
 * white text on white backgrounds.
 *
 * Issue identified: November 13, 2025
 * Cause: Browser autofill or unknown CSS override setting white text
 */

/* ========================================
   ICON COLOR INHERITANCE
   Let Font Awesome CDN handle font-family/weight
   We only need to ensure icons inherit parent colors
   ======================================== */

/* Primary/secondary button icons should be white */
.btn-primary i,
.btn-secondary i,
.ds-btn--primary i {
    color: #ffffff !important;
}

.ds-btn--secondary i {
    color: var(--color-text-primary) !important;
}

/* CRITICAL FIX: Force proper text color on all form controls and buttons */
/* Using -webkit-text-fill-color to override any browser autofill styles */
.form-control,
.form-select,
select.form-select,
input.form-control,
textarea.form-control,
.form-control:focus,
.form-select:focus,
input,
select,
textarea {
    color: var(--color-text-primary) !important;
    -webkit-text-fill-color: var(--color-text-primary) !important;
}

.form-control::placeholder,
.form-select::placeholder {
    color: var(--color-text-tertiary) !important;
    -webkit-text-fill-color: var(--color-text-tertiary) !important;
}

/* Fix ALL button outline variants */
.btn-outline-secondary,
.btn-outline-primary,
.btn-outline-danger,
.btn-outline-warning,
.btn-outline-info,
.btn-outline-success,
button.btn-outline-secondary,
button.btn-outline-primary,
.btn {
    color: var(--color-text-secondary) !important;
    -webkit-text-fill-color: var(--color-text-secondary) !important;
}

/* CRITICAL FIX: Primary and Secondary solid buttons must have WHITE text */
.btn-primary,
button.btn-primary,
.btn.btn-primary {
    color: var(--color-text-inverse) !important;
    -webkit-text-fill-color: var(--color-text-inverse) !important;
}

.btn-secondary,
button.btn-secondary,
.btn.btn-secondary {
    color: var(--color-text-inverse) !important;
    -webkit-text-fill-color: var(--color-text-inverse) !important;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    color: var(--color-text-inverse) !important;
    -webkit-text-fill-color: var(--color-text-inverse) !important;
}

.btn-outline-primary {
    color: var(--color-primary) !important;
    -webkit-text-fill-color: var(--color-primary) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.ds-btn--outline-primary:hover,
.ds-btn--outline-primary:focus,
label.ds-btn--outline-primary:hover {
    color: var(--color-text-inverse) !important;
    -webkit-text-fill-color: var(--color-text-inverse) !important;
}

/* ========================================
   CRITICAL FIX: ACTIVE BUTTON TEXT COLOR
   Ensure all active buttons have white text on dark backgrounds
   Using hardcoded var(--color-text-inverse) to prevent any CSS variable issues
   ======================================== */

/* Bootstrap Primary Button Active States */
.btn-primary:active,
.btn-primary.active,
.btn-primary:focus:active,
.btn-primary.show {
    color: var(--color-text-inverse) !important;
    -webkit-text-fill-color: var(--color-text-inverse) !important;
    background-color: var(--color-primary) !important;
}

/* Bootstrap General Button Active States */
.btn.active,
.btn:active,
.btn.show {
    color: var(--color-text-inverse) !important;
    -webkit-text-fill-color: var(--color-text-inverse) !important;
}

/* Bootstrap Button Toggle (checkbox/radio) Active States */
.btn-check:checked + .btn,
.btn-check:active + .btn,
.btn-check:checked + .btn-primary,
.btn-check:active + .btn-primary {
    color: var(--color-text-inverse) !important;
    -webkit-text-fill-color: var(--color-text-inverse) !important;
    background-color: var(--color-primary) !important;
}

/* Outline Button Active States - CRITICAL for visibility */
.btn-outline-secondary:active,
.btn-outline-secondary.active,
.btn-outline-secondary.show,
.btn-outline-primary:active,
.btn-outline-primary.active,
.btn-outline-primary.show,
.btn-outline-danger:active,
.btn-outline-danger.active,
.btn-outline-danger.show,
.btn-outline-warning:active,
.btn-outline-warning.active,
.btn-outline-warning.show,
.btn-outline-info:active,
.btn-outline-info.active,
.btn-outline-info.show,
.btn-outline-success:active,
.btn-outline-success.active,
.btn-outline-success.show {
    color: var(--color-text-inverse) !important;
    -webkit-text-fill-color: var(--color-text-inverse) !important;
}

/* Dropdown Toggle Active States - CRITICAL for "Project Options" */
.dropdown-toggle:active,
.dropdown-toggle.active,
.dropdown-toggle.show,
.btn.dropdown-toggle:active,
.btn.dropdown-toggle.active,
.btn.dropdown-toggle.show,
.btn-primary.dropdown-toggle:active,
.btn-primary.dropdown-toggle.active,
.btn-primary.dropdown-toggle.show,
.btn-outline-secondary.dropdown-toggle:active,
.btn-outline-secondary.dropdown-toggle.active,
.btn-outline-secondary.dropdown-toggle.show {
    color: var(--color-text-inverse) !important;
    -webkit-text-fill-color: var(--color-text-inverse) !important;
}

/* Fix form check inputs and labels */
.form-check-label,
label.form-check-label,
label {
    color: var(--color-text-primary) !important;
    -webkit-text-fill-color: var(--color-text-primary) !important;
}

.form-check-input {
    border-color: var(--color-border) !important;
}

/* Fix dropdown toggles */
.dropdown-toggle,
button.dropdown-toggle {
    color: var(--color-text-primary) !important;
    -webkit-text-fill-color: var(--color-text-primary) !important;
}

.btn-outline-secondary.dropdown-toggle {
    color: var(--color-text-secondary) !important;
    -webkit-text-fill-color: var(--color-text-secondary) !important;
}

/* Fix table buttons and checkboxes */
.table .btn,
.table button,
.table .form-check-input,
.table .form-check-label,
td .btn,
td button,
td .form-check-input {
    color: var(--color-text-primary) !important;
    -webkit-text-fill-color: var(--color-text-primary) !important;
}

/* Fix select/option text */
select option,
.form-select option {
    color: var(--color-text-primary) !important;
    -webkit-text-fill-color: var(--color-text-primary) !important;
    background: var(--color-surface) !important;
}

/* ========================================
   FILTER FIELD HEIGHT CONSISTENCY
   Ensures all filter fields are exactly 32px
   ======================================== */

.ds-filter-field,
.ds-form-select.ds-filter-field,
.ds-form-input.ds-filter-field,
select.ds-filter-field,
input.ds-filter-field,
button.ds-filter-field,
.project-filters-primary .ds-filter-field,
.project-filters-primary .ds-form-select,
.project-filters-primary .ds-form-input,
.project-filters-primary select,
.project-filters-primary input,
.customer-filters-primary .ds-filter-field,
.customer-filters-primary .ds-form-select,
.customer-filters-primary .ds-form-input,
.customer-filters-primary select,
.customer-filters-primary input {
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    line-height: 1.4 !important;
    box-sizing: border-box !important;
}

/* Input group text within filter groups */
.ds-filter-group .input-group-text,
.project-filters-primary .input-group-text,
.customer-filters-primary .input-group-text {
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
}


/* ========== fixes/theme-misc.css ========== */
/**
 * Bootstrap Theme Overrides
 * 
 * Maps Bootstrap's hardcoded colors to design token CSS variables
 * Ensures proper light/dark mode switching for all Bootstrap components
 * 
 * Load this file after forms-buttons.css
 */

/* ========================================
   BOOTSTRAP CSS VARIABLE BRIDGE
   Map Bootstrap's internal CSS variables to our design tokens
   This ensures Bootstrap components respect light/dark themes
   ======================================== */

:root {
    /* Shell Header Token Override */
    /* Header: header-top-row (36px+padding ~12px) + border (1px) + top-nav (60px) + border (1px) = 108px */
    --header-top-row-height: 36px;
    --shell-header-height: 124px;
    --actual-header-height: 124px;
    
    /* Body & Global */
    --bs-body-color: var(--color-text-primary);
    --bs-body-bg: var(--color-background);
    
    /* Form Controls */
    --bs-form-control-color: var(--color-text-primary);
    --bs-form-control-bg: var(--color-surface);
    --bs-form-control-border-color: var(--color-border);
    --bs-form-control-disabled-bg: var(--color-surface-secondary);
    
    /* Form Select */
    --bs-form-select-color: var(--color-text-primary);
    --bs-form-select-bg: var(--color-surface);
    --bs-form-select-border-color: var(--color-border);
    --bs-form-select-disabled-color: var(--color-text-secondary);
    --bs-form-select-disabled-bg: var(--color-surface-secondary);
    
    /* Dropdowns */
    --bs-dropdown-color: var(--color-text-primary);
    --bs-dropdown-bg: var(--color-surface);
    --bs-dropdown-border-color: var(--color-border);
    --bs-dropdown-link-color: var(--color-text-primary);
    --bs-dropdown-link-hover-color: var(--color-text-primary);
    --bs-dropdown-link-hover-bg: var(--color-surface-secondary);
    
    /* Modals */
    --bs-modal-color: var(--color-text-primary);
    --bs-modal-bg: var(--color-surface);
    --bs-modal-border-color: var(--color-border);
    
    /* Cards */
    --bs-card-bg: var(--color-surface);
    --bs-card-border-color: var(--color-border);
    --bs-card-cap-bg: var(--color-surface-secondary);
    
    /* Tables */
    --bs-table-color: var(--color-text-primary);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--color-border);
    
    /* Borders */
    --bs-border-color: var(--color-border);
}

html[data-theme="dark"],
[data-bs-theme="dark"] {
    /* Body & Global */
    --bs-body-color: var(--color-text-primary);
    --bs-body-bg: var(--color-background);
    
    /* Form Controls */
    --bs-form-control-color: var(--color-text-primary);
    --bs-form-control-bg: var(--color-surface);
    --bs-form-control-border-color: var(--color-border);
    --bs-form-control-disabled-bg: var(--color-surface-secondary);
    
    /* Form Select */
    --bs-form-select-color: var(--color-text-primary);
    --bs-form-select-bg: var(--color-surface);
    --bs-form-select-border-color: var(--color-border);
    --bs-form-select-disabled-color: var(--color-text-secondary);
    --bs-form-select-disabled-bg: var(--color-surface-secondary);
    
    /* Dropdowns */
    --bs-dropdown-color: var(--color-text-primary);
    --bs-dropdown-bg: var(--color-surface);
    --bs-dropdown-border-color: var(--color-border);
    --bs-dropdown-link-color: var(--color-text-primary);
    --bs-dropdown-link-hover-color: var(--color-text-primary);
    --bs-dropdown-link-hover-bg: var(--color-surface-secondary);
    
    /* Modals */
    --bs-modal-color: var(--color-text-primary);
    --bs-modal-bg: var(--color-surface);
    --bs-modal-border-color: var(--color-border);
    
    /* Cards */
    --bs-card-bg: var(--color-surface);
    --bs-card-border-color: var(--color-border);
    --bs-card-cap-bg: var(--color-surface-secondary);
    
    /* Tables */
    --bs-table-color: var(--color-text-primary);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--color-border);
    
    /* Borders */
    --bs-border-color: var(--color-border);
}

/* ========================================
   GLOBAL TEXT & TYPOGRAPHY
   ======================================== */

/* Override Bootstrap's body text color */
body {
    color: var(--color-text-primary);
    background-color: var(--color-background);
}

/* Override all heading colors */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--color-text-primary);
}

/* Override paragraph and general text */
p, span, div, li, td, th {
    color: var(--color-text-primary);
}

/* Override link colors */
a {
    color: var(--color-primary);
}

a:hover {
    color: var(--color-primary-hover);
}

/* Small text and text-muted */
small, .small {
    color: var(--color-text-secondary);
}

.text-muted {
    color: var(--color-text-secondary);
}

/* ========================================
   FORM CONTROLS
   ======================================== */

.form-control,
.form-select,
select.form-select,
input.form-control,
textarea.form-control {
    color: var(--color-text-primary);
    background-color: var(--color-surface);
    border-color: var(--color-border);
}

.form-control:focus,
.form-select:focus {
    color: var(--color-text-primary);
    background-color: var(--color-surface);
    border-color: var(--color-primary);
}

.form-control::placeholder,
.form-select::placeholder,
input::placeholder,
textarea::placeholder {
    color: var(--color-text-tertiary);
}

.form-control:disabled,
.form-select:disabled {
    background-color: var(--color-surface-secondary);
    color: var(--color-text-secondary);
}

/* ========================================
   BUTTONS
   ======================================== */

/* Override Bootstrap's button color variable */
.btn {
    --bs-btn-color: var(--color-text-primary);
    --bs-btn-hover-color: var(--color-text-primary);
    --bs-btn-active-color: var(--color-text-primary);
    --bs-btn-disabled-color: var(--color-text-secondary);
}

/* Primary buttons - white text on colored background */
.btn-primary {
    --bs-btn-color: var(--color-text-inverse);
    --bs-btn-hover-color: var(--color-text-inverse);
    --bs-btn-active-color: var(--color-text-inverse);
    --bs-btn-active-bg: var(--color-primary);
}

/* CRITICAL: All outline buttons when active must have white text */
.btn-outline-primary:active,
.btn-outline-primary.active,
.btn-outline-secondary:active,
.btn-outline-secondary.active,
.btn-outline-danger:active,
.btn-outline-danger.active {
    --bs-btn-color: var(--color-surface) !important;
    --bs-btn-active-color: var(--color-surface) !important;
    --bs-btn-bg: var(--color-primary) !important;
    --bs-btn-active-bg: var(--color-primary) !important;
}

/* Outline buttons */
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-danger,
.btn-outline-warning,
.btn-outline-info,
.btn-outline-success {
    color: var(--color-text-primary);
}

.btn-outline-primary:hover,
.btn-outline-secondary:hover,
.btn-outline-danger:hover,
.btn-outline-warning:hover,
.btn-outline-info:hover,
.btn-outline-success:hover {
    color: var(--color-text-inverse);
}

/* ========================================
   DROPDOWNS - GLOBAL SOLID BACKGROUND FIX
   Ensures all dropdowns have solid white background
   ======================================== */

.dropdown-menu,
ul.dropdown-menu,
.dropdown-menu.show,
.header-dropdown-menu {
    background: var(--color-surface) !important;
    background-color: var(--color-surface) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
    opacity: 1 !important;
}

.dropdown-menu .dropdown-item,
ul.dropdown-menu .dropdown-item,
.header-dropdown-menu .dropdown-item {
    background: var(--color-surface) !important;
    background-color: var(--color-surface) !important;
    color: var(--color-text-primary) !important;
}

.dropdown-item i,
.dropdown-item svg {
    color: var(--color-text-secondary);
}

.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
    background: var(--color-surface-secondary) !important;
    background-color: var(--color-surface-secondary) !important;
    color: var(--color-text-primary);
}

.dropdown-item:hover i,
.dropdown-item:focus i,
.dropdown-item:hover svg,
.dropdown-item:focus svg {
    color: var(--color-primary);
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--color-primary) !important;
    color: var(--color-text-inverse) !important;
}

.dropdown-item.active i,
.dropdown-item:active i,
.dropdown-item.active svg,
.dropdown-item:active svg {
    color: var(--color-text-inverse);
}

.dropdown-toggle {
    color: var(--color-text-primary);
}

/* Dark mode dropdown overrides */
[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] ul.dropdown-menu,
[data-theme="dark"] .dropdown-menu.show,
[data-theme="dark"] .header-dropdown-menu {
    background: var(--color-surface) !important;
    background-color: var(--color-surface) !important;
    border-color: var(--color-border) !important;
}

[data-theme="dark"] .dropdown-menu .dropdown-item,
[data-theme="dark"] .header-dropdown-menu .dropdown-item {
    background: var(--color-surface) !important;
    color: var(--color-text-primary) !important;
}

[data-theme="dark"] .dropdown-menu .dropdown-item:hover,
[data-theme="dark"] .dropdown-menu .dropdown-item:focus {
    background: var(--color-surface-secondary) !important;
}

/* ========================================
   MODALS - GLOBAL SOLID BACKGROUND FIX
   Ensures all modals have solid white background in LIGHT MODE
   Uses hardcoded #ffffff to guarantee white regardless of token issues
   ======================================== */

/* LIGHT MODE: Force pure white backgrounds on all modals */
:root:not([data-theme="dark"]) .modal-content,
:root:not([data-theme="dark"]) .ds-modal__container,
:root:not([data-theme="dark"]) .economy-modal-container,
:root:not([data-theme="dark"]) .modal-container,
html:not([data-theme="dark"]) .modal-content,
html:not([data-theme="dark"]) .ds-modal__container,
html:not([data-theme="dark"]) .economy-modal-container,
html:not([data-theme="dark"]) .modal-container,
[data-theme="light"] .modal-content,
[data-theme="light"] .ds-modal__container,
[data-theme="light"] .economy-modal-container,
[data-theme="light"] .modal-container {
    background: #ffffff !important;
    background-color: #ffffff !important;
}

/* ========================================
   GLOBAL LIGHT MODE BACKGROUND FIX
   Comprehensive fix for all modals, dropdowns, popovers, tooltips
   Forces solid white backgrounds in light mode
   ======================================== */

/* ---- MODALS: All modal containers ---- */
:root:not([data-theme="dark"]) .modal-content,
:root:not([data-theme="dark"]) .modal-dialog .modal-content,
:root:not([data-theme="dark"]) .ds-modal__container,
:root:not([data-theme="dark"]) .ds-modal__panel,
:root:not([data-theme="dark"]) .ds-modal-content,
:root:not([data-theme="dark"]) .economy-modal-container,
:root:not([data-theme="dark"]) .modal-container,
:root:not([data-theme="dark"]) .time-entry-modal-container,
:root:not([data-theme="dark"]) .settings-modal-content,
:root:not([data-theme="dark"]) .tools-modal-content,
:root:not([data-theme="dark"]) .settings-result-modal,
:root:not([data-theme="dark"]) .settings-loading-modal,
html:not([data-theme="dark"]) .modal-content,
html:not([data-theme="dark"]) .modal-dialog .modal-content,
html:not([data-theme="dark"]) .ds-modal__container,
html:not([data-theme="dark"]) .ds-modal__panel,
html:not([data-theme="dark"]) .ds-modal-content,
html:not([data-theme="dark"]) .economy-modal-container,
html:not([data-theme="dark"]) .modal-container,
html:not([data-theme="dark"]) .time-entry-modal-container,
html:not([data-theme="dark"]) .settings-modal-content,
html:not([data-theme="dark"]) .tools-modal-content,
html:not([data-theme="dark"]) .settings-result-modal,
html:not([data-theme="dark"]) .settings-loading-modal,
[data-theme="light"] .modal-content,
[data-theme="light"] .modal-dialog .modal-content,
[data-theme="light"] .ds-modal__container,
[data-theme="light"] .ds-modal__panel,
[data-theme="light"] .ds-modal-content,
[data-theme="light"] .economy-modal-container,
[data-theme="light"] .modal-container,
[data-theme="light"] .time-entry-modal-container,
[data-theme="light"] .settings-modal-content,
[data-theme="light"] .tools-modal-content,
[data-theme="light"] .settings-result-modal,
[data-theme="light"] .settings-loading-modal {
    background: #ffffff !important;
    background-color: #ffffff !important;
}

/* ---- DROPDOWNS: All dropdown menus ---- */
:root:not([data-theme="dark"]) .dropdown-menu,
:root:not([data-theme="dark"]) .ds-dropdown__menu,
:root:not([data-theme="dark"]) .header-dropdown-menu,
:root:not([data-theme="dark"]) .notifications-dropdown,
:root:not([data-theme="dark"]) .dropdown-menu.show,
html:not([data-theme="dark"]) .dropdown-menu,
html:not([data-theme="dark"]) .ds-dropdown__menu,
html:not([data-theme="dark"]) .header-dropdown-menu,
html:not([data-theme="dark"]) .notifications-dropdown,
html:not([data-theme="dark"]) .dropdown-menu.show,
[data-theme="light"] .dropdown-menu,
[data-theme="light"] .ds-dropdown__menu,
[data-theme="light"] .header-dropdown-menu,
[data-theme="light"] .notifications-dropdown,
[data-theme="light"] .dropdown-menu.show {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
}

/* ---- POPOVERS: All popover components ---- */
:root:not([data-theme="dark"]) .popover,
:root:not([data-theme="dark"]) .popover-body,
:root:not([data-theme="dark"]) .popover-header,
:root:not([data-theme="dark"]) .bs-popover-auto,
html:not([data-theme="dark"]) .popover,
html:not([data-theme="dark"]) .popover-body,
html:not([data-theme="dark"]) .popover-header,
html:not([data-theme="dark"]) .bs-popover-auto,
[data-theme="light"] .popover,
[data-theme="light"] .popover-body,
[data-theme="light"] .popover-header,
[data-theme="light"] .bs-popover-auto {
    background: #ffffff !important;
    background-color: #ffffff !important;
}

/* ---- TOOLTIPS: All tooltip components ---- */
:root:not([data-theme="dark"]) .tooltip-inner,
html:not([data-theme="dark"]) .tooltip-inner,
[data-theme="light"] .tooltip-inner {
    background: #1f2937 !important;
    background-color: #1f2937 !important;
    color: #ffffff !important;
}

/* ---- MOBILE DRAWERS & PANELS ---- */
:root:not([data-theme="dark"]) .mobile-drawer__content,
:root:not([data-theme="dark"]) .mobile-drawer__footer,
:root:not([data-theme="dark"]) .floating-panel,
html:not([data-theme="dark"]) .mobile-drawer__content,
html:not([data-theme="dark"]) .mobile-drawer__footer,
html:not([data-theme="dark"]) .floating-panel,
[data-theme="light"] .mobile-drawer__content,
[data-theme="light"] .mobile-drawer__footer,
[data-theme="light"] .floating-panel {
    background: #ffffff !important;
    background-color: #ffffff !important;
}

/* Fallback for when no data-theme is set (default to light) */
.modal-content,
.ds-modal__container,
.ds-modal__panel,
.ds-modal-content,
.economy-modal-container,
.modal-container,
.dropdown-menu,
.ds-dropdown__menu,
.popover,
.popover-body {
    background: #ffffff !important;
    background-color: #ffffff !important;
}

/* ID-based overrides for specific modals */
#stock-logs-modal .modal-container,
#stock-logs-modal .economy-modal-container,
#stock-logs-modal.economy-modal .modal-container {
    background: #ffffff !important;
    background-color: #ffffff !important;
}

:root:not([data-theme="dark"]) .modal-header,
:root:not([data-theme="dark"]) .ds-modal__header,
:root:not([data-theme="dark"]) .economy-modal-header,
html:not([data-theme="dark"]) .modal-header,
html:not([data-theme="dark"]) .ds-modal__header,
html:not([data-theme="dark"]) .economy-modal-header,
[data-theme="light"] .modal-header,
[data-theme="light"] .ds-modal__header,
[data-theme="light"] .economy-modal-header,
.modal-header,
.ds-modal__header,
.economy-modal-header {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border-bottom: 1px solid #e5e7eb;
}

:root:not([data-theme="dark"]) .modal-body,
:root:not([data-theme="dark"]) .ds-modal__body,
:root:not([data-theme="dark"]) .economy-modal-body,
html:not([data-theme="dark"]) .modal-body,
html:not([data-theme="dark"]) .ds-modal__body,
html:not([data-theme="dark"]) .economy-modal-body,
[data-theme="light"] .modal-body,
[data-theme="light"] .ds-modal__body,
[data-theme="light"] .economy-modal-body,
.modal-body,
.ds-modal__body,
.economy-modal-body {
    background: #ffffff !important;
    background-color: #ffffff !important;
}

#stock-logs-modal .modal-body,
#stock-logs-modal .economy-modal-body {
    background: #ffffff !important;
    background-color: #ffffff !important;
}

:root:not([data-theme="dark"]) .modal-footer,
:root:not([data-theme="dark"]) .ds-modal__footer,
:root:not([data-theme="dark"]) .economy-modal-footer,
html:not([data-theme="dark"]) .modal-footer,
html:not([data-theme="dark"]) .ds-modal__footer,
html:not([data-theme="dark"]) .economy-modal-footer,
[data-theme="light"] .modal-footer,
[data-theme="light"] .ds-modal__footer,
[data-theme="light"] .economy-modal-footer,
.modal-footer,
.ds-modal__footer,
.economy-modal-footer {
    background: #f8fafc !important;
    background-color: #f8fafc !important;
    border-top: 1px solid #e5e7eb;
}

/* ========================================
   SIDEBAR/SUBNAV ACTIVE STATE FIX
   Ensure white text on solid blue backgrounds
   ======================================== */

/* Active economy tab buttons with solid primary background need white text */
.economy-tab-btn.active,
.economy-tab-btn.touch-target.active,
#economySubnav .economy-tab-btn.active,
#economySubnav .economy-tab-btn.touch-target.active,
#economySubnav.ds-section-subnav--segmented .economy-tab-btn.active,
#economySubnav.ds-section-subnav--segmented .economy-tab-btn.touch-target.active {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

.economy-tab-btn.active .economy-tab-icon,
.economy-tab-btn.touch-target.active .economy-tab-icon,
#economySubnav .economy-tab-btn.active .economy-tab-icon,
#economySubnav .economy-tab-btn.touch-target.active .economy-tab-icon,
#economySubnav.ds-section-subnav--segmented .economy-tab-btn.active .economy-tab-icon,
#economySubnav.ds-section-subnav--segmented .economy-tab-btn.touch-target.active .economy-tab-icon {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Sidebar nav active state with primary background needs white text */
.sidebar-nav a.active,
.settings-sidebar .settings-tab-link.active,
.ds-section-subnav .economy-tab-btn.active {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

.sidebar-nav a.active i,
.settings-sidebar .settings-tab-link.active i,
.ds-section-subnav .economy-tab-btn.active i,
.ds-section-subnav .economy-tab-btn.active .economy-tab-icon {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Dark mode modal overrides */
[data-theme="dark"] .modal-content,
[data-theme="dark"] .ds-modal__container {
    background: var(--color-surface) !important;
    background-color: var(--color-surface) !important;
}

[data-theme="dark"] .modal-header,
[data-theme="dark"] .ds-modal__header,
[data-theme="dark"] .modal-body,
[data-theme="dark"] .ds-modal__body,
[data-theme="dark"] .modal-footer,
[data-theme="dark"] .ds-modal__footer {
    background: var(--color-surface) !important;
    background-color: var(--color-surface) !important;
}

/* ========================================
   DARK MODE TABLE LINKS & TEXT
   Make project titles, tracked hours, and table values readable in dark mode
   Uses design tokens and scoped selectors
   ======================================== */

/* Project list table links (ds-link class on anchors) */
[data-theme="dark"] .projects-list__table .ds-link,
[data-theme="dark"] .projects-list__table a.ds-link,
[data-theme="dark"] .projects-table-view .ds-link,
[data-theme="dark"] .projects-table-view a.ds-link,
[data-theme="dark"] .ds-table tbody a.ds-link,
[data-theme="dark"] .ds-table td a.ds-link,
html[data-theme="dark"] .projects-list__table .ds-link,
html[data-theme="dark"] .projects-list__table a.ds-link,
html[data-theme="dark"] .projects-table-view .ds-link,
html[data-theme="dark"] .projects-table-view a.ds-link,
html[data-theme="dark"] .ds-table tbody a.ds-link,
html[data-theme="dark"] .ds-table td a.ds-link {
    color: var(--color-text-primary) !important;
}

[data-theme="dark"] .projects-list__table .ds-link:hover,
[data-theme="dark"] .projects-list__table a.ds-link:hover,
[data-theme="dark"] .projects-table-view .ds-link:hover,
[data-theme="dark"] .projects-table-view a.ds-link:hover,
[data-theme="dark"] .ds-table tbody a.ds-link:hover,
[data-theme="dark"] .ds-table td a.ds-link:hover,
html[data-theme="dark"] .projects-list__table .ds-link:hover,
html[data-theme="dark"] .projects-list__table a.ds-link:hover,
html[data-theme="dark"] .projects-table-view .ds-link:hover,
html[data-theme="dark"] .projects-table-view a.ds-link:hover,
html[data-theme="dark"] .ds-table tbody a.ds-link:hover,
html[data-theme="dark"] .ds-table td a.ds-link:hover {
    color: var(--color-text-secondary) !important;
    text-decoration: underline !important;
}

/* Tracked hours display values - high specificity to override var(--color-primary) */
[data-theme="dark"] span.tracked-hours-display,
[data-theme="dark"] .tracked-hours-display.ds-font-semibold,
[data-theme="dark"] td .tracked-hours-display,
[data-theme="dark"] .ds-table td .tracked-hours-display,
[data-theme="dark"] .ds-table .tracked-hours-display,
[data-theme="dark"] .projects-list__table .tracked-hours-display,
html[data-theme="dark"] span.tracked-hours-display,
html[data-theme="dark"] .tracked-hours-display.ds-font-semibold,
html[data-theme="dark"] td .tracked-hours-display,
html[data-theme="dark"] .ds-table td .tracked-hours-display,
html[data-theme="dark"] .ds-table .tracked-hours-display,
html[data-theme="dark"] .projects-list__table .tracked-hours-display {
    color: var(--color-text-primary) !important;
}

/* ds-text-primary utility class in tables - use readable text color */
[data-theme="dark"] .ds-table td .ds-text-primary,
[data-theme="dark"] .ds-table tbody .ds-text-primary,
[data-theme="dark"] .projects-list__table .ds-text-primary,
html[data-theme="dark"] .ds-table td .ds-text-primary,
html[data-theme="dark"] .ds-table tbody .ds-text-primary,
html[data-theme="dark"] .projects-list__table .ds-text-primary {
    color: var(--color-text-primary) !important;
}

/* ========================================
   FORM LABELS & CHECKS
   ======================================== */

label,
.form-label,
.form-check-label {
    color: var(--color-text-primary);
}

.form-check-input {
    border-color: var(--color-border);
    background-color: var(--color-surface);
}

.form-check-input:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

/* ========================================
   SELECT OPTIONS
   ======================================== */

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

/* ========================================
   TABLES WITH FORM ELEMENTS
   ======================================== */

.table .btn,
.table button,
.table .form-control,
.table .form-select,
.table label {
    color: var(--color-text-primary);
}

/* ========================================
   INPUT GROUPS
   ======================================== */

.input-group-text {
    background-color: var(--color-surface-secondary);
    border-color: var(--color-border);
    color: var(--color-text-primary);
}

/* ========================================
   AUTOFILL OVERRIDE
   ======================================== */

/* Prevent browser autofill from overriding our theme colors */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--color-text-primary);
    -webkit-box-shadow: 0 0 0 1000px var(--color-surface) inset;
    transition: background-color 5000s ease-in-out 0s;
}

/* ========================================
   IMPERSONATION BANNER OFFSET
   Push fixed elements down when banner is present
   ======================================== */

body.has-impersonation-banner .header-container {
    top: 44px !important;
}

body.has-impersonation-banner .top-nav {
    top: 44px !important;
}

body.has-impersonation-banner .shell-sidebar {
    top: calc(var(--shell-header-height, 96px) + 44px) !important;
}

body.has-impersonation-banner .main-content {
    padding-top: 44px;
}

body.has-impersonation-banner .shell-wrapper {
    padding-top: 44px;
}

/* ========================================
   MOBILE HEADER-CONTENT SPACING FIX
   Ensures visible gap between fixed header and page content
   ======================================== */

@media only screen and (max-width: 768px) {
    /* Add top padding to main content container on mobile for breathing room */
    .main-content,
    #main-content {
        padding-top: var(--space-4) !important; /* 16px base gap */
    }
}

/* ========================================
   NAVIGATION BACKGROUND FIX
   Ensures solid background on main navigation
   ======================================== */

.top-nav {
    background-color: var(--color-surface) !important;
    background: var(--color-surface) !important;
}

.nav-tabs-wrapper {
    background-color: var(--color-surface) !important;
}

.nav-tabs {
    background-color: var(--color-surface) !important;
}

.nav-tabs .nav-item {
    background-color: var(--color-surface) !important;
}

.nav-tabs .nav-link {
    background-color: var(--color-surface) !important;
}

/* ========================================
   SHELL WRAPPER HEADER CLEARANCE FIX
   Override stale 108px in consolidated bundles
   Zero wrapper padding, put offset on content surfaces only
   ======================================== */

.shell-wrapper {
    padding-top: 0 !important;
}

/* Content surfaces get the header clearance, not the wrapper */
.shell-main,
.shell-content {
    padding-top: var(--shell-header-height, 98px) !important;
}

/* ========================================
   SYSTEM ANNOUNCEMENTS GAP FIX
   ROOT CAUSE: .shell-main has gap: var(--space-3) (12px) as flex column
   This gap applies BETWEEN flex children, ignoring margin/padding
   ======================================== */

/* Remove flex gap from shell-main, reapply to content only */
.shell-main {
    gap: 0 !important;
}

/* Reapply spacing to main-content (but not announcements) */
.shell-main > .main-content {
    margin-top: var(--space-3) !important;
}

/* When announcements exist, main-content doesn't need extra margin */
.system-announcements-container + .main-content {
    margin-top: 0 !important;
}

.system-announcements-container {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.system-announcements-container:not(.system-announcements-container--top-sticky):not(.system-announcements-container--top-scroll):not(.d-lg-none) {
    margin-top: var(--actual-header-height, 124px) !important;
    padding-top: 0 !important;
}



/* ========== auth.css ========== */
body.auth-route * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body.auth-route {
    font-family: var(--font-family-base, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif);
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-5);
}

body.auth-route .auth-wrapper {
    width: 100%;
    max-width: 1100px;
    display: flex;
    background: #ffffff;
    background: var(--color-surface, #ffffff);
    border-radius: var(--space-4);
    box-shadow: var(--shadow-2xl);
    overflow: hidden;
    min-height: 600px;
}

body.auth-route .auth-brand {
    flex: 1;
    background: linear-gradient(135deg, #1e3a8a 0%, #1e3a5f 100%);
    padding: var(--space-12, 3rem) var(--space-12, 3rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    position: relative;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-right: none;
    border-radius: var(--space-4, 1rem) 0 0 var(--space-4, 1rem);
}

body.auth-route .auth-brand::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
    background-size: 50px 50px;
    animation: drift 20s linear infinite;
}

@keyframes drift {
    0% { transform: translate(0, 0); }
    100% { transform: translate(50px, 50px); }
}

body.auth-route .brand-content {
    position: relative;
    z-index: 1;
    text-align: center;
}

body.auth-route .logo-img {
    max-width: 100%;
    width: 320px;
    height: auto;
    margin-bottom: var(--space-8);
}

body.auth-route .brand-tagline {
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: var(--space-10);
    color: var(--color-text-inverse);
    font-weight: 400;
    letter-spacing: 0.5px;
}

body.auth-route .brand-features {
    list-style: none;
    text-align: left;
    margin-top: var(--space-8);
}

body.auth-route .brand-features li {
    padding: var(--space-3) 0;
    font-size: 15px;
    display: flex;
    align-items: center;
    color: var(--color-text-inverse);
}

body.auth-route .brand-features li i {
    margin-right: var(--space-3);
    font-size: 18px;
    color: var(--color-success-light);
}

body.auth-route .auth-form-container {
    flex: 1;
    padding: var(--space-12) var(--space-12);
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #ffffff;
    background: var(--color-surface, #ffffff);
}

body.auth-route .auth-header {
    margin-bottom: var(--space-10);
}

body.auth-route .auth-header h1 {
    font-size: var(--space-8);
    font-weight: 700;
    color: var(--color-primary-dark);
    margin-bottom: var(--space-2);
}

body.auth-route .auth-header p {
    color: var(--color-text-secondary);
    font-size: var(--space-4);
}

body.auth-route .progress-steps {
    display: flex;
    justify-content: center;
    margin-top: var(--space-5);
    margin-bottom: 0;
}

body.auth-route .step {
    display: flex;
    align-items: center;
    color: white !important;
    font-size: var(--space-3);
    font-weight: 500;
}

body.auth-route .step span {
    color: white !important;
}

body.auth-route .step.completed {
    color: var(--color-success-light) !important;
}

body.auth-route .step.completed span {
    color: var(--color-success-light) !important;
}

body.auth-route .step.active {
    color: white !important;
}

body.auth-route .step.active span {
    color: white !important;
}

body.auth-route .step-number {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, var(--opacity-20));
    color: rgba(255, 255, 255, var(--opacity-80));
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: var(--space-2);
    font-size: var(--space-3);
    font-weight: 600;
}

body.auth-route .step.completed .step-number {
    background: var(--color-success-light);
    color: var(--color-text-inverse);
}

body.auth-route .step.active .step-number {
    background: var(--color-surface);
    color: var(--color-primary);
}

body.auth-route .step-connector {
    width: 40px;
    height: 2px;
    background: rgba(255, 255, 255, var(--opacity-30));
    margin: 0 var(--space-4);
}

body.auth-route .step.completed + .step-connector {
    background: var(--color-success-light);
}

body.auth-route .form-group {
    margin-bottom: var(--space-6);
}

body.auth-route .form-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-gray-700);
    margin-bottom: var(--space-2);
}

body.auth-route .form-input {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    font-size: 15px;
    border: 2px solid var(--color-border);
    border-radius: var(--border-radius);
    transition: all 0.2s;
    background: var(--color-gray-50);
    color: var(--color-primary-dark);
}

body.auth-route .form-input:focus {
    outline: none;
    border-color: var(--color-primary);
    background: var(--color-surface);
    box-shadow: var(--shadow-focus);
}

body.auth-route .password-wrapper {
    position: relative;
}

body.auth-route .password-toggle {
    position: absolute;
    right: var(--space-3);
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--color-text-tertiary);
    cursor: pointer;
    padding: var(--space-2);
    line-height: 1;
    transition: color 0.2s;
}

body.auth-route .password-toggle:hover {
    color: var(--color-text-secondary);
}

body.auth-route .password-strength {
    margin-top: var(--space-2);
    font-size: var(--space-3);
}

body.auth-route .strength-bar {
    height: var(--space-1);
    background: var(--color-border);
    border-radius: var(--border-radius-sm);
    margin: var(--space-1) 0;
    overflow: hidden;
}

body.auth-route .strength-fill {
    height: 100%;
    border-radius: var(--border-radius-sm);
    transition: all 0.3s ease;
    width: 0%;
}

body.auth-route .strength-weak .strength-fill { background: var(--color-danger); width: 25%; }
body.auth-route .strength-fair .strength-fill { background: var(--color-warning); width: 50%; }
body.auth-route .strength-good .strength-fill { background: var(--color-success); width: 75%; }
body.auth-route .strength-strong .strength-fill { background: var(--color-success-dark); width: 100%; }

body.auth-route .strength-text {
    color: var(--color-text-secondary);
}

body.auth-route .form-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-6);
    font-size: 14px;
}

body.auth-route .remember-me {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
}

body.auth-route .remember-me input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--color-primary);
}

body.auth-route .remember-me label {
    color: var(--color-gray-700);
    cursor: pointer;
    user-select: none;
}

body.auth-route .forgot-link {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 500;
}

body.auth-route .forgot-link:hover {
    text-decoration: underline;
}

body.auth-route .btn-primary,
body.auth-route .ds-btn--primary {
    width: 100%;
    padding: 14px 24px;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
    color: #ffffff !important; /* Always white text on colored button */
    border: none;
    border-radius: var(--border-radius);
    font-size: var(--space-4);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: var(--shadow-md);
}

body.auth-route .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

body.auth-route .btn-primary:active {
    transform: translateY(0);
}

body.auth-route .btn-primary:disabled {
    background: var(--color-text-tertiary);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

body.auth-route .btn-primary.btn-error {
    background: var(--color-danger);
    box-shadow: var(--shadow-danger);
}

body.auth-route .btn-outline {
    width: 100%;
    padding: var(--space-3) var(--space-6);
    background: var(--color-surface);
    color: var(--color-gray-700);
    border: 2px solid var(--color-border);
    border-radius: var(--border-radius);
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-decoration: none;
}

body.auth-route .btn-outline:hover {
    background: var(--color-gray-50);
    border-color: var(--color-border-strong);
}

body.auth-route .divider {
    display: flex;
    align-items: center;
    margin: var(--space-6) 0;
    color: var(--color-text-tertiary);
    font-size: var(--font-size-sm);
}

.divider::before,
body.auth-route .divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--color-border);
}

body.auth-route .divider span {
    padding: 0 var(--space-4);
}

body.auth-route .signup-link {
    text-align: center;
    margin-top: var(--space-6);
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-border);
    color: var(--color-gray-700);
    font-size: var(--font-size-sm);
}

body.auth-route .signup-link a {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 600;
}

body.auth-route .signup-link a:hover {
    text-decoration: underline;
}

body.auth-route .alert {
    padding: 14px 16px;
    border-radius: var(--border-radius);
    margin-bottom: var(--space-6);
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    font-size: 14px;
}

body.auth-route .alert-danger {
    background: var(--color-danger-bg);
    border: 1px solid var(--color-danger-border);
    color: var(--color-danger-dark);
}

body.auth-route .alert-success {
    background: var(--color-success-bg);
    border: 1px solid var(--color-success-border);
    color: var(--color-success-dark);
}

body.auth-route .alert-error {
    background: var(--color-danger-bg);
    border: 1px solid var(--color-danger-border);
    color: var(--color-danger);
}

body.auth-route .alert i {
    margin-top: 2px;
}

body.auth-route .info-box {
    background: var(--color-info-bg);
    border: 1px solid var(--color-info-border);
    border-radius: var(--border-radius);
    padding: var(--space-4);
    margin-bottom: var(--space-6);
}

body.auth-route .info-box p {
    color: var(--color-info-dark);
    font-size: var(--font-size-sm);
    margin: 0;
}

body.auth-route .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

@media (max-width: 768px) {
    body.auth-route {
        padding: 0;
        background: var(--color-surface);
    }

    body.auth-route .auth-wrapper {
        flex-direction: column;
        max-width: 100%;
        border-radius: 0;
        box-shadow: none;
        min-height: 100vh;
    }

    body.auth-route .auth-brand {
        padding: 40px 30px;
        min-height: auto;
    }

    body.auth-route .logo-img {
        width: 240px;
        margin-bottom: var(--space-5);
    }

    body.auth-route .brand-tagline {
        font-size: var(--space-4);
        margin-bottom: var(--space-5);
    }

    body.auth-route .brand-features {
        display: none;
    }

    body.auth-route .auth-form-container {
        padding: 40px 30px;
    }

    body.auth-route .auth-header h1 {
        font-size: 26px;
    }

    body.auth-route .auth-header p {
        font-size: 14px;
    }

    body.auth-route .form-options {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
    }

    body.auth-route .form-row {
        grid-template-columns: 1fr;
        gap: var(--space-5);
    }

    body.auth-route .step-connector {
        width: 30px;
        margin: 0 var(--space-3);
    }

    body.auth-route .progress-steps {
        margin-top: 15px;
    }

    body.auth-route .step {
        font-size: 11px;
    }

    body.auth-route .step-number {
        width: var(--space-6);
        height: var(--space-6);
        font-size: 11px;
        margin-right: 6px;
    }
}

@media (max-width: 480px) {
    body.auth-route .auth-brand {
        padding: 30px 20px;
    }

    body.auth-route .logo-img {
        width: 200px;
    }

    body.auth-route .auth-form-container {
        padding: 30px 20px;
    }

    body.auth-route .auth-header h1 {
        font-size: var(--space-6);
    }

    body.auth-route .btn-primary,
    body.auth-route .btn-outline {
        padding: 12px 20px;
        font-size: 15px;
    }

    body.auth-route .form-input {
        padding: 10px 14px;
        font-size: 14px;
    }
}

/* Registration Step 2 specific styles */
body.auth-route .form-hint {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-top: var(--space-1);
    margin-bottom: var(--space-4);
    line-height: 1.6;
    font-weight: 400;
}

body.auth-route .search-container {
    position: relative;
    margin-bottom: var(--space-6);
}

body.auth-route .search-icon {
    position: absolute;
    left: var(--space-4);
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-tertiary);
    pointer-events: none;
    z-index: 1;
}

body.auth-route .search-input {
    width: 100%;
    padding: 14px 16px 14px 48px;
    border: 2px solid var(--color-border);
    border-radius: var(--border-radius);
    font-size: 15px;
    transition: all 0.2s;
    background: var(--color-surface);
}

body.auth-route .search-input:focus {
    outline: none;
    border-color: var(--color-primary);
    background: var(--color-surface);
    box-shadow: var(--shadow-focus);
}

body.auth-route .manual-entry {
    margin-top: var(--space-8);
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-border);
}

body.auth-route .manual-entry-header {
    display: flex;
    align-items: center;
    margin-bottom: var(--space-6);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

body.auth-route .manual-entry-header::before,
body.auth-route .manual-entry-header::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--color-border);
}

body.auth-route .manual-entry-header span {
    padding: 0 var(--space-4);
}

body.auth-route .selected-company {
    background: var(--color-primary-bg, #eff6ff);
    border: 1px solid var(--color-primary-border, #bfdbfe);
    border-radius: var(--border-radius);
    padding: var(--space-5);
    margin-bottom: var(--space-6);
}

body.auth-route .back-button {
    width: 100%;
    background: transparent;
    color: var(--color-text-secondary);
    border: none;
    padding: var(--space-3);
    border-radius: var(--border-radius);
    font-size: var(--font-size-base);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: var(--space-10) !important;
    margin-bottom: var(--space-4) !important;
    text-decoration: none;
    display: inline-block;
    text-align: center;
}

body.auth-route .back-button:hover {
    background: var(--color-surface-secondary);
    color: var(--color-text-primary);
    text-decoration: none;
}



/* ========== superadmin.css ========== */
/* SuperAdmin Modern Design System */

:root {
    /* Modern Color Palette - References main design tokens for consistency */
    --sa-primary: var(--color-indigo);
    --sa-primary-dark: var(--color-blue-dark);
    --sa-primary-light: var(--color-indigo-light);
    --sa-secondary: var(--color-purple);
    --sa-success: var(--color-success);
    --sa-success-dark: var(--color-success-dark);
    --sa-warning: var(--color-warning);
    --sa-warning-dark: var(--color-warning-dark);
    --sa-danger: var(--color-danger);
    --sa-danger-dark: var(--color-danger-dark);
    --sa-info: var(--color-info);
    --sa-info-dark: var(--color-info-dark);
    
    /* Neutral Colors - References main design tokens */
    --sa-gray-50: var(--color-gray-50);
    --sa-gray-100: var(--color-gray-100);
    --sa-gray-200: var(--color-gray-200);
    --sa-gray-300: var(--color-gray-300);
    --sa-gray-400: var(--color-gray-400);
    --sa-gray-500: var(--color-gray-500);
    --sa-gray-600: var(--color-gray-600);
    --sa-gray-700: var(--color-gray-700);
    --sa-gray-800: var(--color-gray-800);
    --sa-gray-900: var(--color-gray-900);
    
    /* Gradients - Uses main design token colors */
    --sa-gradient-primary: linear-gradient(135deg, var(--color-indigo) 0%, var(--color-purple) 100%);
    --sa-gradient-success: linear-gradient(135deg, var(--color-success) 0%, var(--color-success-dark) 100%);
    --sa-gradient-warning: linear-gradient(135deg, var(--color-warning) 0%, var(--color-warning-dark) 100%);
    --sa-gradient-info: linear-gradient(135deg, var(--color-info) 0%, var(--color-info-dark) 100%);
    
    /* Shadows */
    --sa-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --sa-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --sa-shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --sa-shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --sa-shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    
    /* Borders */
    --sa-border-radius: 0.75rem;
    --sa-border-radius-sm: 0.5rem;
    --sa-border-radius-lg: 1rem;
}

/* Global Styles */
body.superadmin-body {
    background: var(--color-surface-secondary);
    min-height: 100vh;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Modern Sidebar */
.sa-sidebar {
    background: var(--color-surface);
    width: 280px;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    box-shadow: var(--sa-shadow-lg);
    z-index: var(--z-dropdown);
    overflow-y: auto;
}

.sa-sidebar-header {
    padding: 2rem 1.5rem;
    border-bottom: var(--border-width) solid var(--sa-gray-200);
}

.sa-sidebar-brand {
    font-size: 1.5rem;
    font-weight: 700;
    background: var(--sa-gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.sa-sidebar-brand i {
    -webkit-text-fill-color: var(--sa-primary);
}

.sa-sidebar-menu {
    padding: 1rem 0;
}

.sa-menu-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3-5) var(--space-6);
    color: var(--sa-gray-700);
    text-decoration: none;
    transition: all 0.2s;
    font-weight: 500;
    position: relative;
}

.sa-menu-item:hover {
    background: var(--sa-gray-50);
    color: var(--sa-primary);
}

.sa-menu-item.active {
    background: linear-gradient(90deg, rgba(99, 102, 241, 0.1) 0%, transparent 100%);
    color: var(--sa-primary);
    border-left: var(--border-width-4) solid var(--sa-primary);
}

.sa-menu-item i {
    width: var(--space-5);
    text-align: center;
}

.sa-menu-badge {
    margin-left: auto;
    background: var(--sa-danger);
    color: var(--color-surface);
    font-size: 0.75rem;
    padding: var(--space-1) var(--space-2);
    border-radius: 9999px;
    font-weight: 600;
}

/* Main Content Area */
.sa-main {
    margin-left: 280px;
    min-height: 100vh;
    padding: var(--space-8);
}

.sa-container {
    max-width: 1600px;
    margin: 0 auto;
}

/* Top Bar */
.sa-topbar {
    background: var(--color-surface);
    padding: var(--space-4) var(--space-8);
    border-radius: var(--sa-border-radius-lg);
    box-shadow: var(--sa-shadow);
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sa-topbar-title h1 {
    font-size: 1.875rem;
    font-weight: 700;
    color: var(--sa-gray-900);
    margin: 0;
}

.sa-topbar-title p {
    color: var(--sa-gray-500);
    margin: 0.25rem 0 0 0;
}

.sa-topbar-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.sa-user-menu {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-4);
    background: var(--sa-gray-50);
    border-radius: var(--sa-border-radius);
    cursor: pointer;
    transition: all 0.2s;
}

.sa-user-menu:hover {
    background: var(--sa-gray-100);
}

.sa-user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--sa-gradient-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-surface);
    font-weight: 600;
}

/* Modern Stat Cards */
.sa-stat-card {
    background: var(--color-surface);
    border-radius: var(--sa-border-radius-lg);
    padding: var(--space-6);
    box-shadow: var(--sa-shadow);
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
}

.sa-stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--space-1);
    background: var(--gradient, var(--sa-gradient-primary));
}

.sa-stat-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--sa-shadow-lg);
}

.sa-stat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.sa-stat-icon {
    width: 50px;
    height: 50px;
    border-radius: var(--sa-border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    background: var(--icon-bg, rgba(99, 102, 241, 0.1));
    color: var(--icon-color, var(--sa-primary));
}

.sa-stat-value {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--sa-gray-900);
    line-height: 1;
    margin-bottom: 0.5rem;
}

.sa-stat-label {
    color: var(--sa-gray-500);
    font-size: 0.875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.sa-stat-trend {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    font-size: 0.875rem;
}

.sa-stat-trend.positive {
    color: var(--sa-success);
}

.sa-stat-trend.negative {
    color: var(--sa-danger);
}

/* Modern Cards */
.sa-card {
    background: var(--color-surface);
    border-radius: var(--sa-border-radius-lg);
    box-shadow: var(--sa-shadow);
    overflow: hidden;
}

.sa-card-header {
    padding: var(--space-6);
    border-bottom: var(--border-width) solid var(--sa-gray-200);
    display: flex;
    align-items: center;
    gap: 1rem;
}

.sa-card-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--sa-gray-900);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}

.sa-card-body {
    padding: var(--space-6);
}

.sa-card-footer {
    padding: var(--space-4) var(--space-6);
    background: var(--sa-gray-50);
    border-top: var(--border-width) solid var(--sa-gray-200);
}

/* Modern Table */
.sa-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.sa-table thead th {
    background: var(--sa-gray-50);
    padding: var(--space-4) var(--space-6);
    text-align: left;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--sa-gray-600);
    border-bottom: var(--border-width-2) solid var(--sa-gray-200);
}

.sa-table tbody td {
    padding: var(--space-5) var(--space-6);
    border-bottom: var(--border-width) solid var(--sa-gray-100);
    color: var(--sa-gray-700);
}

.sa-table tbody tr {
    transition: all 0.2s;
}

.sa-table tbody tr:hover {
    background: var(--sa-gray-50);
}

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

/* Modern Badges */
.sa-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: var(--space-1-5) var(--space-3);
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
}

.sa-badge-primary {
    background: rgba(99, 102, 241, 0.1);
    color: var(--sa-primary-dark);
}

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

.sa-badge-warning {
    background: rgba(245, 158, 11, 0.1);
    color: var(--sa-warning-dark);
}

.sa-badge-danger {
    background: rgba(239, 68, 68, 0.1);
    color: var(--sa-danger-dark);
}

.sa-badge-info {
    background: rgba(59, 130, 246, 0.1);
    color: var(--sa-info-dark);
}

.sa-badge-gray {
    background: rgba(107, 114, 128, 0.1);
    color: var(--sa-gray-700);
}

/* Modern Buttons */
.sa-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: var(--space-3) var(--space-6);
    border-radius: var(--sa-border-radius);
    font-weight: 600;
    font-size: 0.875rem;
    transition: all 0.2s;
    border: none;
    cursor: pointer;
    text-decoration: none;
}

/* Fix Bootstrap primary button text color in SuperAdmin */
body.superadmin-body .btn-primary,
body.superadmin-body .btn-primary:hover,
body.superadmin-body .btn-primary:focus,
body.superadmin-body .btn-primary:active {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

.sa-btn-primary {
    background: var(--sa-primary);
    color: var(--color-surface);
}

.sa-btn-primary:hover {
    background: var(--sa-primary-dark);
    transform: translateY(-1px);
    box-shadow: var(--sa-shadow);
}

.sa-btn-outline {
    background: var(--color-surface);
    color: var(--sa-gray-700);
    border: var(--border-width) solid var(--sa-gray-300);
}

.sa-btn-outline:hover {
    background: var(--sa-gray-50);
    border-color: var(--sa-gray-400);
}

/* Info Grid */
.sa-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.sa-info-item {
    padding: var(--space-4);
    background: var(--sa-gray-50);
    border-radius: var(--sa-border-radius);
}

.sa-info-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--sa-gray-500);
    margin-bottom: 0.5rem;
}

.sa-info-value {
    font-size: 1rem;
    font-weight: 600;
    color: var(--sa-gray-900);
}

/* Activity Timeline */
.sa-timeline {
    position: relative;
    padding-left: 2rem;
}

.sa-timeline::before {
    content: '';
    position: absolute;
    left: 0.5rem;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--sa-gray-200);
}

.sa-timeline-item {
    position: relative;
    padding-bottom: 2rem;
}

.sa-timeline-item::before {
    content: '';
    position: absolute;
    left: -1.5rem;
    top: 0;
    width: var(--space-3);
    height: var(--space-3);
    border-radius: 50%;
    background: var(--color-surface);
    border: var(--border-width-4) solid var(--sa-primary);
}

.sa-timeline-time {
    font-size: 0.75rem;
    color: var(--sa-gray-500);
    margin-bottom: 0.25rem;
}

.sa-timeline-content {
    color: var(--sa-gray-700);
    font-size: 0.875rem;
}

/* Status Indicator */
.sa-status {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.sa-status-dot {
    width: var(--space-2);
    height: var(--space-2);
    border-radius: 50%;
}

.sa-status-dot.active {
    background: var(--sa-success);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}

.sa-status-dot.pending {
    background: var(--sa-warning);
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2);
}

.sa-status-dot.inactive {
    background: var(--sa-gray-400);
    box-shadow: 0 0 0 3px rgba(156, 163, 175, 0.2);
}

/* Search Bar */
.sa-search {
    position: relative;
}

.sa-search input {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 3rem;
    border: var(--border-width) solid var(--sa-gray-300);
    border-radius: var(--sa-border-radius);
    font-size: 0.875rem;
    transition: all 0.2s;
}

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

.sa-search i {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--sa-gray-400);
}

/* Responsive */
@media (max-width: 1024px) {
    .sa-sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s;
    }
    
    .sa-sidebar.open {
        transform: translateX(0);
    }
    
    .sa-main {
        margin-left: 0;
    }
}

/* Action Cards */
.sa-action-card {
    background: var(--color-surface);
    border-radius: var(--sa-border-radius-lg);
    padding: var(--space-8);
    box-shadow: var(--sa-shadow);
    text-align: center;
    transition: all 0.3s;
    border: var(--border-width-2) solid transparent;
    text-decoration: none;
    display: block;
    height: 100%;
}

.sa-action-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--sa-shadow-lg);
    border-color: var(--border-color, var(--sa-primary));
}

.sa-action-icon {
    width: 60px;
    height: 60px;
    border-radius: var(--sa-border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin: 0 auto 1rem;
    background: var(--icon-bg, rgba(99, 102, 241, 0.1));
    color: var(--icon-color, var(--sa-primary));
}

.sa-action-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--sa-gray-900);
    margin-bottom: 0.5rem;
}

.sa-action-description {
    color: var(--sa-gray-600);
    font-size: 0.875rem;
}

.sa-action-badge {
    display: inline-block;
    margin-top: 0.75rem;
}

/* Sidebar Footer */
.sa-sidebar-footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: var(--space-6);
    border-top: var(--border-width) solid var(--sa-gray-200);
}

/* Language Selector */
.sa-language-selector {
    padding: 0 var(--space-2);
}

.sa-lang-select {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--sa-border-radius);
    border: 1px solid var(--sa-gray-300);
    background: var(--sa-white);
    color: var(--sa-gray-700);
    font-size: 0.875rem;
    cursor: pointer;
}

.sa-lang-select:hover {
    border-color: var(--sa-primary);
}

.sa-lang-select:focus {
    outline: none;
    border-color: var(--sa-primary);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.sa-user-info {
    flex: 1;
}

.sa-user-name {
    font-weight: 600;
    color: var(--sa-gray-900);
    font-size: var(--font-size-sm);
}

.sa-user-role {
    font-size: var(--font-size-xs);
    color: var(--sa-gray-500);
}

.sa-logout-icon {
    color: var(--sa-gray-400);
}

.sa-hidden-form {
    display: none;
}

/* SuperAdmin styled alerts */
.sa-alert-styled {
    border-radius: var(--sa-border-radius-lg);
    box-shadow: var(--sa-shadow);
}

/* ============================================
   SENDGRID SETUP PAGE STYLES
   ============================================ */

/* Progress Bar */
.sa-progress {
    height: 30px;
    border-radius: var(--sa-border-radius);
}

.sa-progress-bar {
    background: linear-gradient(90deg, var(--sa-success), var(--sa-primary));
}

/* Info Text */
.sa-info-text {
    color: var(--sa-gray-600);
    font-size: 0.875rem;
}

.sa-info-text-sm {
    font-size: 0.75rem;
    color: var(--sa-gray-600);
}

/* Card Header with Icon */
.sa-card-header-icon {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--sa-gray-200);
}

.sa-card-header-icon .sa-card-title {
    margin: 0;
}

/* Flex Utilities for SuperAdmin */
.sa-flex-1 {
    flex: 1;
}

.sa-flex-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Section Spacing */
.sa-section-mb {
    margin-bottom: 1.5rem;
}

.sa-label-block {
    display: block;
    margin-bottom: 0.75rem;
}

.sa-section-header {
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

.sa-section-header-first {
    margin-bottom: 0.75rem;
}

/* Horizontal Rule */
.sa-hr {
    border: none;
    border-top: 1px solid var(--sa-gray-200);
    margin: 2rem 0;
}

/* SVG Text Styles */
.sa-svg-text-lg {
    font-size: 1.5rem;
    font-weight: bold;
    fill: var(--sa-gray-900);
}

/* Button Spacing */
.sa-btn-group {
    margin-top: 1.25rem;
}

.sa-btn-group-mb {
    margin-top: 1.25rem;
    margin-bottom: 1.5rem;
}

/* Test Result Box */
.sa-test-result {
    display: none;
}

/* Auto-refresh text */
.sa-autorefresh-text {
    color: var(--sa-gray-500);
    font-size: 0.875rem;
}

/* ============================================
   ORGANIZATION DETAIL PAGE STYLES
   ============================================ */
.sa-org-meta {
    font-size: 0.875rem;
    color: var(--sa-gray-500);
}

.sa-org-header-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.sa-company-avatar {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--sa-primary) 0%, var(--sa-secondary) 100%);
    border-radius: var(--sa-border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-surface);
    font-weight: 600;
    font-size: 1.125rem;
}

.sa-company-info {
    flex: 1;
    min-width: 200px;
}

.sa-company-name {
    font-weight: 600;
    color: var(--sa-gray-900);
    margin-bottom: 0.25rem;
}

.sa-company-meta {
    font-size: 0.875rem;
    color: var(--sa-gray-500);
}

/* ============================================
   SETTINGS PAGE STYLES
   ============================================ */
.sa-settings-form-group {
    margin-bottom: 1.5rem;
}

.sa-settings-label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--sa-gray-700);
}

.sa-settings-help {
    font-size: 0.875rem;
    color: var(--sa-gray-500);
    margin-top: 0.25rem;
}

.sa-settings-input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--sa-gray-300);
    border-radius: var(--sa-border-radius);
    font-size: 0.875rem;
}

.sa-settings-input:focus {
    outline: none;
    border-color: var(--sa-primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

/* ============================================
   CHANGE REQUESTS PAGE STYLES
   ============================================ */
.sa-request-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sa-request-preview {
    background: var(--sa-gray-50);
    padding: 1rem;
    border-radius: var(--sa-border-radius);
    font-family: monospace;
    font-size: 0.875rem;
    white-space: pre-wrap;
    word-break: break-all;
    max-height: 200px;
    overflow-y: auto;
}

.sa-request-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
}

/* ============================================
   GENERAL UTILITY CLASSES
   ============================================ */
.sa-text-center {
    text-align: center;
}

.sa-mt-2 {
    margin-top: 0.5rem;
}

.sa-mt-3 {
    margin-top: 0.75rem;
}

.sa-mb-2 {
    margin-bottom: 0.5rem;
}

.sa-mb-3 {
    margin-bottom: 0.75rem;
}

.sa-mb-4 {
    margin-bottom: 1rem;
}

.sa-d-none {
    display: none;
}

/* ============================================
   BREADCRUMB STYLES
   ============================================ */
.sa-breadcrumb {
    margin-bottom: 2rem;
}

.sa-breadcrumb-inner {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--sa-gray-500);
    margin-bottom: 1rem;
}

.sa-breadcrumb-link {
    color: var(--sa-gray-600);
    text-decoration: none;
}

.sa-breadcrumb-link:hover {
    color: var(--sa-primary);
}

.sa-breadcrumb-separator {
    font-size: 0.75rem;
}

.sa-breadcrumb-current {
    color: var(--sa-gray-900);
    font-weight: 500;
}

/* ============================================
   ORG DETAIL HEADER STYLES
   ============================================ */
.sa-org-header {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.sa-org-avatar-lg {
    width: 60px;
    height: 60px;
    border-radius: var(--sa-border-radius-lg);
    background: var(--sa-gradient-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-inverse);
    font-weight: 700;
    font-size: 1.5rem;
}

.sa-org-title {
    margin: 0;
    font-size: 1.875rem;
    font-weight: 700;
    color: var(--sa-gray-900);
}

.sa-org-meta-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 0.5rem;
}

.sa-status-active {
    color: var(--sa-success);
    font-weight: 500;
}

.sa-status-inactive {
    color: var(--sa-gray-500);
    font-weight: 500;
}

.sa-status-pending {
    color: var(--sa-warning);
    font-weight: 500;
}

.sa-dot-separator {
    color: var(--sa-gray-400);
}

.sa-id-text {
    color: var(--sa-gray-500);
    font-size: 0.875rem;
}

/* ============================================
   STAT CARD VALUE SIZES
   ============================================ */
.sa-stat-value-sm {
    font-size: 1.25rem !important;
}

.sa-stat-value-xs {
    font-size: 1rem !important;
}

/* ============================================
   TABLE CELL STYLES
   ============================================ */
.sa-cell-flex {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sa-cell-flex-wide {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.sa-cell-name {
    color: var(--sa-gray-900);
}

.sa-cell-mono {
    font-family: monospace;
    color: var(--sa-gray-700);
}

.sa-cell-date {
    font-size: 0.875rem;
    color: var(--sa-gray-600);
}

.sa-cell-user-name {
    font-weight: 500;
    color: var(--sa-gray-900);
}

/* User Avatar in Tables */
.sa-user-avatar-sm {
    width: var(--space-8);
    height: var(--space-8);
    border-radius: 50%;
    background: var(--sa-gradient-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-inverse);
    font-weight: 600;
    font-size: 0.875rem;
}

/* ============================================
   EMPTY STATE STYLES
   ============================================ */
.sa-empty-state {
    text-align: center;
    padding: 2rem;
    color: var(--sa-gray-500);
}

.sa-empty-state-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    opacity: 0.3;
}

.sa-empty-state-text {
    margin: 0;
}

/* ============================================
   STAT CARD VARIANTS
   ============================================ */
.sa-stat-card--primary {
    --gradient: var(--sa-gradient-primary);
    --icon-bg: rgba(99, 102, 241, 0.1);
    --icon-color: var(--sa-primary);
}

.sa-stat-card--success {
    --gradient: var(--sa-gradient-success);
    --icon-bg: rgba(16, 185, 129, 0.1);
    --icon-color: var(--sa-success);
}

.sa-stat-card--info {
    --gradient: var(--sa-gradient-info);
    --icon-bg: rgba(59, 130, 246, 0.1);
    --icon-color: var(--sa-info);
}

.sa-stat-card--warning {
    --gradient: var(--sa-gradient-warning);
    --icon-bg: rgba(245, 158, 11, 0.1);
    --icon-color: var(--sa-warning);
}

.sa-stat-card--danger {
    --gradient: linear-gradient(135deg, var(--sa-danger) 0%, var(--sa-danger-dark) 100%);
    --icon-bg: rgba(239, 68, 68, 0.1);
    --icon-color: var(--sa-danger);
}

/* ============================================
   BUTTON ICON HOVER FIX
   ============================================ */
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:hover i,
.btn-outline-primary:focus i {
    color: var(--color-text-inverse) !important;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:hover i,
.btn-outline-secondary:focus i {
    color: var(--color-text-inverse) !important;
}

.btn-outline-warning:hover,
.btn-outline-warning:focus,
.btn-outline-warning:hover i,
.btn-outline-warning:focus i {
    color: var(--color-text-primary) !important;
}

/* ============================================
   ANNOUNCEMENT PREVIEW STYLES
   ============================================ */
.announcement-preview--info {
    background-color: var(--color-info-bg);
    border-left: 4px solid var(--color-info);
    color: var(--color-info-dark);
}

.announcement-preview--warning {
    background-color: var(--color-warning-bg);
    border-left: 4px solid var(--color-warning);
    color: var(--color-warning-dark);
}

.announcement-preview--success {
    background-color: var(--color-success-bg);
    border-left: 4px solid var(--color-success);
    color: var(--color-success-dark);
}

.announcement-preview--error {
    background-color: var(--color-danger-bg);
    border-left: 4px solid var(--color-danger);
    color: var(--color-danger-dark);
}