/* Custom CSS for TaskFlow - Todoist-inspired Design */

/* Light Theme (Default) */
:root {
    /* Color Palette */
    --primary-blue: #4A90E2;
    --secondary-mint: #50E3C2;
    --background-off-white: #FAFAFA;
    --text-dark-grey: #333333;
    --success-green: #7ED321;
    --neutral-light-grey: #E5E5E5;
    --white: #FFFFFF;
    
    /* Additional Colors */
    --overdue-red: #E74C3C;
    --due-today-orange: #F39C12;
    --completed-grey: #95A5A6;
    
    /* Theme Colors */
    --bg-primary: #FAFAFA;
    --bg-secondary: #FFFFFF;
    --bg-tertiary: #F8F9FA;
    --text-primary: #333333;
    --text-secondary: #6C757D;
    --text-muted: #8E8E93;
    --border-color: #E5E5E5;
    --card-bg: #FFFFFF;
    --nav-bg: var(--primary-blue);
    --nav-text: #FFFFFF;
    
    /* Spacing */
    --base-padding: 16px;
    --border-radius: 8px;
    --shadow-subtle: 0 2px 4px rgba(0, 0, 0, 0.05);
    --shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Dark Theme */
[data-theme="dark"] {
    /* Color Palette - Dark Theme */
    --primary-blue: #5B9BD5;
    --secondary-mint: #5ED5C7;
    --background-off-white: #1A1A1A;
    --text-dark-grey: #E5E5E5;
    --success-green: #8FE655;
    --neutral-light-grey: #404040;
    --white: #2D2D2D;
    
    /* Additional Colors - Dark Theme */
    --overdue-red: #FF6B6B;
    --due-today-orange: #FFB347;
    --completed-grey: #A8B2B8;
    
    /* Theme Colors - Dark Theme */
    --bg-primary: #1A1A1A;
    --bg-secondary: #2D2D2D;
    --bg-tertiary: #252525;
    --text-primary: #E5E5E5;
    --text-secondary: #B8B8B8;
    --text-muted: #8A8A8A;
    --border-color: #404040;
    --card-bg: #2D2D2D;
    --nav-bg: #2D2D2D;
    --nav-text: #E5E5E5;
    
    /* Dark theme shadows */
    --shadow-subtle: 0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* Base Styles */
* {
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    margin: 0;
    padding: 0;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Header Styles */
.app-header {
    background: linear-gradient(135deg, var(--primary-blue), var(--secondary-mint));
    color: var(--white);
    padding: calc(var(--base-padding) * 2) 0;
    box-shadow: var(--shadow-medium);
    margin-bottom: calc(var(--base-padding) * 2);
}

/* Navbar Theme Support */
.navbar {
    background-color: var(--nav-bg) !important;
    transition: background-color 0.3s ease;
}

.navbar .navbar-brand,
.navbar .nav-link {
    color: var(--nav-text) !important;
    transition: color 0.3s ease;
}

.navbar .nav-link:hover,
.navbar .nav-link.active {
    color: var(--secondary-mint) !important;
}

/* Dropdown Menu Theme Support */
.dropdown-menu {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-medium);
    transition: all 0.3s ease;
}

.dropdown-item {
    color: var(--text-primary);
    transition: color 0.3s ease;
}

/* Filter Container Base Styling */
.filter-container {
    background: var(--bs-light);
    border-radius: 0.375rem;
    padding: 0.75rem;
    margin-bottom: 1rem;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-subtle);
    transition: all 0.3s ease;
}

.filter-container .dropdown-toggle {
    background-color: var(--card-bg);
    border-color: var(--border-color);
    color: var(--text-primary);
    transition: all 0.3s ease;
}

.filter-container .dropdown-toggle:hover {
    background-color: var(--neutral-bg);
    border-color: var(--primary-blue);
}

.filter-container .btn-primary {
    background-color: var(--primary-blue);
    border-color: var(--primary-blue);
}

.filter-container .btn-outline-secondary {
    border-color: var(--border-color);
    color: var(--text-secondary);
}

.filter-container .btn-outline-secondary:hover {
    background-color: var(--neutral-bg);
    border-color: var(--text-secondary);
}

/* Dark Theme Support for Filters */
[data-theme="dark"] .filter-container {
    background: var(--bg-secondary);
    border-color: var(--neutral-light-grey);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .filter-container .dropdown-toggle {
    background-color: var(--bg-tertiary);
    border-color: var(--neutral-light-grey);
    color: var(--text-primary);
}

[data-theme="dark"] .filter-container .dropdown-toggle:hover {
    background-color: var(--bg-primary);
    border-color: var(--secondary-mint);
}

[data-theme="dark"] .filter-container .btn-primary {
    background-color: var(--secondary-mint);
    border-color: var(--secondary-mint);
    color: var(--bg-primary);
}

[data-theme="dark"] .filter-container .btn-outline-secondary {
    border-color: var(--neutral-light-grey);
    color: var(--text-secondary);
}

[data-theme="dark"] .filter-container .btn-outline-secondary:hover {
    background-color: var(--bg-tertiary);
    border-color: var(--text-secondary);
    color: var(--text-primary);
}

/* Dark Theme Support for Filter Dropdown Menus */
[data-theme="dark"] .filter-container .dropdown-menu {
    background-color: var(--bg-secondary);
    border-color: var(--neutral-light-grey);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .filter-container .dropdown-item {
    color: var(--text-primary);
}

[data-theme="dark"] .filter-container .dropdown-item:hover {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

[data-theme="dark"] .filter-container .form-check-label {
    color: var(--text-primary);
}

[data-theme="dark"] .filter-container .form-check-input {
    background-color: var(--bg-tertiary);
    border-color: var(--neutral-light-grey);
}

[data-theme="dark"] .filter-container .form-check-input:checked {
    background-color: var(--secondary-mint);
    border-color: var(--secondary-mint);
}

[data-theme="dark"] .filter-container .form-check-input:focus {
    border-color: var(--secondary-mint);
    box-shadow: 0 0 0 0.25rem rgba(94, 213, 199, 0.25);
}

/* Dark Theme Support for Hierarchical Category Filter */
[data-theme="dark"] #hierarchicalCategoryFilter .dropdown-toggle,
[data-theme="dark"] #boardHierarchicalCategoryFilter .dropdown-toggle {
    background-color: var(--bg-tertiary);
    border-color: var(--neutral-light-grey);
    color: var(--text-primary);
}

[data-theme="dark"] #hierarchicalCategoryFilter .dropdown-menu,
[data-theme="dark"] #boardHierarchicalCategoryFilter .dropdown-menu {
    background-color: var(--bg-secondary);
    border-color: var(--neutral-light-grey);
}

[data-theme="dark"] #hierarchicalCategoryFilter .category-item,
[data-theme="dark"] #boardHierarchicalCategoryFilter .category-item {
    color: var(--text-primary);
}

[data-theme="dark"] #hierarchicalCategoryFilter .category-item:hover,
[data-theme="dark"] #boardHierarchicalCategoryFilter .category-item:hover {
    background-color: var(--bg-tertiary);
}

/* Dark Theme Support for Filter Text Elements */
[data-theme="dark"] .filter-container .text-muted {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .filter-container .small {
    color: var(--text-secondary);
}

/* Ensure filter buttons are properly themed */
[data-theme="dark"] .filter-container .feather-xs,
[data-theme="dark"] .filter-container .feather-sm {
    color: currentColor;
}

/* Mobile Theme Toggle in Bottom Navigation */
#mobileThemeToggle {
    border: none;
    background: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

#mobileThemeToggle:hover,
#mobileThemeToggle:focus {
    color: var(--primary-blue);
    background: rgba(74, 144, 226, 0.1);
    outline: none;
}

#mobileThemeToggle .nav-icon {
    transition: all 0.3s ease;
}

/* Dark theme support for mobile theme toggle */
[data-theme="dark"] #mobileThemeToggle:hover,
[data-theme="dark"] #mobileThemeToggle:focus {
    color: var(--secondary-mint);
    background: rgba(94, 213, 199, 0.15);
}

/* Ensure theme icons are properly sized */
#mobileThemeToggle .theme-icon-light,
#mobileThemeToggle .theme-icon-dark {
    display: block;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Smooth icon transition animation */
#mobileThemeToggle.switching .nav-icon {
    transform: rotate(180deg);
}

/* Mobile specific adjustments for 5-item bottom nav */
@media (max-width: 768px) {
    .bottom-nav-content {
        max-width: 600px; /* Slightly wider to accommodate 5 items */
    }
    
    .bottom-nav-item {
        min-width: 70px; /* Increased for better touch targets */
        padding: 0.75rem 0.5rem;
        min-height: 56px; /* Larger touch target for mobile */
    }
    
    .bottom-nav-item .nav-label {
        font-size: 0.75rem; /* Larger for better readability */
    }
    
    .bottom-nav-item .nav-icon {
        width: 24px;
        height: 24px;
    }
}

@media (max-width: 576px) {
    .bottom-nav-item {
        min-width: 60px; /* Still accessible on small screens */
        padding: 0.625rem 0.4rem;
        min-height: 50px; /* Maintain good touch target */
    }
    
    .bottom-nav-item .nav-label {
        font-size: 0.7rem; /* Readable but compact */
    }
    
    .bottom-nav-item .nav-icon {
        width: 22px;
        height: 22px;
        margin-bottom: 0.25rem;
    }
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

.dropdown-header {
    color: var(--text-secondary);
}

.dropdown-divider {
    border-color: var(--border-color);
}

/* Breadcrumb Theme Support */
.breadcrumb {
    background-color: var(--bg-tertiary);
    transition: background-color 0.3s ease;
}

.breadcrumb-item a {
    color: var(--text-secondary);
    transition: color 0.3s ease;
}

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

.app-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
}

.app-subtitle {
    font-size: 1.1rem;
    font-weight: 300;
    margin: 0;
    opacity: 0.9;
}

/* Main Content */
.app-main {
    min-height: calc(100vh - 200px);
}

/* Task Form Styles */
.task-form-container {
    background: var(--card-bg);
    border-radius: var(--border-radius);
    padding: calc(var(--base-padding) * 1.5);
    margin-bottom: calc(var(--base-padding) * 2);
    box-shadow: var(--shadow-subtle);
    border: 1px solid var(--border-color);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.task-form .form-label {
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.task-form .form-control {
    background-color: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: 6px;
    padding: 12px var(--base-padding);
    font-size: 0.95rem;
    color: var(--text-primary);
    transition: all 0.2s ease;
}

.task-form .form-control:focus {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 0.2rem rgba(74, 144, 226, 0.15);
}

.btn-primary {
    background-color: var(--primary-blue);
    border-color: var(--primary-blue);
    font-weight: 500;
    padding: 12px calc(var(--base-padding) * 1.5);
    border-radius: 6px;
    transition: all 0.2s ease;
}

.btn-primary:hover {
    background-color: #3A80D2;
    border-color: #3A80D2;
    transform: translateY(-1px);
}

/* Task Section Styles */
.task-section {
    background: var(--white);
    border-radius: var(--border-radius);
    margin-bottom: calc(var(--base-padding) * 1.5);
    box-shadow: var(--shadow-subtle);
    border: 1px solid var(--neutral-light-grey);
    overflow: hidden;
}

.section-header {
    padding: calc(var(--base-padding) * 1.25) calc(var(--base-padding) * 1.5);
    background: linear-gradient(90deg, #F8F9FA, #FFFFFF);
    border-bottom: 1px solid var(--neutral-light-grey);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.section-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
    color: var(--text-dark-grey);
    display: flex;
    align-items: center;
}

/* Modern section title for consistency */
.modern-section-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
    color: var(--text-dark-grey);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.task-count {
    background: var(--primary-blue);
    color: var(--white);
    font-size: 0.8rem;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 12px;
    margin-left: 12px;
}

/* Task Item Styles */
.task-list {
    padding: 0;
}

.task-item {
    border-bottom: 1px solid var(--neutral-light-grey);
    transition: all 0.2s ease;
}

.task-item:last-child {
    border-bottom: none;
}

.task-item:hover {
    background-color: #F8F9FA;
}

.task-content {
    display: flex;
    align-items: flex-start;
    padding: 8px;
    gap: 8px;
}

.task-checkbox {
    flex-shrink: 0;
    margin-top: 1px;
}

.checkbox-btn {
    width: 26px;
    height: 26px;
    padding: 0;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--neutral-light-grey);
    background: var(--white);
    transition: all 0.2s ease;
}

.checkbox-btn:hover {
    border-color: var(--primary-blue);
    background-color: rgba(74, 144, 226, 0.05);
}

.task-item.completed .checkbox-btn {
    background-color: var(--success-green);
    border-color: var(--success-green);
    color: var(--white);
}

/* Enhanced button states for better UX */
.checkbox-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.task-details {
    flex: 1;
    min-width: 0;
}

.task-description {
    font-size: 0.95rem;
    font-weight: 400;
    color: var(--text-dark-grey);
    line-height: 1.4;
    word-wrap: break-word;
}

.task-item.completed .task-description {
    text-decoration: line-through;
    color: var(--completed-grey);
}

.task-meta {
    margin-top: 3px;
    font-size: 0.8rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    align-items: flex-start;
}

/* Universal Badge Text Wrapping */
.task-meta .badge,
.task-category,
.task-status,
.task-priority {
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    line-height: 1.3;
    max-width: 100%;
    flex-shrink: 1;
    min-width: 0;
}

/* Ensure task meta items don't break layout */
.task-meta > * {
    flex-shrink: 1;
    min-width: 0;
}

/* Handle very long category names gracefully */
.task-category {
    min-width: fit-content;
    flex-basis: auto;
}

/* Responsive badge sizing for different screen sizes */
@media (max-width: 576px) {
    .task-meta .badge {
        font-size: 0.6rem;
        padding: 0.2rem 0.4rem;
        line-height: 1.2;
    }
    
    .task-category {
        font-size: 0.6rem;
        padding: 0.2rem 0.4rem;
        line-height: 1.2;
    }
}

/* Ensure proper text wrapping for task descriptions */
.task-description {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    line-height: 1.4;
}

/* Improved spacing between task elements */
.task-item .task-details {
    min-width: 0;
    flex: 1;
    overflow: hidden;
}

.task-item .task-meta {
    margin-top: 0.5rem;
}

.due-date {
    color: var(--primary-blue);
    font-weight: 500;
}

.due-date.overdue {
    color: var(--overdue-red);
}

.due-date.due-today {
    color: var(--due-today-orange);
}

.completed-date {
    color: var(--completed-grey);
}

.task-actions {
    flex-shrink: 0;
    display: flex;
    gap: 2px;
    align-items: center;
}

.task-actions .btn {
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.task-actions .btn:hover {
    transform: translateY(-1px);
}

.task-actions .btn-outline-primary:hover {
    background-color: var(--primary-blue);
    border-color: var(--primary-blue);
    color: var(--white);
}

/* Task Category Styling */
.task-category {
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 8px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    line-height: 1.3;
}

/* Legacy rule for bg-secondary - no longer used since we use dynamic colors
.task-category.badge.bg-secondary {
    background-color: var(--primary-blue) !important;
    color: var(--white);
}
*/

/* Category colors are now dynamically applied via inline styles from database
   The following hardcoded rules have been commented out to allow database colors to take precedence */
/* 
.task-category[data-category="Work"] { background-color: #E74C3C !important; }
.task-category[data-category="Personal"] { background-color: var(--success-green) !important; }
.task-category[data-category="Health"] { background-color: #E67E22 !important; }
.task-category[data-category="Finance"] { background-color: #9B59B6 !important; }
.task-category[data-category="Education"] { background-color: #3498DB !important; }
.task-category[data-category="Shopping"] { background-color: #F39C12 !important; }
.task-category[data-category="Travel"] { background-color: #1ABC9C !important; }
.task-category[data-category="General"] { background-color: var(--completed-grey) !important; }
*/

/* Filter and Sort Container Styles */
.filter-sort-container {
    background: var(--card-bg);
    border-radius: var(--border-radius);
    padding: 0.5rem;
    margin-bottom: calc(var(--base-padding) * 1.5);
    box-shadow: var(--shadow-subtle);
    border: 1px solid var(--border-color);
}

.form-select-sm {
    border: 2px solid var(--neutral-light-grey);
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    background-color: var(--white);
}

.form-select-sm:focus {
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 0.2rem rgba(74, 144, 226, 0.15);
}

.form-select-sm:hover {
    border-color: var(--primary-blue);
}

.form-label {
    font-weight: 500;
    color: var(--text-dark-grey);
    margin-bottom: 6px;
    font-size: 0.9rem;
}

.active-filters {
    padding-top: var(--base-padding);
    border-top: 1px solid var(--neutral-light-grey);
}

.active-filters .badge {
    font-size: 0.75rem;
    padding: 6px 10px;
    border-radius: 12px;
}

.btn-success {
    background-color: var(--success-green);
    border-color: var(--success-green);
    font-weight: 500;
    transition: all 0.2s ease;
}

.btn-success:hover {
    background-color: #6AC91A;
    border-color: #6AC91A;
    transform: translateY(-1px);
}

.btn-info {
    background-color: #17A2B8;
    border-color: #17A2B8;
    color: var(--white);
    font-weight: 500;
    transition: all 0.2s ease;
}

.btn-info:hover {
    background-color: #138496;
    border-color: #117A8B;
    transform: translateY(-1px);
    color: var(--white);
}

.d-flex.gap-1 {
    gap: 4px;
}

/* Completed Section */
.completed-section .section-header {
    background: linear-gradient(90deg, #F0F8F0, #FFFFFF);
}

.completed-section .task-count {
    background: var(--success-green);
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: calc(var(--base-padding) * 3);
    color: var(--completed-grey);
}

.empty-icon {
    margin-bottom: var(--base-padding);
}

.empty-state h4 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-dark-grey);
    margin-bottom: 8px;
}

.empty-state p {
    font-size: 1rem;
    margin: 0;
}

/* Feather Icon Utilities */
.feather-xs {
    width: 14px;
    height: 14px;
}

.feather-sm {
    width: 16px;
    height: 16px;
}

.feather-lg {
    width: 48px;
    height: 48px;
}

/* Alert Styles */
.alert {
    border: none;
    border-radius: var(--border-radius);
    padding: var(--base-padding);
    margin-bottom: var(--base-padding);
    box-shadow: var(--shadow-subtle);
}

.alert-success {
    background-color: rgba(126, 211, 33, 0.1);
    color: #2E7D32;
    border-left: 4px solid var(--success-green);
}

.alert-danger {
    background-color: rgba(231, 76, 60, 0.1);
    color: #C62828;
    border-left: 4px solid var(--overdue-red);
}

/* Modal Styles */
.modal-content {
    border: none;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-medium);
}

.modal-header {
    border-bottom: 1px solid var(--neutral-light-grey);
    background: linear-gradient(90deg, #FFF9F0, #FFFFFF);
}

.task-preview {
    background: var(--background-off-white);
    padding: 12px var(--base-padding);
    border-radius: 6px;
    border-left: 4px solid var(--overdue-red);
    font-style: italic;
}

/* Responsive Design */
@media (max-width: 768px) {
    .app-title {
        font-size: 2rem;
    }
    
    .app-subtitle {
        font-size: 1rem;
    }
    
    .task-form .row {
        gap: var(--base-padding);
    }
    
    .task-content {
        padding: 12px;
    }
    
    .section-header {
        padding: var(--base-padding);
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .section-title {
        font-size: 1.1rem;
    }
}

@media (max-width: 576px) {
    .container {
        padding: 0 12px;
    }
    
    .task-form-container {
        padding: var(--base-padding);
    }
    
    .task-form .col-md-2 {
        margin-top: var(--base-padding);
    }
}

/* Animation for task state changes */
.task-item {
    animation: slideIn 0.3s ease-out;
}

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

/* Focus states for accessibility */
.btn:focus,
.form-control:focus {
    outline: 2px solid var(--primary-blue);
    outline-offset: 2px;
}

/* Print styles */
@media print {
    .app-header,
    .task-form-container,
    .task-actions,
    .btn {
        display: none !important;
    }
    
    .task-item {
        break-inside: avoid;
    }
}

/* Enhanced Navigation Styles */
.navbar-brand {
    font-size: 1.5rem;
    font-weight: 700;
}

.navbar-nav .nav-link {
    font-weight: 500;
    padding: 0.75rem 1rem;
    border-radius: 0.375rem;
    margin: 0 0.25rem;
    transition: all 0.2s ease;
}

.navbar-nav .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-1px);
}

.navbar-nav .nav-link.active {
    background-color: rgba(255, 255, 255, 0.2);
    font-weight: 600;
}

.dropdown-menu {
    border: none;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    border-radius: 0.5rem;
    padding: 0.5rem 0;
    min-width: 220px;
    z-index: 1050;
}

.dropdown-item {
    padding: 0.5rem 1rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.dropdown-item:hover {
    background-color: rgba(74, 144, 226, 0.1);
    transform: translateX(4px);
}

.dropdown-item.active {
    background-color: var(--primary-blue);
    color: var(--white);
    font-weight: 600;
}

.dropdown-item.active:hover {
    background-color: var(--primary-blue);
    color: var(--white);
    transform: translateX(2px);
}

.dropdown-header {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.5rem 1rem 0.25rem;
    color: var(--primary-blue);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    margin-bottom: 0.25rem;
}

/* Breadcrumb Styles */
.breadcrumb {
    font-size: 0.9rem;
    font-weight: 500;
}

.breadcrumb-item + .breadcrumb-item::before {
    content: "›";
    font-weight: 600;
    color: #6c757d;
}

.breadcrumb-item a {
    color: var(--primary-blue);
    transition: color 0.2s ease;
}

.breadcrumb-item a:hover {
    color: var(--secondary-mint);
}

/* Floating Action Button (FAB) */
.fab-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999; /* Higher z-index to ensure it's above everything */
}

.fab {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, var(--primary-blue), var(--secondary-mint));
    color: var(--white) !important;
    border-radius: 50%;
    text-decoration: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: none;
    font-size: 1.5rem;
    /* Ensure visibility */
    opacity: 1;
    visibility: visible;
}

.fab:hover {
    transform: scale(1.1) rotate(90deg);
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.3);
    color: var(--white);
}

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

.fab i {
    stroke-width: 2.5px;
    color: inherit; /* Ensure icon inherits the text color */
    width: 24px;
    height: 24px;
    display: block;
}

/* FAB icon fallback - show text if SVG doesn't load */
.fab-icon {
    font-style: normal;
    font-size: 24px;
    font-weight: 300;
    line-height: 1;
}

/* Hide text when SVG is present */
.fab-icon svg {
    position: absolute;
}

.fab-icon:has(svg) {
    font-size: 0;
}

/* Mobile responsive FAB */
@media (max-width: 768px) {
    .fab-container {
        bottom: calc(120px + env(safe-area-inset-bottom)); /* Position above bottom navigation */
        right: 20px;
    }
    
    .fab {
        width: 48px;
        height: 48px;
        font-size: 1.25rem;
    }
}

/* ========================
   THEME SUPPORT STYLES
   ======================== */

/* Cards and Containers */
.card,
.list-group,
.modal-content {
    background-color: var(--card-bg);
    border-color: var(--border-color);
    color: var(--text-primary);
    transition: all 0.3s ease;
}

.card-header,
.card-footer,
.list-group-item {
    background-color: var(--bg-tertiary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.list-group-item:hover {
    background-color: var(--bg-secondary);
}

/* Forms and Inputs */
.form-control,
.form-select {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.form-control:focus,
.form-select:focus {
    background-color: var(--bg-secondary);
    border-color: var(--primary-blue);
    color: var(--text-primary);
    box-shadow: 0 0 0 0.2rem rgba(74, 144, 226, 0.25);
}

.form-control::placeholder {
    color: var(--text-muted);
}

/* Alerts */
.alert {
    border-color: var(--border-color);
}

/* Tables */
.table {
    color: var(--text-primary);
}

.table th,
.table td {
    border-color: var(--border-color);
}

.table-striped > tbody > tr:nth-of-type(odd) > td,
.table-striped > tbody > tr:nth-of-type(odd) > th {
    background-color: var(--bg-tertiary);
}

/* Badges */
.badge {
    color: var(--white);
}

/* Progress Bars */
.progress {
    background-color: var(--bg-tertiary);
}

/* Pagination */
.page-link {
    background-color: var(--card-bg);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.page-link:hover {
    background-color: var(--bg-tertiary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.page-item.active .page-link {
    background-color: var(--primary-blue);
    border-color: var(--primary-blue);
}

/* Theme Switch Styling */
.form-check-input:checked {
    background-color: var(--primary-blue);
    border-color: var(--primary-blue);
}

.dropdown-item-text {
    padding: 0.5rem 1rem;
}

.dropdown-item-text .form-check {
    margin-bottom: 0;
}

/* Hierarchical Category Filter Component */
.hierarchical-category-filter {
    position: relative;
    min-width: 200px;
}

.hierarchical-category-filter .filter-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.25rem 0.5rem;
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
    color: #212529;
    min-height: 31px;
    font-size: 0.875rem;
    width: 100%;
}

.hierarchical-category-filter .filter-button:hover {
    background-color: #e9ecef;
    border-color: #adb5bd;
}

.hierarchical-category-filter .filter-button:focus {
    outline: none;
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

.hierarchical-category-filter .filter-text {
    flex: 1;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-primary);
}

.hierarchical-category-filter .chevron-icon {
    width: 14px;
    height: 14px;
    transition: transform 0.2s ease;
    color: var(--bs-secondary);
    flex-shrink: 0;
    margin-left: 0.5rem;
}

.hierarchical-category-filter.open .chevron-icon {
    transform: rotate(180deg);
}

.hierarchical-category-filter .filter-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1050;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-medium);
    margin-top: 2px;
    max-height: 400px;
    overflow-y: auto;
}

.hierarchical-category-filter .filter-search {
    padding: 0.75rem;
    border-bottom: 1px solid var(--border-color);
}

.hierarchical-category-filter .filter-search input {
    width: 100%;
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

.hierarchical-category-filter .filter-search input:focus {
    border-color: var(--primary-blue);
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(74, 144, 226, 0.25);
}

.hierarchical-category-filter .filter-options {
    padding: 0.5rem 0;
}

.hierarchical-category-filter .filter-option {
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    transition: background-color 0.15s ease;
    border: none;
    background: none;
    width: 100%;
    display: block;
}

.hierarchical-category-filter .filter-option:hover {
    background-color: var(--bg-tertiary);
}

.hierarchical-category-filter .filter-option .form-check {
    margin-bottom: 0;
    display: flex;
    align-items: center;
}

.hierarchical-category-filter .filter-option .form-check-input {
    margin-right: 0.5rem;
    flex-shrink: 0;
}

.hierarchical-category-filter .filter-option .form-check-label {
    display: flex;
    align-items: center;
    margin-bottom: 0;
    color: var(--text-primary);
    cursor: pointer;
    flex: 1;
}

.hierarchical-category-filter .category-group {
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
}

.hierarchical-category-filter .category-group:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.hierarchical-category-filter .category-option .form-check-label {
    font-weight: 600;
    color: var(--text-primary);
}

.hierarchical-category-filter .subcategory-group {
    margin-left: 1rem;
    margin-top: 0.25rem;
}

.hierarchical-category-filter .subcategory-option {
    padding: 0.25rem 0.75rem;
}

.hierarchical-category-filter .subcategory-option .form-check-label {
    font-weight: normal;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.hierarchical-category-filter .select-all,
.hierarchical-category-filter .clear-all {
    background-color: var(--bg-tertiary);
    font-weight: 600;
}

.hierarchical-category-filter .select-all:hover,
.hierarchical-category-filter .clear-all:hover {
    background-color: var(--primary-blue);
    color: white;
}

.hierarchical-category-filter .select-all .form-check-label,
.hierarchical-category-filter .clear-all .form-check-label {
    color: var(--primary-blue);
}

.hierarchical-category-filter .select-all:hover .form-check-label,
.hierarchical-category-filter .clear-all:hover .form-check-label {
    color: white;
}

/* Dark theme specific adjustments */
[data-theme="dark"] .form-check-input {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
}

[data-theme="dark"] .form-check-input:checked {
    background-color: var(--primary-blue);
    border-color: var(--primary-blue);
}

[data-theme="dark"] .btn-close {
    filter: invert(1);
}

[data-theme="dark"] .border-bottom {
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .bg-light {
    background-color: var(--bg-tertiary) !important;
}

/* Animation for theme transitions */
* {
    transition: background-color 0.3s ease, 
                color 0.3s ease, 
                border-color 0.3s ease;
}

/* ========================
   KANBAN BOARD THEME FIXES
   ======================== */

/* Kanban specific overrides for theme */
[data-theme="dark"] .kanban-header {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .kanban-container {
    background: var(--bg-tertiary) !important;
}

[data-theme="dark"] .status-header,
[data-theme="dark"] .row-header {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .category-title {
    background: var(--bg-tertiary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .category-title:hover {
    background: var(--bg-secondary) !important;
}

[data-theme="dark"] .task-card {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .task-description {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .task-comments {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .kanban-cell {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .row-label {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .label-text {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .category-filter-section {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .filter-label {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .drop-zone-indicator {
    border-color: var(--border-color) !important;
    color: var(--text-secondary) !important;
}

/* ========================
   ADMIN DASHBOARD THEME FIXES
   ======================== */

/* Admin dashboard specific overrides */
[data-theme="dark"] .card {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .card-body {
    background-color: var(--card-bg) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .alert {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .alert h6,
[data-theme="dark"] .alert-heading {
    color: var(--text-primary) !important;
}

/* ========================
   BADGE AND STATUS THEME FIXES
   ======================== */

/* Badge overrides for theme */
[data-theme="dark"] .badge.bg-light {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .text-dark {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .text-muted {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .bg-light {
    background-color: var(--bg-tertiary) !important;
}

/* ========================
   GENERAL ELEMENT OVERRIDES
   ======================== */

/* Text and background color fixes */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
    color: var(--text-primary) !important;
}

[data-theme="dark"] p {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .small,
[data-theme="dark"] small {
    color: var(--text-secondary) !important;
}

/* Pre and code blocks */
[data-theme="dark"] pre {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] code {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

/* List groups */
[data-theme="dark"] .list-group-item {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* Well and jumbotron replacements */
[data-theme="dark"] .bg-white {
    background-color: var(--card-bg) !important;
}

/* Task and content specific styling */
[data-theme="dark"] .task-form-container {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .task-item {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}

/* Modal overrides */
[data-theme="dark"] .modal-content {
    background-color: var(--card-bg) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .modal-header {
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .modal-footer {
    border-color: var(--border-color) !important;
}

/* Tooltip and popover overrides */
[data-theme="dark"] .tooltip .tooltip-inner {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .popover {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .popover-body {
    color: var(--text-primary) !important;
}

/* ========================
   SPECIFIC UI FIXES FOR REPORTED ISSUES
   ======================== */

/* 1. TASK LIST - PENDING TASKS BACKGROUND */
[data-theme="dark"] .task-item,
[data-theme="dark"] .task-row,
[data-theme="dark"] .pending-task,
[data-theme="dark"] .completed-task {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .task-list-container,
[data-theme="dark"] .tasks-section {
    background-color: var(--bg-primary) !important;
}

/* SPECIFIC TASK LIST STRUCTURE FIXES - OVERRIDE EXISTING WHITE BACKGROUNDS */
[data-theme="dark"] .task-lists {
    background-color: var(--bg-primary) !important;
}

[data-theme="dark"] .task-section {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .task-list {
    background-color: var(--card-bg) !important;
    padding: 0 !important;
}

[data-theme="dark"] .task-item {
    background-color: var(--card-bg) !important;
    border-bottom: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .task-item:hover {
    background-color: var(--bg-tertiary) !important;
}

[data-theme="dark"] .task-content {
    background-color: transparent !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .task-details {
    background-color: transparent !important;
    color: var(--text-primary) !important;
}

/* Filter and Sort Container Dark Theme */
[data-theme="dark"] .filter-sort-container {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .filter-sort-container .dropdown-menu {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .filter-sort-container .form-check-label {
    color: var(--text-primary) !important;
}

/* Force Status Dropdown Visibility */
#statusDropdown {
    display: block !important;
    visibility: visible !important;
}

.filter-sort-container .col-md-2:nth-child(2) {
    display: block !important;
    visibility: visible !important;
}

.filter-sort-container .col-md-2:nth-child(2) .dropdown {
    display: block !important;
    visibility: visible !important;
}

[data-theme="dark"] .section-header {
    background: linear-gradient(90deg, var(--bg-tertiary), var(--card-bg)) !important;
    border-bottom: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .section-title {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .task-count {
    background: var(--primary-blue) !important;
    color: var(--white) !important;
}

[data-theme="dark"] .empty-state {
    background-color: var(--card-bg) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .completed-section {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}

/* Additional task meta elements */
[data-theme="dark"] .task-meta {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .task-comments {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .task-owner {
    color: var(--text-secondary) !important;
}

/* ========================
   IMPORT DATA DUMP PAGE FIXES
   ======================== */

/* Override embedded CSS styles in import_data_dump.html */
[data-theme="dark"] .import-container {
    background-color: var(--bg-primary) !important;
}

/* Card components on import page */
[data-theme="dark"] .card {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: var(--shadow-medium) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .card-header {
    background-color: var(--bg-tertiary) !important;
    border-bottom: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .card-body {
    background-color: var(--card-bg) !important;
    color: var(--text-primary) !important;
}

/* Code block in Expected File Structure section */
[data-theme="dark"] pre.bg-light {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}

[data-theme="dark"] pre code {
    color: var(--text-primary) !important;
    background-color: transparent !important;
}

/* Form elements on import page */
[data-theme="dark"] .form-control:focus {
    border-color: var(--primary-blue) !important;
    box-shadow: 0 0 0 0.2rem rgba(74, 144, 226, 0.25) !important;
}

/* Import page specific alerts */
[data-theme="dark"] .alert-warning {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--border-color) !important;
    border-left: 4px solid #ffc107 !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .alert-warning .alert-heading {
    color: var(--text-primary) !important;
}

/* Lists and content in import info cards */
[data-theme="dark"] .list-unstyled li {
    color: var(--text-primary) !important;
}

[data-theme="dark"] ol li {
    color: var(--text-primary) !important;
}

/* Text color overrides */
[data-theme="dark"] .text-primary {
    color: var(--primary-blue) !important;
}

[data-theme="dark"] .text-info {
    color: var(--secondary-mint) !important;
}

[data-theme="dark"] .text-success {
    color: var(--success-green) !important;
}

[data-theme="dark"] .text-warning {
    color: #ffc107 !important;
}

[data-theme="dark"] .form-text {
    color: var(--text-secondary) !important;
}

/* Button styling for import page */
[data-theme="dark"] .btn-warning {
    background-color: #ffc107 !important;
    border-color: #ffc107 !important;
    color: #000 !important;
}

[data-theme="dark"] .btn-warning:hover {
    background-color: #e0a800 !important;
    border-color: #d39e00 !important;
    color: #000 !important;
}

/* Container backgrounds */
[data-theme="dark"] .container-fluid {
    background-color: var(--bg-primary) !important;
}

[data-theme="dark"] .row {
    background-color: transparent !important;
}

/* Task specific elements */
[data-theme="dark"] .task-description,
[data-theme="dark"] .task-title {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .task-meta,
[data-theme="dark"] .task-info {
    color: var(--text-secondary) !important;
}

/* 2. EDIT TASK - CATEGORY DROPDOWN BACKGROUND */
[data-theme="dark"] .category-tree-picker,
[data-theme="dark"] .category-dropdown {
    background-color: var(--card-bg) !important;
}

[data-theme="dark"] .category-menu {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    box-shadow: var(--shadow-medium) !important;
}

[data-theme="dark"] .category-tree {
    background-color: var(--card-bg) !important;
}

[data-theme="dark"] .category-parent,
[data-theme="dark"] .category-child,
[data-theme="dark"] .category-group {
    background-color: var(--card-bg) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .category-parent:hover,
[data-theme="dark"] .category-child:hover {
    background-color: var(--bg-tertiary) !important;
}

[data-theme="dark"] .category-picker-btn {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .category-search input {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* Hierarchical Category Filter - Dark Theme */
[data-theme="dark"] .hierarchical-category-filter .filter-button {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .hierarchical-category-filter .filter-button:hover {
    background-color: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
}

[data-theme="dark"] .hierarchical-category-filter .filter-dropdown {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    box-shadow: var(--shadow-medium) !important;
}

[data-theme="dark"] .hierarchical-category-filter .filter-search {
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .hierarchical-category-filter .filter-search input {
    background-color: var(--bg-primary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .hierarchical-category-filter .filter-option:hover {
    background-color: var(--bg-tertiary) !important;
}

[data-theme="dark"] .hierarchical-category-filter .filter-option .form-check-label {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .hierarchical-category-filter .subcategory-option .form-check-label {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .hierarchical-category-filter .category-group {
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .hierarchical-category-filter .select-all,
[data-theme="dark"] .hierarchical-category-filter .clear-all {
    background-color: var(--bg-tertiary) !important;
}

[data-theme="dark"] .hierarchical-category-filter .select-all .form-check-label,
[data-theme="dark"] .hierarchical-category-filter .clear-all .form-check-label {
    color: var(--primary-blue) !important;
}

/* 3. KANBAN BOARD - HEADER ROW EDGES */
[data-theme="dark"] .kanban-header * {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .kanban-header::before {
    background: linear-gradient(135deg, var(--card-bg) 0%, var(--bg-tertiary) 100%) !important;
}

/* 4. CALENDAR VIEW - DAYS ROW BACKGROUND */
[data-theme="dark"] .fc {
    background-color: var(--card-bg) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .fc-view,
[data-theme="dark"] .fc-view-harness {
    background-color: var(--card-bg) !important;
}

[data-theme="dark"] .fc-daygrid,
[data-theme="dark"] .fc-day,
[data-theme="dark"] .fc-daygrid-day {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .fc-col-header,
[data-theme="dark"] .fc-col-header-cell {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .fc-scrollgrid,
[data-theme="dark"] .fc-theme-standard td,
[data-theme="dark"] .fc-theme-standard th {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .fc-button {
    background-color: var(--primary-blue) !important;
    border-color: var(--primary-blue) !important;
}

[data-theme="dark"] .fc-button:not(:disabled):active,
[data-theme="dark"] .fc-button:not(:disabled).fc-button-active {
    background-color: var(--secondary-mint) !important;
    border-color: var(--secondary-mint) !important;
}

/* 5. MY CATEGORIES - WHITE SPACE FIXES */
[data-theme="dark"] .categories-grid,
[data-theme="dark"] .categories-list {
    background-color: var(--bg-primary) !important;
}

[data-theme="dark"] .category-card {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    box-shadow: var(--shadow-medium) !important;
}

[data-theme="dark"] .category-body {
    background-color: var(--card-bg) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .category-description {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .category-actions {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .category-item {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .category-list {
    background-color: var(--card-bg) !important;
}

/* 6. MY STATUSES - WHITE SPACE FIXES */
[data-theme="dark"] .statuses-grid,
[data-theme="dark"] .statuses-list {
    background-color: var(--bg-primary) !important;
}

[data-theme="dark"] .status-card {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    box-shadow: var(--shadow-medium) !important;
}

[data-theme="dark"] .status-body {
    background-color: var(--card-bg) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .status-description {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .status-actions {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .status-item {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .status-list {
    background-color: var(--card-bg) !important;
}

/* 7. USERS LIST SCREEN - USER RECORDS BACKGROUND */

/* General admin header styles for both themes */
.admin-header {
    background-color: var(--card-bg);
    padding: 24px;
    margin-bottom: 24px;
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-subtle);
    position: relative;
    z-index: 1;
}

.admin-header h2 {
    color: var(--text-primary);
    margin-bottom: 8px;
    font-weight: 600;
}

.admin-header .text-muted {
    color: var(--text-secondary);
    margin-bottom: 0;
    font-size: 0.95rem;
}

/* Admin header buttons - general styling */
.admin-header .btn {
    font-weight: 500;
    padding: 8px 16px;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.admin-header .btn-outline-light {
    background-color: transparent;
    border-color: var(--border-color);
    color: var(--text-secondary);
}

.admin-header .btn-outline-light:hover {
    background-color: var(--bg-tertiary);
    border-color: var(--primary-blue);
    color: var(--text-primary);
    transform: translateY(-1px);
}

.admin-header .btn-light {
    background-color: var(--primary-blue);
    border-color: var(--primary-blue);
    color: #FFFFFF;
}

.admin-header .btn-light:hover {
    background-color: var(--secondary-mint);
    border-color: var(--secondary-mint);
    color: #FFFFFF;
    transform: translateY(-1px);
}

/* Ensure admin header overrides any conflicting styles */
[data-theme="dark"] .admin-header,
[data-theme="dark"] .admin-header * {
    box-sizing: border-box !important;
}

[data-theme="dark"] .admin-header {
    position: relative !important;
    z-index: 1 !important;
}

/* Admin header flex container spacing */
.admin-header .d-flex {
    gap: 16px;
}

.admin-header .d-flex.gap-2 {
    gap: 12px;
}

[data-theme="dark"] .table {
    background-color: var(--card-bg) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .table > :not(caption) > * > * {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .table-hover > tbody > tr:hover > * {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .table-primary {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .table-primary th {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* Additional user management page fixes */
[data-theme="dark"] .badge.bg-info {
    background-color: var(--secondary-mint) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .badge.bg-danger {
    background-color: var(--overdue-red) !important;
    color: var(--white) !important;
}

[data-theme="dark"] .badge.bg-secondary {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .badge.bg-primary {
    background-color: var(--primary-blue) !important;
    color: var(--white) !important;
}

[data-theme="dark"] .table-info {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .table-responsive {
    background-color: var(--card-bg) !important;
}

/* 8. USAGE STATISTICS - WHITE SPACES */
[data-theme="dark"] .overview-cards,
[data-theme="dark"] .stats-section {
    background-color: var(--bg-primary) !important;
}

[data-theme="dark"] .stat-card {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .chart-container {
    background-color: var(--card-bg) !important;
}

[data-theme="dark"] .data-table {
    background-color: var(--card-bg) !important;
}

[data-theme="dark"] .table-sm {
    background-color: var(--card-bg) !important;
}

[data-theme="dark"] .table-sm > :not(caption) > * > * {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* Additional Bootstrap table fixes */
[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: var(--bg-tertiary) !important;
}

[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(even) {
    background-color: var(--card-bg) !important;
}

/* Card content areas */
[data-theme="dark"] .card-content,
[data-theme="dark"] .content-area {
    background-color: var(--card-bg) !important;
    color: var(--text-primary) !important;
}

/* Form containers and wrappers */
[data-theme="dark"] .form-container,
[data-theme="dark"] .form-wrapper,
[data-theme="dark"] .edit-form-container,
[data-theme="dark"] .edit-task-container {
    background-color: var(--bg-primary) !important;
}

/* Generic white background fixes */
[data-theme="dark"] .white-bg,
[data-theme="dark"] .bg-white {
    background-color: var(--card-bg) !important;
}

[data-theme="dark"] .container-white,
[data-theme="dark"] .content-white {
    background-color: var(--card-bg) !important;
    color: var(--text-primary) !important;
}

/* Additional form control fixes */
[data-theme="dark"] .form-select {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .form-select:focus {
    background-color: var(--bg-secondary) !important;
    border-color: var(--primary-blue) !important;
    color: var(--text-primary) !important;
}

/* Dropdown and select menus */
[data-theme="dark"] select,
[data-theme="dark"] .custom-select {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* Text area fixes */
[data-theme="dark"] textarea {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] textarea:focus {
    background-color: var(--bg-secondary) !important;
    border-color: var(--primary-blue) !important;
    color: var(--text-primary) !important;
}

/* Improved sticky navbar shadow */
.navbar.sticky-top {
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
}

/* Admin Contact Styling */
.admin-contacts {
    margin-top: 1rem;
}

.admin-contact-card {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    transition: all 0.3s ease;
    background-color: var(--card-bg);
}

.admin-contact-card:hover {
    box-shadow: var(--shadow-medium);
    border-color: var(--primary-blue);
}

.admin-avatar .avatar-circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary-blue), var(--secondary-mint));
}

.admin-info h6 {
    color: var(--text-primary);
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.admin-info small {
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.admin-info .btn {
    font-size: 0.85rem;
    transition: all 0.3s ease;
}

.admin-info .btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-medium);
}

/* Dark theme support for admin contacts */
[data-theme="dark"] .admin-contact-card {
    background-color: var(--card-bg);
    border-color: var(--border-color);
}

/* Dark theme support for active dropdown items */
[data-theme="dark"] .dropdown-item.active {
    background-color: var(--primary-blue);
    color: var(--white);
    font-weight: 600;
}

[data-theme="dark"] .dropdown-item.active:hover {
    background-color: var(--primary-blue);
    color: var(--white);
}

[data-theme="dark"] .admin-contact-card:hover {
    border-color: var(--primary-blue);
}

[data-theme="dark"] .admin-info h6 {
    color: var(--text-primary);
}

[data-theme="dark"] .admin-info small {
    color: var(--text-secondary);
}

/* FAB Dark Theme Support */
[data-theme="dark"] .fab {
    background: linear-gradient(135deg, var(--primary-blue), var(--secondary-mint));
    color: var(--white) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .fab:hover {
    color: var(--white) !important;
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .fab i {
    color: var(--white) !important;
    stroke: var(--white);
}

/* Enhanced Kanban Header Sticky Positioning */
.kanban-header {
    /* Base navbar height is typically 56px (Bootstrap default) */
    --navbar-height: 56px;
    --header-offset: calc(var(--navbar-height) + 15px);
}

/* Account for larger navbar on smaller screens */
@media (max-width: 768px) {
    .kanban-header {
        --navbar-height: 56px;
        --header-offset: calc(var(--navbar-height) + 10px);
    }
}

/* Ensure the header stays above other sticky elements */
.kanban-header {
    z-index: 1010 !important;
}

/* Make sure the header is properly visible in dark theme */
[data-theme="dark"] .kanban-header {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

/* ============================================================================
   MOBILE-FIRST RESPONSIVE DESIGN
   ============================================================================ */

/* Mobile-friendly page headers */
.page-header-mobile {
    margin-bottom: 1rem;
}

.page-header-mobile .header-content {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.page-header-mobile .header-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0;
}

.page-header-mobile .header-title h2,
.page-header-mobile .header-title h4 {
    margin-bottom: 0;
    font-size: 1.5rem;
    font-weight: 600;
}

.page-header-mobile .header-subtitle {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
}

/* Mobile-friendly action buttons */
.mobile-action-bar {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.mobile-action-bar .btn {
    min-height: 44px; /* iOS HIG minimum touch target */
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.mobile-action-bar .btn-sm {
    min-height: 40px;
    padding: 0.625rem 0.875rem;
    font-size: 0.8125rem;
}

/* Hide button text on small screens, show only icons */
@media (max-width: 576px) {
    .btn-mobile-icon-only .btn-text {
        display: none;
    }
    
    .btn-mobile-icon-only {
        min-width: 44px;
        padding: 0.75rem;
    }
    
    .btn-mobile-icon-only.btn-sm {
        min-width: 40px;
        padding: 0.625rem;
    }
    
    /* Make action bar stack on extra small screens */
    .mobile-action-bar {
        flex-direction: column;
    }
    
    .mobile-action-bar .btn {
        width: 100%;
        justify-content: center;
    }
    
    /* Special layout for essential actions - keep them horizontal */
    .mobile-action-bar.keep-horizontal {
        flex-direction: row;
        flex-wrap: wrap;
    }
    
    .mobile-action-bar.keep-horizontal .btn {
        flex: 1;
        min-width: 0;
    }
}

/* Medium screens - show icons and text but optimize spacing */
@media (min-width: 577px) and (max-width: 768px) {
    .page-header-mobile .header-content {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
    }
    
    .mobile-action-bar {
        flex-wrap: wrap;
        justify-content: flex-end;
    }
}

/* Large screens - traditional layout */
@media (min-width: 769px) {
    .page-header-mobile .header-content {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    
    .mobile-action-bar {
        flex-wrap: nowrap;
        justify-content: flex-end;
    }
}

/* Enhanced mobile navbar */
@media (max-width: 768px) {
    .navbar-nav {
        padding: 0.5rem 0;
    }
    
    .navbar-nav .nav-link {
        padding: 0.75rem 1rem;
        font-size: 1rem;
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }
    
    .dropdown-menu {
        margin-top: 0.5rem;
    }
}

/* Mobile-friendly cards */
@media (max-width: 576px) {
    .card {
        border-radius: 12px;
        margin-bottom: 1rem;
    }
    
    .card-body {
        padding: 1rem;
    }
    
    .card-header {
        padding: 0.75rem 1rem;
    }
}

/* Mobile form improvements */
@media (max-width: 576px) {
    .form-control {
        min-height: 44px;
        font-size: 16px; /* Prevents zoom on iOS */
        padding: 0.75rem;
    }
    
    .form-select {
        min-height: 44px;
        font-size: 16px;
        padding: 0.75rem;
    }
    
    .btn {
        min-height: 44px;
        padding: 0.75rem 1rem;
        font-size: 16px;
    }
    
    .btn-sm {
        min-height: 40px;
        padding: 0.625rem 0.875rem;
        font-size: 0.875rem;
    }
}

/* Mobile table improvements */
@media (max-width: 768px) {
    .table-responsive {
        border-radius: 8px;
        border: 1px solid var(--border-color);
    }
    
    .table {
        margin-bottom: 0;
    }
    
    .table th,
    .table td {
        padding: 0.75rem 0.5rem;
        font-size: 0.875rem;
    }
}

/* Mobile dashboard improvements */
@media (max-width: 576px) {
    .dashboard-card {
        margin-bottom: 1rem;
    }
    
    .stats-card {
        text-align: center;
        padding: 1.5rem 1rem;
    }
    
    .stats-number {
        font-size: 2rem;
        font-weight: 700;
    }
    
    .stats-label {
        font-size: 0.875rem;
        color: var(--text-secondary);
    }
}

/* Mobile floating action button positioning */
@media (max-width: 576px) {
    .fab-container {
        position: fixed;
        bottom: calc(120px + env(safe-area-inset-bottom)); /* Position above bottom navigation */
        right: 20px;
        z-index: 1050;
    }
    
    .fab {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    }
}

/* Mobile task category text wrapping */
@media (max-width: 768px) {
    .task-category {
        word-wrap: break-word;
        word-break: break-word;
        white-space: normal !important;
        max-width: 100%;
        display: inline-block;
        line-height: 1.2;
        padding: 0.25rem 0.5rem;
    }
    
    .task-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem;
        margin-top: 0.5rem;
    }
    
    .task-meta .badge {
        margin-bottom: 0.25rem;
        font-size: 0.75rem;
    }
}

/* Filter improvements - responsive layout */
.filter-row {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
}

.filter-item {
    flex: 1;
    min-width: 150px;
}

/* Mobile filter improvements */
@media (max-width: 768px) {
    .filter-section {
        padding: 1rem;
        margin-bottom: 1rem;
        border-radius: 12px;
        border: 1px solid var(--border-color);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
        background: var(--card-bg);
    }
    
    .filter-row {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .filter-item {
        width: 100%;
        flex: none;
    }
    
    .filter-item .dropdown-toggle {
        font-size: 0.75rem;
        padding: 0.5rem 0.75rem;
        border-radius: 8px;
        border-color: var(--border-color);
    }
    
    .filter-item .btn-primary {
        background: var(--primary-blue);
        border-color: var(--primary-blue);
    }
    
    .filter-item .btn-outline-secondary {
        border-color: var(--border-color);
        color: var(--text-secondary);
    }
    
    /* Calendar-specific filter improvements */
    #calendarHierarchicalCategoryFilter .dropdown-toggle {
        width: 100%;
        text-align: center;
    }
    
    .filter-section .card-body {
        padding: 0;
        background: transparent;
    }
}

/* Small screen filter adjustments */
@media (max-width: 576px) {
    .filter-section {
        padding: 0.75rem;
    }
    
    .filter-item .dropdown-toggle {
        font-size: 0.6875rem;
        padding: 0.375rem 0.5rem;
    }
    
    .filter-item .btn {
        font-size: 0.6875rem;
        padding: 0.375rem 0.5rem;
    }
}

/* Dark Theme Support for Calendar Filters */
@media (max-width: 768px) {
    [data-theme="dark"] .filter-section {
        background: var(--bg-secondary);
        border-color: var(--neutral-light-grey);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }
    
    [data-theme="dark"] .filter-item .dropdown-toggle {
        background: var(--bg-tertiary);
        border-color: var(--neutral-light-grey);
        color: var(--text-primary);
    }
    
    [data-theme="dark"] .filter-item .dropdown-toggle:hover {
        background: var(--bg-primary);
        border-color: var(--secondary-mint);
    }
    
    [data-theme="dark"] .filter-item .btn-primary {
        background: var(--secondary-mint);
        border-color: var(--secondary-mint);
        color: var(--bg-primary);
    }
    
    [data-theme="dark"] .filter-item .btn-outline-secondary {
        border-color: var(--neutral-light-grey);
        color: var(--text-secondary);
    }
    
    [data-theme="dark"] .filter-item .btn-outline-secondary:hover {
        background: var(--bg-tertiary);
        border-color: var(--text-secondary);
        color: var(--text-primary);
    }
    
    [data-theme="dark"] #calendarHierarchicalCategoryFilter .dropdown-toggle {
        background: var(--bg-tertiary);
        border-color: var(--neutral-light-grey);
        color: var(--text-primary);
    }
    
    [data-theme="dark"] .filter-section .dropdown-menu {
        background: var(--bg-secondary);
        border-color: var(--neutral-light-grey);
    }
    
    [data-theme="dark"] .filter-section .dropdown-item {
        color: var(--text-primary);
    }
    
    [data-theme="dark"] .filter-section .dropdown-item:hover {
        background: var(--bg-tertiary);
    }
}

/* Board view mobile improvements */
@media (max-width: 768px) {
    .kanban-board {
        overflow-x: auto;
        padding-bottom: 1rem;
    }
    
    .kanban-column {
        min-width: 280px;
        margin-right: 1rem;
    }
    
    .kanban-card {
        margin-bottom: 0.75rem;
        padding: 0.75rem;
    }
}

/* Calendar view mobile improvements */
@media (max-width: 768px) {
    .calendar-container {
        overflow-x: auto;
        overflow-y: hidden;
        border-radius: 12px;
        border: 1px solid var(--border-color);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    }
    
    /* Calendar header row optimization */
    .calendar-header {
        padding: 0.5rem 0.25rem;
        font-size: 0.75rem;
        font-weight: 600;
        background: var(--card-bg);
        border-bottom: 1px solid var(--border-color);
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .calendar-day {
        min-height: 60px;
        padding: 0.25rem;
        font-size: 0.7rem;
        border-right: 1px solid var(--border-color);
        border-bottom: 1px solid var(--border-color);
    }
    
    .calendar-day:last-child {
        border-right: none;
    }
    
    .calendar-event {
        font-size: 0.65rem;
        padding: 0.125rem 0.25rem;
        margin-bottom: 0.125rem;
        border-radius: 4px;
        cursor: pointer;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        line-height: 1.2;
    }
    
    /* Calendar navigation improvements */
    .calendar-nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.75rem 1rem;
        background: var(--card-bg);
        border-bottom: 1px solid var(--border-color);
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    .calendar-nav .btn {
        padding: 0.375rem 0.75rem;
        font-size: 0.75rem;
        border-radius: 8px;
    }
    
    .calendar-title {
        font-size: 1rem;
        font-weight: 600;
        color: var(--text-primary);
        text-align: center;
        flex: 1;
        min-width: 0;
    }
    
    /* Week view optimization for mobile */
    .fc-dayGridWeek-view .fc-col-header-cell {
        padding: 0.25rem 0.125rem;
        font-size: 0.6rem;
    }
    
    .fc-dayGridWeek-view .fc-daygrid-day {
        min-height: 50px;
    }
    
    /* Month view optimization for mobile */
    .fc-dayGridMonth-view .fc-col-header-cell {
        padding: 0.375rem 0.25rem;
        font-size: 0.65rem;
    }
    
    .fc-dayGridMonth-view .fc-daygrid-day {
        min-height: 45px;
    }
    
    /* Event text improvements */
    .fc-event-title {
        font-size: 0.625rem;
        line-height: 1.1;
        padding: 0.125rem;
    }
}

/* Extra small screens - even more compact */
@media (max-width: 576px) {
    .calendar-header {
        padding: 0.375rem 0.125rem;
        font-size: 0.6875rem;
    }
    
    .calendar-day {
        min-height: 45px;
        padding: 0.125rem;
        font-size: 0.65rem;
    }
    
    .calendar-event {
        font-size: 0.6rem;
        padding: 0.0625rem 0.125rem;
        margin-bottom: 0.0625rem;
    }
    
    .calendar-nav {
        padding: 0.5rem 0.75rem;
        flex-direction: column;
        gap: 0.375rem;
    }
    
    .calendar-title {
        font-size: 0.9rem;
        order: -1;
    }
    
    .calendar-nav .btn-group {
        display: flex;
        gap: 0.25rem;
        justify-content: center;
        width: 100%;
    }
    
    .calendar-nav .btn {
        padding: 0.25rem 0.5rem;
        font-size: 0.6875rem;
        flex: 1;
        max-width: 80px;
    }
    
    /* Super compact calendar for very small screens */
    .fc-dayGridMonth-view .fc-col-header-cell {
        padding: 0.25rem 0.125rem;
        font-size: 0.5625rem;
    }
    
    .fc-dayGridMonth-view .fc-daygrid-day {
        min-height: 35px;
    }
    
    .fc-event-title {
        font-size: 0.5rem;
        line-height: 1;
    }
    
    /* Super compact toolbar for very small screens */
    .fc-prev-button,
    .fc-next-button,
    .fc-today-button {
        padding: 0.25rem 0.5rem !important;
        font-size: 0.6875rem !important;
        min-width: 38px !important;
        height: 32px !important;
    }
    
    .fc-toolbar-title {
        font-size: 0.875rem !important;
    }
    
    .fc-dayGridMonth-button,
    .fc-dayGridWeek-button,
    .fc-listWeek-button {
        padding: 0.375rem 0.5rem !important;
        font-size: 0.625rem !important;
        min-width: 50px !important;
        height: 34px !important;
        max-width: 75px !important;
    }
    
    .fc-header-toolbar,
    .fc-footer-toolbar {
        padding: 0.375rem !important;
        margin-bottom: 0.5rem !important;
        margin-top: 0.5rem !important;
    }
}

/* Dark Theme Support for Calendar Mobile */
@media (max-width: 768px) {
    [data-theme="dark"] .calendar-container {
        border-color: var(--neutral-light-grey);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }
    
    [data-theme="dark"] .calendar-header {
        background: var(--bg-secondary);
        border-color: var(--neutral-light-grey);
        color: var(--text-primary);
    }
    
    [data-theme="dark"] .calendar-day {
        border-color: var(--neutral-light-grey);
        background: var(--bg-tertiary);
        color: var(--text-primary);
    }
    
    [data-theme="dark"] .calendar-nav {
        background: var(--bg-secondary);
        border-color: var(--neutral-light-grey);
    }
    
    [data-theme="dark"] .calendar-title {
        color: var(--text-primary);
    }
    
    [data-theme="dark"] .calendar-nav .btn {
        background: var(--bg-tertiary);
        border-color: var(--neutral-light-grey);
        color: var(--text-primary);
    }
    
    [data-theme="dark"] .calendar-nav .btn:hover {
        background: var(--secondary-mint);
        border-color: var(--secondary-mint);
        color: var(--bg-primary);
    }
    
    /* FullCalendar Header Toolbar Mobile Optimization */
    .fc-header-toolbar {
        padding: 0.5rem !important;
        margin-bottom: 0.75rem !important;
        background: var(--card-bg) !important;
        border: 1px solid var(--border-color) !important;
        border-radius: 12px !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    }
    
    .fc-toolbar-chunk {
        display: flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
    }
    
    .fc-prev-button,
    .fc-next-button,
    .fc-today-button {
        padding: 0.375rem 0.75rem !important;
        font-size: 0.75rem !important;
        border-radius: 8px !important;
        border: 1px solid var(--border-color) !important;
        background: var(--card-bg) !important;
        color: var(--text-primary) !important;
        min-width: 44px !important;
        height: 38px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .fc-prev-button:hover,
    .fc-next-button:hover,
    .fc-today-button:hover {
        background: var(--primary-blue) !important;
        border-color: var(--primary-blue) !important;
        color: white !important;
    }
    
    .fc-toolbar-title {
        font-size: 1rem !important;
        font-weight: 600 !important;
        color: var(--text-primary) !important;
        margin: 0 !important;
        text-align: center !important;
    }
    
    /* Footer Toolbar for Mobile View Buttons */
    .fc-footer-toolbar {
        padding: 0.5rem !important;
        margin-top: 0.75rem !important;
        background: var(--card-bg) !important;
        border: 1px solid var(--border-color) !important;
        border-radius: 12px !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
        justify-content: center !important;
    }
    
    .fc-footer-toolbar .fc-toolbar-chunk {
        justify-content: center !important;
        width: 100% !important;
    }
    
    .fc-dayGridMonth-button,
    .fc-dayGridWeek-button,
    .fc-listWeek-button {
        padding: 0.5rem 0.75rem !important;
        font-size: 0.75rem !important;
        border-radius: 8px !important;
        border: 1px solid var(--border-color) !important;
        background: var(--card-bg) !important;
        color: var(--text-primary) !important;
        margin: 0 0.25rem !important;
        min-width: 60px !important;
        height: 40px !important;
        flex: 1 !important;
        max-width: 90px !important;
    }
    
    .fc-dayGridMonth-button:hover,
    .fc-dayGridWeek-button:hover,
    .fc-listWeek-button:hover {
        background: var(--primary-blue) !important;
        border-color: var(--primary-blue) !important;
        color: white !important;
    }
    
    .fc-dayGridMonth-button.fc-button-active,
    .fc-dayGridWeek-button.fc-button-active,
    .fc-listWeek-button.fc-button-active {
        background: var(--primary-blue) !important;
        border-color: var(--primary-blue) !important;
        color: white !important;
    }
    
    /* FullCalendar dark theme support */
    [data-theme="dark"] .fc {
        background: var(--bg-secondary);
        color: var(--text-primary);
    }
    
    [data-theme="dark"] .fc-header-toolbar,
    [data-theme="dark"] .fc-footer-toolbar {
        background: var(--bg-secondary) !important;
        border-color: var(--neutral-light-grey) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
    }
    
    [data-theme="dark"] .fc-prev-button,
    [data-theme="dark"] .fc-next-button,
    [data-theme="dark"] .fc-today-button,
    [data-theme="dark"] .fc-dayGridMonth-button,
    [data-theme="dark"] .fc-dayGridWeek-button,
    [data-theme="dark"] .fc-listWeek-button {
        background: var(--bg-tertiary) !important;
        border-color: var(--neutral-light-grey) !important;
        color: var(--text-primary) !important;
    }
    
    [data-theme="dark"] .fc-prev-button:hover,
    [data-theme="dark"] .fc-next-button:hover,
    [data-theme="dark"] .fc-today-button:hover,
    [data-theme="dark"] .fc-dayGridMonth-button:hover,
    [data-theme="dark"] .fc-dayGridWeek-button:hover,
    [data-theme="dark"] .fc-listWeek-button:hover {
        background: var(--secondary-mint) !important;
        border-color: var(--secondary-mint) !important;
        color: var(--bg-primary) !important;
    }
    
    [data-theme="dark"] .fc-dayGridMonth-button.fc-button-active,
    [data-theme="dark"] .fc-dayGridWeek-button.fc-button-active,
    [data-theme="dark"] .fc-listWeek-button.fc-button-active {
        background: var(--secondary-mint) !important;
        border-color: var(--secondary-mint) !important;
        color: var(--bg-primary) !important;
    }
    
    [data-theme="dark"] .fc-toolbar-title {
        color: var(--text-primary) !important;
    }
    
    [data-theme="dark"] .fc-col-header-cell {
        background: var(--bg-secondary);
        border-color: var(--neutral-light-grey);
        color: var(--text-primary);
    }
    
    [data-theme="dark"] .fc-daygrid-day {
        background: var(--bg-tertiary);
        border-color: var(--neutral-light-grey);
    }
    
    [data-theme="dark"] .fc-day-today {
        background: rgba(94, 213, 199, 0.1) !important;
    }
    
    [data-theme="dark"] .fc-event {
        border-color: var(--secondary-mint);
        background: var(--secondary-mint);
        color: var(--bg-primary);
    }
}

/* Task item mobile improvements */
@media (max-width: 576px) {
    .task-item {
        padding: 1rem;
        margin-bottom: 0.75rem;
        border-radius: 8px;
    }
    
    .task-actions {
        margin-top: 0.75rem;
        display: flex;
        gap: 0.5rem;
        flex-wrap: wrap;
    }
    
    .task-actions .btn {
        flex: 1;
        min-width: 0;
    }
}

/* Loading spinner mobile optimization */
@media (max-width: 576px) {
    .app-loading {
        padding: 2rem;
    }
    
    .loading-logo {
        width: 64px;
        height: 64px;
        margin-bottom: 1.5rem;
    }
    
    .loading-text {
        font-size: 1.125rem;
        margin-bottom: 0.5rem;
    }
    
    .loading-subtext {
        font-size: 0.875rem;
    }
}

/* Accessibility improvements for mobile */
@media (max-width: 768px) {
    /* Ensure adequate spacing for touch targets */
    .nav-link,
    .btn,
    .form-control,
    .dropdown-toggle {
        margin-bottom: 0.25rem;
    }
    
    /* Improve focus visibility on mobile */
    .btn:focus,
    .form-control:focus,
    .form-select:focus {
        outline: 2px solid var(--primary-blue);
        outline-offset: 2px;
    }
}

/* Login page mobile improvements */
@media (max-width: 768px) {
    .login-container {
        flex-direction: column;
        min-height: 100vh;
    }
    
    .features-side {
        min-height: 40vh;
        order: 2;
    }
    
    .login-side {
        order: 1;
        padding: 2rem 1rem;
    }
    
    .login-card {
        max-width: 100%;
        padding: 2rem 1.5rem;
        margin: 0;
    }
    
    .features-two-column {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .feature-card {
        padding: 1rem;
        flex-direction: column;
        text-align: center;
    }
    
    .feature-icon {
        margin-bottom: 0.75rem;
        margin-right: 0;
    }
    
    .brand-header {
        text-align: center;
        margin-bottom: 2rem;
    }
    
    .brand-title {
        font-size: 1.75rem;
    }
    
    .stats-showcase {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
        margin-top: 2rem;
    }
}

@media (max-width: 576px) {
    .login-side {
        padding: 1rem 0.75rem;
    }
    
    .login-card {
        padding: 1.5rem 1rem;
        border-radius: 16px;
    }
    
    .features-side {
        min-height: 35vh;
        padding: 1.5rem;
    }
    
    .brand-title {
        font-size: 1.5rem;
    }
    
    .feature-card h3 {
        font-size: 1rem;
    }
    
    .feature-card p {
        font-size: 0.875rem;
    }
    
    .stats-showcase {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    
    .stat-item {
        padding: 0.75rem;
    }
    
    .input-wrapper .form-control {
        padding-left: 3rem;
        font-size: 16px; /* Prevents zoom on iOS */
    }
    
    .btn-login {
        padding: 0.875rem 1rem;
        font-size: 1rem;
    }
}

/* ========================
   EDIT TASK FORM - BUTTON VISIBILITY FIXES
   ======================== */

/* Override general task-actions for edit task form buttons */
.edit-task-container .task-actions {
    flex-shrink: 1;
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: flex-start;
    margin-top: 24px;
    padding: 16px 0;
    border-top: 1px solid var(--border-color);
}

.edit-task-container .task-actions .btn {
    width: auto !important;
    height: auto !important;
    padding: 12px 24px !important;
    border-radius: 6px;
    font-weight: 500;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    min-height: 44px;
    transition: all 0.2s ease;
}

.edit-task-container .task-actions .btn-primary {
    background-color: var(--primary-blue);
    border-color: var(--primary-blue);
    color: white;
}

.edit-task-container .task-actions .btn-primary:hover {
    background-color: #3A80D2;
    border-color: #3A80D2;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(74, 144, 226, 0.3);
}

.edit-task-container .task-actions .btn-secondary {
    background-color: #6c757d;
    border-color: #6c757d;
    color: white;
}

.edit-task-container .task-actions .btn-secondary:hover {
    background-color: #5a6268;
    border-color: #545b62;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(108, 117, 125, 0.3);
}

/* Mobile responsive for edit task buttons */
@media (max-width: 768px) {
    .edit-task-container .task-actions {
        flex-direction: column;
        gap: 8px;
        padding: 16px 0;
    }
    
    .edit-task-container .task-actions .btn {
        width: 100% !important;
        justify-content: center;
        margin-bottom: 8px;
        padding: 12px 16px !important;
    }
}

/* ============================================================================
   MOBILE-FIRST RESPONSIVE DESIGN
   ============================================================================ */

/* Compact Header Styles */
.compact-header {
    padding: 0.75rem;
    margin-bottom: 1rem;
    background: var(--card-bg);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-subtle);
    border: 1px solid var(--border-color);
}

.compact-header .header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.compact-header .header-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}

.compact-header .header-title h2 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
}

.compact-header .header-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

/* Collapsible Filter Panel */
.filter-panel {
    background: var(--card-bg);
    border-radius: var(--border-radius);
    margin-bottom: 1rem;
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
    overflow: hidden;
}

.filter-panel.collapsed {
    max-height: 0;
    margin-bottom: 0;
    border: none;
    opacity: 0;
}

.filter-panel.expanded {
    max-height: 500px;
    opacity: 1;
}

.filter-panel-content {
    padding: 1rem;
}

/* Bottom Navigation Bar */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--primary-blue);
    background-color: var(--primary-blue);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0.75rem 0.75rem;
    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
    z-index: 1040;
    display: none; /* Hidden by default, shown on mobile */
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    opacity: 1;
}

[data-theme="dark"] .bottom-nav {
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
}

.bottom-nav-content {
    display: flex;
    justify-content: space-around;
    align-items: center;
    max-width: 500px;
    margin: 0 auto;
}

.bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.8);
    transition: all 0.2s ease;
    padding: 0.875rem 0.75rem;
    border-radius: 8px;
    min-width: 75px;
    min-height: 52px;
    border: none;
    background: none;
    cursor: pointer;
}

.bottom-nav-item:hover,
.bottom-nav-item:focus,
.bottom-nav-item.active {
    color: white;
    background: rgba(255, 255, 255, 0.15);
    text-decoration: none;
}

.bottom-nav-item .nav-icon {
    width: 26px;
    height: 26px;
    margin-bottom: 0.375rem;
}

.bottom-nav-item .nav-label {
    font-size: 0.8rem;
    font-weight: 500;
    text-align: center;
    line-height: 1.2;
}

/* Filter Toggle Button for Mobile */
.filter-toggle-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1050;
    border-radius: 50%;
    width: 56px;
    height: 56px;
    box-shadow: var(--shadow-medium);
    display: none; /* Hidden by default, shown on mobile */
    border: none;
    background: var(--primary-blue);
    color: white;
    transition: all 0.3s ease;
}

.filter-toggle-btn:hover {
    background: var(--secondary-mint);
    transform: scale(1.05);
}

/* Mobile-specific styles */
@media (max-width: 768px) {
    /* Show bottom navigation on mobile */
    .bottom-nav {
        display: block;
        background: var(--primary-blue);
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        padding: 1rem 0.75rem;
        padding-bottom: calc(1rem + env(safe-area-inset-bottom));
    }
    
    .bottom-nav-item {
        color: rgba(255, 255, 255, 0.8);
    }
    
    .bottom-nav-item:hover,
    .bottom-nav-item:focus,
    .bottom-nav-item.active {
        color: white;
        background: rgba(255, 255, 255, 0.15);
    }
    
    /* Add bottom padding to content to account for bottom nav */
    .app-main {
        padding-bottom: calc(100px + env(safe-area-inset-bottom));
    }
    
    /* Optimize compact header for mobile - keep horizontal when space allows */
    .compact-header .header-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 0.75rem;
        flex-wrap: wrap;
    }
    
    .compact-header .header-title {
        flex: 1;
        min-width: 0;
    }
    
    .compact-header .header-actions {
        flex-shrink: 0;
        display: flex;
        gap: 0.5rem;
        align-items: center;
    }
    
    .compact-header .header-actions .btn {
        flex-shrink: 0;
        white-space: nowrap;
        min-width: 44px; /* Touch-friendly minimum */
    }
    
    /* Ensure section headers stay on one line */
    .section-header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        padding: 0.75rem 1rem;
    }
    
    .section-title {
        flex: 1;
        min-width: 0;
        font-size: 1rem !important;
        margin: 0 !important;
    }
    
    .section-header .btn {
        flex-shrink: 0;
        margin-left: 0.5rem;
    }
    
    /* Improve filter panel for mobile */
    .filter-panel-content {
        padding: 0.75rem;
    }
    
    .filter-panel-content .row {
        --bs-gutter-x: 0.5rem;
    }
    
    .filter-panel-content .col-md-2 {
        margin-bottom: 0.75rem;
    }
    
    /* Stack filter controls vertically on mobile */
    .filter-panel-content .row .col-md-2 {
        flex: 0 0 auto;
        width: 100%;
    }
    
    /* Improve add task form for mobile */
    .task-form-container {
        padding: 0.5rem;
        margin-bottom: 1rem;
    }
    
    .task-form .row .col-md-3,
    .task-form .row .col-md-2,
    .task-form .row .col-md-1 {
        flex: 0 0 auto;
        width: 100%;
        margin-bottom: 0.5rem;
    }
}

@media (max-width: 576px) {
    .compact-header .header-title h2 {
        font-size: 1.125rem;
    }
    
    .bottom-nav-item .nav-label {
        font-size: 0.625rem;
    }
    
    .bottom-nav-item {
        min-width: 50px;
        padding: 0.25rem 0.375rem;
    }
    
    .bottom-nav-item .nav-icon {
        width: 18px;
        height: 18px;
        margin-bottom: 0.0625rem;
    }
    
    /* Make compact header even more compact on very small screens */
    .compact-header {
        padding: 0.5rem;
        margin-bottom: 0.75rem;
    }
    
    .compact-header .header-content {
        /* On very small screens, stack vertically if needed */
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .compact-header .header-actions .btn {
        padding: 0.375rem 0.5rem;
        font-size: 0.8125rem;
    }
    
    /* Optimize filter buttons for small screens */
    .filter-panel-content .btn {
        font-size: 0.8125rem;
        padding: 0.375rem 0.5rem;
    }
    
    /* Ensure section headers remain compact on very small screens */
    .section-header {
        padding: 0.5rem 0.75rem;
    }
    
    .section-title {
        font-size: 0.9rem !important;
    }
    
    .task-count {
        font-size: 0.75rem;
        padding: 0.125rem 0.375rem;
    }
}

/* Dark theme for bottom navigation */
[data-theme="dark"] .bottom-nav {
    background: var(--primary-blue);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .bottom-nav-item {
    color: rgba(255, 255, 255, 0.8);
}

[data-theme="dark"] .bottom-nav-item:hover,
[data-theme="dark"] .bottom-nav-item:focus,
[data-theme="dark"] .bottom-nav-item.active {
    color: white;
    background: rgba(255, 255, 255, 0.15);
}

/* Ensure proper spacing for task sections */
@media (max-width: 768px) {
    .task-section {
        margin-bottom: 1.5rem;
    }
    
    .task-lists {
        margin-top: 0;
    }
    
    /* Improve task item spacing on mobile */
    .task-item {
        margin-bottom: 0.75rem;
        padding: 0.75rem;
        border-radius: 8px;
        background: var(--card-bg);
        border: 1px solid var(--border-color);
        box-shadow: var(--shadow-subtle);
    }
    
    .task-item .task-content {
        display: flex;
        gap: 0.75rem;
    }
    
    .task-item .task-details {
        flex: 1;
        min-width: 0;
    }
    
    .task-item .task-meta {
        margin-top: 0.5rem;
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem;
    }
    
    .task-item .task-meta .badge {
        font-size: 0.6875rem;
        padding: 0.25rem 0.375rem;
    }
}

/* ============================================================================
   MOBILE FIXES - HIGH SPECIFICITY (Added at end to override existing styles)
   ============================================================================ */

/* Force bottom navigation styling on mobile */
@media (max-width: 768px) {
    body .bottom-nav {
        display: block !important;
        background: var(--primary-blue) !important;
        background-color: var(--primary-blue) !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
        opacity: 1 !important;
    }
    
    body .bottom-nav .bottom-nav-item {
        color: rgba(255, 255, 255, 0.8) !important;
    }
    
    body .bottom-nav .bottom-nav-item:hover,
    body .bottom-nav .bottom-nav-item:focus,
    body .bottom-nav .bottom-nav-item.active {
        color: white !important;
        background: rgba(255, 255, 255, 0.15) !important;
    }
}

/* Force compact header layout fixes */
@media (max-width: 768px) {
    .compact-header .header-content {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 0.75rem !important;
        flex-wrap: nowrap !important;
    }
    
    .compact-header .header-title {
        flex: 1 !important;
        min-width: 0 !important;
        display: flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
    }
    
    .compact-header .header-actions {
        flex-shrink: 0 !important;
        display: flex !important;
        gap: 0.5rem !important;
        align-items: center !important;
    }
}

/* Force section header single-line layout */
@media (max-width: 768px) {
    .section-header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        padding: 0.75rem 1rem !important;
    }
    
    .section-header .section-title {
        flex: 1 !important;
        min-width: 0 !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
    }
    
    .section-header .btn {
        flex-shrink: 0 !important;
        margin-left: 0.5rem !important;
    }
    
    .section-header h3 {
        font-size: 1rem !important;
        margin: 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
}

/* Very small screens - stack if absolutely necessary */
@media (max-width: 480px) {
    .compact-header .header-content {
        flex-wrap: wrap !important;
        justify-content: center !important;
        text-align: center !important;
    }
    
    .compact-header .header-title {
        width: 100% !important;
        justify-content: center !important;
        margin-bottom: 0.5rem !important;
    }
    
    .compact-header .header-actions {
        justify-content: center !important;
    }
}

/* Dark theme overrides */
[data-theme="dark"] .bottom-nav {
    background: var(--primary-blue) !important;
    background-color: var(--primary-blue) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    opacity: 1 !important;
}

[data-theme="dark"] .bottom-nav .bottom-nav-item {
    color: rgba(255, 255, 255, 0.8) !important;
}

[data-theme="dark"] .bottom-nav .bottom-nav-item:hover,
[data-theme="dark"] .bottom-nav .bottom-nav-item:focus,
[data-theme="dark"] .bottom-nav .bottom-nav-item.active {
    color: white !important;
    background: rgba(255, 255, 255, 0.15) !important;
}

/* ============================================================================
   MOBILE HEADER ALIGNMENT FIXES - ULTRA HIGH SPECIFICITY
   ============================================================================ */

/* Target the specific compact header in index.html */
@media (max-width: 768px) {
    .compact-header,
    div.compact-header {
        width: 100% !important;
    }
    
    .compact-header > .header-content,
    div.compact-header > div.header-content {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        gap: 1.25rem !important;
        padding: 0.75rem 1rem !important;
    }
    
    .compact-header .header-title,
    .compact-header > .header-content > .header-title,
    div.compact-header div.header-title {
        flex: 1 !important;
        min-width: 120px !important;
        max-width: calc(100% - 120px) !important;
        display: flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
        margin: 0 !important;
        overflow: visible !important;
    }
    
    .compact-header .header-title h2,
    .compact-header .header-title > h2 {
        margin: 0 !important;
        font-size: 1.125rem !important;
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: unset !important;
        flex: 1 !important;
        min-width: 100px !important;
        display: block !important;
        color: var(--text-primary) !important;
    }
    
    .compact-header .header-actions,
    .compact-header > .header-content > .header-actions,
    div.compact-header div.header-actions {
        flex-shrink: 0 !important;
        flex-basis: auto !important;
        display: flex !important;
        gap: 0.5rem !important;
        align-items: center !important;
        margin: 0 !important;
        width: auto !important;
        justify-content: flex-end !important;
    }
}

/* Target the specific section headers */
@media (max-width: 768px) {
    .task-section .section-header,
    div.task-section div.section-header,
    .completed-section .section-header {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        padding: 0.75rem 1rem !important;
    }
    
    .section-header .section-title,
    .section-header > .section-title,
    .section-header h3.section-title,
    .section-header > h3.section-title {
        flex: 1 !important;
        min-width: 0 !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
        font-size: 1rem !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    .section-header .task-count,
    .section-header > .section-title .task-count,
    .section-title .task-count {
        margin-left: 0.5rem !important;
        flex-shrink: 0 !important;
    }
    
    .section-header button,
    .section-header > button,
    .section-header .btn {
        flex-shrink: 0 !important;
        margin-left: 0.5rem !important;
        margin: 0 0 0 0.5rem !important;
    }
}

/* Force flex behavior on very small screens */
@media (max-width: 576px) {
    .compact-header .header-content {
        min-width: 100% !important;
    }
    
    .compact-header .header-title h2 {
        font-size: 1rem !important;
    }
    
    .section-header h3.section-title {
        font-size: 0.9rem !important;
    }
}

/* Override any Bootstrap or other framework classes */
@media (max-width: 768px) {
    .compact-header .row,
    .section-header .row {
        margin: 0 !important;
        flex-wrap: nowrap !important;
    }
    
    .compact-header .col-12,
    .section-header .col-12 {
        padding: 0 !important;
        flex: none !important;
    }
    
    /* Ensure no margins or paddings interfere */
    .compact-header * {
        box-sizing: border-box !important;
    }
    
    .section-header * {
        box-sizing: border-box !important;
    }
}

/* ============================================================================
   MOBILE FIXES - HIGH SPECIFICITY (Added at end to override existing styles)
   ============================================================================ */

/* Enhanced Mobile Task Cards - Compact and Touch-Friendly */
@media (max-width: 768px) {
    /* Improve task item spacing and layout on mobile */
    .task-item {
        margin-bottom: 0.5rem !important;
        padding: 0.75rem !important;
        border-radius: 12px !important;
        background: var(--card-bg) !important;
        border: 1px solid var(--border-color) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
        transition: all 0.2s ease !important;
    }
    
    .task-item:hover {
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
        border-color: var(--primary-blue) !important;
    }
    
    .task-item .task-content {
        display: flex !important;
        gap: 0.75rem !important;
        align-items: flex-start !important;
    }
    
    .task-item .task-checkbox {
        flex-shrink: 0 !important;
        margin-top: 2px !important;
    }
    
    .task-item .checkbox-btn {
        width: 32px !important;
        height: 32px !important;
        border-radius: 8px !important;
        border: 2px solid var(--neutral-light-grey) !important;
        transition: all 0.2s ease !important;
    }
    
    .task-item .task-details {
        flex: 1 !important;
        min-width: 0 !important;
    }
    
    .task-item .task-description {
        font-size: 0.9rem !important;
        font-weight: 500 !important;
        line-height: 1.4 !important;
        color: var(--text-primary) !important;
        margin-bottom: 0.25rem !important;
    }
    
    .task-item .task-comments {
        font-size: 0.8rem !important;
        color: var(--text-secondary) !important;
        margin-bottom: 0.25rem !important;
        line-height: 1.3 !important;
    }
    
    .task-item .task-owner {
        font-size: 0.75rem !important;
        color: var(--text-secondary) !important;
        margin-bottom: 0.5rem !important;
    }
    
    .task-item .task-meta {
        margin-top: 0.5rem !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0.375rem !important;
        align-items: center !important;
    }
    
    .task-item .task-meta .badge {
        font-size: 0.65rem !important;
        padding: 0.25rem 0.5rem !important;
        border-radius: 6px !important;
        font-weight: 500 !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
        line-height: 1.3 !important;
        max-width: 100% !important;
    }
    
    .task-item .due-date {
        font-size: 0.7rem !important;
        padding: 0.25rem 0.5rem !important;
        border-radius: 6px !important;
        background: rgba(74, 144, 226, 0.1) !important;
        color: var(--primary-blue) !important;
        font-weight: 500 !important;
        white-space: nowrap !important;
    }
    
    .task-item .due-date.overdue {
        background: rgba(220, 53, 69, 0.1) !important;
        color: var(--overdue-red) !important;
    }
    
    .task-item .due-date.due-today {
        background: rgba(255, 193, 7, 0.1) !important;
        color: var(--due-today-orange) !important;
    }
    
    /* Enhanced Touch-Friendly Action Buttons */
    .task-item .task-actions {
        flex-shrink: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0.5rem !important;
        align-items: center !important;
        margin-left: 0.5rem !important;
    }
    
    .task-item .task-actions .btn {
        width: 44px !important;
        height: 44px !important;
        padding: 0 !important;
        border-radius: 12px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-width: 1.5px !important;
        transition: all 0.2s ease !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    }
    
    .task-item .task-actions .btn:hover {
        transform: translateY(-1px) !important;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
    }
    
    .task-item .task-actions .btn-outline-primary {
        background: linear-gradient(135deg, var(--primary-blue), #3d7bd6) !important;
        border-color: var(--primary-blue) !important;
        color: white !important;
    }
    
    .task-item .task-actions .btn-outline-primary:hover {
        background: linear-gradient(135deg, #3d7bd6, var(--primary-blue)) !important;
        border-color: #3d7bd6 !important;
        color: white !important;
    }
    
    .task-item .task-actions .btn-outline-danger {
        background: linear-gradient(135deg, #dc3545, #c82333) !important;
        border-color: #dc3545 !important;
        color: white !important;
    }
    
    .task-item .task-actions .btn-outline-danger:hover {
        background: linear-gradient(135deg, #c82333, #dc3545) !important;
        border-color: #c82333 !important;
        color: white !important;
    }
    
    .task-item .task-actions .btn .feather-sm {
        width: 20px !important;
        height: 20px !important;
        stroke-width: 2.5 !important;
    }
    
    /* Completed task styling adjustments */
    .task-item.completed {
        opacity: 0.7 !important;
        background: var(--neutral-bg) !important;
    }
    
    .task-item.completed .task-description {
        text-decoration: line-through !important;
        color: var(--text-secondary) !important;
    }
    
    .task-item.completed .checkbox-btn {
        background-color: var(--success-green) !important;
        border-color: var(--success-green) !important;
        color: white !important;
    }
    
    /* Improve badge contrast on mobile */
    .task-item .task-category {
        font-weight: 600 !important;
    }
    
    .task-item .task-status {
        font-weight: 600 !important;
    }
    
    .task-item .task-priority {
        font-weight: 600 !important;
    }
    
    /* Add subtle press effect for better touch feedback */
    .task-item .task-actions .btn:active {
        transform: translateY(0) scale(0.95) !important;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
    }
    
    /* Enhanced spacing for better readability */
    .task-section {
        margin-bottom: 1.5rem !important;
    }
    
    .task-list {
        padding: 0 !important;
    }
    
    /* Improve empty state on mobile */
    .empty-state {
        text-align: center !important;
        padding: 2rem 1rem !important;
        background: var(--card-bg) !important;
        border-radius: 12px !important;
        border: 1px solid var(--border-color) !important;
    }
    
    .empty-state .empty-icon {
        margin-bottom: 1rem !important;
    }
    
    .empty-state h4 {
        font-size: 1.1rem !important;
        margin-bottom: 0.5rem !important;
        color: var(--text-primary) !important;
    }
    
    .empty-state p {
        font-size: 0.85rem !important;
        color: var(--text-secondary) !important;
        margin: 0 !important;
    }
}

/* Mobile Matrix View Controls Optimization */
@media (max-width: 768px) {
    /* Matrix Controls Container */
    .matrix-controls .filter-section {
        background: var(--card-bg) !important;
        border: 1px solid var(--border-color) !important;
        border-radius: 12px !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
        padding: 0.75rem !important;
    }
    
    .matrix-controls .filter-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.75rem !important;
        align-items: stretch !important;
    }
    
    .matrix-controls .filter-label-group {
        text-align: center !important;
        margin-bottom: 0.25rem !important;
    }
    
    .matrix-controls .filter-label-group .fw-bold {
        font-size: 0.8rem !important;
        justify-content: center !important;
    }
    
    /* Matrix Select Controls */
    .matrix-controls .filter-item {
        flex: 1 !important;
        min-width: 0 !important;
    }
    
    .matrix-controls .filter-item .form-label {
        font-size: 0.7rem !important;
        font-weight: 600 !important;
        color: var(--text-secondary) !important;
        text-align: center !important;
        margin-bottom: 0.375rem !important;
    }
    
    .matrix-controls .filter-item .form-select {
        font-size: 0.75rem !important;
        padding: 0.375rem 0.5rem !important;
        border-radius: 8px !important;
        border-width: 1.5px !important;
        text-align: center !important;
    }
    
    /* Matrix Actions Row */
    .matrix-controls .filter-item.ms-auto {
        margin: 0 !important;
        padding-top: 0.5rem !important;
        border-top: 1px solid var(--border-color) !important;
    }
    
    .matrix-controls .filter-item .d-flex {
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }
    
    .matrix-controls .btn-sm {
        padding: 0.375rem 0.75rem !important;
        border-radius: 8px !important;
        font-size: 0.75rem !important;
        font-weight: 500 !important;
        white-space: nowrap !important;
        min-width: auto !important;
    }
    
    .matrix-controls .btn-sm .btn-text {
        display: inline !important;
    }
    
    .matrix-controls .btn-sm .feather-xs {
        width: 14px !important;
        height: 14px !important;
    }
    
    .matrix-controls .text-muted {
        font-size: 0.6875rem !important;
        text-align: center !important;
    }
}

/* Extra Small Screens - Matrix Controls */
@media (max-width: 576px) {
    .matrix-controls .filter-section {
        padding: 0.5rem !important;
    }
    
    .matrix-controls .filter-item .form-select {
        font-size: 0.6875rem !important;
        padding: 0.25rem 0.375rem !important;
    }
    
    .matrix-controls .filter-item .form-label {
        font-size: 0.625rem !important;
    }
    
    .matrix-controls .text-muted {
        font-size: 0.625rem !important;
    }
    
    /* Ensure consistent fullscreen button sizing on small screens */
    .matrix-controls .btn-sm {
        padding: 0.25rem 0.5rem !important;
        font-size: 0.6875rem !important;
    }
    
    .matrix-controls .btn-sm .feather-xs {
        width: 12px !important;
        height: 12px !important;
    }
}

/* Dark Theme Support for Matrix Controls */
@media (max-width: 768px) {
    [data-theme="dark"] .matrix-controls .filter-section {
        background: var(--bg-secondary) !important;
        border-color: var(--neutral-light-grey) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
    }
    
    [data-theme="dark"] .matrix-controls .filter-item.ms-auto {
        border-color: var(--neutral-light-grey) !important;
    }
}

/* Dark Theme Support for Enhanced Mobile Task Cards */
@media (max-width: 768px) {
    [data-theme="dark"] .task-item {
        background: var(--bg-secondary) !important;
        border-color: var(--neutral-light-grey) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
    }
    
    [data-theme="dark"] .task-item:hover {
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
        border-color: var(--secondary-mint) !important;
    }
    
    [data-theme="dark"] .task-item .task-description {
        color: var(--text-primary) !important;
    }
    
    [data-theme="dark"] .task-item .task-comments {
        color: var(--text-secondary) !important;
    }
    
    [data-theme="dark"] .task-item .task-owner {
        color: var(--text-secondary) !important;
    }
    
    [data-theme="dark"] .task-item .due-date {
        background: rgba(94, 213, 199, 0.15) !important;
        color: var(--secondary-mint) !important;
    }
    
    [data-theme="dark"] .task-item .due-date.overdue {
        background: rgba(220, 53, 69, 0.15) !important;
        color: #ff6b7d !important;
    }
    
    [data-theme="dark"] .task-item .due-date.due-today {
        background: rgba(255, 193, 7, 0.15) !important;
        color: #ffc107 !important;
    }
    
    [data-theme="dark"] .task-item.completed {
        background: var(--bg-tertiary) !important;
    }
    
    [data-theme="dark"] .task-item .task-actions .btn-outline-primary {
        background: linear-gradient(135deg, var(--secondary-mint), #4fc3a5) !important;
        border-color: var(--secondary-mint) !important;
    }
    
    [data-theme="dark"] .task-item .task-actions .btn-outline-primary:hover {
        background: linear-gradient(135deg, #4fc3a5, var(--secondary-mint)) !important;
        border-color: #4fc3a5 !important;
    }
    
    [data-theme="dark"] .empty-state {
        background: var(--bg-secondary) !important;
        border-color: var(--neutral-light-grey) !important;
    }
    
    [data-theme="dark"] .empty-state h4 {
        color: var(--text-primary) !important;
    }
    
    [data-theme="dark"] .empty-state p {
        color: var(--text-secondary) !important;
    }
}

/* Mobile Board View Optimizations - Compact View By Buttons */
@media (max-width: 768px) {
    /* Compact View Controls Container */
    .view-controls .d-flex {
        flex-direction: column !important;
        gap: 0.75rem !important;
        padding: 0.75rem !important;
        align-items: stretch !important;
    }
    
    /* View By Label Row */
    .view-controls .fw-bold {
        font-size: 0.8rem !important;
        text-align: center !important;
        margin-bottom: 0.25rem !important;
    }
    
    /* Compact Button Group */
    .view-controls .btn-group {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0.25rem !important;
        justify-content: center !important;
    }
    
    .view-controls .btn-group .btn {
        flex: 1 !important;
        min-width: 0 !important;
        padding: 0.375rem 0.5rem !important;
        font-size: 0.75rem !important;
        font-weight: 500 !important;
        border-radius: 8px !important;
        white-space: nowrap !important;
        border-width: 1.5px !important;
        transition: all 0.2s ease !important;
    }
    
    .view-controls .btn-group .btn .feather-xs {
        width: 14px !important;
        height: 14px !important;
        margin-right: 0.25rem !important;
    }
    
    /* Active state styling */
    .view-controls .btn-check:checked + .btn {
        background: var(--primary-blue) !important;
        border-color: var(--primary-blue) !important;
        color: white !important;
        box-shadow: 0 2px 4px rgba(74, 144, 226, 0.3) !important;
    }
    
    /* Hover effects */
    .view-controls .btn:hover {
        transform: translateY(-1px) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    }
    
    /* Right-side controls row */
    .view-controls .ms-auto {
        margin: 0 !important;
        justify-content: space-between !important;
        padding-top: 0.5rem !important;
        border-top: 1px solid var(--border-color) !important;
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }
    
    .view-controls .ms-auto .text-muted {
        font-size: 0.6875rem !important;
        flex: 1 !important;
        text-align: center !important;
    }
    
    .view-controls .ms-auto .btn-sm {
        padding: 0.375rem 0.75rem !important;
        border-radius: 8px !important;
        flex-shrink: 0 !important;
        font-size: 0.75rem !important;
        font-weight: 500 !important;
        white-space: nowrap !important;
        min-width: auto !important;
    }
    
    .view-controls .ms-auto .btn-sm .btn-text {
        display: inline !important;
    }
    
    .view-controls .ms-auto .btn-sm .feather-xs {
        width: 14px !important;
        height: 14px !important;
    }
    
    /* Overall container improvements */
    .view-controls {
        margin-bottom: 1rem !important;
    }
    
    .view-controls .bg-light {
        background: var(--card-bg) !important;
        border: 1px solid var(--border-color) !important;
        border-radius: 12px !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    }
}

/* Extra Small Screens - Even More Compact */
@media (max-width: 576px) {
    .view-controls .btn-group .btn {
        padding: 0.25rem 0.375rem !important;
        font-size: 0.6875rem !important;
    }
    
    .view-controls .btn-group .btn .feather-xs {
        width: 12px !important;
        height: 12px !important;
        margin-right: 0.125rem !important;
    }
    
    /* Stack buttons in 2x2 grid on very small screens */
    .view-controls .btn-group {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 0.375rem !important;
    }
    
    .view-controls .btn-group .btn {
        flex: none !important;
    }
    
    .view-controls .fw-bold {
        font-size: 0.75rem !important;
    }
    
    .view-controls .ms-auto .text-muted {
        font-size: 0.625rem !important;
    }
    
    /* Ensure consistent fullscreen button sizing on small screens */
    .view-controls .ms-auto .btn-sm {
        padding: 0.25rem 0.5rem !important;
        font-size: 0.6875rem !important;
    }
    
    .view-controls .ms-auto .btn-sm .feather-xs {
        width: 12px !important;
        height: 12px !important;
    }
}

/* Dark Theme Support for Board View Controls */
@media (max-width: 768px) {
    [data-theme="dark"] .view-controls .bg-light {
        background: var(--bg-secondary) !important;
        border-color: var(--neutral-light-grey) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
    }
    
    [data-theme="dark"] .view-controls .ms-auto {
        border-color: var(--neutral-light-grey) !important;
    }
    
    [data-theme="dark"] .view-controls .btn-check:checked + .btn {
        background: var(--secondary-mint) !important;
        border-color: var(--secondary-mint) !important;
        color: var(--bg-primary) !important;
    }
    
    [data-theme="dark"] .view-controls .btn:hover {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
    }
}

/* Unified Section Headers - Consistent Mobile Experience */
@media (max-width: 768px) {
    /* Universal Section Header Styling */
    .section-header {
        background: var(--card-bg) !important;
        border: 1px solid var(--border-color) !important;
        border-radius: 12px !important;
        padding: 0.75rem 1rem !important;
        margin-bottom: 1rem !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    }
    
    .section-header .section-title {
        font-size: 0.9rem !important;
        font-weight: 600 !important;
        color: var(--primary-blue) !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }
    
    .section-header .section-title i {
        width: 16px !important;
        height: 16px !important;
        margin-right: 0.5rem !important;
        color: var(--primary-blue) !important;
    }
    
    /* Ensure consistent spacing after section headers */
    .section-header + .task-form-container,
    .section-header + .filter-container,
    .section-header + .view-controls,
    .section-header + .matrix-controls {
        margin-top: 0 !important;
        border-radius: 12px !important;
        border: 1px solid var(--border-color) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    }
    
    /* Remove redundant containers after section headers */
    .view-controls .d-flex:first-child {
        padding: 0.5rem !important;
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
    }
    
    .matrix-controls .filter-section {
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
        padding: 0.5rem !important;
    }
    
    /* Board View Filters Styling */
    .filter-container {
        border: 1px solid var(--border-color) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
        border-radius: 12px !important;
    }
    
    .filter-container .p-2 {
        background: var(--card-bg) !important;
        border: none !important;
        border-radius: 12px !important;
        padding: 0.75rem !important;
    }
    
    .filter-container .row {
        gap: 0.5rem !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .filter-container .btn-sm {
        font-size: 0.75rem !important;
        padding: 0.375rem 0.5rem !important;
        border-radius: 8px !important;
        white-space: nowrap !important;
    }
    
    .filter-container .dropdown-toggle {
        font-size: 0.75rem !important;
        padding: 0.375rem 0.5rem !important;
        border-radius: 8px !important;
        text-align: center !important;
    }
}

/* Mobile Board Filters - Compact Layout */
@media (max-width: 768px) {
    .filter-container .row {
        flex-direction: column !important;
        gap: 0.75rem !important;
        align-items: stretch !important;
    }
    
    .filter-container .col-md-3,
    .filter-container .col-md-2 {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
    }
    
    .filter-container .dropdown-toggle {
        width: 100% !important;
        justify-content: center !important;
        display: flex !important;
        align-items: center !important;
    }
    
    /* Apply/Clear buttons row */
    .filter-container .d-flex {
        justify-content: center !important;
        gap: 0.75rem !important;
        flex-wrap: nowrap !important;
    }
    
    .filter-container .d-flex .btn {
        flex: 1 !important;
        max-width: 120px !important;
    }
}

/* Small Screens - Even More Compact Headers */
@media (max-width: 576px) {
    .section-header {
        padding: 0.5rem 0.75rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    .section-header .section-title {
        font-size: 0.8rem !important;
    }
    
    .section-header .section-title i {
        width: 14px !important;
        height: 14px !important;
        margin-right: 0.375rem !important;
    }
    
    /* Extra compact board filters */
    .filter-container .btn-sm {
        font-size: 0.6875rem !important;
        padding: 0.25rem 0.375rem !important;
    }
    
    .filter-container .dropdown-toggle {
        font-size: 0.6875rem !important;
        padding: 0.25rem 0.375rem !important;
    }
}

/* Dark Theme Support for Section Headers */
@media (max-width: 768px) {
    [data-theme="dark"] .section-header {
        background: var(--bg-secondary) !important;
        border-color: var(--neutral-light-grey) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
    }
    
    [data-theme="dark"] .section-header .section-title {
        color: var(--secondary-mint) !important;
    }
    
    [data-theme="dark"] .section-header .section-title i {
        color: var(--secondary-mint) !important;
    }
    
    /* Dark theme board filters */
    [data-theme="dark"] .filter-container {
        border-color: var(--neutral-light-grey) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
    }
    
    [data-theme="dark"] .filter-container .p-2 {
        background: var(--bg-secondary) !important;
    }
}

/* Board View Layout-Specific Section Headers */
@media (max-width: 768px) {
    /* Ensure proper section header visibility based on board layout */
    .board-single-view .matrix-header,
    .board-matrix-view .view-by-header {
        display: none !important;
    }
    
    /* Consistent spacing for board view sections */
    #singleDimControls + .section-header,
    #matrixControls + .section-header {
        margin-top: 1.5rem !important;
    }
}



/* Dark Theme Support for Enhanced Mobile Task Cards */