/* pages-consolidated.css - Built: 2025-12-05 15:36:10 UTC */
/* Source files: 54 */


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

/* Mobile: Horizontally scrollable summary cards with enhanced styling */
@media (max-width: 768px) {
    .economy-summary-grid {
        display: flex !important;
        flex-wrap: nowrap;
        gap: 0.75rem;
        margin: 0 0 1.25rem 0;
        padding: 0.5rem 1rem 0.75rem 1rem;
        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: 1rem 0.75rem;
        background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-background) 100%);
        border: 1px solid var(--color-border);
        border-radius: 12px;
        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: 0.5rem;
        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: 8px;
    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: 6px;
    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;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
    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: 2rem;
}

.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: 0.75rem 0.5rem;
        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: 0.5rem 1rem !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: 8px;
}

.ds-project-nav-item i {
    width: 20px;
    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-gray-100);
    color: var(--color-gray-900);
    font-weight: var(--font-weight-semibold);
    border-left-color: var(--color-primary);
}

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

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

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

.ds-set-default-icon {
    width: 20px;
    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: 8px;
}

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

.ds-project-tab-mobile.active {
    color: var(--color-primary);
    font-weight: 700;
    background-color: var(--color-info-bg-lighter);
    border-bottom: 4px solid var(--color-primary);
}

.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: 20px;
    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: #ffffff;
    border-color: var(--color-warning, #f59e0b);
}

.ds-sidebar-action-btn--warning:hover i {
    color: #ffffff;
}

/* 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: #ffffff;
    border-color: var(--color-danger, #ef4444);
}

.ds-sidebar-action-btn--danger:hover i {
    color: #ffffff;
}

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

.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: 20px;
    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: 8px;
    padding: 1.25rem;
    transition: box-shadow 0.2s ease;
}

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

.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 Overrides - Scoped to settings and workzone pages */
body.settings-route,
body.workzone-route {
    overflow: hidden;
}

body.settings-route .main-content,
body.workzone-route .main-content {
    margin-left: 0;
    padding: 0;
    overflow: hidden;
}

/* Settings Container */
body.settings-route .settings-container,
body.workzone-route .settings-container {
    display: flex;
    background: var(--color-surface);
    overflow: hidden;
    position: fixed;
    top: 97px;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(100vh - 97px);
    /* z-index removed - was creating stacking context that trapped modals */
}

/* Explicitly exclude modals from z-index reset */
body.settings-route .settings-container *:not(.modal):not(.modal-backdrop):not(.modal-dialog):not(.modal-content):not(.ds-modal):not(.ds-modal__overlay):not(.ds-modal__container),
body.workzone-route .settings-container *:not(.modal):not(.modal-backdrop):not(.modal-dialog):not(.modal-content):not(.ds-modal):not(.ds-modal__overlay):not(.ds-modal__container) {
    z-index: auto;
}

/* Settings Sidebar */
body.settings-route .settings-sidebar,
body.workzone-route .settings-sidebar {
    width: 280px;
    background: var(--color-surface-secondary);
    border-right: var(--border-width) solid var(--color-border-strong);
    padding: var(--space-6) 0 0 0 !important;
    overflow-y: auto;
    height: 100%;
    flex-shrink: 0;
}

/* 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-surface-tertiary);
    color: var(--color-text-primary);
    font-weight: var(--font-weight-semibold);
    border-right: var(--border-width-4) solid var(--color-gray-400);
}

body.settings-route .settings-nav a i,
body.workzone-route .settings-nav a i {
    margin-right: var(--space-3);
    width: 16px;
    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: 8px;
    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: 4px;
    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: 4px;
}

/* 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: 12px;
    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: 16px;
    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: 14px;
    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, #667eea 0%, #764ba2 100%);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

body.settings-route .summary-card:nth-child(2) .summary-icon {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    box-shadow: 0 4px 12px rgba(240, 147, 251, 0.3);
}

body.settings-route .summary-card:nth-child(3) .summary-icon {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    box-shadow: 0 4px 12px rgba(79, 172, 254, 0.3);
}

body.settings-route .summary-card .summary-icon i {
    color: white;
    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: 12px;
    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: 4px;
    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: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
    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: 8px;
    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 rgba(59, 130, 246, 0.1);
    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 rgba(59, 130, 246, 0.1);
    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 rgba(59, 130, 246, 0.1);
    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 rgba(59, 130, 246, 0.1);
    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 rgba(59, 130, 246, 0.1);
    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: 8px;
    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: 8px;
}

/* 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: white;
    border: var(--border-width) solid var(--color-success);
}

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

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

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

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

.settings-page .bg-secondary,
.settings-page .badge.bg-secondary {
    background-color: var(--color-gray-600);
    color: white;
    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: white;
}

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

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

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

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

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

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

body.auth-route .auth-wrapper {
    width: 100%;
    max-width: 1100px;
    display: flex;
    background: var(--color-surface);
    border-radius: 16px;
    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: 12px;
    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: 32px;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 8px;
}

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

body.auth-route .progress-steps {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    margin-bottom: 0;
}

body.auth-route .step {
    display: flex;
    align-items: center;
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    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: 8px;
    font-size: 12px;
    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: 24px;
}

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

body.auth-route .form-input {
    width: 100%;
    padding: 12px 16px;
    font-size: 15px;
    border: 2px solid var(--color-border);
    border-radius: 8px;
    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: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--color-text-tertiary);
    cursor: pointer;
    padding: 8px;
    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: 8px;
    font-size: 12px;
}

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

body.auth-route .strength-fill {
    height: 100%;
    border-radius: 2px;
    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: 8px;
    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: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

body.auth-route .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 116, 217, 0.4);
}

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: 8px;
    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: 24px;
    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: 8px;
    margin-bottom: 24px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    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: 8px;
    padding: 16px;
    margin-bottom: 24px;
}

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: 16px;
}

@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: 20px;
    }

    body.auth-route .brand-tagline {
        font-size: 16px;
        margin-bottom: 20px;
    }

    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: 12px;
    }

    body.auth-route .form-row {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    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: 24px;
    }
}



/* ========== 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: 16px;
    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: 16px;
    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: 12px;
    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: 6px;
    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: 4px;
}

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

.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: 24px;
    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: white;
    padding: var(--space-2-5) var(--space-5);
    border-radius: 4px;
    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: 4px;
    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: 6px;
    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: 12px;
    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: 8px;
    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: 6px;
    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: 12px;
    height: 12px;
    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: 3px;
    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: 4px;
}

.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: 12px;
    border: none;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    position: relative;
    z-index: var(--z-modal-content);
}

.modal-header {
    background: var(--color-text-secondary);
    color: white;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    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: 24px;
    height: 24px;
    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: 0.5rem;
  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 {
    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 {
    font-size: var(--font-size-sm);
    height: 44px;
    border-color: var(--color-border);
    color: var(--color-text-primary, #1f2937);
}

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

.project-filters-primary .input-group-text {
    background: white;
    border-color: var(--color-border);
    border-right: none;
}

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

.project-filters-primary .btn {
    height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.project-filters-primary .sort-order-btn {
    width: 44px;
    padding: 0;
    font-size: var(--font-size-base);
}

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

.project-filters-primary .input-group .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: white;
}

/* 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: 0.25rem 0.5rem !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: 0 2px 8px rgba(0, 0, 0, 0.1) !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: 0 4px 16px rgba(0, 0, 0, 0.15) !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: 280px;
    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;
    width: 100%;
    padding-left: var(--space-6);
    padding-top: 0;
}

/* 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-bg);
    color: var(--color-primary);
    border-left-color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
}

.ds-dashboard-nav-item i {
    width: 20px;
    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: 20px;
    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: #ffffff !important;
    border-left-color: var(--color-primary-dark);
}

.ds-dashboard-nav-item.active i {
    color: #ffffff !important;
}

.ds-dashboard-nav-item.active span {
    color: #ffffff !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 {
    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-input {
    font-size: var(--font-size-sm);
    height: 44px;
    border-color: var(--color-border);
    color: var(--color-text-primary, #1f2937);
}

.customer-filters-primary .form-control:focus,
.customer-filters-primary .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 {
    background: white;
    border-color: var(--color-border);
    border-right: none;
}

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

.customer-filters-primary .btn,
.customer-filters-primary .ds-btn {
    height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.customer-filters-primary .sort-order-btn {
    width: 44px;
    padding: 0;
    font-size: var(--font-size-base);
}

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

/* 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 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 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: #1e3a8a !important;
    border-color: #1e3a8a !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: #ffffff !important;
    border-color: #d1d5db !important;
    color: #1f2937 !important;
    -webkit-text-fill-color: #1f2937 !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: #1f2937 !important;
    -webkit-text-fill-color: #1f2937 !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: #f3f4f6 !important;
    border-color: #d1d5db !important;
    color: #1f2937 !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: #1f2937 !important;
    -webkit-text-fill-color: #1f2937 !important;
}


/* ========== pages/dashboard-widgets-charts.css ========== */
a.projects-tab-link.active {
    color: var(--color-gray-900) !important;
    -webkit-text-fill-color: var(--color-gray-900) !important;
    background-color: var(--color-gray-100) !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-gray-900) !important;
    -webkit-text-fill-color: var(--color-gray-900) !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-gray-900) !important;
    -webkit-text-fill-color: var(--color-gray-900) !important;
}

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

/* All DS primary buttons - force white text */
.ds-btn.ds-btn--primary,
button.ds-btn--primary,
a.ds-btn--primary {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !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: #ffffff !important;
    font-weight: var(--font-weight-medium) !important;
    padding: 0.5rem 1rem !important;
    border-radius: 8px !important;
}

/* FullCalendar Button Groups - Add spacing between buttons */
.fc .fc-button-group {
    gap: 0.5rem !important;
}

/* FullCalendar Toolbar - Add spacing between button groups */
.fc .fc-toolbar-chunk {
    gap: 0.5rem !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: #ffffff !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: #ffffff !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: #ffffff !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: 0.75rem !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: #fff3cd !important;
    border-color: #ffc107 !important;
    border-style: dashed !important;
    color: #856404 !important;
}

.work-log-future-planned .fc-event-title,
.work-log-future-planned .fc-event-main {
    color: #856404 !important;
}

/* State 2: Completed but editable - Green */
.work-log-completed-editable {
    background-color: #d1e7dd !important;
    border-color: #198754 !important;
    color: #0f5132 !important;
}

.work-log-completed-editable .fc-event-title,
.work-log-completed-editable .fc-event-main {
    color: #0f5132 !important;
}

/* State 3: Completed and locked - Gray */
.work-log-completed-locked {
    background-color: #e2e3e5 !important;
    border-color: #6c757d !important;
    color: #41464b !important;
    cursor: not-allowed !important;
}

.work-log-completed-locked .fc-event-title,
.work-log-completed-locked .fc-event-main {
    color: #41464b !important;
}

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

/* State 4: Overdue planned - Red/Warning */
.work-log-overdue-planned {
    background-color: #f8d7da !important;
    border-color: #dc3545 !important;
    border-style: dashed !important;
    color: #842029 !important;
}

.work-log-overdue-planned .fc-event-title,
.work-log-overdue-planned .fc-event-main {
    color: #842029 !important;
}

/* Leave Event Styles */
.leave-event {
    border-radius: 4px !important;
    font-weight: 500 !important;
}

/* Annual Leave - Green */
.leave-event.leave-annual,
.leave-event[data-leave-type="annual"] {
    background-color: #d1e7dd !important;
    border-color: #198754 !important;
    color: #0f5132 !important;
}

/* Sick Leave - Red */
.leave-event.leave-sick,
.leave-event[data-leave-type="sick"] {
    background-color: #f8d7da !important;
    border-color: #dc3545 !important;
    color: #842029 !important;
}

/* Public Holiday - Cyan */
.leave-event.leave-holiday,
.leave-event[data-leave-type="holiday"] {
    background-color: #cff4fc !important;
    border-color: #0dcaf0 !important;
    color: #055160 !important;
}

/* Private/Unpaid Leave - Gray */
.leave-event.leave-private,
.leave-event[data-leave-type="private"] {
    background-color: #e2e3e5 !important;
    border-color: #6c757d !important;
    color: #41464b !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: #d1e7dd !important;
    border-color: #198754 !important;
    color: #0f5132 !important;
}

/* Task Events - Blue */
.task-event {
    background-color: #cfe2ff !important;
    border-color: #3788d8 !important;
    color: #084298 !important;
}

.task-event .fc-event-title,
.task-event .fc-event-main {
    color: #084298 !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 -0.75rem;
        width: calc(100% + 1.5rem);
    }
    
    .ds-dashboard-content {
        padding: 0 !important;
    }

    /* ==============================================
       TAB NAVIGATION - Clean horizontal scrolling
       ============================================== */
    .ds-dashboard-tabs-mobile {
        background: white;
        border-bottom: 1px solid #e2e8f0;
        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: 0.25rem;
        padding: 0.75rem 1rem;
        min-height: 56px;
        min-width: 72px;
        flex: 0 0 auto;
        white-space: nowrap;
        text-decoration: none !important;
        color: #64748b;
        font-size: 0.75rem;
        font-weight: 500;
        border-bottom: 3px solid transparent;
        background: transparent;
        transition: all 0.2s ease;
    }
    
    .ds-dashboard-tab-mobile i {
        font-size: 1.125rem;
        color: inherit;
    }
    
    .ds-dashboard-tab-mobile span {
        font-size: 0.6875rem;
        text-align: center;
    }
    
    .ds-dashboard-tab-mobile.active {
        color: var(--color-primary, #2563eb);
        border-bottom-color: var(--color-primary, #2563eb);
        background: rgba(37, 99, 235, 0.04);
    }
    
    .ds-dashboard-tab-mobile:active {
        background: rgba(0, 0, 0, 0.05);
    }

    /* ==============================================
       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: 0.5rem;
        padding: 0.75rem;
        margin: 0 !important;
        background: #f8fafc;
    }
    
    .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: 12px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
        border: 1px solid #e2e8f0;
        height: 100%;
    }
    
    .ds-dashboard-content .row.ds-mb-4:first-child .ds-card__body {
        padding: 0.875rem;
    }
    
    .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: 0.6875rem;
        letter-spacing: 0.02em;
    }
    
    .ds-dashboard-content .row.ds-mb-4:first-child .h5 {
        font-size: 1.25rem;
        margin-bottom: 0.125rem !important;
    }
    
    .ds-dashboard-content .row.ds-mb-4:first-child .ds-text-sm {
        font-size: 0.75rem;
    }
    
    .ds-dashboard-content .row.ds-mb-4:first-child .col-auto i {
        font-size: 1.5rem !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: 0.875rem 1rem;
        background: #f8fafc;
        border-bottom: 1px solid #e2e8f0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        min-height: 44px;
    }
    
    .ds-dashboard-content .ds-card__title {
        font-size: 0.9375rem;
        font-weight: 600;
        color: #1e293b;
        margin: 0;
    }
    
    .ds-dashboard-content .ds-card__header .ds-btn {
        min-height: 36px;
        padding: 0.375rem 0.75rem;
        font-size: 0.8125rem;
        border-radius: 8px;
    }
    
    .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: 0.875rem 1rem !important;
        min-height: 56px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        border-bottom: 1px solid #f1f5f9;
        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: 0.9375rem;
        font-weight: 500;
        color: #1e293b;
        margin-bottom: 0.125rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    .ds-list__item-subtitle {
        font-size: 0.8125rem;
        color: #64748b;
        margin: 0;
    }
    
    .ds-list__item-actions {
        flex-shrink: 0;
    }
    
    .ds-list__item .ds-badge {
        font-size: 0.6875rem;
        padding: 0.25rem 0.5rem;
        border-radius: 6px;
    }

    /* ==============================================
       MOBILE INVOICE CARDS
       ============================================== */
    .ds-mobile-card {
        padding: 0.875rem 1rem !important;
        border-bottom: 1px solid #f1f5f9 !important;
        display: block !important;
    }
    
    .ds-mobile-card:last-child {
        border-bottom: none !important;
    }
    
    .ds-mobile-card__header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 0.5rem;
    }
    
    .ds-mobile-card__title {
        font-size: 0.9375rem;
        font-weight: 600;
        color: #1e293b;
    }
    
    .ds-mobile-card__subtitle {
        font-size: 0.8125rem;
        color: #64748b;
    }
    
    .ds-mobile-card__info {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }
    
    .ds-mobile-card__info-row {
        font-size: 0.8125rem;
        color: #475569;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    
    .ds-mobile-card__icon {
        width: 1rem;
        color: #94a3b8;
        font-size: 0.75rem;
    }

    /* ==============================================
       EMPTY STATES
       ============================================== */
    .ds-empty-state {
        padding: 2rem 1rem;
        text-align: center;
    }
    
    .ds-empty-state__icon {
        font-size: 2rem;
        color: #cbd5e1;
        margin-bottom: 0.75rem;
    }
    
    .ds-empty-state__message {
        font-size: 0.875rem;
        color: #64748b;
        margin: 0;
    }

    /* ==============================================
       FORM SECTIONS (Bug Report, Feedback tabs)
       ============================================== */
    .ds-dashboard-content .form-group {
        margin-bottom: 1rem;
    }
    
    .ds-dashboard-content .form-group label {
        font-size: 0.875rem;
        font-weight: 500;
        color: #374151;
        margin-bottom: 0.375rem;
    }
    
    .ds-dashboard-content .form-control {
        min-height: 44px;
        font-size: 0.9375rem;
        border-radius: 8px;
        border: 1px solid #d1d5db;
        padding: 0.625rem 0.875rem;
    }
    
    .ds-dashboard-content .form-control:focus {
        border-color: var(--color-primary, #2563eb);
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
    }
    
    .ds-dashboard-content textarea.form-control {
        min-height: 100px;
    }
    
    .ds-dashboard-content form .ds-btn {
        width: 100%;
        min-height: 44px;
        font-size: 0.9375rem;
        border-radius: 8px;
        margin-top: 0.5rem;
    }

    /* ==============================================
       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: 1rem !important;
    }
    
    #dashboard-billing h6,
    #dashboard-affiliate h6 {
        font-size: 0.875rem;
        font-weight: 600;
        color: #1e293b;
        margin-bottom: 0.25rem;
    }
    
    #dashboard-affiliate ul {
        padding-left: 1.25rem;
        margin: 0.5rem 0;
    }
    
    #dashboard-affiliate ul li {
        font-size: 0.875rem;
        color: #475569;
        margin-bottom: 0.25rem;
    }
}


/* ========== pages/fab-footer.css ========== */
/* Floating Action Button System */
.fab-container {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 9999;
}

.fab-main {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-info) 0%, var(--color-primary) 100%);
    border: none;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-inverse);
    font-size: 24px;
    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: 0 6px 16px rgba(0, 116, 217, 0.5);
}

.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: 70px;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    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: 12px;
    background: var(--color-surface);
    border: none;
    border-radius: 30px;
    padding: 12px 20px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: all 0.2s ease;
    white-space: nowrap;
    color: var(--color-gray-700);
    font-size: 14px;
    font-weight: 500;
}

.fab-item:hover {
    background: var(--color-gray-50);
    transform: translateX(-5px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

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

.fab-label {
    font-weight: 600;
}

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

/* Traditional Footer */
.traditional-footer {
    width: 100%;
    background: var(--color-surface-secondary);
    border-top: 1px solid var(--color-border);
    padding: 16px 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: var(--color-text-secondary);
    margin-top: 60px;
}

.traditional-footer__brand {
    font-weight: 500;
}

.traditional-footer__links {
    display: flex;
    gap: 16px;
    align-items: center;
}

.traditional-footer__link {
    color: var(--color-text-secondary);
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s;
}

.traditional-footer__link:hover {
    color: var(--color-info);
}

.traditional-footer__divider {
    color: var(--color-border-strong);
}

@media (max-width: 768px) {
    .traditional-footer {
        flex-direction: column;
        gap: 12px;
        text-align: center;
        padding: 20px 16px;
    }

    .traditional-footer__links {
        flex-wrap: wrap;
        justify-content: center;
    }
}


/* ========== 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-detail.css ========== */

.timeline-action {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ds-color-text-primary, #1f2937);
    margin-bottom: 0.25rem;
}

.timeline-details {
    font-size: 0.8125rem;
    color: var(--ds-color-text-secondary, #6b7280);
    line-height: 1.4;
}

.timeline-time {
    font-size: 0.75rem;
    color: var(--ds-color-text-secondary, #6b7280);
    margin-top: 0.25rem;
}

/* Empty State */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--ds-color-text-secondary, #6b7280);
    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: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    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: 0 6px 12px rgba(0,0,0,0.15);
}

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

/* Override main-content padding for inbox page only */
.main-content:has(.inbox-container) {
    padding: 0 !important;
}

.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 */
.approvals-list-panel {
    width: 400px;
    background: var(--ds-color-bg-primary, #ffffff);
    border-right: var(--border-width) solid var(--ds-color-border-subtle, #e5e7eb);
    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(--ds-color-border-subtle, #e5e7eb);
        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;
        background: var(--color-surface);
        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, #fff);
        border-bottom: 1px solid var(--ds-color-border-subtle, #e5e7eb);
        padding: 0;
        margin: 0;
        cursor: pointer;
        transition: background-color 0.15s ease;
    }
    
    .mobile-inbox-card:hover {
        background: var(--ds-color-bg-secondary, #f9fafb);
    }
    
    .mobile-inbox-card.active {
        background: transparent;
        border-left: none;
    }
    
    /* Card Header - Always Visible */
    .mobile-card-header {
        display: flex;
        align-items: flex-start;
        gap: 0.75rem;
        padding: 1rem;
        position: relative;
    }
    
    .mobile-card-icon {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
        flex-shrink: 0;
        background: var(--ds-color-bg-secondary, #f3f4f6);
        color: var(--ds-color-text-secondary, #6b7280);
    }
    
    .mobile-card-icon.invoice {
        background: #dbeafe;
        color: #2563eb;
    }
    
    .mobile-card-icon.expense,
    .mobile-card-icon.employeeoutlay {
        background: #fef3c7;
        color: #d97706;
    }
    
    .mobile-card-icon.leave {
        background: #dcfce7;
        color: #16a34a;
    }
    
    .mobile-card-icon.tooltransfer {
        background: #f3e8ff;
        color: #9333ea;
    }
    
    .mobile-card-content {
        flex: 1;
        min-width: 0;
    }
    
    .mobile-card-title {
        font-size: 0.9375rem;
        font-weight: 600;
        color: var(--ds-color-text-primary, #1f2937);
        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(--ds-color-text-secondary, #6b7280);
    }
    
    .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(--ds-color-primary, #1e3a8a);
        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: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--ds-color-text-secondary, #9ca3af);
        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(--ds-color-primary, #1e3a8a);
    }
    
    /* ========================================
       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(--ds-color-bg-secondary, #f9fafb);
        border-top: 1px solid var(--ds-color-border-subtle, #e5e7eb);
    }
    
    .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(--ds-color-text-secondary, #6b7280);
    }
    
    .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, #fff);
        border-radius: 8px;
        padding: 1rem;
        margin-bottom: 0.75rem;
        border: 1px solid var(--ds-color-border-subtle, #e5e7eb);
    }
    
    .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(--ds-color-text-primary, #374151);
    }
    
    .mobile-card-detail .section-title i {
        color: var(--ds-color-primary, #3b82f6);
    }
    
    .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(--ds-color-text-secondary, #6b7280);
        margin-bottom: 0.125rem;
    }
    
    .mobile-card-detail .field-value {
        font-size: 0.8125rem;
        color: var(--ds-color-text-primary, #1f2937);
        font-weight: 500;
    }
    
    /* PDF Viewer in expanded card */
    .mobile-card-detail .pdf-viewer {
        max-height: 50vh;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: 8px;
    }
    
    .mobile-card-detail .pdf-canvas-container {
        background: #1f2937;
        border-radius: 8px;
        padding: 0.5rem;
    }
    
    /* ========================================
       STICKY ACTION BUTTONS
       ======================================== */
    .mobile-card-actions {
        position: sticky;
        bottom: 0;
        background: var(--color-surface, #fff);
        padding: 1rem;
        border-top: 1px solid var(--ds-color-border-subtle, #e5e7eb);
        display: flex;
        gap: 0.75rem;
        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: 10px;
        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, #fff);
        color: #dc2626;
        border: 2px solid #dc2626;
    }
    
    .mobile-card-actions .btn-approve {
        background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
        color: #fff;
        box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
    }
    
    .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, #059669 0%, #047857 100%);
        color: #fff;
        box-shadow: 0 2px 4px rgba(5, 150, 105, 0.3);
    }
    
    /* Timeline compact view */
    .mobile-card-detail .timeline-item {
        padding: 0.5rem 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: #fef3c7;
        color: #92400e;
    }
}


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

/* Filters */
.filters-section {
    padding: 1rem;
    border-bottom: var(--border-width) solid var(--ds-color-border-subtle, #e5e7eb);
    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, #fff);
    border: 1px solid var(--ds-color-border-subtle, #e5e7eb);
    border-radius: 6px;
    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(--ds-color-text-primary, #374151);
    text-decoration: none;
    font-size: 0.875rem;
    transition: background 0.15s;
}

.filter-dropdown-item:hover {
    background: var(--ds-color-bg-secondary, #f7f9fc);
}

.filter-dropdown-item.active {
    background: var(--ds-color-primary-lighter, #eff6ff);
    color: var(--ds-color-primary, #1e3a8a);
    font-weight: 500;
}

.filter-dropdown-item .count {
    background: rgba(0,0,0,0.08);
    padding: 0.125rem 0.5rem;
    border-radius: 10px;
    font-size: 0.75rem;
    margin-left: 0.5rem;
}

/* Inbox Email Display */
.inbox-email-display {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    margin-bottom: 1rem;
    background: var(--color-info-bg-lighter);
    border: var(--border-width) solid var(--color-info-border);
    border-radius: 8px;
    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: 6px;
    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: wrap;
    gap: 0.5rem;
    margin-bottom: 0;
}

.filter-tab {
    padding: 0.5rem 1rem;
    border: var(--border-width) solid var(--ds-color-border-subtle, #e5e7eb);
    background: var(--color-surface);
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    font-size: 0.875rem;
    transition: all 0.2s;
    flex-shrink: 0;
}

.filter-tab:hover {
    background: var(--ds-color-bg-secondary, #f7f9fc);
}

.filter-tab.active {
    background: var(--ds-color-primary, #1e3a8a);
    color: var(--color-text-inverse);
    border-color: var(--ds-color-primary, #1e3a8a);
}

.filter-tab .count {
    margin-left: 0.5rem;
    background: rgba(0,0,0,0.1);
    padding: 0.125rem 0.5rem;
    border-radius: 10px;
    font-size: 0.75rem;
}

.filter-tab.active .count {
    background: rgba(255,255,255,0.2);
    color: white;
}

/* ========================================
   MOBILE INBOX ENHANCEMENTS
   ======================================== */
@media (max-width: 768px) {
    /* Compact filters section */
    .filters-section {
        padding: 0.75rem;
    }
    
    /* Compact inbox email display */
    .inbox-email-display {
        padding: 0.5rem 0.75rem;
        margin-bottom: 0.75rem;
    }
    
    .inbox-email-icon {
        width: 32px;
        height: 32px;
        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: 16px;
        min-height: 32px;
        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: 0.5rem 0.625rem 0.5rem 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%;
    padding: 0.625rem 0.75rem 0.625rem 2.5rem;
    border: var(--border-width) solid var(--ds-color-border-subtle, #e5e7eb);
    border-radius: 6px;
    font-size: 0.875rem;
}

.search-box i {
    position: absolute;
    left: 0.875rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ds-color-text-secondary, #6b7280);
}

/* Approval Items */
.approvals-list {
    flex: 1;
    overflow-y: auto;
}

.approval-item {
    padding: 1rem;
    border-bottom: var(--border-width) solid var(--ds-color-border-subtle, #e5e7eb);
    cursor: pointer;
    transition: background 0.2s;
}

.approval-item:hover {
    background: var(--ds-color-bg-secondary, #f7f9fc);
}

.approval-item.active {
    background: var(--color-info-bg);
    border-left: var(--border-width-4) solid var(--ds-color-primary, #1e3a8a);
}

.approval-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.approval-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    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: 16px;
    height: 16px;
    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(--ds-color-text-secondary, #6b7280);
}

.approval-badge {
    padding: 0.125rem 0.5rem;
    border-radius: 10px;
    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(--ds-color-text-primary, #1f2937);
    margin-top: 0.25rem;
    font-size: 0.875rem;
}

/* Right Panel - Details */
.approval-detail-panel {
    flex: 1;
    background: var(--ds-color-bg-primary, #ffffff);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

.detail-header {
    padding: 1.5rem;
    border-bottom: var(--border-width) solid var(--ds-color-border-subtle, #e5e7eb);
    position: sticky;
    top: 0;
    background: var(--ds-color-bg-primary, #ffffff);
    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(--ds-color-success, #16a34a);
    color: var(--color-text-inverse);
    border: none;
    padding: 0.5rem 1.5rem;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-approve:hover {
    background: var(--ds-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(--ds-color-danger, #dc2626);
    border: var(--border-width) solid var(--ds-color-danger, #dc2626);
    padding: 0.5rem 1.5rem;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-reject:hover {
    background: var(--ds-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(--ds-color-text-secondary, #6b7280);
}

.meta-item i {
    width: 16px;
    text-align: center;
}

.meta-item strong {
    color: var(--ds-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(--ds-color-bg-secondary, #f7f9fc);
    border-radius: 8px;
    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(--ds-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(--ds-color-text-secondary, #6b7280);
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.field-value {
    font-size: 0.875rem;
    color: var(--ds-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(--ds-color-border-subtle, #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(--ds-color-border-subtle, #e5e7eb);
}

.timeline-icon.created {
    background: var(--color-info-bg);
    border-color: var(--ds-color-primary, #1e3a8a);
    color: var(--ds-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 */
    .page-shell,
    .shell-main,
    .content-area,
    .main-content,
    .main-content:has(.inbox-container) {
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
        padding: 0 !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 #e2e8f0 !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: white;
        padding: 12px 16px !important;
        border-bottom: 1px solid #e2e8f0;
    }
    
    /* Inbox email display */
    .inbox-email-display {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 12px 14px;
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 10px;
        margin-bottom: 12px;
        min-height: 48px;
    }
    
    .inbox-email-icon {
        width: 36px;
        height: 36px;
        background: #dbeafe;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #2563eb;
        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: #64748b;
        margin-bottom: 0.125rem;
    }
    
    .inbox-email-address {
        font-size: 0.8125rem;
        color: #1e293b;
        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: #64748b;
    }
    
    /* 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: 0.5rem 0.875rem;
        font-size: 0.8125rem;
        font-weight: 500;
        border-radius: 18px;
        background: #f1f5f9;
        color: #475569;
        border: none;
        white-space: nowrap;
        display: flex;
        align-items: center;
        gap: 0.375rem;
        cursor: pointer;
        transition: all 0.2s;
    }
    
    .filter-tab.active {
        background: #1e3a8a;
        color: white;
    }
    
    .filter-tab .count {
        background: rgba(0, 0, 0, 0.1);
        padding: 0.125rem 0.375rem;
        border-radius: 10px;
        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: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        padding: 0 0.75rem;
        min-height: 44px;
    }
    
    .search-box i {
        color: #94a3b8;
        font-size: 0.875rem;
        margin-right: 0.5rem;
    }
    
    .search-box input {
        flex: 1;
        border: none;
        background: transparent;
        font-size: 0.9375rem;
        color: #1e293b;
        outline: none;
        min-height: 44px;
    }
    
    .search-box input::placeholder {
        color: #94a3b8;
    }

    /* ==============================================
       MOBILE CARD STYLING - EDGE TO EDGE
       Using .mobile-inbox-card prefix for specificity
       ============================================== */
    .mobile-inbox-card {
        background: white;
        border-bottom: 1px solid #e2e8f0;
    }
    
    .mobile-inbox-card.expanded {
        background: white;
    }
    
    /* 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: #fff !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: #fff !important;
        border: none !important;
        border-bottom: 1px solid #e2e8f0 !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: white !important;
        border-radius: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        border-bottom: 1px solid #e2e8f0 !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: #f8fafc !important;
        border: none !important;
        border-bottom: 1px solid #e2e8f0 !important;
        min-height: 48px;
        cursor: pointer;
        font-size: 0.875rem !important;
        font-weight: 600 !important;
        color: #1e293b !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: #f8fafc !important;
        border-bottom: 1px solid #e2e8f0 !important;
        font-size: 0.875rem !important;
        font-weight: 600 !important;
        color: #1e293b !important;
        width: 100% !important;
        border-radius: 0 !important;
    }
    
    .mobile-inbox-card .section-title i {
        margin-right: 0.5rem;
        color: #3b82f6;
        font-size: 0.9375rem;
    }
    
    /* Collapse indicator */
    .mobile-inbox-card .section-title::after,
    .mobile-inbox-card .collapsible-header::after {
        content: '\f078';
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        font-size: 0.75rem;
        color: #94a3b8;
        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: white !important;
    }
    
    .mobile-inbox-card .card-body {
        padding: 12px 16px !important;
        margin: 0 !important;
        width: 100% !important;
        background: white !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: #64748b;
        margin-bottom: 0.25rem;
        font-weight: 500;
    }
    
    .mobile-inbox-card .field-value {
        font-size: 0.875rem;
        color: #1e293b;
        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 #f1f5f9;
        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: #f1f5f9 !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 8px !important;
        font-size: 0.875rem !important;
        font-weight: 600 !important;
        color: #475569 !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
    }
    
    .mobile-inbox-card .description-toggle-btn:active {
        background: #e2e8f0 !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: white;
        border-top: 1px solid #e2e8f0;
    }
    
    .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: 10px !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: white !important;
        color: #dc2626 !important;
        border: 2px solid #dc2626 !important;
        order: 2;
    }
    
    .btn-approve,
    .mobile-card-actions .btn-success {
        background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
        color: white !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, #3b82f6 0%, #2563eb 100%) !important;
        box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3) !important;
    }

    /* ==============================================
       DETAIL HEADER - Mobile layout
       ============================================== */
    .detail-header {
        padding: 0 !important;
        background: white;
        border-bottom: 1px solid #e2e8f0;
    }
    
    .detail-title-row {
        padding: 1rem;
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .detail-title {
        font-size: 1.125rem !important;
        font-weight: 600;
        color: #1e293b;
        line-height: 1.3;
    }
    
    .detail-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem 1rem;
        padding: 0.75rem 1rem;
        background: #f8fafc;
        border-top: 1px solid #e2e8f0;
    }
    
    .detail-meta .meta-item {
        display: flex;
        align-items: center;
        gap: 0.375rem;
        font-size: 0.8125rem;
        color: #64748b;
    }
    
    .detail-meta .meta-item i {
        color: #94a3b8;
        font-size: 0.75rem;
    }

    /* ==============================================
       CONVERSATION SECTION
       ============================================== */
    .conversation-thread {
        padding: 0 !important;
        overflow: visible !important;
    }
    
    .conversation-thread > div {
        padding: 1rem;
        border-bottom: 1px solid #f1f5f9;
    }
    
    .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 #f1f5f9;
    }
    
    .timeline-item:last-child {
        border-bottom: none;
    }
    
    .timeline-action {
        font-size: 0.875rem;
        font-weight: 600;
        color: #1e293b;
        margin-bottom: 0.25rem;
    }
    
    .timeline-details {
        font-size: 0.8125rem;
        color: #64748b;
    }
    
    .timeline-time {
        font-size: 0.75rem;
        color: #94a3b8;
        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: white !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: #f8fafc !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: #f8fafc !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: #1f2937 !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: 8px !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: white !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 #e2e8f0 !important;
        background: white !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: 6px;
    }
    
    .badge-pending {
        background: #fef3c7;
        color: #92400e;
    }
    
    .badge-urgent {
        background: #fee2e2;
        color: #dc2626;
    }

    /* ==============================================
       EMPTY STATE
       ============================================== */
    .empty-state {
        padding: 3rem 1.5rem;
        text-align: center;
    }
    
    .empty-state i {
        font-size: 3rem;
        color: #cbd5e1;
        margin-bottom: 1rem;
    }
    
    .empty-state p {
        font-size: 0.9375rem;
        color: #64748b;
        margin: 0.5rem 0;
    }
    
    .empty-state p strong {
        color: #475569;
    }
    
    /* ==============================================
       MOBILE LOADING STATE
       ============================================== */
    .mobile-card-loading {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.75rem;
        padding: 2rem;
        color: #64748b;
    }
}


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

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

/* 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: 20px;
    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: all 0.3s ease;
    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: 1rem !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: 1rem;
}

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

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

/* ========================================
   SIDEBAR NAVIGATION VARIANT
   ======================================== */

.ds-section-subnav--sidebar {
    width: 240px;
    min-width: 240px;
    max-width: 240px;
    flex: 0 0 240px;
    flex-direction: column;
    display: flex;
    background: var(--color-surface);
    border-right: var(--border-width) solid var(--color-border);
    border-radius: 8px;
    padding: var(--space-4) 0;
    position: sticky;
    top: var(--space-4);
    align-self: flex-start;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
    margin: 0;
    box-sizing: border-box;
}

.ds-section-subnav--sidebar .economy-tab-btn {
    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: var(--transition-all);
    border-left: var(--border-width-4) solid transparent;
    margin: var(--space-1) 0;
    border-bottom: none;
    text-align: left;
    width: 100%;
    background: none;
    cursor: pointer;
}

.ds-section-subnav--sidebar .economy-tab-btn:hover {
    background-color: var(--color-hover);
    color: var(--color-primary);
}

.ds-section-subnav--sidebar .economy-tab-btn.active {
    background-color: var(--color-info-bg);
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
    border-left-color: var(--color-primary);
}

.ds-section-subnav--sidebar .economy-tab-btn:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: -2px;
}

/* ========================================
   SEGMENTED CONTROL VARIANT (Tabs on Top)
   ======================================== */

.ds-section-subnav--segmented {
    display: flex;
    flex-direction: row;
    gap: var(--space-2);
    padding: var(--space-4);
    border-bottom: 2px solid var(--color-border);
    border-radius: 0;
    position: sticky;
    top: 0;
    z-index: var(--z-sticky-local);
    margin-bottom: var(--space-6);
    width: 100%;
    background: var(--color-background);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.ds-section-subnav--segmented .economy-tab-btn {
    padding: var(--space-3) var(--space-5);
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    font-weight: 600;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.ds-section-subnav--segmented .economy-tab-btn:hover {
    color: var(--color-primary);
    background-color: var(--color-surface-hover);
}

.ds-section-subnav--segmented .economy-tab-btn.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

.ds-section-subnav--segmented .economy-tab-btn:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
}

/* ========================================
   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 */
    .ds-section-subnav--sidebar,
    .ds-section-subnav--segmented {
        width: 100% !important;
        min-width: auto;
        max-width: none;
        flex: none !important;
        display: flex !important;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 0.5rem;
        padding: 0.75rem 1rem;
        border-right: none;
        border-bottom: 1px solid var(--color-border);
        border-radius: 0;
        position: sticky;
        top: 0;
        z-index: 50;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        -ms-overflow-style: none;
        max-height: none;
        align-self: auto;
        background: var(--color-surface);
        margin-bottom: 0;
    }
    
    .ds-section-subnav--sidebar::-webkit-scrollbar,
    .ds-section-subnav--segmented::-webkit-scrollbar {
        display: none;
    }
    
    /* Economy sub-tab buttons - compact pill style on mobile */
    .ds-section-subnav--sidebar .economy-tab-btn,
    .ds-section-subnav--segmented .economy-tab-btn {
        width: auto !important;
        flex: 0 0 auto !important;
        min-width: fit-content;
        padding: 0.5rem 0.875rem;
        background: var(--color-background);
        border: 1px solid var(--color-border);
        border-radius: 18px;
        font-weight: 600;
        font-size: 0.65rem;
        color: var(--color-text-secondary);
        cursor: pointer;
        transition: all 0.2s ease;
        white-space: nowrap;
        min-height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        scroll-snap-align: start;
        text-transform: uppercase;
        letter-spacing: 0.02em;
    }
    
    .ds-section-subnav--sidebar .economy-tab-btn:hover,
    .ds-section-subnav--segmented .economy-tab-btn:hover {
        color: var(--color-primary);
        border-color: var(--color-primary);
        background: var(--color-primary-light, rgba(59, 130, 246, 0.08));
    }
    
    /* Active state - filled pill */
    .ds-section-subnav--sidebar .economy-tab-btn.active,
    .ds-section-subnav--segmented .economy-tab-btn.active {
        color: #ffffff !important;
        background: var(--color-primary) !important;
        border-color: var(--color-primary) !important;
        box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
    }
    
    /* 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 */
    .economy-tab-content {
        width: 100%;
        padding: 0;
    }
    
    /* Economy table sections on mobile */
    .economy-table-section {
        border-radius: 0;
        border-left: none;
        border-right: none;
        margin: 0 0 1rem 0;
    }
    
    /* Table section title on mobile */
    .economy-table-section .table-section-title {
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
    }
    
    /* Economy cards grid on mobile */
    .economy-cards-grid {
        padding: 0.75rem 1rem;
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }
}


/* ========== pages/projects-economy-mobile.css ========== */
/* ==============================================
   PROJECT ECONOMY - MOBILE ENHANCEMENTS
   Native app-style bottom navigation and edge-to-edge cards
   ============================================== */

@media (max-width: 768px) {
    /* ========================================
       BODY PADDING FOR BOTTOM NAV
       ======================================== */
    body:has(#project-economy) {
        padding-bottom: 80px !important;
    }
    
    /* Fallback for browsers without :has() */
    .economy-layout {
        padding-bottom: 80px !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: 1000 !important;
        background: white !important;
        border-top: 1px solid #e2e8f0 !important;
        border-bottom: none !important;
        border-right: none !important;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08) !important;
        padding: 0.5rem 0.5rem calc(0.5rem + 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: 0.25rem !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: 0.25rem !important;
        padding: 0.5rem 0.625rem !important;
        min-height: 56px !important;
        min-width: 64px !important;
        font-size: 0.5625rem !important;
        font-weight: 600 !important;
        color: #64748b !important;
        text-decoration: none !important;
        background: transparent !important;
        border: none !important;
        border-radius: 8px !important;
        white-space: nowrap !important;
        transition: color 0.2s ease, background 0.2s ease !important;
        position: relative !important;
        text-align: center !important;
        flex: 0 0 auto !important;
        cursor: pointer !important;
        text-transform: uppercase !important;
        letter-spacing: 0.02em !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: 1.125rem !important;
        display: block !important;
        margin-bottom: 0.125rem !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: #2563eb !important;
        background: rgba(37, 99, 235, 0.08) !important;
    }
    
    /* Active state */
    .economy-layout .economy-tab-btn.active,
    #economySubnav .economy-tab-btn.active {
        color: #2563eb !important;
        background: transparent !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: 24px !important;
        height: 3px !important;
        background: #2563eb !important;
        border-radius: 0 0 3px 3px !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: 0.5rem !important;
        padding: 0.75rem !important;
        margin: 0 -0.75rem 0.75rem -0.75rem !important;
        width: calc(100% + 1.5rem) !important;
        background: #f8fafc !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: white !important;
        border-radius: 12px !important;
        padding: 0.625rem 0.5rem !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
        border: 1px solid transparent !important;
        text-align: center !important;
        scroll-snap-align: start !important;
        transition: all 0.2s ease !important;
        cursor: pointer !important;
    }
    
    #overview .summary-card--clickable:hover,
    #overview .summary-card--clickable:active {
        border-color: #2563eb !important;
        background: #f0f7ff !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: 1.125rem !important;
        color: #2563eb !important;
        margin-bottom: 0.25rem !important;
    }
    
    #overview .summary-card .summary-label {
        font-size: 0.5625rem !important;
        font-weight: 600 !important;
        color: #64748b !important;
        text-transform: uppercase !important;
        letter-spacing: 0.03em !important;
        margin-bottom: 0.25rem !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: 1.125rem !important;
        font-weight: 700 !important;
        color: #0f172a !important;
        line-height: 1.2 !important;
    }
    
    #overview .summary-card .summary-value .count {
        display: block !important;
    }
    
    #overview .summary-card .summary-unit {
        font-size: 0.625rem !important;
        font-weight: 500 !important;
        color: #94a3b8 !important;
        display: block !important;
        margin-top: 0.125rem !important;
    }
    
    /* ========================================
       ECONOMY CARDS GRID - Edge to Edge
       ======================================== */
    .economy-cards-grid,
    #overviewMobile {
        margin: 0 -0.75rem !important;
        padding: 0.75rem !important;
        width: calc(100% + 1.5rem) !important;
        background: #f8fafc !important;
    }
    
    /* ========================================
       ECONOMY ENTRY CARDS - Edge to Edge
       ======================================== */
    .economy-card-compact {
        margin: 0 0 0.75rem 0 !important;
        border-radius: 12px !important;
        padding: 1rem !important;
        border: none !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    }
    
    .economy-card-compact:last-child {
        margin-bottom: 0 !important;
    }
    
    /* Larger touch targets for expandable details */
    .eco-details-btn {
        min-height: 44px !important;
        padding: 0.625rem 0.75rem !important;
        font-size: 0.8125rem !important;
    }
    
    /* ========================================
       ALL TAB HEADERS - Stacked Layout on Mobile
       ======================================== */
    .tab-header-with-action {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.75rem !important;
        padding: 0.75rem !important;
        margin: 0 -0.75rem 0.75rem -0.75rem !important;
        width: calc(100% + 1.5rem) !important;
        background: white !important;
        border-bottom: 1px solid #e5e7eb !important;
    }
    
    .tab-header-with-action h3,
    .tab-header-with-action .tab-title {
        font-size: 1.125rem !important;
        font-weight: 600 !important;
        margin: 0 !important;
    }
    
    .tab-header-with-action .ds-btn {
        width: 100% !important;
        min-height: 48px !important;
        padding: 0.625rem 1rem !important;
        border-radius: 8px !important;
        font-weight: 600 !important;
        font-size: 0.875rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.5rem !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: 0.75rem !important;
        padding: 0.75rem !important;
        margin: 0 -0.75rem 0.75rem -0.75rem !important;
        width: calc(100% + 1.5rem) !important;
        background: #f8fafc !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: white !important;
        border-radius: 12px !important;
        padding: 1rem 0.75rem !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
        text-align: center !important;
        border: none !important;
    }
    
    #work-logs .summary-card .summary-label {
        font-size: 0.625rem !important;
        font-weight: 600 !important;
        color: #64748b !important;
        text-transform: uppercase !important;
        letter-spacing: 0.05em !important;
        margin-bottom: 0.375rem !important;
    }
    
    #work-logs .summary-card .summary-value {
        font-size: 1.5rem !important;
        font-weight: 700 !important;
        color: #0f172a !important;
    }
    
    /* Mobile card view for work logs */
    .mobile-card-view--project {
        margin: 0 -0.75rem !important;
        padding: 0.75rem !important;
        width: calc(100% + 1.5rem) !important;
        background: #f8fafc !important;
    }
    
    .mobile-card-view--project .ds-mobile-card {
        margin: 0 0 0.75rem 0 !important;
        border-radius: 12px !important;
        padding: 1rem !important;
        border: none !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
        background: white !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 -0.75rem !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: 0.75rem !important;
        width: 100% !important;
        background: #f8fafc !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: white !important;
        border-radius: 12px !important;
        padding: 1rem !important;
        margin-bottom: 0.75rem !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !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: 0.75rem !important;
    }
    
    .ds-mobile-card__title {
        font-size: 1rem !important;
        font-weight: 600 !important;
        color: #0f172a !important;
        margin-bottom: 0.25rem !important;
    }
    
    .ds-mobile-card__subtitle {
        font-size: 0.8125rem !important;
        color: #64748b !important;
    }
    
    /* Card Info Rows */
    .ds-mobile-card__info {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.5rem !important;
    }
    
    .ds-mobile-card__info-row {
        display: flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
        font-size: 0.875rem !important;
        color: #374151 !important;
    }
    
    .ds-mobile-card__icon {
        width: 1rem !important;
        color: #64748b !important;
        flex-shrink: 0 !important;
    }
    
    /* Card Actions - Full Width Touch Targets */
    .ds-mobile-card__actions {
        display: flex !important;
        gap: 0.5rem !important;
        margin-top: 0.75rem !important;
        padding-top: 0.75rem !important;
        border-top: 1px solid #e5e7eb !important;
    }
    
    .ds-mobile-card__actions .ds-btn {
        flex: 1 !important;
        min-height: 44px !important;
        border-radius: 8px !important;
        font-size: 0.875rem !important;
        font-weight: 500 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.375rem !important;
    }
    
    /* Stock Movement Actions */
    .stock-movement-actions {
        display: flex !important;
        gap: 0.5rem !important;
        margin-top: 0.5rem !important;
        margin-bottom: 0.75rem !important;
        padding: 0 !important;
    }
    
    .stock-movement-actions .ds-btn {
        min-height: 44px !important;
        border-radius: 8px !important;
        font-weight: 500 !important;
    }
    
    /* Empty States */
    .ds-empty-state {
        text-align: center !important;
        padding: 2rem 1rem !important;
        color: #64748b !important;
    }
    
    .ds-empty-state p {
        font-size: 0.9375rem !important;
        margin: 0 !important;
    }
    
    /* ========================================
       TABLE SECTIONS - Edge to Edge
       ======================================== */
    .economy-table-section {
        margin: 0 -0.75rem !important;
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
    }
    
    .economy-table-section .table-section-title {
        padding: 0.75rem 1rem !important;
        font-size: 1rem !important;
        background: white !important;
        border-bottom: 1px solid #e5e7eb !important;
    }
    
    /* ========================================
       FILTER BUTTON - Full Width Touch Target
       ======================================== */
    #mobileFilterToggle,
    #workLogsMobileFilterToggle {
        margin: 0.75rem !important;
        margin-left: -0.75rem !important;
        margin-right: -0.75rem !important;
        width: calc(100% + 1.5rem) !important;
        border-radius: 0 !important;
        min-height: 48px !important;
    }
    
    /* ========================================
       ADD BUTTON - Full Width Touch Target
       ======================================== */
    .tab-header-with-action .ds-btn--primary {
        width: 100% !important;
        min-height: 48px !important;
        border-radius: 8px !important;
        font-size: 0.9375rem !important;
    }
    
    /* ========================================
       MOBILE CARDS - Larger Touch Targets
       ======================================== */
    .ds-mobile-card {
        border-radius: 12px !important;
        padding: 1rem !important;
        background: white !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
        margin-bottom: 0.75rem !important;
    }
    
    .ds-mobile-card-actions {
        display: flex !important;
        gap: 0.5rem !important;
        margin-top: 0.75rem !important;
        padding-top: 0.75rem !important;
        border-top: 1px solid #e5e7eb !important;
    }
    
    .ds-mobile-card-actions .ds-btn {
        min-height: 44px !important;
        flex: 1 !important;
        border-radius: 8px !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 SUB-TABS
   ======================================== */

.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-btn {
    background: none;
    border: none;
    padding: var(--space-3) var(--space-5);
    min-height: var(--space-11);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    cursor: pointer;
    border-bottom: var(--border-width-4) solid transparent;
    transition: var(--transition-all);
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    border-radius: var(--border-radius) var(--border-radius) 0 0;
}

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

.economy-tab-btn.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
    background-color: var(--color-surface-secondary);
}

.economy-tab-btn:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: -2px;
}

.economy-tab-content {
    display: none;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.economy-tab-content.active {
    display: block;
    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: 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;
    width: 100%;
    padding-left: var(--space-6);
    padding-right: 0;
    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: 100;
        background: var(--color-surface);
        border-bottom: 1px 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: 0.5rem 0.75rem;
        gap: 0.5rem;
        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: 0.25rem;
        white-space: nowrap !important;
        padding: 0.5rem 0.75rem !important;
        min-height: 44px !important;
        min-width: 56px;
        font-size: 0.75rem;
        color: var(--color-text-secondary);
        text-decoration: none;
        border-radius: 8px;
        transition: all 0.2s ease;
        flex-shrink: 0 !important;
        flex-grow: 0 !important;
    }
    
    .ds-project-tab-mobile i {
        font-size: 1rem;
    }
    
    .ds-project-tab-mobile span {
        font-size: 0.65rem;
        font-weight: 500;
    }
    
    .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: #ffffff !important;
        font-weight: 600;
    }
    
    .ds-project-tab-mobile.active i,
    .ds-project-tab-mobile.active span {
        color: #ffffff !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: 8px;
}

.ds-project-nav-item i {
    width: 20px;
    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-gray-100);
    color: var(--color-gray-900);
    font-weight: var(--font-weight-semibold);
    border-left-color: var(--color-primary);
}

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

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



/* ========== pages/projects-uploads-display.css ========== */
/* Uploads Empty State */
.uploads-empty-state-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    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: 400px;
}

.empty-state-icon {
    font-size: 64px;
    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-card {
    background: var(--color-surface);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--border-radius-lg);
    padding: var(--space-4);
    transition: var(--transition-all);
    position: relative;
    overflow: hidden;
}

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

.file-card-thumbnail {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 150px;
    background: var(--color-surface-secondary);
    border-radius: var(--border-radius);
    margin-bottom: var(--space-3);
}

.file-card-thumbnail i {
    font-size: 48px;
    color: var(--color-text-tertiary);
}

.file-card-thumbnail-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--border-radius);
}

.file-card-thumbnail-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface-secondary);
}

.file-card-thumbnail-fallback i {
    font-size: 48px;
    color: var(--color-text-tertiary);
}

.file-card-info {
    margin-bottom: var(--space-3);
}

.file-card-name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    margin-bottom: var(--space-1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    margin-top: var(--space-1);
}

.file-card-size {
    display: inline-flex;
    align-items: center;
}

.file-card-date {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

.file-card-date i {
    font-size: 10px;
    opacity: 0.8;
}

.file-card-actions {
    display: flex;
    gap: var(--space-2);
    opacity: 0;
    transition: var(--transition-all);
}

.file-card:hover .file-card-actions {
    opacity: 1;
}

.file-action-btn {
    padding: var(--space-2);
    min-width: 36px;
    min-height: 36px;
    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);
    cursor: pointer;
    transition: var(--transition-all);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.file-action-btn:hover {
    background: var(--color-primary);
    color: var(--color-text-inverse);
    border-color: var(--color-primary);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.file-action-btn.file-action-delete:hover {
    background: var(--color-danger);
    color: var(--color-text-inverse);
    border-color: var(--color-danger);
}

.file-action-btn:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
}

/* Increase touch targets on mobile */
@media (max-width: 768px) {
    .file-action-btn {
        min-width: 44px;
        min-height: var(--space-11);
        padding: var(--space-3);
    }
    
    /* Always show file actions on mobile (no hover on touch) */
    .file-card-actions {
        opacity: 1;
    }
    
    /* Uploads filter tabs - ensure proper touch targets */
    .uploads-tab-btn {
        min-height: 48px;
        padding: var(--space-3) var(--space-4);
    }
}

/* ========================================
   FILE PREVIEW MODAL - OVERLAY & CONTAINER
   ======================================== */

.file-preview-modal {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal, 1050);
    display: none;
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(4px);
}

.file-preview-modal.active {
    display: flex;
}

.file-preview-modal__container {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    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: #fff;
    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: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    border: none;
    border-radius: var(--border-radius-full);
    color: #fff;
    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;
}

.file-preview-modal__media-content {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: var(--space-8);
}

/* Photo Preview */
.file-preview-modal__image {
    max-width: 100%;
    max-height: 100%;
    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: 48px;
    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: 96px;
    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: 400px;
}

.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: 80px;
    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: 56px;
    height: 56px;
    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: 80px;
    height: 4px;
    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: 14px;
    height: 14px;
    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;
}

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

.file-preview-modal__description {
    width: 100%;
    min-height: 80px;
    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);
}

.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: rgba(239, 68, 68, 0.1);
    color: var(--color-danger);
    border-color: var(--color-danger);
}

.file-preview-modal__toolbar-btn.active.favorited {
    background: rgba(245, 158, 11, 0.1);
    color: var(--color-warning);
    border-color: var(--color-warning);
}

.file-preview-modal__toolbar-btn.active.flagged {
    background: rgba(239, 68, 68, 0.1);
    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 rgba(255, 255, 255, 0.1);
}

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

.file-preview-modal__flag-reason {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: var(--space-2);
    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;
    z-index: 30;
    display: none;
}

.file-preview-modal__flag-reason.show {
    display: block;
}

.file-preview-modal__flag-input {
    width: 100%;
    padding: var(--space-2);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--border-radius);
    font-size: var(--font-size-sm);
    font-family: inherit;
    margin-bottom: var(--space-2);
    resize: vertical;
    min-height: 60px;
}

.file-preview-modal__flag-submit {
    width: 100%;
    padding: var(--space-2);
    background: var(--color-danger);
    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;
}

.file-preview-modal__flag-submit:hover {
    background: var(--color-danger-hover);
}

/* Tags Section */
.file-preview-modal__tags-section {
    padding: var(--space-4) var(--space-5);
    overflow: visible;
}

.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: var(--space-1);
    padding: var(--space-1) var(--space-2);
    background: var(--color-surface-secondary);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--border-radius);
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: var(--transition-all);
}

.file-preview-modal__add-tag-btn:hover {
    background: var(--color-hover);
    color: var(--color-text-primary);
}

.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: var(--space-1);
    padding: var(--space-1) var(--space-2);
    background: var(--color-primary-light);
    color: var(--color-primary);
    border-radius: var(--border-radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
}

.file-preview-modal__tag-remove {
    background: none;
    border: none;
    padding: 0;
    margin-left: var(--space-1);
    color: inherit;
    font-size: var(--font-size-xs);
    cursor: pointer;
    opacity: 0.7;
}

.file-preview-modal__tag-remove:hover {
    opacity: 1;
}

.file-preview-modal__tag-add {
    position: relative;
}

.file-preview-modal__tag-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: var(--space-2);
    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: 100;
    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: var(--space-2) var(--space-3);
    background: none;
    border: none;
    text-align: left;
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    cursor: pointer;
    transition: var(--transition-colors);
}

.file-preview-modal__tag-option:hover {
    background: var(--color-hover);
}

/* Comments Section */
.file-preview-modal__comments {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.file-preview-modal__comments-list {
    flex: 1;
    overflow-y: auto;
    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);
}

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

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

.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: 32px;
    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: 32px;
    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: 48px;
    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: 4px;
        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: #ffffff;
    border-color: var(--color-primary);
}

.uploads-tab-btn.active i,
.uploads-tab-btn.active span {
    color: #ffffff;
}

.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 {
    text-align: center;
    padding: var(--space-8);
    color: var(--color-text-secondary);
}


/* ========== 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: 0.75rem;
    }
    
    .project-section .project-section-title {
        margin-bottom: 0;
        font-size: 1.1rem;
        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: 0.75rem;
    }
    
    .uploads-filter-tabs {
        display: flex;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 0.25rem;
        padding-bottom: 0.5rem;
        scrollbar-width: none;
    }
    
    .uploads-filter-tabs::-webkit-scrollbar {
        display: none;
    }
    
    .uploads-tab-btn {
        flex: 0 0 auto;
        min-height: 44px;
        white-space: nowrap;
        padding: 0.5rem 0.75rem;
    }
    
    .uploads-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        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: 0.875rem;
    }
    
    .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: 0.75rem;
    }
    
    .ds-card-header h4 {
        text-align: center;
        font-size: 1.25rem;
        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 -1rem;
        width: calc(100% + 2rem);
        border-radius: 0;
    }
    
    .ds-table {
        font-size: 0.8rem;
    }
    
    .ds-table th,
    .ds-table td {
        padding: 0.5rem 0.375rem;
    }
    
    .ds-table .btn-group-sm .btn {
        padding: 0.25rem 0.5rem;
        min-height: 36px;
    }
}

/* ========================================
   EMPTY STATES - MOBILE
   ======================================== */
@media (max-width: 576px) {
    .uploads-empty-state,
    .ds-empty-state {
        padding: 2rem 1rem !important;
    }
    
    .empty-state-icon,
    .ds-empty-state i {
        font-size: 2.5rem !important;
    }
    
    .empty-state-title,
    .ds-empty-state h4 {
        font-size: 1.1rem;
    }
    
    .empty-state-subtitle,
    .ds-empty-state p {
        font-size: 0.875rem;
    }
    
    .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: 200px;
        border-right: none !important;
        border-bottom: 1px solid var(--color-border);
    }
    
    .chat-main {
        width: 100% !important;
        flex: 1;
    }
    
    .chat-sidebar-header {
        padding: 0.75rem 1rem;
    }
    
    .chat-sidebar-title {
        font-size: 1rem;
    }
}

/* ========================================
   SCHEDULE TAB - VIEW CONTROLS MOBILE
   ======================================== */
@media (max-width: 576px) {
    .ds-calendar-view-controls {
        flex-direction: column !important;
        gap: 0.75rem !important;
        padding: 0.75rem !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: 0.75rem;
    }
    
    .project-filters-content .row,
    .filters-content .row {
        gap: 0.75rem;
    }
    
    .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: 16px;
    }
    
    .project-section textarea.ds-input {
        min-height: 80px;
    }
}

/* ========================================
   MOBILE CARD VIEWS
   ======================================== */
@media (max-width: 576px) {
    .mobile-card-view--project {
        padding: 0;
    }
    
    .mobile-card-view--project .project-card {
        border-radius: 0;
        margin: 0 -1rem;
        width: calc(100% + 2rem);
        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 - Edge-to-edge on mobile
   ============================================== */
@media (max-width: 768px) {
    .project-detail-header,
    .ds-project-header {
        margin: 0 -0.75rem;
        padding: 1rem;
        border-radius: 0;
        background: white;
        border-bottom: 1px solid var(--color-border);
    }
    
    .ds-project-header__container {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .ds-project-header__back {
        width: 100%;
        justify-content: center;
        min-height: 44px;
        border-radius: 8px;
        font-weight: 500;
    }
    
    .project-detail-header__content {
        width: 100%;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 0.75rem;
    }
    
    .ds-project-header__title {
        font-size: 1.125rem !important;
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    .ds-project-header__title .badge {
        display: none;
    }
    
    #project-options-btn {
        flex-shrink: 0;
        min-width: 44px;
        min-height: 44px;
        padding: 0.5rem 0.75rem;
        border-radius: 8px;
    }
    
    #project-options-btn .mobile-hidden {
        display: none !important;
    }
    
    /* 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: 0.75rem !important;
        right: 0.75rem !important;
        width: auto !important;
        max-width: calc(100vw - 1.5rem) !important;
        z-index: 1100 !important;
        border-radius: 12px !important;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15) !important;
        border: 1px solid #e2e8f0 !important;
        padding: 0.5rem 0 !important;
        background: white !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: 0.75rem 1rem !important;
        display: flex !important;
        align-items: center !important;
        gap: 0.75rem !important;
        font-size: 0.9375rem !important;
        font-weight: 500 !important;
        color: #1e293b !important;
        border-radius: 0 !important;
    }
    
    .project-detail-header__content .dropdown-item:active,
    .ds-project-header .dropdown-item:active {
        background: #f1f5f9 !important;
        color: #1e293b !important;
    }
    
    .project-detail-header__content .dropdown-item i,
    .ds-project-header .dropdown-item i {
        width: 1.25rem !important;
        text-align: center !important;
        color: #64748b !important;
    }
    
    .project-detail-header__content .dropdown-divider,
    .ds-project-header .dropdown-divider {
        margin: 0.25rem 0 !important;
        border-color: #e2e8f0 !important;
    }
}

/* ==============================================
   TAB NAVIGATION - Edge-to-edge enhancement
   (Base mobile styles in projects-navigation.css)
   ============================================== */
@media (max-width: 768px) {
    .ds-project-tabs-container {
        margin: 0 -0.75rem;
        width: calc(100% + 1.5rem);
    }
}

/* ==============================================
   FORM SECTIONS - Collapsible cards
   ============================================== */
@media (max-width: 768px) {
    .ds-project-content {
        padding: 0;
    }
    
    .project-main-card {
        margin: 0 -0.75rem;
        padding: 0;
        background: transparent;
        box-shadow: none;
        border: none;
        border-radius: 0;
    }
    
    .project-section {
        background: white;
        margin-bottom: 0.5rem;
        border-radius: 0;
        border: none;
        border-bottom: 1px solid var(--color-border);
        overflow: hidden;
    }
    
    .project-section-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1rem;
        margin: 0;
        font-size: 0.9375rem;
        font-weight: 600;
        color: var(--color-text-primary);
        background: var(--color-surface-secondary);
        cursor: pointer;
        min-height: 44px;
        border-bottom: 1px solid var(--color-border);
    }
    
    .project-section-title::after {
        content: '\f078';
        font-family: 'Font Awesome 6 Free';
        font-weight: 900;
        font-size: 0.75rem;
        color: var(--color-text-secondary);
        transition: transform 0.3s ease;
    }
    
    .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: 1rem;
        padding: 1rem;
    }
    
    .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: 0.6875rem;
        font-weight: 600;
        color: var(--color-text-secondary);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 0.375rem;
        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: 0.625rem 0.875rem;
        font-size: 1rem;
        border: 1px solid var(--color-border);
        border-radius: 8px;
        background: white;
        color: var(--color-text-primary);
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }
    
    .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 0.875rem center;
        padding-right: 2.5rem;
    }
}

/* ==============================================
   SAVE BUTTON - Full width sticky footer
   ============================================== */
@media (max-width: 768px) {
    .project-form-actions {
        position: sticky;
        bottom: 0;
        left: 0;
        right: 0;
        margin: 0 -0.75rem;
        padding: 1rem;
        background: white;
        border-top: 1px 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: 1rem;
        font-weight: 600;
        border-radius: 8px;
        justify-content: center;
    }
}

/* ==============================================
   DROPDOWN MENUS - Mobile optimized
   ============================================== */
@media (max-width: 768px) {
    .project-detail-header .dropdown-menu {
        position: fixed !important;
        left: 0.75rem !important;
        right: 0.75rem !important;
        bottom: 1rem !important;
        top: auto !important;
        transform: none !important;
        width: auto !important;
        max-height: 60vh;
        overflow-y: auto;
        border-radius: 12px;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
        padding: 0.5rem;
    }
    
    .project-detail-header .dropdown-item {
        min-height: 48px;
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.75rem 1rem;
        border-radius: 8px;
        font-size: 1rem;
    }
    
    .project-detail-header .dropdown-item:active {
        background: var(--color-primary);
        color: white;
    }
    
    .project-detail-header .dropdown-divider {
        margin: 0.5rem 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: 0.5rem;
    }
    
    .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: 0.5rem;
    }
}

/* ==============================================
   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: 1rem;
        padding: 0.25rem;
        margin-left: 0.25rem;
    }
}

/* ==============================================
   LOADING STATES
   ============================================== */
@media (max-width: 768px) {
    .ds-loading-placeholder {
        padding: 2rem 1rem;
        text-align: center;
        color: var(--color-text-secondary);
    }
}

/* ==============================================
   TAB CONTENT PANELS
   ============================================== */
@media (max-width: 768px) {
    .tab-content {
        padding: 0;
    }
    
    .tab-content.active {
        animation: fadeIn 0.2s ease;
    }
    
    @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
   ======================================== */

/* ========================================
   ALPHABET FILTER - MOBILE HORIZONTAL SCROLL
   ======================================== */
@media (max-width: 768px) {
    .alphabet-filter-wrapper {
        margin: 0 -0.75rem 1rem;
        padding: 0.75rem;
        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: 0.25rem;
        padding-bottom: 0.25rem;
        min-width: max-content;
    }
    
    .alphabet-btn {
        min-width: 36px !important;
        min-height: 44px !important;
        padding: 0.5rem 0.375rem !important;
        font-size: 0.8125rem !important;
        flex-shrink: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

/* ========================================
   PROJECT CARDS GRID - MOBILE
   ======================================== */
@media (max-width: 768px) {
    .projects-cards-grid {
        display: flex !important;
        flex-direction: column;
        gap: 0;
        padding: 0 !important;
        margin: 0 -0.75rem !important;
        width: calc(100% + 1.5rem);
    }
    
    .projects-cards-grid .mobile-card {
        margin: 0 !important;
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        border-top: none !important;
    }
    
    .projects-cards-grid .mobile-card:last-child {
        border-bottom: none !important;
    }
}

/* ========================================
   QUICK ACTION BUTTONS - TOUCH TARGETS
   ======================================== */
@media (max-width: 576px) {
    .mobile-card__quick-btn {
        min-width: 44px !important;
        min-height: 44px !important;
        padding: 0.5rem !important;
    }
    
    /* 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;
    }
    
    .mobile-card__quick-actions {
        gap: 0.375rem !important;
    }
}

/* ========================================
   VIEW TOGGLE BUTTONS - MOBILE
   ======================================== */
@media (max-width: 576px) {
    .project-view-btn,
    .view-toggle-btn {
        min-height: 44px !important;
        min-width: 44px !important;
        padding: 0.5rem 0.75rem !important;
    }
    
    .ds-btn-group .ds-btn {
        min-height: 44px !important;
    }
}

/* ========================================
   PROJECT TABS - MOBILE NAVIGATION
   ======================================== */
@media (max-width: 576px) {
    .ds-project-tabs-container {
        margin: 0 -0.75rem;
        width: calc(100% + 1.5rem);
        border-radius: 0;
    }
    
    .ds-project-tabs-mobile {
        padding: 0.5rem 0.75rem !important;
        gap: 0.5rem !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: 0.5rem !important;
        flex-shrink: 0;
    }
}

/* ========================================
   PAGINATION - MOBILE LAYOUT
   ======================================== */
@media (max-width: 576px) {
    .ds-pagination {
        flex-direction: column !important;
        gap: 0.75rem !important;
        padding: 0.75rem !important;
    }
    
    .ds-pagination > div:first-child {
        flex-direction: column;
        gap: 0.5rem;
        width: 100%;
        text-align: center;
    }
    
    .ds-pagination-controls {
        width: 100%;
        justify-content: center !important;
        flex-wrap: wrap;
        gap: 0.375rem !important;
    }
    
    .ds-pagination-controls .ds-btn {
        min-height: 44px !important;
        padding: 0.5rem 0.75rem !important;
    }
    
    .ds-pagination-controls .ds-btn--sm {
        min-width: 40px;
    }
}

/* ========================================
   FILTER CONTROLS - MOBILE
   ======================================== */
@media (max-width: 576px) {
    .project-filters-primary {
        padding: 0.75rem !important;
        margin: 0 -0.75rem 0.75rem !important;
        width: calc(100% + 1.5rem);
        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: 576px) {
    .dropdown-item {
        min-height: 44px !important;
        padding: 0.625rem 1rem !important;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    
    .dropdown-menu {
        padding: 0.25rem 0;
    }
}

/* ========================================
   BULK ACTION TOOLBAR - MOBILE
   ======================================== */
@media (max-width: 576px) {
    .bulk-action-toolbar {
        padding: 0.75rem !important;
    }
    
    .bulk-action-toolbar__content {
        flex-direction: column;
        gap: 0.75rem;
        align-items: stretch;
    }
    
    .bulk-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    .bulk-actions .ds-btn {
        flex: 1;
        min-width: calc(50% - 0.25rem);
        min-height: 44px !important;
        justify-content: center;
    }
}

/* ========================================
   EMPTY STATE - MOBILE
   ======================================== */
@media (max-width: 576px) {
    .ds-empty-state {
        padding: 2rem 1rem !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: 1.125rem;
    }
    
    .ds-empty-state__message {
        font-size: 0.875rem;
    }
    
    .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;
    }
}


/* ========== 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: 12px;
    padding: var(--space-3);
    margin-bottom: var(--space-4);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    position: relative;
}

.project-main-card--enhanced::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    border-radius: 12px 12px 0 0;
    background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light, #4f8cff));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.project-main-card--enhanced.status--planning::before {
    opacity: 1;
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.project-main-card--enhanced.status--active::before {
    opacity: 1;
    background: linear-gradient(90deg, #10b981, #34d399);
}

.project-main-card--enhanced.status--completed::before {
    opacity: 1;
    background: linear-gradient(90deg, #3b82f6, #60a5fa);
}

.project-main-card--enhanced.status--on-hold::before {
    opacity: 1;
    background: linear-gradient(90deg, #8b5cf6, #a78bfa);
}

.project-main-card--enhanced.status--cancelled::before {
    opacity: 1;
    background: linear-gradient(90deg, #ef4444, #f87171);
}

/* ========================================
   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: 10px !important;
    padding: var(--space-3) !important;
    margin-bottom: var(--space-3) !important;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

#project-details .project-section.project-section--enhanced:hover {
    border-color: var(--color-border-hover, #d1d5db) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !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, #f3f4f6);
}

.project-section__icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: white;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    flex-shrink: 0;
}

.project-section__icon--info {
    background: linear-gradient(135deg, #3b82f6, #60a5fa);
}

.project-section__icon--schedule {
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
}

.project-section__icon--team {
    background: linear-gradient(135deg, #10b981, #34d399);
}

.project-section__icon--financial {
    background: linear-gradient(135deg, #ec4899, #f472b6);
}

.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: 0.5px;
    margin: 0;
    border: none;
    padding: 0;
}

/* ========================================
   SCHEDULE GRID (Side-by-Side Dates)
   ======================================== */

.schedule-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}

@media (max-width: 768px) {
    .schedule-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }
}

.schedule-item {
    background: var(--color-surface-secondary);
    border-radius: 8px;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border-light, #f3f4f6);
}

.schedule-item--start {
    border-left: 3px solid #10b981;
}

.schedule-item--end {
    border-left: 3px solid #ef4444;
}

.schedule-item__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: 0.5px;
    margin-bottom: var(--space-3);
}

.schedule-item--start .schedule-item__label i {
    color: #10b981;
}

.schedule-item--end .schedule-item__label i {
    color: #ef4444;
}

.schedule-item__content {
    /* Remove default label from schedule picker since we have our own */
}

.schedule-item__content .schedule-picker__label {
    display: none;
}

/* ========================================
   ENHANCED INPUT STYLING
   ======================================== */

.project-section--enhanced input,
.project-section--enhanced select,
.project-section--enhanced textarea {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: var(--space-3) var(--space-4);
    font-size: var(--font-size-base);
    background: var(--color-surface);
    transition: all 0.2s ease;
    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 rgba(59, 130, 246, 0.1);
    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, #9ca3af);
}

.project-section--enhanced textarea {
    resize: vertical;
    min-height: 100px;
}

/* 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: 8px;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    text-decoration: none;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.input-action-btn:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
}

/* ========================================
   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: 6px;
    transition: all 0.2s ease;
    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: 8px 0 0 8px;
    border-right: none;
}

.input-suffix {
    border-radius: 0 8px 8px 0;
    border-left: none;
}

.input-with-prefix input {
    border-radius: 0 8px 8px 0;
    flex: 1;
}

.input-with-suffix input {
    border-radius: 8px 0 0 8px;
    flex: 1;
}

/* ========================================
   INFO TOOLTIP ICON
   ======================================== */

.info-tooltip {
    font-size: 0.8rem;
    color: var(--color-text-tertiary);
    cursor: help;
    margin-left: var(--space-1);
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.info-tooltip:hover {
    opacity: 1;
    color: var(--color-primary);
}

/* ========================================
   PRIORITY SELECT STYLING
   ======================================== */

#priority-select.priority--low {
    border-left: 3px solid #22c55e;
}

#priority-select.priority--normal {
    border-left: 3px solid #3b82f6;
}

#priority-select.priority--medium {
    border-left: 3px solid #f59e0b;
}

#priority-select.priority--high {
    border-left: 3px solid #f97316;
}

#priority-select.priority--critical {
    border-left: 3px solid #ef4444;
    background: rgba(239, 68, 68, 0.05);
}

/* ========================================
   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, #f3f4f6);
    text-align: center;
}

.project-form-actions .ds-btn--lg {
    padding: var(--space-3) var(--space-6);
    font-size: var(--font-size-base);
    min-height: 48px;
}

/* ========================================
   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: 0.75rem !important;
        border-radius: 8px !important;
        margin-bottom: 0.5rem !important;
    }
    
    /* Remove form grid internal padding - fields use full width */
    .project-section--enhanced .project-form-grid {
        padding: 0 !important;
        gap: 0.75rem !important;
    }
    
    /* Full width inputs */
    .project-section--enhanced input,
    .project-section--enhanced select,
    .project-section--enhanced textarea {
        width: 100% !important;
        padding: 0.625rem 0.75rem !important;
    }
    
    /* Compact section headers */
    .project-section__header {
        gap: 0.5rem;
        margin-bottom: 0.75rem;
        padding-bottom: 0.5rem;
    }
    
    .project-section__icon {
        width: 24px;
        height: 24px;
        font-size: 11px;
    }
    
    .project-section__title {
        font-size: 0.8125rem;
    }
    
    /* Compact schedule items */
    .schedule-grid {
        gap: 0.5rem !important;
    }
    
    .schedule-item {
        padding: 0.5rem !important;
    }
    
    .schedule-item__label {
        font-size: 0.625rem;
        margin-bottom: 0.25rem;
    }
    
    /* Hide action button text on mobile */
    .input-action-btn span {
        display: none;
    }
    
    .input-action-btn {
        padding: 0.5rem;
        min-width: 44px;
        min-height: 44px;
    }
    
    /* Input prefix/suffix compact on mobile */
    .input-prefix,
    .input-suffix {
        padding: 0 0.5rem;
        font-size: 0.75rem;
    }
}

/* ========================================
   DARK MODE ADJUSTMENTS
   ======================================== */

@media (prefers-color-scheme: dark) {
    .project-section--enhanced {
        background: var(--color-surface);
    }
    
    .schedule-item {
        background: var(--color-surface-tertiary);
    }
    
    .project-section__header {
        border-bottom-color: var(--color-border);
    }
}

/* Dark mode class-based (if using toggle) */
.dark .project-section--enhanced {
    background: var(--color-surface);
}

.dark .schedule-item {
    background: var(--color-surface-tertiary);
}

.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: 1rem;
        padding: 1rem !important;
        text-align: center;
    }
    
    .ds-page-header__content {
        text-align: center;
    }
    
    .ds-page-header__title {
        font-size: 1.5rem !important;
        line-height: 1.2;
    }
    
    .ds-page-header__subtitle {
        font-size: 0.875rem;
        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;
    }
    
    .ds-page-header__actions .ds-flex {
        flex-direction: column;
        width: 100%;
        gap: 0.5rem;
    }
    
    .ds-page-header__actions .ds-flex .ds-btn {
        width: 100%;
    }
}

/* ========================================
   FINANCE NAVIGATION TABS - MOBILE
   ======================================== */
@media (max-width: 576px) {
    .ds-project-tabs-container {
        margin: 0 -1rem;
        width: calc(100% + 2rem);
    }
    
    .ds-project-tabs-mobile {
        padding: 0.5rem 0.75rem !important;
        gap: 0.375rem !important;
    }
    
    .ds-project-tab-mobile {
        flex: 0 0 auto;
        min-width: 60px;
        min-height: 52px;
        padding: 0.375rem 0.5rem !important;
        font-size: 0.65rem !important;
        border-radius: 8px;
    }
    
    .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;
    }
}

/* ========================================
   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: 0.5rem !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;
        font-size: 16px;
    }
    
    .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: 0.75rem !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: 0.75rem !important;
    }
    
    .ds-grid.ds-grid--md-cols-2.ds-grid--xl-cols-4 .ds-text-2xl {
        font-size: 1.25rem !important;
    }
    
    .ds-grid.ds-grid--md-cols-2.ds-grid--xl-cols-4 .ds-text-xs {
        font-size: 0.625rem !important;
        letter-spacing: 0.025em;
    }
    
    .ds-grid.ds-grid--md-cols-2.ds-grid--xl-cols-4 .ds-icon-2xl {
        font-size: 1.5rem !important;
    }
}

/* ========================================
   QUICK LINKS GRID - MOBILE
   ======================================== */
@media (max-width: 576px) {
    .ds-grid.ds-grid--md-cols-4 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
    }
    
    .ds-grid.ds-grid--md-cols-4 .ds-btn--xl {
        padding: 0.75rem 0.5rem !important;
        font-size: 0.75rem !important;
        min-height: 80px;
    }
    
    .ds-grid.ds-grid--md-cols-4 .ds-btn--xl .ds-icon-2xl {
        font-size: 1.5rem !important;
        margin-bottom: 0.375rem !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: 1rem !important;
    }
}

/* ========================================
   CARD HEADERS - MOBILE
   ======================================== */
@media (max-width: 576px) {
    .ds-card__header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.5rem;
        padding: 0.75rem 1rem !important;
    }
    
    .ds-card__header .ds-card__title {
        text-align: center;
        font-size: 1rem;
    }
    
    .ds-card__header .ds-card__header-actions {
        display: flex;
        justify-content: center;
    }
    
    .ds-card__header .ds-card__header-actions .ds-btn {
        min-height: 36px;
    }
}

/* ========================================
   TABLES - MOBILE HIDDEN (USE CARD VIEW)
   ======================================== */
@media (max-width: 576px) {
    .ds-table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .ds-table {
        font-size: 0.75rem;
    }
    
    .ds-table th,
    .ds-table td {
        padding: 0.5rem 0.375rem;
        white-space: nowrap;
    }
}

/* ========================================
   MOBILE CARDS - ENHANCED STYLING
   ======================================== */
@media (max-width: 576px) {
    .ds-mobile-card {
        padding: 0.875rem 1rem !important;
        border-radius: 0 !important;
        margin: 0;
        width: 100%;
        border-left: none;
        border-right: none;
        border-bottom: 1px solid var(--color-border);
        background: white;
    }
    
    .ds-mobile-card:last-child {
        border-bottom: none;
    }
    
    .ds-mobile-card__header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 0.5rem;
        margin-bottom: 0.5rem;
    }
    
    .ds-mobile-card__title {
        font-size: 1rem;
        font-weight: 600;
        line-height: 1.3;
    }
    
    .ds-mobile-card__title a {
        color: var(--color-primary, #2563eb);
        text-decoration: none;
    }
    
    .ds-mobile-card__subtitle {
        font-size: 0.75rem;
        color: var(--color-text-secondary);
        margin-top: 0.125rem;
    }
    
    .ds-mobile-card__info {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        margin-bottom: 0.625rem;
        padding: 0.5rem 0;
        border-top: none;
        background: var(--color-bg-secondary, #f8f9fa);
        margin-left: -1rem;
        margin-right: -1rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    .ds-mobile-card__info-row {
        display: flex;
        align-items: center;
        font-size: 0.8125rem;
        color: var(--color-text-primary);
        gap: 0.5rem;
    }
    
    .ds-mobile-card__info-row i,
    .ds-mobile-card__icon {
        width: 1rem;
        color: var(--color-text-tertiary);
        font-size: 0.75rem;
        flex-shrink: 0;
    }
    
    .ds-mobile-card__actions {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
        padding-top: 0;
        border-top: none;
    }
    
    .ds-mobile-card__actions .ds-btn {
        min-height: 40px;
        justify-content: center;
        font-size: 0.75rem;
        padding: 0.375rem 0.5rem;
        font-weight: 500;
        border-radius: 6px;
    }
    
    .ds-mobile-card__actions .ds-btn i {
        margin-right: 0.25rem;
    }
}

/* ========================================
   PAGINATION - MOBILE
   ======================================== */
@media (max-width: 576px) {
    .ds-flex.ds-justify-center.ds-items-center.ds-p-3 {
        padding: 0.75rem !important;
    }
    
    .ds-flex.ds-gap-2.ds-items-center.ds-flex-wrap .ds-btn--sm {
        padding: 0.5rem 0.75rem;
        min-height: 40px;
        font-size: 0.8125rem;
    }
    
    .ds-text-sm.ds-text-secondary {
        font-size: 0.75rem;
        white-space: nowrap;
    }
}

/* ========================================
   EMPTY STATES - MOBILE
   ======================================== */
@media (max-width: 576px) {
    .ds-card__body[style*="padding: 4rem"] {
        padding: 2rem 1rem !important;
    }
    
    .ds-card__body[style*="padding: 4rem"] i[style*="font-size: 3.5rem"] {
        font-size: 2.5rem !important;
    }
    
    .ds-card__body[style*="padding: 4rem"] h5 {
        font-size: 1.1rem !important;
    }
    
    .ds-card__body[style*="padding: 4rem"] p {
        font-size: 0.875rem !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: 0.5rem;
        max-width: calc(100% - 1rem);
    }
    
    .modal-header {
        padding: 1rem !important;
    }
    
    .modal-header h5 {
        font-size: 1.25rem !important;
    }
    
    .modal-body {
        padding: 1rem !important;
        max-height: 60vh !important;
    }
    
    .modal-footer {
        padding: 1rem !important;
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .modal-footer .ds-btn {
        width: 100%;
        min-height: 44px;
        justify-content: center;
    }
}

/* ========================================
   ALERTS - MOBILE
   ======================================== */
@media (max-width: 576px) {
    .ds-alert {
        padding: 0.75rem !important;
        font-size: 0.875rem;
    }
    
    .ds-alert i {
        margin-right: 0.5rem;
    }
}

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

/* ========================================
   CONTENT PADDING - MOBILE
   ======================================== */
@media (max-width: 576px) {
    .ds-project-content {
        padding: 0.75rem !important;
    }
    
    .ds-mb-4 {
        margin-bottom: 1rem !important;
    }
    
    .ds-gap-4 {
        gap: 0.75rem !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: 8px;
        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: 0.5rem 1rem;
    }
}

/* ========================================
   BADGES - MOBILE SIZING
   ======================================== */
@media (max-width: 576px) {
    .ds-badge {
        font-size: 0.6875rem;
        padding: 0.25rem 0.5rem;
        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: white !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: 10px !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: #f1f5f9 !important;
    }
    
    .stock-overview-card {
        border-radius: 0 !important;
        border: none !important;
        border-bottom: 8px solid #f1f5f9 !important;
        box-shadow: none !important;
        padding: 16px !important;
        margin: 0 !important;
        background: white !important;
    }
    
    .stock-overview-card:last-child {
        border-bottom: 8px solid #f1f5f9 !important;
    }
    
    .stock-overview-card:hover {
        transform: none !important;
        box-shadow: none !important;
    }
    
    .stock-overview-card:active {
        background: #f8fafc !important;
    }
    
    .stock-overview-card__header {
        gap: 14px !important;
        margin-bottom: 12px !important;
    }
    
    .stock-overview-card__icon {
        width: 52px !important;
        height: 52px !important;
        border-radius: 12px !important;
        font-size: 22px !important;
    }
    
    .stock-overview-card__label {
        font-size: 0.8125rem !important;
        color: #64748b !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 #f1f5f9 !important;
    }
    
    .stock-overview-card__link {
        font-size: 0.875rem !important;
        font-weight: 600 !important;
        color: #2563eb !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 #f1f5f9 !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: 10px !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 #f1f5f9 !important;
    }
    
    #low-stock-alerts .ds-card__header {
        padding: 14px 16px !important;
        min-height: 52px !important;
        border-bottom: 1px solid #e2e8f0 !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 #f1f5f9 !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: 8px !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 #f1f5f9 !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 #e2e8f0 !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: #1e293b !important;
    }
    
    .stock-bottom-grid .ds-btn--outline {
        min-height: 40px !important;
        padding: 0 14px !important;
        font-size: 0.8125rem !important;
        border-radius: 8px !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 #f1f5f9 !important;
    }
    
    .location-list-item:last-child {
        border-bottom: none !important;
    }
    
    .location-list-item:active {
        background: #f8fafc !important;
    }
    
    .location-list-item__main {
        width: 100% !important;
    }
    
    .location-list-item__name {
        font-size: 0.9375rem !important;
        font-weight: 600 !important;
        color: #1e293b !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: #64748b !important;
        margin-top: 2px !important;
    }
    
    .location-list-item__amount {
        font-size: 0.9375rem !important;
        font-weight: 600 !important;
        color: #1e293b !important;
    }
    
    .location-list-item__action {
        color: #94a3b8 !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: #f8fafc !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: 8px !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 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) {
    .container-fluid.py-4 {
        padding: 0.75rem !important;
    }
    
    .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: 8px;
    }
    
    .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: 0.5rem;
        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: 32px;
        min-height: 32px;
    }
    
    .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: 0.5rem 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: 0.5rem;
        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: 0.5rem 1rem;
    }
    
    .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: 32px;
        min-height: 36px;
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
        flex-shrink: 0;
        white-space: nowrap;
    }
    
    /* Legacy selector for backwards compatibility */
    .ds-alphabet-filter {
        margin: 0 -1rem 1rem;
        padding: 0.5rem 0.75rem;
        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: 32px;
        min-height: 32px;
        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: 0.5rem 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: 8px;
    }
    
    .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: 16px;
    }
    
    .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 #e5e7eb;
        background: white;
    }
    
    #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: #1e40af;
    }
    
    #customerMobileCards .ds-mobile-card__subtitle,
    .ds-desktop-hidden .ds-mobile-card__subtitle {
        font-size: 0.75rem;
        color: #6b7280;
        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: #f3f4f6;
        border-radius: 8px;
        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: #374151;
        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: #9ca3af;
        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: 8px !important;
    background: #1e40af !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: #1e3a8a !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: #f3f4f6 !important;
    border-radius: 8px !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: 0.75rem !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: 0.5rem 1rem;
    }
}

/* ========================================
   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: 0.75rem !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: 16px;
        padding: 0.5rem 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: 0.5rem;
        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: white !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: #6b7280 !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: #1e40af !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: #111827 !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: #1e40af;
    }
    
    .crm-detail-title span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    .crm-detail-status-badge {
        padding: 0.25rem 0.625rem;
        border-radius: 12px;
        font-size: 0.6875rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.025em;
        flex-shrink: 0;
    }
    
    .crm-status--success {
        background: #dcfce7;
        color: #166534;
        border: 1px solid #bbf7d0;
    }
    
    .crm-status--warning {
        background: #fef3c7;
        color: #92400e;
        border: 1px solid #fde68a;
    }
    
    .crm-status--info {
        background: #dbeafe;
        color: #1e40af;
        border: 1px solid #bfdbfe;
    }
    
    .crm-status--neutral {
        background: #f3f4f6;
        color: #4b5563;
        border: 1px solid #e5e7eb;
    }
    
    .crm-detail-subtitle {
        margin: 0.25rem 0 0 0 !important;
        padding-left: 0 !important;
        font-size: 0.8125rem !important;
        color: #6b7280 !important;
        display: flex;
        align-items: center;
        gap: 0.25rem;
        flex-wrap: wrap;
    }
    
    .crm-detail-subtitle i {
        font-size: 0.6875rem;
        color: #9ca3af;
    }
    
    .crm-detail-divider {
        margin: 0 0.25rem;
        color: #d1d5db;
    }
    
    .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: 8px;
        text-decoration: none;
        font-size: 1rem;
        transition: all 0.2s;
        border: 1px solid;
    }
    
    .crm-quick-action--call {
        background: #f0fdf4;
        border-color: #bbf7d0;
        color: #166534;
    }
    
    .crm-quick-action--call:hover,
    .crm-quick-action--call:active {
        background: #dcfce7;
        color: #166534;
    }
    
    .crm-quick-action--email {
        background: #eff6ff;
        border-color: #bfdbfe;
        color: #1e40af;
    }
    
    .crm-quick-action--email:hover,
    .crm-quick-action--email:active {
        background: #dbeafe;
        color: #1e40af;
    }
    
    .crm-quick-action--map {
        background: #fffbeb;
        border-color: #fde68a;
        color: #92400e;
    }
    
    .crm-quick-action--map:hover,
    .crm-quick-action--map:active {
        background: #fef3c7;
        color: #92400e;
    }
}

/* 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: #f9fafb;
        border-top: 1px solid #e5e7eb;
        border-bottom: 1px solid #e5e7eb;
    }
    
    .ds-project-tabs-mobile {
        padding: 0.5rem 1rem !important;
        margin: 0 !important;
        gap: 0.5rem !important;
    }
}

/* Full-Width Cards - Edge to Edge - Remove Double Container */
@media (max-width: 576px) {
    .ds-project-container {
        padding: 0 !important;
        margin: 0 !important;
        background: white !important;
    }
    
    .ds-project-content {
        padding: 0 !important;
        background: white !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: white !important;
    }
    
    .project-section {
        padding: 1rem !important;
        background: white !important;
        border-bottom: 1px solid #e5e7eb;
    }
    
    .project-section:last-child {
        border-bottom: none;
    }
    
    .project-section-title {
        font-size: 0.8125rem !important;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: #374151;
        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: #6b7280;
        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: 8px !important;
        border: 1px solid #d1d5db !important;
        background: white !important;
    }
    
    .project-form-grid input:focus,
    .project-form-grid select:focus,
    .project-form-grid textarea:focus {
        border-color: #3b82f6 !important;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
        outline: none !important;
    }
    
    /* Save button full width */
    .project-form-actions {
        padding: 1rem !important;
        margin: 0 !important;
        background: white !important;
        border-top: 1px solid #e5e7eb;
    }
    
    .project-form-actions .ds-btn {
        width: 100% !important;
        min-height: 48px !important;
        font-size: 0.9375rem !important;
        font-weight: 600 !important;
        border-radius: 8px !important;
        justify-content: center !important;
    }
    
    .project-form-actions .ds-btn--primary {
        background: #1e40af !important;
    }
    
    /* Divider styling */
    .ds-divider-container {
        margin: 0.75rem 0 !important;
        padding: 0 !important;
    }
    
    .ds-divider-gradient {
        height: 1px;
        background: #e5e7eb;
    }
    
    /* Tab content */
    .tab-content {
        background: white !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: 8px;
        border: 1px solid #d1d5db;
        background: white;
        color: #6b7280;
    }
    
    .ds-input-action-btn--primary {
        background: #1e40af;
        border-color: #1e40af;
        color: white;
    }
}


/* ========== 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: 0.75rem !important;
    }
}

/* Employee Cards - Edge to Edge */
@media (max-width: 576px) {
    #employeeMobileCards {
        display: flex;
        flex-direction: column;
        gap: 0;
        background: white;
    }
    
    .ds-mobile-card {
        background: white;
        padding: 1rem;
        border: none !important;
        border-radius: 0 !important;
        border-bottom: 1px solid #e5e7eb !important;
        border-left: 4px solid #9ca3af !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: #22c55e !important;
    }
    
    .ds-mobile-card[data-status="Inactive"],
    .ds-mobile-card:has(.ds-badge--neutral) {
        border-left-color: #9ca3af !important;
    }
    
    /* Card Header */
    .ds-mobile-card__header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 0.75rem;
        margin-bottom: 0.75rem;
    }
    
    .ds-mobile-card__title {
        font-size: 1rem;
        font-weight: 600;
        color: #111827;
        margin: 0;
        line-height: 1.3;
    }
    
    .ds-mobile-card__subtitle {
        font-size: 0.8125rem;
        color: #6b7280;
        margin-top: 0.125rem;
    }
    
    /* Status Badge */
    .ds-mobile-card .ds-badge {
        padding: 0.25rem 0.5rem;
        font-size: 0.6875rem;
        font-weight: 600;
        border-radius: 10px;
        flex-shrink: 0;
    }
    
    .ds-mobile-card .ds-badge--success {
        background: #dcfce7;
        color: #166534;
    }
    
    .ds-mobile-card .ds-badge--neutral {
        background: #f3f4f6;
        color: #6b7280;
    }
    
    /* Info Rows */
    .ds-mobile-card__info {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .ds-mobile-card__info-row {
        display: flex;
        align-items: center;
        gap: 0.625rem;
        font-size: 0.875rem;
        color: #374151;
        min-height: 28px;
    }
    
    .ds-mobile-card__icon {
        width: 1rem;
        color: #9ca3af;
        flex-shrink: 0;
        text-align: center;
    }
    
    .ds-mobile-card__info-row .ds-text-secondary {
        color: #6b7280;
    }
    
    /* Clickable Contact Links */
    .ds-mobile-card__info-row a {
        color: #1e40af;
        text-decoration: none;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        min-height: 44px;
        padding: 0.5rem 0;
        margin: -0.5rem 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: #059669;
    }
    
    /* Email link - blue accent */
    .ds-mobile-card__info-row a[href^="mailto:"] {
        color: #1e40af;
    }
}

/* Alphabet Filter Mobile - Full Width */
@media (max-width: 576px) {
    .alphabet-filter-container {
        padding: 0.75rem 1rem !important;
        margin: 0 !important;
        background: #f9fafb;
        border-bottom: 1px solid #e5e7eb;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .alphabet-filter {
        display: flex;
        gap: 0.25rem;
        min-width: max-content;
    }
    
    .alphabet-btn {
        min-width: 36px !important;
        min-height: 36px !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0.75rem !important;
        border-radius: 6px !important;
        background: white !important;
        border: 1px solid #e5e7eb !important;
        color: #374151 !important;
    }
    
    .alphabet-btn.active,
    .alphabet-btn:active {
        background: #1e40af !important;
        color: white !important;
        border-color: #1e40af !important;
    }
}

/* Filter Section - Full Width with Spacing */
@media (max-width: 576px) {
    .customer-filters-primary {
        flex-direction: column !important;
        gap: 0.75rem !important;
        padding: 1rem !important;
        margin: 0 !important;
        background: white;
        border-bottom: 1px solid #e5e7eb;
    }
    
    .customer-filters-primary input[type="text"],
    .customer-filters-primary select {
        width: 100% !important;
        min-height: 48px !important;
        font-size: 16px !important;
        padding: 0.75rem 1rem !important;
        border-radius: 8px !important;
        border: 1px solid #d1d5db !important;
        background: white !important;
    }
    
    .customer-filters-primary .ds-btn {
        width: 100% !important;
        min-height: 48px !important;
        justify-content: center !important;
        font-size: 0.9375rem !important;
        border-radius: 8px !important;
    }
    
    .customer-filters-primary .ds-btn--secondary {
        background: white !important;
        border: 1px solid #d1d5db !important;
        color: #374151 !important;
    }
}

/* Page Header Mobile - Clean White */
@media (max-width: 576px) {
    .ds-page-header {
        padding: 1rem !important;
        margin: 0 !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.75rem;
        background: white !important;
        border-bottom: 1px solid #e5e7eb;
    }
    
    .ds-page-header__title {
        font-size: 1.375rem !important;
        text-align: left;
        color: #111827 !important;
    }
    
    .ds-page-header__subtitle {
        text-align: left;
        font-size: 0.875rem !important;
        color: #6b7280 !important;
    }
    
    .ds-page-header__actions {
        width: 100%;
        display: flex;
        flex-direction: row;
        gap: 0.5rem;
        margin-top: 0.5rem;
    }
    
    .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: white !important;
        border-color: #d1d5db !important;
        color: #374151 !important;
    }
}

/* Pagination Mobile */
@media (max-width: 576px) {
    .container-fluid.ds-px-4.d-md-none .p-3.ds-border-top {
        padding: 1rem !important;
        background: #f9fafb;
        border-top: 1px solid #e5e7eb !important;
    }
    
    .container-fluid.ds-px-4.d-md-none .ds-btn {
        min-height: 48px !important;
        font-size: 0.9375rem !important;
    }
}

/* View Details Button - Full Width */
@media (max-width: 576px) {
    .ds-mobile-card__actions {
        margin-top: 0.75rem;
        padding-top: 0.75rem;
        border-top: 1px solid #f3f4f6;
    }
    
    .ds-mobile-card__actions .ds-btn {
        width: 100%;
        min-height: 44px;
        justify-content: center;
        background: #f3f4f6;
        color: #374151;
        border: none;
        border-radius: 8px;
        font-weight: 500;
    }
    
    .ds-mobile-card__actions .ds-btn:active {
        background: #e5e7eb;
    }
}


/* ========== 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: 80px !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: #f8fafc !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: white !important;
        border-top: 1px solid #e2e8f0 !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: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0.5rem 0.5rem env(safe-area-inset-bottom, 0.5rem) !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: 0.25rem !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: 64px !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: 0.25rem !important;
        padding: 0.5rem 0.5rem !important;
        min-height: 56px !important;
        min-width: 64px !important;
        font-size: 0.625rem !important;
        font-weight: 500 !important;
        color: #64748b !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: 1.25rem !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: 0.125rem !important;
    }
    
    body.workzone-route .settings-sidebar .settings-tab-link.active {
        color: #2563eb !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: 24px !important;
        height: 3px !important;
        background: #2563eb !important;
        border-radius: 0 0 3px 3px !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: linear-gradient(135deg, #1e3a8a 0%, #2563eb 50%, #3b82f6 100%) !important;
        padding: 2rem 1rem 1.75rem !important;
        margin: 0 !important;
        border-bottom: none !important;
        border-radius: 0 !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 1.25rem !important;
        color: white !important;
        box-shadow: 0 4px 20px rgba(30, 64, 175, 0.25) !important;
        position: relative !important;
        overflow: hidden !important;
    }
    
    /* Subtle pattern overlay on hero */
    body.workzone-route .ds-page-header::before {
        content: '' !important;
        position: absolute !important;
        top: 0 !important;
        right: -50px !important;
        width: 200px !important;
        height: 200px !important;
        background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%) !important;
        border-radius: 50% !important;
        pointer-events: 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: 1.5rem !important;
        font-weight: 700 !important;
        color: white !important;
        margin-bottom: 0.375rem !important;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
        text-align: center !important;
        -webkit-text-fill-color: white !important;
    }
    
    body.workzone-route .ds-page-header__subtitle {
        color: rgba(255, 255, 255, 0.9) !important;
        font-size: 0.9375rem !important;
        font-weight: 400 !important;
        text-align: center !important;
        -webkit-text-fill-color: rgba(255, 255, 255, 0.9) !important;
    }
    
    /* Action Buttons in Header - Polished */
    body.workzone-route .ds-page-header__actions {
        display: flex !important;
        flex-direction: row !important;
        gap: 0.75rem !important;
        width: 100% !important;
        position: relative !important;
        z-index: 1 !important;
    }
    
    body.workzone-route .ds-page-header__actions .ds-btn {
        flex: 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.5rem !important;
        min-height: 52px !important;
        font-size: 0.9375rem !important;
        font-weight: 600 !important;
        border-radius: 8px !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: white !important;
        color: #1e40af !important;
        -webkit-text-fill-color: #1e40af !important;
        border: none !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !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: #1e40af !important;
        -webkit-text-fill-color: #1e40af !important;
    }
    
    body.workzone-route .ds-page-header__actions .ds-btn--outline-primary {
        background: rgba(255, 255, 255, 0.2) !important;
        color: white !important;
        border: 2px solid rgba(255, 255, 255, 0.4) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
        backdrop-filter: blur(4px) !important;
        -webkit-backdrop-filter: blur(4px) !important;
    }
    
    body.workzone-route .ds-page-header__actions .ds-btn--outline-primary i {
        color: white !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: 0.5rem !important;
        padding: 1rem !important;
        background: transparent !important;
        border-bottom: none !important;
        scrollbar-width: none !important;
        margin-top: -10px !important;
    }
    
    body.workzone-route .workzone-tabs::-webkit-scrollbar {
        display: none !important;
    }
    
    body.workzone-route .workzone-tab {
        flex-shrink: 0 !important;
        padding: 0.625rem 1rem !important;
        min-height: 40px !important;
        font-size: 0.8125rem !important;
        font-weight: 600 !important;
        color: #64748b !important;
        background: white !important;
        border: none !important;
        border-radius: 8px !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: #1e40af !important;
        color: white !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: 0.75rem !important;
        padding: 0 1rem 1rem !important;
        margin-top: 0 !important;
    }
    
    /* Individual Stat Cards - Native App Style */
    body.workzone-route .workzone-card {
        background: white !important;
        border: none !important;
        border-radius: 12px !important;
        padding: 1rem !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: 120px !important;
        position: relative !important;
        overflow: hidden !important;
    }
    
    /* Card Color Accents - Add colored left border */
    body.workzone-route .workzone-card:nth-child(1) {
        border-left: 4px solid #2563eb !important;
    }
    body.workzone-route .workzone-card:nth-child(2) {
        border-left: 4px solid #8b5cf6 !important;
    }
    body.workzone-route .workzone-card:nth-child(3) {
        border-left: 4px solid #10b981 !important;
    }
    body.workzone-route .workzone-card:nth-child(4) {
        border-left: 4px solid #f59e0b !important;
    }
    body.workzone-route .workzone-card:nth-child(5) {
        border-left: 4px solid #ec4899 !important;
    }
    body.workzone-route .workzone-card:nth-child(6) {
        border-left: 4px solid #6366f1 !important;
    }
    
    body.workzone-route .workzone-card__header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: flex-start !important;
        margin-bottom: 0.5rem !important;
    }
    
    body.workzone-route .workzone-card__title {
        font-size: 0.6875rem !important;
        font-weight: 600 !important;
        color: #94a3b8 !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: 0.25rem !important;
    }
    
    body.workzone-route .workzone-stat__value {
        font-size: 1.5rem !important;
        font-weight: 700 !important;
        color: #0f172a !important;
        line-height: 1.2 !important;
    }
    
    body.workzone-route .workzone-stat__value--large {
        font-size: 1.25rem !important;
    }
    
    body.workzone-route .workzone-stat__label {
        font-size: 0.75rem !important;
        color: #64748b !important;
        margin-top: 0.125rem !important;
    }
    
    body.workzone-route .workzone-stat--secondary {
        margin-top: 0.5rem !important;
        padding-top: 0.5rem !important;
        border-top: 1px solid #f1f5f9 !important;
    }
    
    body.workzone-route .workzone-stat--secondary .workzone-stat__value {
        font-size: 1.125rem !important;
        color: #475569 !important;
    }
    
    body.workzone-route .workzone-stat-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.375rem !important;
        margin-top: 0.25rem !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: #64748b !important;
        font-size: 0.75rem !important;
    }
    
    body.workzone-route .workzone-stat-item__value {
        font-weight: 600 !important;
        color: #0f172a !important;
        font-size: 0.875rem !important;
    }
    
    /* ========================================
       PENDING REQUESTS & APPROVALS SECTION
       ======================================== */
    body.workzone-route .row.ds-mt-4 {
        margin-top: 0.5rem !important;
        padding: 0 1rem 1rem !important;
    }
    
    body.workzone-route .row.ds-mt-4 > [class*="col-"] {
        padding: 0 !important;
        margin-bottom: 0.75rem !important;
    }
    
    body.workzone-route .ds-card {
        border-radius: 12px !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: 1rem !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        background: #f8fafc !important;
        border-bottom: 1px solid #e2e8f0 !important;
    }
    
    body.workzone-route .ds-card__title {
        font-size: 0.9375rem !important;
        font-weight: 600 !important;
        color: #0f172a !important;
    }
    
    body.workzone-route .ds-card__body {
        padding: 1rem !important;
    }
    
    /* Empty States */
    body.workzone-route .ds-empty-state {
        padding: 1.5rem 1rem !important;
        text-align: center !important;
    }
    
    body.workzone-route .ds-empty-state__icon {
        font-size: 2rem !important;
        color: #cbd5e1 !important;
        margin-bottom: 0.75rem !important;
    }
    
    body.workzone-route .ds-empty-state__message {
        color: #64748b !important;
        font-size: 0.875rem !important;
    }
    
    body.workzone-route .ds-empty-state__message a {
        color: #2563eb !important;
        font-weight: 500 !important;
    }
    
    /* ========================================
       CALENDAR CONTAINER
       ======================================== */
    body.workzone-route #workzone-calendar-container {
        padding: 0.75rem !important;
        border: none !important;
        border-radius: 12px !important;
        min-height: 400px !important;
        margin: 0 1rem !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    }
    
    body.workzone-route #workzone-calendar-container .fc {
        height: 400px !important;
    }
    
    body.workzone-route #workzone-calendar-container .fc-toolbar-title {
        font-size: 1rem !important;
    }
    
    body.workzone-route #workzone-calendar-container .fc-toolbar {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }
    
    body.workzone-route #workzone-calendar-container .fc-button {
        padding: 0.5rem 0.75rem !important;
        font-size: 0.8125rem !important;
        border-radius: 8px !important;
    }
    
    /* ========================================
       TABLE STYLES
       ======================================== */
    body.workzone-route .table-responsive {
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 12px !important;
        overflow: hidden !important;
    }
    
    body.workzone-route .ds-table {
        font-size: 0.8125rem !important;
    }
    
    body.workzone-route .ds-table th,
    body.workzone-route .ds-table td {
        padding: 0.75rem 0.5rem !important;
        white-space: nowrap !important;
    }
    
    /* ========================================
       BUTTONS - Touch Friendly & Polished
       ======================================== */
    body.workzone-route .ds-btn {
        min-height: 48px !important;
        border-radius: 8px !important;
        font-weight: 600 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.5rem !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, #2563eb 0%, #1d4ed8 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: 0.5rem 1rem !important;
        font-size: 0.875rem !important;
        border-radius: 8px !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: 0.8125rem !important;
        padding: 0.5rem 1rem !important;
        min-height: 36px !important;
        border-radius: 8px !important;
        font-weight: 500 !important;
    }
    
    /* Large Action Buttons (like Create First Request) */
    body.workzone-route .ds-empty-state .ds-btn,
    body.workzone-route .ds-btn--lg {
        min-height: 52px !important;
        padding: 0.875rem 1.5rem !important;
        font-size: 1rem !important;
        font-weight: 600 !important;
        border-radius: 8px !important;
        box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25) !important;
    }
    
    /* ========================================
       PROJECT/MAIN CARDS
       ======================================== */
    body.workzone-route .project-main-card {
        background: white !important;
        border: none !important;
        border-radius: 12px !important;
        margin: 0 1rem !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    }
    
    body.workzone-route .project-section {
        padding: 1rem !important;
    }
    
    body.workzone-route .project-section-title {
        font-size: 1.125rem !important;
        color: #0f172a !important;
        font-weight: 600 !important;
    }
    
    /* ========================================
       TAB CONTENT AREAS
       ======================================== */
    body.workzone-route .workzone-tab-content .ds-card {
        margin: 0 1rem !important;
    }
    
    /* ========================================
       OUTLAYS CARDS - Native App Style
       ======================================== */
    
    /* Outlay Card Container */
    body.workzone-route .outlay-card.ds-card {
        background: white !important;
        border: none !important;
        border-radius: 12px !important;
        margin: 0 1rem 0.75rem !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: 1.25rem !important;
    }
    
    /* Stack layout on mobile */
    body.workzone-route .outlay-card .row {
        display: flex !important;
        flex-direction: column !important;
    }
    
    body.workzone-route .outlay-card .col-md-8,
    body.workzone-route .outlay-card .col-md-4 {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
    }
    
    body.workzone-route .outlay-card .col-md-4 {
        text-align: left !important;
        margin-top: 1rem !important;
        padding-top: 1rem !important;
        border-top: 1px solid #f1f5f9 !important;
    }
    
    /* Outlay Title */
    body.workzone-route .outlay-card .outlay-title {
        font-size: 1.25rem !important;
        font-weight: 700 !important;
        color: #0f172a !important;
        margin-bottom: 0.75rem !important;
    }
    
    /* Meta info row */
    body.workzone-route .outlay-card .outlay-meta {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 0.5rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    /* Category Badge */
    body.workzone-route .outlay-card .outlay-category {
        display: inline-flex !important;
        align-items: center !important;
        padding: 0.375rem 0.75rem !important;
        font-size: 0.75rem !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.03em !important;
        border-radius: 6px !important;
        background: #dbeafe !important;
        color: #1e40af !important;
    }
    
    /* Date info */
    body.workzone-route .outlay-card .outlay-date,
    body.workzone-route .outlay-card .outlay-timestamp {
        font-size: 0.8125rem !important;
        color: #64748b !important;
    }
    
    body.workzone-route .outlay-card .outlay-date i,
    body.workzone-route .outlay-card .outlay-timestamp i {
        color: #94a3b8 !important;
        margin-right: 0.25rem !important;
    }
    
    /* Description */
    body.workzone-route .outlay-card .outlay-description {
        font-size: 0.875rem !important;
        color: #64748b !important;
        margin: 0.5rem 0 0 !important;
        font-style: italic !important;
    }
    
    /* Amount - Large and Prominent */
    body.workzone-route .outlay-card .outlay-amount {
        font-size: 1.75rem !important;
        font-weight: 800 !important;
        color: #0f172a !important;
        margin-bottom: 0.75rem !important;
    }
    
    /* Status Badge */
    body.workzone-route .outlay-card .outlay-status-badge .badge {
        display: inline-flex !important;
        align-items: center !important;
        gap: 0.375rem !important;
        padding: 0.5rem 1rem !important;
        font-size: 0.8125rem !important;
        font-weight: 600 !important;
        border-radius: 6px !important;
    }
    
    body.workzone-route .outlay-card .badge.bg-warning {
        background: #fef3c7 !important;
        color: #b45309 !important;
    }
    
    body.workzone-route .outlay-card .badge.bg-success {
        background: #dcfce7 !important;
        color: #15803d !important;
    }
    
    body.workzone-route .outlay-card .badge.bg-danger {
        background: #fee2e2 !important;
        color: #b91c1c !important;
    }
    
    body.workzone-route .outlay-card .badge.bg-info {
        background: #dbeafe !important;
        color: #1e40af !important;
    }
    
    /* Action Buttons */
    body.workzone-route .outlay-card .outlay-actions {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
        margin-top: 1rem !important;
    }
    
    body.workzone-route .outlay-card .outlay-actions .ds-btn {
        flex: 1 1 auto !important;
        min-width: 100px !important;
        min-height: 44px !important;
        justify-content: center !important;
        border-radius: 8px !important;
        font-weight: 500 !important;
    }
    
    body.workzone-route .outlay-card .btn-view-receipt {
        background: #f1f5f9 !important;
        border: 1px solid #e2e8f0 !important;
        color: #475569 !important;
        -webkit-text-fill-color: #475569 !important;
    }
    
    body.workzone-route .outlay-card .btn-edit-outlay {
        background: #eff6ff !important;
        border: 1px solid #bfdbfe !important;
        color: #1d4ed8 !important;
        -webkit-text-fill-color: #1d4ed8 !important;
    }
    
    body.workzone-route .outlay-card .btn-delete-outlay {
        background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
        border: none !important;
        color: white !important;
        -webkit-text-fill-color: white !important;
    }
    
    /* Filter Section Card - Match card margins */
    body.workzone-route #outlays-container ~ .ds-card,
    body.workzone-route .ds-card.ds-mb-3:has(.btn-group),
    body.workzone-route .ds-card:first-of-type {
        margin: 0 1rem 0.75rem !important;
        border-radius: 12px !important;
        border: none !important;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
    }
    
    /* Filter Buttons */
    body.workzone-route .ds-card .btn-group[role="group"] {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
        border: none !important;
    }
    
    body.workzone-route .filter-status-btn {
        flex: 0 0 auto !important;
        padding: 0.5rem 1rem !important;
        font-size: 0.875rem !important;
        font-weight: 500 !important;
        color: #64748b !important;
        background: white !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 8px !important;
        transition: all 0.2s ease !important;
    }
    
    body.workzone-route .filter-status-btn.active {
        background: #1e40af !important;
        color: white !important;
        -webkit-text-fill-color: white !important;
        border-color: #1e40af !important;
    }
    
    /* Spacing between sections */
    body.workzone-route .ds-page-header {
        margin-bottom: 1rem !important;
    }
    
    body.workzone-route #outlays-container {
        margin-top: 0.5rem !important;
    }
    
    /* Hide floating action button on mobile - conflicts with bottom nav */
    body.workzone-route .fab-container,
    body.workzone-route #fabContainer {
        display: none !important;
    }
    
    /* ========================================
       MODAL RESPONSIVE STYLES
       ======================================== */
    body.workzone-route .modal-dialog {
        margin: 0 !important;
        max-width: 100% !important;
        height: 100% !important;
    }
    
    body.workzone-route .modal-content {
        height: 100% !important;
        border-radius: 0 !important;
        border: none !important;
    }
    
    body.workzone-route .modal-header {
        padding: 1rem !important;
        border-radius: 0 !important;
    }
    
    body.workzone-route .modal-header .modal-title {
        font-size: 1.25rem !important;
    }
    
    body.workzone-route .modal-header p {
        font-size: 0.8125rem !important;
    }
    
    body.workzone-route .modal-body {
        padding: 1rem !important;
        max-height: calc(100vh - 180px) !important;
        overflow-y: auto !important;
    }
    
    body.workzone-route .modal-footer {
        padding: 1rem !important;
        gap: 0.5rem !important;
    }
    
    body.workzone-route .modal-footer .ds-btn {
        flex: 1 !important;
        min-height: 48px !important;
    }
    
    /* Form Controls in Modal */
    body.workzone-route .modal .ds-form-input,
    body.workzone-route .modal .ds-form-textarea,
    body.workzone-route .modal .form-select,
    body.workzone-route .modal select {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 48px !important;
        font-size: 1rem !important;
        border-radius: 8px !important;
        box-sizing: border-box !important;
    }
    
    body.workzone-route .modal .ds-form-label {
        font-size: 0.875rem !important;
        font-weight: 600 !important;
        margin-bottom: 0.5rem !important;
    }
    
    /* Amount Input Group */
    body.workzone-route .modal .input-group {
        display: flex !important;
        flex-wrap: nowrap !important;
    }
    
    body.workzone-route .modal .input-group .ds-form-input {
        flex: 1 !important;
        min-width: 0 !important;
        border-top-right-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
    }
    
    body.workzone-route .modal .input-group .form-select {
        flex: 0 0 80px !important;
        max-width: 80px !important;
        border-top-left-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
    }
    
    /* Row layout in modal */
    body.workzone-route .modal .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    body.workzone-route .modal .row > [class*="col"] {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* Project dropdown - ensure text truncation */
    body.workzone-route .modal #project_id {
        text-overflow: ellipsis !important;
        overflow: hidden !important;
        white-space: nowrap !important;
    }
    
    body.workzone-route .modal #project_id option {
        white-space: normal !important;
        word-wrap: break-word !important;
        max-width: 100% !important;
    }
}

/* ========================================
   EXTRA SMALL SCREENS (< 480px)
   ======================================== */
@media (max-width: 480px) {
    body.workzone-route .workzone-stats-grid {
        grid-template-columns: 1fr !important;
        gap: 0.625rem !important;
    }
    
    body.workzone-route .workzone-card {
        min-height: auto !important;
        padding: 0.875rem !important;
    }
    
    body.workzone-route .workzone-stat__value {
        font-size: 1.375rem !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: 0.375rem 0.375rem !important;
        min-width: 56px !important;
    }
    
    body.workzone-route .settings-sidebar .settings-tab-link i {
        font-size: 1.125rem !important;
    }
    
    body.workzone-route .settings-sidebar .settings-nav li {
        min-width: 56px !important;
    }
}

/* ========================================
   FLOATING ACTION BUTTON (FAB)
   ======================================== */
@media (max-width: 768px) {
    body.workzone-route .workzone-fab {
        position: fixed !important;
        bottom: 90px !important;
        right: 1rem !important;
        z-index: 999 !important;
        width: 56px !important;
        height: 56px !important;
        border-radius: 50% !important;
        background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
        color: white !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: 1.5rem !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, #f8fafc);
    min-height: 100vh;
}

/* ========================================
   HEADER
   ======================================== */
.accounting-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1rem 1.5rem;
    background: white;
    border-bottom: 1px solid var(--color-border, #e2e8f0);
    flex-wrap: wrap;
    gap: 1rem;
}

.header-left {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-text-secondary, #64748b);
    text-decoration: none;
    font-size: 0.875rem;
    transition: color 0.2s;
}

.back-link:hover {
    color: var(--color-primary, #3b82f6);
}

.header-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-text-primary, #1e293b);
    margin: 0;
}

.header-right {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.header-info {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.info-label {
    font-size: 0.75rem;
    color: var(--color-text-tertiary, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.info-value {
    font-size: 0.875rem;
    color: var(--color-text-primary, #1e293b);
    font-weight: 500;
}

.info-value.amount {
    color: var(--color-primary, #3b82f6);
    font-weight: 600;
}

/* ========================================
   FORM SECTION
   ======================================== */
.accounting-form-section {
    padding: 1.5rem;
    background: white;
    border-bottom: 1px solid var(--color-border, #e2e8f0);
}

.form-container {
    max-width: 100%;
}

.form-section {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--color-border-light, #f1f5f9);
}

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

.section-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text-primary, #1e293b);
    margin: 0 0 1rem 0;
}

.form-row-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.field-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-text-secondary, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.form-input,
.form-select {
    width: 100%;
    padding: 0.625rem 0.875rem;
    font-size: 0.9375rem;
    color: var(--color-text-primary, #1e293b);
    background: white;
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 8px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-input:focus,
.form-select:focus {
    outline: none;
    border-color: var(--color-primary, #3b82f6);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* ========================================
   RADIO GROUP
   ======================================== */
.radio-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.radio-option {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.radio-option input[type="radio"] {
    width: 20px;
    height: 20px;
    margin-right: 0.75rem;
    cursor: pointer;
}

.radio-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.radio-text {
    font-size: 0.9375rem;
    color: var(--color-text-primary, #1e293b);
}

/* ========================================
   LINE ITEMS SECTION
   ======================================== */
.line-items-section {
    background: white;
    border-bottom: 1px solid var(--color-border, #e2e8f0);
}

.line-items-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--color-border-light, #f1f5f9);
}

.line-items-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text-primary, #1e293b);
}

.add-line-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-primary, #3b82f6);
    background: rgba(59, 130, 246, 0.1);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s;
}

.add-line-btn:hover {
    background: rgba(59, 130, 246, 0.15);
}

#lineItemsContainer {
    padding: 1rem 1.5rem;
}

.loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    color: var(--color-text-secondary, #64748b);
    text-align: center;
    gap: 0.5rem;
}

/* ========================================
   TAGS & DESCRIPTION
   ======================================== */
.tags-section {
    padding: 1.5rem;
    background: white;
    border-bottom: 1px solid var(--color-border, #e2e8f0);
}

.tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.tag-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    background: var(--color-surface-secondary, #f8fafc);
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 20px;
    color: var(--color-text-primary, #1e293b);
}

.tag-badge.active {
    background: var(--color-primary, #3b82f6);
    border-color: var(--color-primary, #3b82f6);
    color: white;
}

.notes-textarea {
    width: 100%;
    padding: 0.75rem;
    font-size: 0.9375rem;
    font-family: inherit;
    color: var(--color-text-primary, #1e293b);
    background: white;
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 8px;
    resize: vertical;
    min-height: 80px;
}

/* ========================================
   TOTALS SECTION
   ======================================== */
.totals-section {
    padding: 1rem 1.5rem;
    background: var(--color-surface-secondary, #f8fafc);
}

.totals-grid {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.total-row {
    display: flex;
    justify-content: space-between;
    color: var(--color-text-secondary, #64748b);
}

.total-row.grand-total {
    font-weight: 600;
    font-size: 1rem;
    color: var(--color-text-primary, #1e293b);
    padding-top: 0.5rem;
    margin-top: 0.5rem;
    border-top: 1px solid var(--color-border, #e2e8f0);
}

/* ========================================
   ACTION BUTTONS
   ======================================== */
.action-buttons {
    display: flex;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    background: white;
    border-top: 1px solid var(--color-border, #e2e8f0);
    position: sticky;
    bottom: 0;
    z-index: 100;
}

.btn-save-draft {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--color-text-primary, #1e293b);
    background: white;
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-save-draft:hover {
    background: var(--color-surface-secondary, #f8fafc);
}

.btn-approve {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex: 1;
    padding: 0.75rem 1.25rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: white;
    background: var(--color-success, #22c55e);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-approve:hover {
    background: #16a34a;
}

/* ========================================
   PDF VIEWER SECTION
   ======================================== */
.pdf-viewer-section {
    padding: 1rem;
    background: var(--color-surface-secondary, #f8fafc);
}

/* Hide mobile toggle button on desktop */
.pdf-toggle-btn {
    display: none;
}

.pdf-viewer-container {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.pdf-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: #1f2937;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.pdf-navigation {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pdf-nav-btn {
    padding: 0.5rem 0.75rem;
    background: #374151;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.875rem;
    transition: background 0.2s;
}

.pdf-nav-btn:hover {
    background: #4b5563;
}

.page-indicator,
.pdf-page-info {
    color: #e5e7eb;
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0 0.5rem;
}

.pdf-canvas-wrapper {
    background: #6b7280;
    min-height: 400px;
    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: 3rem;
    color: var(--color-text-tertiary, #94a3b8);
    text-align: center;
    gap: 0.75rem;
}

.no-pdf-message i {
    font-size: 2.5rem;
}

/* ========================================
   MOBILE RESPONSIVE - COMPLETE REDESIGN
   Native app-like experience
   ======================================== */
@media (max-width: 768px) {
    /* ========================================
       MOBILE SHELL - Single scroll document
       ======================================== */
    .invoice-accounting-container {
        background: #f8fafc;
        min-height: 100vh;
        padding-bottom: 100px; /* Space for sticky action bar */
    }
    
    /* ========================================
       HEADER - Stacked summary card
       ======================================== */
    .accounting-header {
        background: white;
        padding: 0;
        margin: 0;
        border-bottom: none;
        flex-direction: column;
        gap: 0;
    }
    
    .header-left {
        padding: 16px;
        border-bottom: 1px solid #e2e8f0;
    }
    
    .back-link {
        font-size: 0.875rem;
        padding: 8px 0;
        min-height: 44px;
        display: flex;
        align-items: center;
    }
    
    .header-title {
        font-size: 1.125rem;
        font-weight: 600;
        line-height: 1.3;
        margin-top: 4px;
    }
    
    .header-right {
        width: 100%;
        padding: 16px;
        background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
    
    .header-info {
        background: white;
        padding: 12px 14px;
        border-radius: 10px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    }
    
    .header-info:first-child {
        grid-column: 1 / -1;
    }
    
    .info-label {
        font-size: 0.6875rem;
        color: #64748b;
        margin-bottom: 4px;
    }
    
    .info-value {
        font-size: 0.9375rem;
        font-weight: 600;
        color: #1e293b;
    }
    
    .info-value.amount {
        font-size: 1.125rem;
        color: #2563eb;
    }
    
    /* ========================================
       MOBILE SECTIONS - Edge-to-edge cards
       ======================================== */
    .accounting-form-section,
    .line-items-section,
    .tags-section,
    .pdf-viewer-section {
        background: white;
        margin: 0;
        padding: 0;
        border-radius: 0;
        border-bottom: 8px solid #f1f5f9;
    }
    
    .form-section {
        padding: 16px;
        margin: 0;
        border-bottom: 1px solid #f1f5f9;
    }
    
    .form-section:last-child {
        border-bottom: none;
    }
    
    .section-title {
        font-size: 0.9375rem;
        font-weight: 600;
        color: #1e293b;
        margin-bottom: 16px;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    
    .section-title i {
        color: #3b82f6;
    }
    
    /* ========================================
       FORM FIELDS - Full width, touch-friendly
       ======================================== */
    .form-row-2 {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .form-field {
        gap: 8px;
    }
    
    .field-label {
        font-size: 0.75rem;
        font-weight: 600;
        color: #475569;
        text-transform: uppercase;
        letter-spacing: 0.03em;
    }
    
    .form-input,
    .form-select {
        width: 100%;
        height: 52px;
        padding: 14px 16px;
        font-size: 1rem;
        color: #1e293b;
        background: #f8fafc;
        border: 2px solid #e2e8f0;
        border-radius: 12px;
        transition: all 0.2s;
        -webkit-appearance: none;
    }
    
    .form-input:focus,
    .form-select:focus {
        background: white;
        border-color: #3b82f6;
        box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
    }
    
    .form-input::placeholder {
        color: #94a3b8;
    }
    
    /* 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 14px center;
        background-size: 20px;
        padding-right: 44px;
    }
    
    /* Auto-fill checkbox */
    .form-field label[style*="cursor: pointer"] {
        min-height: 48px;
        padding: 12px 16px;
        background: #f0fdf4;
        border: 1px solid #bbf7d0;
        border-radius: 12px;
        display: flex !important;
        align-items: center;
    }
    
    .form-field label input[type="checkbox"] {
        width: 22px !important;
        height: 22px !important;
        margin-right: 12px !important;
    }
    
    /* ========================================
       PAYMENT STATUS - Large segmented buttons
       ======================================== */
    .radio-group {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    
    .radio-option {
        display: flex;
        align-items: center;
        min-height: 56px;
        padding: 14px 16px;
        background: #f8fafc;
        border: 2px solid #e2e8f0;
        border-radius: 12px;
        cursor: pointer;
        transition: all 0.2s;
    }
    
    .radio-option:has(input:checked),
    .radio-option.is-checked {
        background: #eff6ff;
        border-color: #3b82f6;
    }
    
    .radio-option input[type="radio"] {
        width: 24px;
        height: 24px;
        margin-right: 14px;
        accent-color: #3b82f6;
    }
    
    .radio-text {
        font-size: 0.9375rem;
        font-weight: 500;
        color: #1e293b;
    }
    
    /* ========================================
       LINE ITEMS - Card-based layout
       ======================================== */
    .line-items-section {
        background: white;
    }
    
    .line-items-header {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 16px;
        background: #f8fafc;
        border-bottom: 1px solid #e2e8f0;
        gap: 12px;
    }
    
    .line-items-title {
        font-size: 0.9375rem;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    
    .line-items-title i {
        color: #3b82f6;
    }
    
    .add-line-btn {
        min-height: 44px;
        padding: 10px 16px;
        font-size: 0.875rem;
        font-weight: 600;
        background: #3b82f6;
        color: white;
        border-radius: 10px;
    }
    
    .add-line-btn:hover {
        background: #2563eb;
    }
    
    #lineItemsContainer {
        padding: 16px;
    }
    
    /* Line item cards */
    .line-item-card,
    #lineItemsContainer > div {
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        padding: 16px;
        margin-bottom: 12px;
    }
    
    .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: 48px;
        padding: 12px 14px;
        font-size: 0.9375rem;
        border: 2px solid #e2e8f0;
        border-radius: 10px;
        background: white;
        margin-bottom: 12px;
    }
    
    .line-item-card input:focus,
    .line-item-card select:focus,
    #lineItemsContainer input:focus,
    #lineItemsContainer select:focus {
        border-color: #3b82f6;
        outline: none;
    }
    
    .line-item-card button,
    #lineItemsContainer button {
        min-height: 44px;
        min-width: 44px;
        border-radius: 10px;
    }
    
    /* Loading state */
    .loading-state {
        padding: 32px 16px;
        text-align: center;
    }
    
    .loading-state i {
        font-size: 2rem;
        color: #3b82f6;
        margin-bottom: 12px;
    }
    
    /* ========================================
       TAGS & DESCRIPTION
       ======================================== */
    .tags-section {
        padding: 16px;
    }
    
    .tags-section h3 {
        font-size: 0.9375rem;
        font-weight: 600;
        color: #1e293b;
        margin-bottom: 16px;
    }
    
    .tags-container {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-bottom: 16px;
    }
    
    .tag-badge {
        min-height: 44px;
        padding: 10px 16px;
        font-size: 0.875rem;
        font-weight: 500;
        background: #f1f5f9;
        border: 2px solid #e2e8f0;
        border-radius: 22px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
        transition: all 0.2s;
    }
    
    .tag-badge:active,
    .tag-badge.active {
        background: #3b82f6;
        border-color: #3b82f6;
        color: white;
    }
    
    .notes-textarea {
        width: 100%;
        min-height: 100px;
        padding: 14px 16px;
        font-size: 0.9375rem;
        border: 2px solid #e2e8f0;
        border-radius: 12px;
        background: #f8fafc;
        resize: vertical;
    }
    
    .notes-textarea:focus {
        background: white;
        border-color: #3b82f6;
        outline: none;
    }
    
    /* ========================================
       TOTALS SECTION
       ======================================== */
    .totals-section {
        padding: 16px;
        background: #f8fafc;
        border-top: 1px solid #e2e8f0;
    }
    
    .totals-grid {
        gap: 8px;
    }
    
    .total-row {
        display: flex;
        justify-content: space-between;
        padding: 8px 0;
        font-size: 0.9375rem;
    }
    
    .total-row.grand-total {
        font-size: 1.125rem;
        font-weight: 700;
        color: #1e293b;
        padding-top: 12px;
        margin-top: 8px;
        border-top: 2px solid #e2e8f0;
    }
    
    /* ========================================
       PDF VIEWER - Collapsible section
       ======================================== */
    .pdf-viewer-section {
        padding: 0;
        border-bottom: none;
    }
    
    .pdf-toggle-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: 100%;
        min-height: 56px;
        padding: 16px 20px;
        font-size: 1rem;
        font-weight: 600;
        color: #3b82f6;
        background: #eff6ff;
        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: 12px 16px;
        justify-content: center;
        gap: 10px;
        position: sticky;
        top: 0;
        z-index: 10;
        flex-wrap: wrap;
    }
    
    .pdf-nav-btn {
        min-height: 48px;
        min-width: 48px;
        padding: 12px 16px;
        border-radius: 10px;
        font-size: 0.9375rem;
    }
    
    .pdf-page-info {
        min-height: 48px;
        display: flex;
        align-items: center;
        padding: 0 12px;
        font-size: 0.9375rem;
    }
    
    .pdf-canvas-wrapper {
        min-height: 300px;
        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: 12px;
        padding: 16px;
        padding-bottom: calc(16px + env(safe-area-inset-bottom, 0));
        background: white;
        border-top: 1px solid #e2e8f0;
        box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);
        z-index: 1000;
    }
    
    .btn-save-draft {
        flex: 0 0 auto;
        min-height: 52px;
        padding: 14px 20px;
        font-size: 0.9375rem;
        font-weight: 600;
        color: #475569;
        background: #f1f5f9;
        border: none;
        border-radius: 12px;
    }
    
    .btn-save-draft:active {
        background: #e2e8f0;
    }
    
    .btn-approve {
        flex: 1;
        min-height: 52px;
        padding: 14px 20px;
        font-size: 1rem;
        font-weight: 600;
        color: white;
        background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
        border: none;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
    }
    
    .btn-approve:active {
        transform: scale(0.98);
    }
    
    /* ========================================
       UTILITY CLASSES
       ======================================== */
    .mobile-hidden {
        display: none !important;
    }
    
    .mobile-section-divider {
        height: 8px;
        background: #f1f5f9;
        margin: 0;
        border: none;
    }
}


/* ========== responsive/mobile-cards.css ========== */
    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);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: var(--mobile-spacing-md);
    margin-bottom: var(--mobile-spacing-md);
    margin-top: 8px;
    transition: box-shadow 0.2s ease;
    overflow: visible;
    width: 100%;
    box-sizing: border-box;
}

.mobile-card:active {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

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

.mobile-card__title {
    font-weight: 600;
    font-size: 1rem;
    margin: 0;
    color: var(--color-text-primary);
}

.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: var(--mobile-spacing-sm);
    margin: var(--mobile-spacing-sm) 0;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

.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: 8px;
    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: 8px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    color: var(--color-text-secondary);
    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: white;
    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 ========== */
        gap: var(--mobile-spacing-lg);
    }
}

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

/* 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: 16px 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: 4px;
    background: var(--color-border);
    border-radius: 2px;
    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;


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


/* ========== 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,
.ds-btn--secondary i {
    color: #ffffff !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: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

.btn-secondary,
button.btn-secondary,
.btn.btn-secondary {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !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: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* ========================================
   CRITICAL FIX: ACTIVE BUTTON TEXT COLOR
   Ensure all active buttons have white text on dark backgrounds
   Using hardcoded #ffffff 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: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background-color: var(--color-primary) !important;
}

/* Bootstrap General Button Active States */
.btn.active,
.btn:active,
.btn.show {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !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: #ffffff !important;
    -webkit-text-fill-color: #ffffff !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: #ffffff !important;
    -webkit-text-fill-color: #ffffff !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: #ffffff !important;
    -webkit-text-fill-color: #ffffff !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;
}
/**
 * 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 immediately AFTER bootstrap-custom.css in base.html
 */

/* ========================================
   BOOTSTRAP CSS VARIABLE BRIDGE
   Map Bootstrap's internal CSS variables to our design tokens
   This ensures Bootstrap components respect light/dark themes
   ======================================== */

:root {
    /* 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);


/* ========== fixes/theme-misc.css ========== */
    --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: #ffffff !important;
    --bs-btn-active-color: #ffffff !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
   ======================================== */

.dropdown-menu {
    background-color: var(--color-surface);
    border-color: var(--color-border);
}

.dropdown-item {
    color: var(--color-text-primary);
}

.dropdown-item i,
.dropdown-item svg {
    color: var(--color-text-secondary);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--color-hover);
    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);
    color: var(--color-text-inverse);
}

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

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