/* Custom CSS for E-commerce CRM */

/* Light Mode (Default) */
:root,
[data-theme="light"],
.light-mode {
    --sidebar-width: 260px;
    --primary-color: #0d6efd;
    --secondary-color: #6c757d;
    --success-color: #198754;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --info-color: #0dcaf0;
    --light-color: #f8f9fa;
    --dark-color: #212529;
    
    /* Background Colors */
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --bg-tertiary: #e9ecef;
    
    /* Text Colors */
    --text-primary: #212529;
    --text-secondary: #6c757d;
    --text-muted: #868e96;
    --text-inverse: #ffffff;
    
    /* Border Colors */
    --border-color: #dee2e6;
    --border-color-light: #e9ecef;
    --border-color-dark: #adb5bd;
    
    /* Card Colors */
    --card-bg: #ffffff;
    --card-border: #e9ecef;
    --card-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    
    /* Input Colors */
    --input-bg: #ffffff;
    --input-border: #dee2e6;
    --input-text: #212529;
    
    /* Table Colors */
    --table-bg: #ffffff;
    --table-header-bg: #f8f9fa;
    --table-border: #dee2e6;
    --table-hover: #f8f9fa;
    
    /* Sidebar Colors */
    --sidebar-bg: linear-gradient(135deg, #0d6efd 0%, #0056b3 100%);
    --sidebar-text: rgba(255, 255, 255, 0.8);
    --sidebar-text-hover: #ffffff;
    --sidebar-active-bg: rgba(255, 255, 255, 0.2);
    
    /* Navbar Colors */
    --navbar-bg: #ffffff;
    --navbar-text: #212529;
    --navbar-border: #e9ecef;
    
    /* Scrollbar Colors */
    --scrollbar-track: #f1f1f1;
    --scrollbar-thumb: #c1c1c1;
    --scrollbar-thumb-hover: #a8a8a8;
    
    --border-radius: 0.5rem;
    --box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    --transition: all 0.15s ease-in-out;
}

/* Dark Mode */
[data-theme="dark"],
.dark-mode {
    --primary-color: #4dabf7;
    --secondary-color: #868e96;
    --success-color: #51cf66;
    --danger-color: #ff6b6b;
    --warning-color: #ffd43b;
    --info-color: #74c0fc;
    --light-color: #2d2d2d;
    --dark-color: #e9ecef;
    
    /* Background Colors - High Contrast */
    --bg-primary: #1a1a1a;
    --bg-secondary: #2d2d2d;
    --bg-tertiary: #404040;
    
    /* Text Colors - High Contrast */
    --text-primary: #ffffff;
    --text-secondary: #e0e0e0;
    --text-muted: #b0b0b0;
    --text-inverse: #1a1a1a;
    
    /* Border Colors - Visible */
    --border-color: #404040;
    --border-color-light: #4d4d4d;
    --border-color-dark: #333333;
    
    /* Card Colors */
    --card-bg: #2d2d2d;
    --card-border: #404040;
    --card-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.5);
    
    /* Input Colors */
    --input-bg: #2d2d2d;
    --input-border: #404040;
    --input-text: #ffffff;
    
    /* Table Colors */
    --table-bg: #2d2d2d;
    --table-header-bg: #404040;
    --table-border: #4d4d4d;
    --table-hover: #404040;
    
    /* Sidebar Colors - Maintain visibility */
    --sidebar-bg: linear-gradient(135deg, #1e3a5f 0%, #0d2841 100%);
    --sidebar-text: rgba(255, 255, 255, 0.9);
    --sidebar-text-hover: #ffffff;
    --sidebar-active-bg: rgba(255, 255, 255, 0.25);
    
    /* Navbar Colors */
    --navbar-bg: #2d2d2d;
    --navbar-text: #ffffff;
    --navbar-border: #404040;
    
    /* Scrollbar Colors */
    --scrollbar-track: #2d2d2d;
    --scrollbar-thumb: #606060;
    --scrollbar-thumb-hover: #707070;
    
    --box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.5);
}

/* Global Styles */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    color: var(--text-primary) !important;
    background-color: var(--bg-secondary) !important;
    transition: background-color 0.3s ease, color 0.3s ease;
    min-height: 100vh;
    position: relative;
}

/* Ensure dark mode applies to html element */
html[data-theme="dark"],
html.dark-mode {
    color-scheme: dark;
}

html[data-theme="light"],
html.light-mode {
    color-scheme: light;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}

/* Mobile Hamburger Menu Styles */
/* Hidden on desktop by default, but shown on mobile via media query */
@media (min-width: 768px) {
    .hamburger-btn {
        display: none !important;
    }
}

.hamburger-btn {
    background: none;
    border: none;
    font-size: 1.25rem;
    color: var(--text-primary);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: var(--border-radius);
    transition: var(--transition);
    position: relative;
    z-index: 2000; /* Ensure it is always on top */
    min-width: 44px; /* Minimum touch target size */
    min-height: 44px; /* Minimum touch target size */
    pointer-events: auto; /* Explicitly allow clicks */
}

.hamburger-btn:hover {
    background: var(--bg-tertiary);
}

.hamburger-btn:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.25);
}

/* Mobile Overlay */
.mobile-overlay {
    display: none; /* Hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1040; /* Below sidebar */
    opacity: 0;
    transition: opacity 0.3s ease;
}

.mobile-overlay.show {
    display: block; /* Show when active */
    opacity: 1;
}

/* Sidebar Styles */
.sidebar {
    min-height: 100vh;
    height: 100vh;
    background: linear-gradient(135deg, var(--primary-color) 0%, #0056b3 100%);
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
    transition: width 0.2s ease, min-width 0.2s ease;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1045;
    min-width: var(--sidebar-width);
    max-width: 400px;
    width: var(--sidebar-width);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Sidebar Resize Handle */
.sidebar-resize-handle {
    position: absolute;
    top: 0;
    right: 0;
    width: 8px;
    height: 100%;
    cursor: col-resize;
    background: rgba(255, 255, 255, 0.1);
    z-index: 1050;
    transition: background 0.2s ease, width 0.2s ease;
    border-right: 2px solid rgba(255, 255, 255, 0.3);
}

.sidebar-resize-handle:hover {
    background: rgba(255, 255, 255, 0.25);
    width: 10px;
    border-right-color: rgba(255, 255, 255, 0.5);
}

.sidebar-resize-handle.resizing {
    background: rgba(255, 255, 255, 0.4);
    width: 10px;
    border-right-color: rgba(255, 255, 255, 0.8);
}

/* Visual indicator dots for resize handle */
.sidebar-resize-handle::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 3px;
    height: 60px;
    background: repeating-linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.6) 0px,
        rgba(255, 255, 255, 0.6) 4px,
        transparent 4px,
        transparent 8px
    );
    border-radius: 2px;
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

.sidebar-resize-handle:hover::before {
    opacity: 1;
    background: repeating-linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.9) 0px,
        rgba(255, 255, 255, 0.9) 4px,
        transparent 4px,
        transparent 8px
    );
}

/* Mobile Sidebar Modifications */
@media (max-width: 767.98px) {
    /* Ensure full screen coverage on mobile */
    html, body {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
    }
    
    body {
        position: relative;
        min-height: 100vh;
        height: auto;
    }
    
    /* Remove all container padding on mobile for full width */
    .container-fluid {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .container-fluid > .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
    }
    
    .container-fluid > .row > * {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
    
    /* Override Bootstrap padding classes on mobile */
    .px-md-4, .px-lg-4, .px-md-3, .px-lg-3 {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
    
    /* Ensure main content areas are full width */
    main[class*="col-"], main.main-content {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    .sidebar-resize-handle {
        display: none;
    }
    
    .hamburger-btn,
    .hamburger-btn.d-md-none {
        display: inline-block !important; /* Force show on mobile */
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        z-index: 2000 !important; /* Ensure it's always on top */
        background: rgba(255, 255, 255, 0.1) !important;
        border: 1px solid rgba(255, 255, 255, 0.3) !important;
    }
    
    .hamburger-btn:hover,
    .hamburger-btn.d-md-none:hover {
        background: rgba(255, 255, 255, 0.2) !important;
    }
    
    .sidebar {
        position: fixed !important;
        top: 0;
        left: 0;
        width: 280px !important;
        height: 100vh;
        max-height: 100vh;
        transform: translateX(-100%);
        transition: transform 0.3s ease, opacity 0.3s ease;
        z-index: 1045;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
        scrollbar-width: thin; /* Firefox */
        scrollbar-color: rgba(255,255,255,0.3) transparent; /* Firefox */
        opacity: 0;
        pointer-events: none; /* Do not block clicks when hidden */
        visibility: hidden; /* Remove from hit-testing */
    }
    
    .sidebar.show {
        transform: translateX(0) !important;
        opacity: 1 !important;
        pointer-events: auto !important; /* Allow interaction when visible */
        visibility: visible !important;
    }
    
    .main-content {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 !important;
        min-height: 100vh;
        overflow-x: hidden !important; /* Prevent horizontal scroll */
        box-sizing: border-box !important;
    }
    
    .container-fluid.d-flex {
        flex-direction: column;
        height: auto;
        min-height: 100vh;
    }
    
    .container-fluid > .row {
        margin: 0 !important;
        width: 100% !important;
    }
    
    .sidebar {
        width: 280px !important;
    }
    
    /* overlay behaviour controlled by .show class only */
    
    /* Ensure sidebar content has proper spacing */
    .sidebar .sidebar-nav {
        padding-bottom: 2rem; /* Extra padding at bottom for scrolling */
    }
    
    /* Close button for mobile sidebar */
    .sidebar-close {
        position: absolute;
        top: 1rem;
        right: 1rem;
        background: rgba(255, 255, 255, 0.2);
        border: none;
        color: white;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: var(--transition);
        z-index: 1050;
    }
    
    .sidebar-close:hover {
        background: rgba(255, 255, 255, 0.3);
    }
    
    /* Adjust top navbar for mobile */
    .top-navbar {
        padding: 1rem 0.75rem !important;
        flex-wrap: wrap;
        position: relative;
        z-index: 1500; /* Above overlay when needed */
        width: 100% !important;
        margin: 0 !important;
    }

    .top-navbar .dropdown-menu {
        z-index: 2001; /* Ensure dropdown opens above everything */
    }
    
    .top-navbar h4 {
        font-size: 1.25rem;
    }
    
    .top-navbar .btn {
        font-size: 0.875rem;
        padding: 0.375rem 0.75rem;
    }
    
    /* Ensure cards and content don't overflow */
    .card, .card-body {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }
    
    /* Fix table responsiveness */
    .table-responsive {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* Remove any negative margins that might cause overflow */
    .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    .row > * {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
}

.sidebar-brand {
    padding: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
}

.sidebar-brand h3 {
    color: white;
    margin: 0;
    font-weight: 700;
    padding-right: 2rem; /* Space for close button on mobile */
}

.sidebar-nav {
    padding: 1rem 0;
}

.nav-item {
    margin-bottom: 0.25rem;
    position: relative;
}

.nav-item.dropdown {
    position: relative;
}

.sidebar .nav-link {
    color: rgba(255, 255, 255, 0.8);
    padding: 0.75rem 1.5rem;
    border-radius: 0;
    transition: var(--transition);
    display: flex;
    align-items: center;
    text-decoration: none;
}

.sidebar .nav-link:hover {
    color: white;
    background: rgba(255, 255, 255, 0.1);
    transform: translateX(5px);
}

.sidebar .nav-link.active {
    color: white;
    background: rgba(255, 255, 255, 0.2);
    border-left: 4px solid white;
}

.sidebar .nav-link i {
    width: 20px;
    margin-right: 0.75rem;
}

/* Bootstrap tab bars (page-level ".nav-tabs", e.g. Settings) --
   distinct from the sidebar's own .nav-link above. Solid blue pills for the
   inactive tabs so they read clearly against the light page background. */
.nav-tabs .nav-link {
    color: #ffffff;
    background-color: var(--primary-color);
    border: 1px solid var(--primary-color);
    margin-right: 6px;
}

.nav-tabs .nav-link:hover {
    color: #ffffff;
    background-color: #0b5ed7;
    border-color: #0b5ed7;
}

.nav-tabs .nav-link.active {
    color: var(--primary-color);
    background-color: #ffffff;
    border-color: var(--primary-color) var(--primary-color) #ffffff;
    font-weight: 600;
}

/* Sidebar dropdown styles for all screen sizes - Force static positioning to prevent overlap */
.sidebar .dropdown-menu {
    background: rgba(255, 255, 255, 0.1) !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: none !important;
    position: static !important;
    float: none !important;
    width: 100% !important;
    margin-top: 0 !important;
    margin-bottom: 0.25rem !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    z-index: 1 !important;
    padding: 0 !important;
    list-style: none !important;
    max-height: none !important;
    overflow: visible !important;
    clear: both !important;
    inset: auto !important;
}

.sidebar .dropdown-menu.show {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Ensure dropdowns don't overlap - each dropdown is in its own stacking context */
.sidebar .nav-item.dropdown {
    position: relative !important;
    z-index: auto;
    margin-bottom: 0.25rem;
}

.sidebar .nav-item.dropdown.show {
    z-index: 10;
}

/* Prevent multiple dropdowns from overlapping - force hide non-active ones */
.sidebar .nav-item.dropdown:not(.show) .dropdown-menu {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Ensure proper spacing between dropdown items */
.sidebar .nav-item.dropdown + .nav-item:not(.dropdown) {
    margin-top: 0;
}

.sidebar .nav-item.dropdown + .nav-item.dropdown {
    margin-top: 0;
}

/* Prevent dropdown content from overflowing */
.sidebar .nav-item.dropdown .dropdown-menu {
    max-width: 100% !important;
    box-sizing: border-box !important;
    min-width: 100% !important;
    width: 100% !important;
}

/* Ensure dropdown items are properly contained */
.sidebar .nav-item.dropdown {
    overflow: visible;
}

.sidebar .dropdown-item {
    color: rgba(255, 255, 255, 0.7);
    padding: 0.5rem 1.5rem 0.5rem 3rem;
    background: none;
    border: none;
    transition: all 0.3s ease;
    text-decoration: none;
    display: block;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar .dropdown-item:hover {
    color: white;
    background: rgba(255, 255, 255, 0.1);
    text-decoration: none;
}

.sidebar .dropdown-item i {
    width: 20px;
    margin-right: 0.5rem;
    text-align: center;
}

.sidebar .dropdown-toggle::after {
    margin-left: auto;
}

/* Dropdown menu styles for mobile */
@media (max-width: 767.98px) {
    /* Mobile-specific dropdown styles are now handled by global styles above */
}

/* Theme Toggle Button */
#theme-toggle-btn {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
    margin-left: 0.5rem;
}

#theme-toggle-btn:hover {
    background: var(--bg-secondary);
    transform: scale(1.05);
}

#theme-toggle-btn i {
    font-size: 1.1rem;
    color: var(--text-primary);
}

/* Main Content */
.main-content {
    background: var(--bg-secondary);
    min-height: 100vh;
    transition: background-color 0.3s ease;
    flex: 1;
    width: auto;
    margin-left: var(--sidebar-width);
    position: relative;
    z-index: 1;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Container with flex layout */
.container-fluid.d-flex {
    height: auto;
    overflow: visible;
}

/* Force sidebar and main content to be side-by-side for all pages (desktop only) */
@media (min-width: 768px) {
    .container-fluid > .row {
        display: flex !important;
        flex-wrap: nowrap !important;
        margin: 0 !important;
        height: auto;
    }

    .container-fluid > .row > .sidebar {
        flex-shrink: 0;
    }

    .container-fluid > .row > main.main-content,
    .container-fluid > .row > main[class*="col-"] {
        flex: 1 1 auto;
        width: auto !important;
        max-width: none !important;
        margin-left: var(--sidebar-width) !important;
    }
    
    .container-fluid.d-flex {
        height: auto;
        overflow: visible;
    }
}

.top-navbar {
    background: var(--navbar-bg);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--navbar-border);
    position: relative;
    z-index: 1030;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.top-navbar h4 {
    color: var(--text-primary);
}

.top-navbar .text-muted {
    color: var(--text-secondary) !important;
}

/* Cards */
.card {
    border: 1px solid var(--card-border);
    border-radius: var(--border-radius);
    box-shadow: var(--card-shadow);
    transition: var(--transition);
    background: var(--card-bg);
    color: var(--text-primary);
}

.card:hover {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

.card-header {
    background: var(--card-bg);
    border-bottom: 1px solid var(--border-color);
    font-weight: 600;
    color: var(--text-primary);
}

.card-body {
    color: var(--text-primary);
}

/* Stats Cards - Clean Design */
.stats-card {
    background: linear-gradient(135deg, var(--primary-color) 0%, #0056b3 100%);
    color: white;
    border-radius: var(--border-radius);
    padding: 1.5rem;
    margin-bottom: 1rem;
    position: relative;
    overflow: hidden;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.stats-card.success {
    background: linear-gradient(135deg, var(--success-color) 0%, #146c43 100%);
    color: white;
}

.stats-card.warning {
    background: linear-gradient(135deg, var(--warning-color) 0%, #e0a800 100%);
    color: var(--dark-color);
}

.stats-card.danger {
    background: linear-gradient(135deg, var(--danger-color) 0%, #b02a37 100%);
    color: white;
}

.stats-card.info {
    background: linear-gradient(135deg, var(--info-color) 0%, #0aa2c0 100%);
    color: white;
}

.stats-card.primary {
    background: linear-gradient(135deg, var(--primary-color) 0%, #0056b3 100%);
    color: white;
}

.stats-card.secondary {
    background: linear-gradient(135deg, var(--secondary-color) 0%, #5a6268 100%);
    color: white;
}

.stats-card.dark {
    background: linear-gradient(135deg, var(--dark-color) 0%, #343a40 100%);
    color: white;
}

.stats-card .d-flex {
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
}

.stats-number {
    /* Scales smoothly with available width instead of a single fixed size -- that's what was
       forcing numbers like "N1,787,000.00" to crack mid-digit (word-break: break-word breaks
       ANYWHERE it runs out of room, including inside a number) whenever four stat cards per
       row left too little space at common desktop widths. Deliberately capped lower (1.4rem,
       was 2rem) so long currency figures comfortably fit on one line at four-per-row instead of
       needing to shrink all the way down before they stop wrapping. Media-query overrides
       further down this file for narrower breakpoints still take over as normal at those sizes. */
    font-size: clamp(1rem, 0.85vw + 0.55rem, 1.4rem);
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: normal;
    max-width: 100%;
}

.stats-label {
    font-size: 0.875rem;
    opacity: 0.9;
    margin-top: 0.5rem;
    font-weight: 500;
}

.stats-icon {
    font-size: 2.5rem;
    opacity: 0.8;
    flex-shrink: 0;
    margin-left: 1rem;
}

@media (max-width: 768px) {
    .stats-card {
        padding: 1rem;
        min-height: 100px;
    }
    
    .stats-number {
        font-size: 1.5rem;
    }
    
    .stats-icon {
        font-size: 2rem;
        margin-left: 0.5rem;
    }
}

/* Extra small devices (phones, less than 576px) */
@media (max-width: 576px) {
    /* Ensure full width on very small screens */
    html, body {
        width: 100% !important;
        max-width: 100vw !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
    }
    
    .container-fluid {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
    
    .main-content {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
    
    .top-navbar {
        padding: 0.75rem 0.5rem !important;
    }
    
    .card {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .stats-card {
        padding: 0.75rem;
        min-height: 90px;
    }
    
    .stats-number {
        font-size: 1.25rem;
    }
    
    .stats-icon {
        font-size: 1.5rem;
        margin-left: 0.25rem;
    }
}

/* Tables */
.table {
    background: var(--table-bg);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--box-shadow);
    color: var(--text-primary);
}

.table thead th {
    background: var(--table-header-bg);
    border: none;
    border-bottom: 1px solid var(--table-border);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
    color: var(--text-primary);
}

.table tbody tr {
    border-bottom: 1px solid var(--table-border);
    color: var(--text-primary);
}

.table tbody tr:hover {
    background: var(--table-hover);
}

.table td {
    color: var(--text-primary);
    border-color: var(--table-border);
}

/* Badges */
.badge {
    font-size: 0.75rem;
    padding: 0.375rem 0.75rem;
    border-radius: 50px;
    color: var(--text-inverse);
}

.badge.bg-primary {
    background-color: var(--primary-color) !important;
}

.badge.bg-secondary {
    background-color: var(--secondary-color) !important;
}

.badge.bg-success {
    background-color: var(--success-color) !important;
}

.badge.bg-danger {
    background-color: var(--danger-color) !important;
}

.badge.bg-warning {
    background-color: var(--warning-color) !important;
    color: var(--text-inverse);
}

.badge.bg-info {
    background-color: var(--info-color) !important;
}

/* Buttons */
.btn {
    border-radius: var(--border-radius);
    font-weight: 500;
    padding: 0.5rem 1rem;
    transition: var(--transition);
}

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

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

/* Forms */
.form-control {
    border-radius: var(--border-radius);
    border: 1px solid var(--input-border);
    padding: 0.75rem;
    transition: var(--transition);
    background: var(--input-bg);
    color: var(--input-text);
}

.form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
    background: var(--input-bg);
    color: var(--input-text);
}

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

.form-label {
    font-weight: 500;
    color: var(--text-primary);
}

.form-select {
    background: var(--input-bg);
    border-color: var(--input-border);
    color: var(--input-text);
}

.form-select:focus {
    background: var(--input-bg);
    color: var(--input-text);
    border-color: var(--primary-color);
}

/* Alerts */
.alert {
    border: none;
    border-radius: var(--border-radius);
    padding: 1rem 1.25rem;
    background: var(--card-bg);
    color: var(--text-primary);
    border-left: 4px solid;
}

.alert-success {
    background: var(--card-bg);
    border-left-color: var(--success-color);
    color: var(--text-primary);
}

.alert-danger {
    background: var(--card-bg);
    border-left-color: var(--danger-color);
    color: var(--text-primary);
}

.alert-warning {
    background: var(--card-bg);
    border-left-color: var(--warning-color);
    color: var(--text-primary);
}

.alert-info {
    background: var(--card-bg);
    border-left-color: var(--info-color);
    color: var(--text-primary);
}

/* Modal */
.modal-content {
    border: none;
    border-radius: var(--border-radius);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    background: var(--card-bg);
    color: var(--text-primary);
}

.modal-header {
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.modal-body {
    background: var(--card-bg);
    color: var(--text-primary);
}

.modal-footer {
    border-top: 1px solid var(--border-color);
    background: var(--bg-secondary);
}

.modal-title {
    color: var(--text-primary);
}

.btn-close {
    filter: var(--text-primary) brightness(0) invert(1);
}

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

/* Navigation Pills */
.nav-pills .nav-link {
    border-radius: var(--border-radius);
    color: var(--text-secondary);
    padding: 0.75rem 1.5rem;
    margin-right: 0.5rem;
    transition: var(--transition);
    background: var(--bg-secondary);
}

.nav-pills .nav-link.active {
    background: var(--primary-color);
    color: var(--text-inverse);
}

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

/* Progress Bars */
.progress {
    height: 0.5rem;
    border-radius: 50px;
    background: var(--bg-tertiary);
}

.progress-bar {
    border-radius: 50px;
    background: var(--primary-color);
    color: var(--text-inverse);
}

/* Map Container */
.map-container {
    height: 400px;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--box-shadow);
}

/* Agent Status */
.agent-status {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 0.5rem;
}

.agent-status.online {
    background: var(--success-color);
}

.agent-status.offline {
    background: var(--secondary-color);
}

.agent-status.busy {
    background: var(--warning-color);
}

/* Order Status Timeline */
.timeline {
    position: relative;
    padding-left: 2rem;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 0.75rem;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--border-color);
}

.timeline-item {
    position: relative;
    margin-bottom: 1.5rem;
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: -1.5rem;
    top: 0.25rem;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--primary-color);
    border: 2px solid var(--card-bg);
    box-shadow: 0 0 0 2px var(--primary-color);
}

.timeline-item.completed::before {
    background: var(--success-color);
    box-shadow: 0 0 0 2px var(--success-color);
}

/* Loading Spinner */
.spinner-border-sm {
    width: 1rem;
    height: 1rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    /* .sidebar / .sidebar.show intentionally NOT redeclared here -- this used to set
       z-index: 1000 (below .mobile-overlay's 1040) and hide via left: -100%, an older
       mechanism superseded by the transform/opacity/visibility approach further up this
       file (which uses z-index: 1045, above the overlay). Because this block came later
       in the cascade, its lower z-index was winning, putting the dark overlay ON TOP of
       the open sidebar on mobile -- menu links were visually obscured and harder to tap. */

    .main-content {
        margin-left: 0;
        height: auto;
        overflow-y: visible;
    }

    .table-responsive {
        font-size: 0.875rem;
    }
}

/* Additional Dark Mode Styles */
[data-theme="dark"] .alert,
.dark-mode .alert {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .dropdown-menu,
.dark-mode .dropdown-menu {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

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

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

[data-theme="dark"] .list-group-item,
.dark-mode .list-group-item {
    background: var(--card-bg);
    border-color: var(--border-color);
    color: var(--text-primary);
}

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

/* Dark Mode Table Overrides - Ensure visibility */
[data-theme="dark"] .table,
.dark-mode .table {
    background-color: var(--table-bg) !important;
    color: var(--text-primary) !important;
}

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

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

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

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

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

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

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

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

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

/* Override Bootstrap's default white background in dark mode */
[data-theme="dark"] .table,
[data-theme="dark"] .table > :not(caption) > * > *,
.dark-mode .table,
.dark-mode .table > :not(caption) > * > * {
    background-color: var(--table-bg) !important;
    color: var(--text-primary) !important;
}

/* Force dark table background and light text in dark mode - highest priority */
[data-theme="dark"] .table-responsive .table,
.dark-mode .table-responsive .table {
    background-color: var(--table-bg) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .table-responsive .table tbody tr td,
.dark-mode .table-responsive .table tbody tr td {
    background-color: transparent !important;
    color: var(--text-primary) !important;
}

/* Ensure all text elements in table are visible in dark mode */
[data-theme="dark"] .table *,
.dark-mode .table * {
    color: inherit;
}

[data-theme="dark"] .table td *:not(.badge):not(.btn):not(.text-muted),
.dark-mode .table td *:not(.badge):not(.btn):not(.text-muted) {
    color: var(--text-primary) !important;
}
}

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

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

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

/* Pagination */
[data-theme="dark"] .pagination .page-link,
.dark-mode .pagination .page-link {
    background: var(--card-bg);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .pagination .page-link:hover,
.dark-mode .pagination .page-link:hover {
    background: var(--bg-tertiary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .pagination .page-item.active .page-link,
.dark-mode .pagination .page-item.active .page-link {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--text-inverse);
}

/* Breadcrumb */
[data-theme="dark"] .breadcrumb,
.dark-mode .breadcrumb {
    background: var(--bg-secondary);
}

[data-theme="dark"] .breadcrumb-item a,
.dark-mode .breadcrumb-item a {
    color: var(--text-secondary);
}

[data-theme="dark"] .breadcrumb-item.active,
.dark-mode .breadcrumb-item.active {
    color: var(--text-primary);
}

/* Input Groups */
[data-theme="dark"] .input-group-text,
.dark-mode .input-group-text {
    background: var(--bg-tertiary);
    border-color: var(--input-border);
    color: var(--text-primary);
}

/* Code and Pre */
[data-theme="dark"] code,
.dark-mode code,
[data-theme="dark"] pre,
.dark-mode pre {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

/* Blockquote */
[data-theme="dark"] blockquote,
.dark-mode blockquote {
    border-left: 4px solid var(--primary-color);
    background: var(--bg-secondary);
    color: var(--text-primary);
}

/* Custom Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 0.5s ease-out;
}

@keyframes slideIn {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

.slide-in {
    animation: slideIn 0.3s ease-out;
}

/* Print Styles */
@media print {
    /* A4 page geometry. Browsers default to no explicit size/margin, which combined with the
       gaps below (content stuck at Bootstrap's ~75-83% sidebar-layout width, wide tables
       clipped by overflow:auto) is what caused printed reports to cut text off mid-sentence
       on the right edge instead of wrapping onto the page. */
    @page {
        size: A4;
        margin: 12mm;
    }

    .sidebar,
    .top-navbar,
    .hamburger-btn,
    .btn,
    .no-print,
    #impersonationBanner {
        display: none !important;
    }

    /* The impersonation banner (hidden above) reserves top space via this inline rule
       (admin/includes/sidebar.php) whenever it's shown -- remove it for print so there's no
       blank gap at the top of the page once the banner itself is gone. */
    body {
        padding-top: 0 !important;
    }

    /* Hiding .sidebar removes its grid column, but Bootstrap's own col-md-9/col-lg-10 percentage
       width on the page's <main> stays in effect regardless -- this is what left report pages
       (Profit & Loss, Order Details, etc.) occupying only ~75-83% of the printable page instead
       of the full width, clipping anything that assumed it had the full page to lay out in. */
    .container-fluid,
    .container-fluid > .row {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    main,
    main[class*="col-"],
    .main-content {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .card {
        box-shadow: none !important;
        border: 1px solid #dee2e6 !important;
    }

    /* overflow:auto scroll containers don't expand to fit their content when printed -- they
       just clip it at the container edge, which is why wide tables lost their right-hand
       columns. Letting them lay out at full width (with a slightly smaller font so more of the
       table fits per line) is the standard fix. */
    .table-responsive {
        overflow-x: visible !important;
    }
    .table-responsive table {
        font-size: 11px !important;
    }
}

/* ============================================
   COMPREHENSIVE RESPONSIVE OPTIMIZATIONS
   For Mobile, Tablet, and Desktop
   ============================================ */

/* Tablet Optimizations (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    /* Sidebar adjustments for tablet */
    .sidebar {
        width: 240px !important;
        flex-shrink: 0;
    }
    
    /* Main content adjustments */
    main.main-content,
    main[class*="col-"] {
        flex: 1 1 auto;
        min-width: 0; /* Allow flex shrinking */
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    /* Top navbar improvements */
    .top-navbar {
        padding: 1rem !important;
        flex-wrap: wrap;
        gap: 0.75rem;
    }
    
    .top-navbar h4 {
        font-size: 1.25rem;
    }
    
    .top-navbar .btn {
        font-size: 0.875rem;
        padding: 0.5rem 0.75rem;
        white-space: nowrap;
    }
    
    /* Stats cards - stack on smaller tablets */
    @media (max-width: 900px) {
        .row .col-xl-3,
        .row .col-md-6,
        .row .col-md-4,
        .row .col-md-3 {
            flex: 0 0 100% !important;
            max-width: 100% !important;
            margin-bottom: 1rem;
        }
    }
    
    /* Cards - ensure proper wrapping */
    .card {
        width: 100%;
        max-width: 100%;
        margin-bottom: 1rem;
    }
    
    /* Form layouts - stack inputs vertically */
    .row.g-2,
    .row.g-3,
    .row.g-4 {
        flex-direction: column;
    }
    
    .row.g-2 > *,
    .row.g-3 > *,
    .row.g-4 > * {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 0.75rem;
    }
    
    /* Button groups - wrap properly */
    .btn-group {
        flex-wrap: wrap;
        width: 100%;
    }
    
    .btn-group .btn {
        flex: 1 1 auto;
        min-width: 0;
    }
    
    /* Filter sections - stack vertically */
    .card-body .row.align-items-end,
    .card-body .row.g-3 {
        flex-direction: column;
    }
    
    .card-body .row.align-items-end > *,
    .card-body .row.g-3 > * {
        width: 100% !important;
        margin-bottom: 1rem;
    }
    
    /* Date filter buttons - wrap */
    .btn-group[role="group"] {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    .btn-group[role="group"] .btn {
        flex: 1 1 calc(50% - 0.25rem);
        min-width: calc(50% - 0.25rem);
        max-width: calc(50% - 0.25rem);
    }
    
    /* Tables - ensure horizontal scroll */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Form cards - full width */
    .form-card,
    .form-card .card {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Fix distorted buttons (like Generate Report) */
    .btn[style*="writing-mode"],
    button[style*="writing-mode"] {
        writing-mode: horizontal-tb !important;
        transform: none !important;
        width: auto !important;
        height: auto !important;
        padding: 0.5rem 1rem !important;
    }
    
    /* Custom date range inputs - stack */
    .d-flex.gap-2 {
        flex-direction: column;
        gap: 0.5rem !important;
    }
    
    .d-flex.gap-2 > * {
        width: 100% !important;
    }
    
    /* Summary cards in reports - stack on tablet */
    .stats-card {
        min-height: auto;
        padding: 1.25rem;
    }
    
    .stats-number {
        font-size: 1.75rem;
    }
    
    /* Chart containers - full width */
    .chart-container {
        width: 100% !important;
        margin-bottom: 1.5rem;
    }
    
    /* Fix empty white boxes - hide or adjust */
    .top-navbar > .d-flex:empty,
    .top-navbar > div:empty {
        display: none;
    }
}

/* Mobile Optimizations (max-width: 767px) - Enhanced */
@media (max-width: 767.98px) {
    /* Enhanced sidebar behavior */
    .sidebar {
        width: 280px !important;
    }
    
    /* Main content full width */
    main.main-content,
    main[class*="col-"] {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
        margin-left: 0 !important;
    }
    
    /* Top navbar - stack vertically */
    .top-navbar {
        flex-direction: column;
        align-items: flex-start !important;
        padding: 1rem 0.75rem !important;
        gap: 1rem;
    }
    
    .top-navbar > div:first-child {
        width: 100%;
    }
    
    .top-navbar > div:last-child,
    .top-navbar > form,
    .top-navbar > .d-flex:last-child {
        width: 100%;
        justify-content: flex-start;
    }
    
    .top-navbar .btn {
        width: 100%;
        margin-bottom: 0.5rem;
    }
    
    /* All cards stack vertically */
    .row .col-xl-3,
    .row .col-xl-4,
    .row .col-md-3,
    .row .col-md-4,
    .row .col-md-6,
    .row .col-lg-3,
    .row .col-lg-4,
    .row .col-lg-6 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 1rem;
    }
    
    /* Stats cards - full width, smaller text */
    .stats-card {
        width: 100% !important;
        min-height: auto;
        padding: 1rem;
        margin-bottom: 1rem;
    }
    
    .stats-number {
        font-size: 1.5rem;
    }
    
    .stats-label {
        font-size: 0.85rem;
    }
    
    /* Button groups - stack vertically */
    .btn-group {
        flex-direction: column;
        width: 100%;
    }
    
    .btn-group .btn {
        width: 100%;
        margin-bottom: 0.5rem;
        border-radius: 0.375rem !important;
    }
    
    .btn-group .btn:last-child {
        margin-bottom: 0;
    }
    
    /* Form layouts - all inputs full width */
    form .row,
    .row.g-2,
    .row.g-3,
    .row.g-4 {
        flex-direction: column;
        margin: 0;
    }
    
    form .row > *,
    .row.g-2 > *,
    .row.g-3 > *,
    .row.g-4 > * {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 1rem;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* Filter sections - stack everything */
    .card-body .row,
    .card-body .d-flex {
        flex-direction: column !important;
    }
    
    .card-body .row > *,
    .card-body .d-flex > * {
        width: 100% !important;
        margin-bottom: 1rem;
    }

    /* Shared date-filter pill bar (includes/date_filter_helper.php) -- override the broad
       ".card-body .d-flex stacks everything" rule above just for this component, so the
       preset pills wrap into a neat multi-per-row grid instead of one full-width button
       per line. Equal selector specificity to the rule above, so source order (this comes
       after) is what makes it win -- must stay below that rule in the file. */
    .card-body .date-filter-pills {
        flex-direction: row !important;
        flex-wrap: wrap !important;
    }
    .card-body .date-filter-pills > a.btn,
    .card-body .date-filter-pills > span,
    .card-body .date-filter-pills > button.btn {
        width: auto !important;
        margin-bottom: 0.35rem !important;
    }

    /* Date filter buttons - 2 columns */
    .btn-group[role="group"] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
        width: 100%;
    }
    
    .btn-group[role="group"] .btn {
        width: 100%;
        margin: 0;
    }
    
    /* Select dropdowns - full width */
    .form-select,
    .form-control {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Tables - horizontal scroll */
    .table-responsive {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        display: block;
    }
    
    .table {
        min-width: 600px; /* Ensure table doesn't get too narrow */
    }
    
    /* Form cards - full width, stack buttons */
    .form-card {
        width: 100% !important;
        margin-bottom: 1rem;
    }
    
    .form-card .card-footer .btn-group {
        flex-direction: column;
    }
    
    .form-card .card-footer .btn-group .btn {
        width: 100% !important;
        margin-bottom: 0.5rem;
        flex: none !important;
        max-width: 100% !important;
    }
    
    /* Fix any rotated or distorted buttons */
    .btn[style*="writing-mode"],
    button[style*="writing-mode"],
    .btn[style*="transform: rotate"],
    button[style*="transform: rotate"],
    button.btn-primary[style*="height"],
    button.btn-primary[style*="width"] {
        writing-mode: horizontal-tb !important;
        transform: none !important;
        width: 100% !important;
        height: auto !important;
        padding: 0.75rem 1rem !important;
        white-space: normal !important;
    }
    
    /* Fix vertical buttons (like Apply Filters) */
    button.btn-primary[style*="writing-mode: vertical"],
    .btn-primary[style*="writing-mode: vertical-rl"],
    button[class*="btn"][style*="height"][style*="width"]:not([style*="min-height"]) {
        writing-mode: horizontal-tb !important;
        width: 100% !important;
        height: auto !important;
        padding: 0.75rem 1rem !important;
    }
    
    /* Custom date range - stack inputs */
    .d-flex.gap-2 {
        flex-direction: column;
        width: 100%;
    }
    
    .d-flex.gap-2 > input,
    .d-flex.gap-2 > select,
    .d-flex.gap-2 > button {
        width: 100% !important;
    }
    
    /* Charts - full width, smaller */
    .chart-container {
        width: 100% !important;
        padding: 1rem !important;
        margin-bottom: 1rem;
    }
    
    canvas {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* Summary cards in reports - full width */
    .row.mt-4 .col-xl-3,
    .row.mt-4 .col-md-6 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    
    /* Bulk actions - stack */
    .d-flex.align-items-center.gap-2 {
        flex-direction: column;
        align-items: stretch !important;
        width: 100%;
    }
    
    .d-flex.align-items-center.gap-2 > * {
        width: 100%;
        margin-bottom: 0.5rem;
    }
    
    /* Fix text wrapping in cards */
    .card-body,
    .card-header {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    
    /* Ensure proper touch targets (minimum 44x44px) */
    .btn,
    button,
    a.btn {
        min-height: 44px;
        padding: 0.75rem 1rem;
        font-size: 1rem;
    }
    
    /* Form inputs - larger touch targets */
    .form-control,
    .form-select {
        min-height: 44px;
        font-size: 16px; /* Prevents zoom on iOS */
    }
    
    /* Hide empty elements that cause spacing issues */
    .top-navbar > div:empty,
    .card-body > div:empty,
    .top-navbar > .d-flex:empty,
    .card-header > div:empty {
        display: none !important;
    }
    
    /* Fix empty white boxes in accounting dashboard */
    .top-navbar .d-flex:has(> div:empty),
    .top-navbar > div:has(> div:empty):not(:has(> *:not(:empty))) {
        display: none !important;
    }
    
    /* Fix any flex containers that don't wrap */
    .d-flex:not(.flex-column) {
        flex-wrap: wrap;
    }
    
    /* Ensure no horizontal overflow */
    * {
        max-width: 100%;
        box-sizing: border-box;
    }
    
    img, video, iframe {
        max-width: 100%;
        height: auto;
    }
}

/* Small Mobile (max-width: 480px) - Extra optimizations */
@media (max-width: 480px) {
    /* Even smaller text and spacing */
    .top-navbar h4 {
        font-size: 1.1rem;
    }
    
    .top-navbar p {
        font-size: 0.85rem;
    }
    
    .stats-number {
        font-size: 1.25rem;
    }
    
    .card-body {
        padding: 1rem !important;
    }
    
    .card-header {
        padding: 0.75rem !important;
    }
    
    /* Button text - smaller but still readable */
    .btn {
        font-size: 0.9rem;
        padding: 0.625rem 0.875rem;
    }
    
    /* Form inputs - slightly smaller */
    .form-control,
    .form-select {
        font-size: 16px; /* Keep at 16px to prevent iOS zoom */
        padding: 0.625rem;
    }
}

/* Additional Tablet-Specific Fixes (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    /* Ensure sidebar doesn't take too much space */
    .sidebar {
        width: 220px !important;
    }
    
    /* Better spacing for main content */
    main.main-content,
    main[class*="col-"] {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    /* Fix form layouts - better column distribution */
    .row.g-3 > .col-md-2,
    .row.g-3 > .col-md-3 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
    
    .row.g-3 > .col-md-4 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    
    /* Stats cards - 2 columns on medium tablets */
    @media (min-width: 900px) {
        .row .col-xl-3,
        .row .col-md-6 {
            flex: 0 0 50% !important;
            max-width: 50% !important;
        }
    }
    
    /* Fix text wrapping in cards */
    .stats-card,
    .card {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    
    .stats-card .stats-label,
    .card-body {
        font-size: 0.9rem;
        line-height: 1.4;
    }
    
    /* Better button spacing */
    .btn-group .btn {
        margin: 0.25rem;
    }
    
    /* Fix any inline styles causing issues */
    [style*="width"][style*="height"]:not([style*="min-width"]):not([style*="max-width"]) {
        max-width: 100% !important;
    }
}

/* Fix for empty white boxes in accounting and other pages */
/* Dashboard Filter Section - Fix Reset Button Overlap */
@media (max-width: 991.98px) {
    .dashboard-filters .col-md-4 {
        margin-bottom: 0.75rem !important;
    }
    .dashboard-filters .btn {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .dashboard-filters form {
        width: 100%;
    }
    .dashboard-filters .d-flex.gap-2 {
        flex-wrap: wrap;
        gap: 0.5rem !important;
    }
    .dashboard-filters .form-select {
        min-width: 0;
        flex: 1 1 auto;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .top-navbar .d-flex:empty,
    .top-navbar > div:empty:not(.hamburger-btn),
    .card-body > .d-flex:empty,
    .card-header > div:empty {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* Ensure filters don't create empty spaces */
    .card-body .row:empty,
    .card-body .d-flex:empty {
        display: none !important;
    }
    
    /* Dashboard filters - prevent overlap */
    .dashboard-filters .col-md-4 {
        margin-bottom: 1rem;
    }
    .dashboard-filters .btn {
        width: 100%;
        margin-top: 0.5rem;
    }
    
    /* Profit & Loss page - ensure tables stack properly */
    .profit-loss-breakdown .row > [class*="col-"] {
        margin-bottom: 1rem;
    }
    
    /* Financial Reports - fix Generate Report button */
    .financial-reports-form .btn-primary {
        writing-mode: horizontal-tb !important;
        text-orientation: mixed !important;
        white-space: nowrap !important;
        height: auto !important;
        min-height: 38px !important;
        width: 100% !important;
    }
    
    /* Dashboard Agent Stock Summary - better spacing */
    .agent-stock-summary .row > [class*="col-"] {
        margin-bottom: 1rem;
    }
    
    .agent-stock-summary .card {
        min-width: 0;
    }
    
    .agent-stock-summary .card-body {
        padding: 1rem;
    }
    
    .agent-stock-summary .products-list {
        font-size: 0.85rem;
    }
    
    .agent-stock-summary .badge {
        font-size: 0.75rem;
        white-space: nowrap;
    }
    
    /* General tablet optimizations */
    .card-body .row > [class*="col-"] {
        margin-bottom: 1rem;
    }
    
    /* Table responsive improvements */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Form groups stack better on tablet */
    .row.g-3 > [class*="col-"],
    .row.g-4 > [class*="col-"] {
        margin-bottom: 1rem;
    }
    
    /* Button groups wrap properly */
    .btn-group {
        flex-wrap: wrap;
    }
    
    /* Cards with multiple columns stack */
    .card .row [class*="col-md-"] {
        margin-bottom: 1rem;
    }
}