/* input(1421,1): run-time error CSS1019: Unexpected token, found '@import'
input(1421,9): run-time error CSS1019: Unexpected token, found 'url('open-iconic/font/css/open-iconic-bootstrap.min.css?v=YcdmR4W3O6-TqZohxJs-Q-dNuh4')'
input(2962,1): run-time error CSS1019: Unexpected token, found '}' */
/**
 * ERPAthos Responsive Variables
 * Centralized breakpoints, spacing, and typography for consistent responsive design
 * 
 * Usage:
 * - Import this file before other stylesheets
 * - Use CSS custom properties (variables) in components
 * - Breakpoints available as both variables and media queries
 */

:root {
    /* ========================================
     * BREAKPOINTS
     * Standard screen size breakpoints for responsive design
     * ======================================== */
    --breakpoint-mobile-sm: 360px;  /* Small phones */
    --breakpoint-mobile: 640px;     /* Mobile devices */
    --breakpoint-tablet: 768px;     /* Tablets */
    --breakpoint-desktop: 1024px;   /* Desktop */
    --breakpoint-desktop-lg: 1280px; /* Large desktop */

    /* ========================================
     * SPACING SCALE (Base-8px system)
     * Consistent spacing values following 8px grid
     * ======================================== */
    --spacing-xs: 0.25rem;   /* 4px */
    --spacing-sm: 0.5rem;    /* 8px */
    --spacing-md: 1rem;      /* 16px */
    --spacing-lg: 1.5rem;    /* 24px */
    --spacing-xl: 2rem;      /* 32px */
    --spacing-2xl: 3rem;     /* 48px */
    --spacing-3xl: 4rem;     /* 64px */

    /* ========================================
     * CONTAINER PADDING
     * Responsive padding that adapts to screen size
     * ======================================== */
    --container-padding-mobile: 1rem;    /* 16px on mobile */
    --container-padding-tablet: 1.5rem;  /* 24px on tablet */
    --container-padding-desktop: 2rem;   /* 32px on desktop */

    /* ========================================
     * FLUID TYPOGRAPHY
     * Font sizes that scale smoothly between breakpoints
     * Using clamp(min, preferred, max) for fluid scaling
     * ======================================== */
    
    /* Base font size */
    --font-size-base: clamp(0.875rem, 0.8rem + 0.25vw, 1rem);
    
    /* Body text sizes */
    --font-size-xs: clamp(0.625rem, 0.6rem + 0.15vw, 0.75rem);    /* 10-12px */
    --font-size-sm: clamp(0.75rem, 0.7rem + 0.2vw, 0.875rem);     /* 12-14px */
    --font-size-md: clamp(0.875rem, 0.8rem + 0.25vw, 1rem);       /* 14-16px */
    --font-size-lg: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);       /* 16-18px */
    
    /* Heading sizes */
    --font-size-h1: clamp(1.75rem, 1.5rem + 1vw, 2.5rem);         /* 28-40px */
    --font-size-h2: clamp(1.5rem, 1.3rem + 0.8vw, 2rem);          /* 24-32px */
    --font-size-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.75rem);      /* 20-28px */
    --font-size-h4: clamp(1.125rem, 1rem + 0.5vw, 1.5rem);        /* 18-24px */
    --font-size-h5: clamp(1rem, 0.95rem + 0.4vw, 1.25rem);        /* 16-20px */
    --font-size-h6: clamp(0.875rem, 0.85rem + 0.3vw, 1.125rem);   /* 14-18px */

    /* ========================================
     * LINE HEIGHTS
     * Optimal line heights for readability
     * ======================================== */
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;

    /* ========================================
     * MAX WIDTHS
     * Prevent content from becoming too wide
     * ======================================== */
    --max-width-sm: 640px;
    --max-width-md: 768px;
    --max-width-lg: 1024px;
    --max-width-xl: 1280px;
    --max-width-2xl: 1536px;
    --max-width-full: 100%;

    /* ========================================
     * Z-INDEX SCALE
     * Consistent layering for components
     * ======================================== */
    --z-index-dropdown: 1000;
    --z-index-sticky: 1020;
    --z-index-fixed: 1030;
    --z-index-modal-backdrop: 1040;
    --z-index-modal: 1050;
    --z-index-modal-sticky: 1055;
    --z-index-popover: 1060;
    --z-index-tooltip: 1070;
}

/* ========================================
 * GLOBAL OVERFLOW PREVENTION
 * Prevent horizontal scrolling on all screen sizes
 * ======================================== */
html, body {
    max-width: 100vw;
    overflow-x: hidden;
}

/* Note: Bootstrap 5 already sets box-sizing: border-box globally.
 * We rely on Bootstrap's implementation rather than duplicating it here.
 */

/* ========================================
 * RESPONSIVE TYPOGRAPHY
 * Opt-in utility classes to avoid overriding
 * Bootstrap's global typography settings.
 * Use these classes when you want fluid responsive typography.
 * ======================================== */
.responsive-h1 {
    font-size: var(--font-size-h1);
    line-height: var(--line-height-tight);
}

.responsive-h2 {
    font-size: var(--font-size-h2);
    line-height: var(--line-height-tight);
}

.responsive-h3 {
    font-size: var(--font-size-h3);
    line-height: var(--line-height-tight);
}

.responsive-h4 {
    font-size: var(--font-size-h4);
    line-height: var(--line-height-normal);
}

.responsive-h5 {
    font-size: var(--font-size-h5);
    line-height: var(--line-height-normal);
}

.responsive-h6 {
    font-size: var(--font-size-h6);
    line-height: var(--line-height-normal);
}

.responsive-body,
.responsive-text {
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
}

.responsive-small {
    font-size: var(--font-size-sm);
}

/* ========================================
 * UTILITY CLASSES
 * Commonly used responsive utilities
 * ======================================== */

/* Namespaced spacing utilities to avoid conflicts with Bootstrap */
.spacing-xs { margin: var(--spacing-xs); }
.spacing-sm { margin: var(--spacing-sm); }
.spacing-md { margin: var(--spacing-md); }
.spacing-lg { margin: var(--spacing-lg); }
.spacing-xl { margin: var(--spacing-xl); }

.erp-p-xs { padding: var(--spacing-xs); }
.erp-p-sm { padding: var(--spacing-sm); }
.erp-p-md { padding: var(--spacing-md); }
.erp-p-lg { padding: var(--spacing-lg); }
.erp-p-xl { padding: var(--spacing-xl); }

.erp-m-xs { margin: var(--spacing-xs); }
.erp-m-sm { margin: var(--spacing-sm); }
.erp-m-md { margin: var(--spacing-md); }
.erp-m-lg { margin: var(--spacing-lg); }
.erp-m-xl { margin: var(--spacing-xl); }

/* Responsive visibility helpers */
.mobile-only {
    display: block;
}

.tablet-up {
    display: none;
}

.desktop-up {
    display: none;
}

@media (min-width: 768px) {
    .mobile-only {
        display: none;
    }
    
    .tablet-up {
        display: block;
    }
}

@media (min-width: 1024px) {
    .desktop-up {
        display: block;
    }
}

/* Prevent overflow in flex containers */
.flex-container {
    display: flex;
    flex-wrap: wrap;
    max-width: 100%;
}

.flex-item {
    flex: 1 1 auto;
    min-width: 0; /* Allow flex items to shrink below content size */
}

/* Responsive images and media - opt-in class to avoid unintended effects */
.responsive-media {
    max-width: 100%;
    height: auto;
}

/* Apply to specific media elements only when needed */
img.responsive-media,
video.responsive-media,
iframe.responsive-media {
    max-width: 100%;
    height: auto;
}

/* Note: Bootstrap's .table-responsive already handles table overflow.
 * Use Bootstrap's implementation instead of overriding it here.
 */

/* Responsive form elements - opt-in to avoid breaking fixed-width buttons */
.responsive-input {
    max-width: 100%;
}

/* ========================================
 * BREAKPOINT HELPERS
 * Helper comments for media queries
 * ======================================== */

/* 
Usage examples:

Mobile-first approach (recommended):
@media (min-width: 640px) { ... }  // Mobile and up
@media (min-width: 768px) { ... }  // Tablet and up
@media (min-width: 1024px) { ... } // Desktop and up
@media (min-width: 1280px) { ... } // Large desktop and up

Desktop-first approach:
@media (max-width: 639px) { ... }  // Mobile only
@media (max-width: 767px) { ... }  // Mobile and small tablet
@media (max-width: 1023px) { ... } // Up to tablet
@media (max-width: 1279px) { ... } // Up to desktop

Range queries:
@media (min-width: 640px) and (max-width: 1023px) { ... }  // Tablet range
*/

/**
 * ERPAthos Modal Responsive Styles
 * Implements fullscreen modals on mobile devices with sticky headers and footers
 * 
 * Features:
 * - Fullscreen on mobile (< 768px)
 * - Desktop overlay behavior maintained
 * - Sticky header and footer on mobile
 * - Internal scrolling for modal body
 * - No overflow issues
 * - ESC key and close button functionality preserved
 * - ARIA and keyboard navigation compatible
 */

/* ========================================
 * MOBILE FULLSCREEN MODALS (< 768px)
 * ======================================== */

@media (max-width: 767px) {
    /* Make modal fullscreen on mobile */
    .modal.show .modal-dialog,
    .modal.show .modal-dialog.modal-sm,
    .modal.show .modal-dialog.modal-lg,
    .modal.show .modal-dialog.modal-xl,
    .modal.show .modal-dialog.modal-wider {
        margin: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        height: 100vh !important;
        max-height: 100vh !important;
    }

    /* Modal content fills entire screen */
    .modal.show .modal-content {
        height: 100vh !important;
        max-height: 100vh !important;
        border: none;
        border-radius: 0;
        display: flex !important;
        flex-direction: column !important;
    }

    /* Sticky modal header at top */
    .modal.show .modal-header {
        flex-shrink: 0;
        position: sticky !important;
        top: 0;
        z-index: var(--z-index-modal-sticky, 1055);
        background-color: var(--bs-modal-bg, #fff);
        border-bottom: 1px solid var(--bs-border-color, #dee2e6);
        padding: 1rem;
    }

    /* Modal body with internal scrolling */
    .modal.show .modal-body {
        flex: 1 1 auto;
        overflow-y: auto;
        padding: 1rem;
        /* Remove any max-height constraints on mobile */
        max-height: none !important;
    }

    /* Sticky modal footer at bottom */
    .modal.show .modal-footer {
        flex-shrink: 0;
        position: sticky !important;
        bottom: 0;
        z-index: var(--z-index-modal-sticky, 1055);
        background-color: var(--bs-modal-bg, #fff);
        border-top: 1px solid var(--bs-border-color, #dee2e6);
        padding: 1rem;
        /* Adjust footer buttons for mobile */
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    /* Prevent body scroll when modal is open */
    body.modal-open {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
    }

    /* Adjust modal backdrop for fullscreen */
    .modal-backdrop.show {
        /* Backdrop is less relevant on fullscreen but keep it for consistency */
        background-color: var(--bs-backdrop-bg, rgba(0, 0, 0, 0.5));
    }

    /* Ensure close button is visible and clickable */
    .modal.show .modal-header .btn-close {
        padding: 0.5rem;
        margin: -0.5rem -0.5rem -0.5rem auto;
    }

    /* Make modal title responsive */
    .modal.show .modal-title {
        font-size: 1.125rem;
        line-height: 1.4;
        word-break: break-word;
    }

    .modal.show .modal-footer .btn {
        flex: 1 1 auto;
        min-width: 100px;
    }

    /* Stack footer buttons vertically if needed on very small screens */
    @media (max-width: 400px) {
        .modal.show .modal-footer {
            flex-direction: column;
        }

        .modal.show .modal-footer .btn {
            width: 100%;
        }
    }

    /* Fix for nested cards and sections within modal body */
    .modal.show .modal-body .card {
        margin-bottom: 1rem;
    }

    .modal.show .modal-body .card:last-child {
        margin-bottom: 0;
    }

    /* Ensure tables are responsive within modal */
    .modal.show .modal-body .table-responsive {
        overflow-x: auto;
    }

    /* Prevent zoom on input focus on iOS - all form elements need 16px minimum */
    .modal.show .modal-body .form-control,
    .modal.show .modal-body .form-select,
    .modal.show .modal-body input[type="text"],
    .modal.show .modal-body input[type="email"],
    .modal.show .modal-body input[type="number"],
    .modal.show .modal-body input[type="tel"],
    .modal.show .modal-body input[type="password"],
    .modal.show .modal-body textarea,
    .modal.show .modal-body select {
        font-size: 16px !important;
    }
}

/* ========================================
 * TABLET AND DESKTOP (≥ 768px)
 * Classic overlay modal behavior
 * ======================================== */

@media (min-width: 768px) {
    /* Maintain standard Bootstrap modal behavior */
    .modal.show .modal-dialog {
        /* Default Bootstrap centering */
        margin: 1.75rem auto;
    }

    /* Ensure max-height for desktop modals */
    .modal.show .modal-content {
        max-height: 90vh;
    }

    /* Modal body with scroll on desktop if needed */
    .modal.show .modal-body {
        max-height: calc(90vh - 160px);
        overflow-y: auto;
    }

    /* Keep header and footer static on desktop */
    .modal.show .modal-header,
    .modal.show .modal-footer {
        position: relative;
    }
}

/* ========================================
 * ACCESSIBILITY IMPROVEMENTS
 * ======================================== */

/* Focus styles for modal elements */
.modal .modal-header .btn-close:focus,
.modal .modal-footer .btn:focus {
    outline: 2px solid var(--bs-primary, #0d6efd);
    outline-offset: 2px;
}

/* Ensure proper focus trap within modal: handled via Bootstrap's tabindex="-1" on .modal */

/* Screen reader only text for close button is handled by Bootstrap's aria-label implementation */

/* ========================================
 * ANIMATION IMPROVEMENTS
 * ======================================== */

/* Smooth transition for modal appearance on mobile */
@media (max-width: 767px) {
    .modal.fade .modal-dialog {
        transition: transform 0.2s ease-out;
    }

    .modal.show .modal-dialog {
        transform: none;
    }
}

/* ========================================
 * SPECIAL CASES
 * ======================================== */

/* Handle modals with custom styling (like SupportContactModal) */
.modal.show {
    /* Ensure modal is properly displayed when visible */
    display: block !important;
}

/* Backdrop for manually controlled modals */
.modal-backdrop.show {
    opacity: 0.5;
}

/* Fix for dark mode compatibility */
@media (prefers-color-scheme: dark) {
    @media (max-width: 767px) {
        .modal.show .modal-header,
        .modal.show .modal-footer {
            background-color: #212529;
            border-color: #495057;
        }
    }
}

/* ========================================
 * PREVENT OVERFLOW ISSUES
 * ======================================== */

/* Ensure no horizontal overflow in modals */
.modal .modal-header,
.modal .modal-footer {
    max-width: 100%;
    overflow-x: hidden;
}
/* modal-body allows table-responsive to scroll horizontally so action buttons are not clipped */
.modal .modal-body {
    max-width: 100%;
}

/* Prevent overflow in common child elements */
.modal .modal-body > *,
.modal .modal-body table,
.modal .modal-body form,
.modal .modal-body .card {
    max-width: 100%;
}

/* Allow images to be responsive */
.modal .modal-body img {
    max-width: 100%;
    height: auto;
}

/* Fix for pre and code blocks */
.modal .modal-body pre,
.modal .modal-body code {
    overflow-x: auto;
    word-wrap: break-word;
}

/* ========================================
 * UTILITY CLASSES
 * ======================================== */

/* Force desktop modal behavior even on mobile (use sparingly) */
@media (max-width: 767px) {
    .modal.show .modal-dialog.force-desktop-style {
        margin: 1rem auto !important;
        max-width: 90% !important;
        width: auto !important;
        height: auto !important;
        max-height: 90vh !important;
    }

    .modal.show .modal-dialog.force-desktop-style .modal-content {
        height: auto !important;
        border-radius: 0.3rem !important;
    }
}

/**
 * ERPAthos Mobile-Friendly Forms
 * 
 * Ensures optimal form usability on mobile devices:
 * - Single column layouts on mobile (< 768px)
 * - Labels positioned above inputs
 * - Clear validation messages
 * - Touch-friendly input sizes
 * - Proper spacing and readability
 */

/* ========================================
 * MOBILE FORM LAYOUT (< 768px)
 * Force single column layout on mobile devices
 * ======================================== */

@media (max-width: 767px) {
    /* Force all Bootstrap columns to full width on mobile */
    .row.g-3 > [class*="col-"],
    .row.g-2 > [class*="col-"],
    .row > [class*="col-md-"],
    .row > [class*="col-lg-"],
    .row > [class*="col-xl-"] {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
    }
    
    /* Ensure form rows stack vertically */
    .form-row,
    .row {
        flex-direction: column;
    }
}

/* ========================================
 * LABELS ABOVE INPUTS
 * Ensure labels are always positioned above inputs
 * with proper spacing on mobile
 * ======================================== */

.form-label {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.1rem;
    margin-bottom: var(--spacing-sm, 0.5rem);
    font-weight: 500;
    color: #212529;
}

@media (max-width: 767px) {
    .form-label {
        /* Extra spacing on mobile for better readability */
        margin-bottom: var(--spacing-md, 1rem);
        font-size: var(--font-size-md);
    }
    
    /* Remove any inline label positioning */
    .form-group.row .form-label,
    .row .form-label {
        margin-right: 0;
        text-align: left;
    }
}

/* ========================================
 * TOUCH-FRIENDLY INPUT SIZING
 * Minimum 44px height for touch targets (WCAG 2.1)
 * ======================================== */

@media (max-width: 767px) {
    .form-control,
    .form-select,
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"],
    textarea.form-control,
    select.form-select {
        min-height: 44px;
        padding: 0.625rem 0.75rem; /* 10px 12px */
        /* Font size 16px prevents iOS Safari automatic zoom on focus (iOS zooms when font-size < 16px) */
        font-size: 1rem; /* 16px */
    }
    
    /* Buttons also need proper touch targets */
    .btn {
        min-height: 44px;
        padding: 0.625rem 1rem;
        font-size: 1rem;
    }
    
    /* Checkboxes and radio buttons */
    .form-check-input {
        min-width: 24px;
        min-height: 24px;
        margin-top: 0;
    }
    
    .form-check-label {
        padding-left: 0.5rem;
        font-size: 1rem;
    }
}

/* ========================================
 * VALIDATION MESSAGES
 * Clear, non-overlapping validation messages
 * ======================================== */

.validation-message,
.invalid-feedback,
.field-validation-error {
    display: block;
    margin-top: var(--spacing-sm, 0.5rem);
    font-size: 0.875rem;
    color: #dc3545;
    line-height: 1.5;
}

@media (max-width: 767px) {
    .validation-message,
    .invalid-feedback,
    .field-validation-error {
        /* Extra spacing and visibility on mobile */
        margin-top: var(--spacing-md, 1rem);
        margin-bottom: var(--spacing-md, 1rem);
        padding: var(--spacing-sm, 0.5rem);
        font-size: 0.9375rem;
        background-color: #fee;
        border-left: 3px solid #dc3545;
        border-radius: 0.25rem;
    }
    
    /* Optional icon support for validation messages.
     * Only adds icons when the parent has the .has-validation-icon class.
     * This prevents duplicate icons when HTML already provides them.
     */
    .has-validation-icon .validation-message::before,
    .has-validation-icon .invalid-feedback::before,
    .has-validation-icon .field-validation-error::before {
        content: "⚠ ";
        margin-right: 0.25rem;
    }
}

/* Validation summary styling */
.validation-summary-errors {
    padding: var(--spacing-md, 1rem);
    margin-bottom: var(--spacing-lg, 1.5rem);
    background-color: #fee;
    border: 1px solid #dc3545;
    border-radius: 0.375rem;
}

@media (max-width: 767px) {
    .validation-summary-errors {
        padding: var(--spacing-lg, 1.5rem);
        font-size: 1rem;
    }
    
    .validation-summary-errors ul {
        margin-bottom: 0;
        padding-left: 1.25rem;
    }
    
    .validation-summary-errors li {
        margin-bottom: var(--spacing-sm, 0.5rem);
    }
}

/* Invalid input state - use box-shadow instead of border-width to avoid layout shifts */
.invalid,
.is-invalid,
.form-control.invalid,
input.invalid,
select.invalid {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 1px #dc3545;
}

@media (max-width: 767px) {
    /* Make invalid state more visible on mobile */
    .invalid,
    .is-invalid {
        box-shadow: 0 0 0 1px #dc3545, 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
    }
}

/* Valid input state - use box-shadow instead of border-width to avoid layout shifts */
.valid.modified:not([type=checkbox]),
.is-valid {
    border-color: #26b050 !important;
    box-shadow: 0 0 0 1px #26b050;
}

@media (max-width: 767px) {
    .valid.modified:not([type=checkbox]),
    .is-valid {
        box-shadow: 0 0 0 1px #26b050, 0 0 0 0.2rem rgba(38, 176, 80, 0.25);
    }
}

/* ========================================
 * FORM SPACING ON MOBILE
 * Adequate spacing between form elements
 * ======================================== */

@media (max-width: 767px) {
    /* Spacing between form groups - only target columns within form contexts */
    .form-group,
    .row.g-3 > [class*="col-"],
    .row.g-2 > [class*="col-"],
    .form-row > [class*="col-"] {
        margin-bottom: var(--spacing-lg, 1.5rem) !important;
    }
    
    /* Helper text spacing */
    .form-text,
    small.form-text {
        display: block;
        margin-top: var(--spacing-sm, 0.5rem);
        font-size: 0.875rem;
        line-height: 1.5;
    }
    
    /* Input group spacing */
    .input-group {
        margin-bottom: var(--spacing-lg, 1.5rem);
    }
}

/* ========================================
 * DATEPICKER MOBILE OPTIMIZATION
 * Touch-friendly date pickers
 * ======================================== */

@media (max-width: 767px) {
    /* Native date inputs on mobile */
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"] {
        min-height: 44px;
        padding: 0.625rem 0.75rem;
        font-size: 1rem;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }
    
    /* Date input specific styling */
    input[type="date"]::-webkit-calendar-picker-indicator {
        width: 24px;
        height: 24px;
        padding: 0.25rem;
        cursor: pointer;
    }
    
    /* Custom date picker component */
    .effective-date-picker .row > div {
        flex: 0 0 100%;
        max-width: 100%;
    }
    
    .effective-date-picker .form-select,
    .effective-date-picker .form-control {
        min-height: 44px;
        font-size: 1rem;
    }
}

/* ========================================
 * MODAL FORMS ON MOBILE
 * Optimize modal forms for mobile devices
 * ======================================== */

@media (max-width: 767px) {
    /* Modal body padding */
    .modal-body {
        padding: var(--spacing-lg, 1.5rem);
    }
    
    /* Modal footer padding (buttons styled in FORM ACTIONS section above) */
    .modal-footer {
        padding: var(--spacing-lg, 1.5rem);
    }
}

/* ========================================
 * FORM ALERTS AND MESSAGES
 * Better visibility for alerts in forms
 * ======================================== */

@media (max-width: 767px) {
    .alert {
        padding: var(--spacing-lg, 1.5rem);
        font-size: 0.9375rem;
        margin-bottom: var(--spacing-lg, 1.5rem);
    }
    
    .alert i,
    .alert .bi {
        font-size: 1.25rem;
        vertical-align: middle;
    }
}

/* ========================================
 * CHECKBOX AND RADIO GROUPS
 * Improved touch targets for checkboxes and radios
 * ======================================== */

@media (max-width: 767px) {
    .form-check {
        padding-left: 0;
        margin-bottom: var(--spacing-lg, 1.5rem);
        min-height: 44px;
        display: flex;
        align-items: center;
    }
    
    .form-check-input {
        margin-left: 0;
        margin-right: var(--spacing-md, 1rem);
        flex-shrink: 0;
    }
    
    .form-check-label {
        flex-grow: 1;
        cursor: pointer;
        padding-top: 0.25rem;
        padding-bottom: 0.25rem;
    }
}

/* ========================================
 * REQUIRED FIELD INDICATORS
 * Clear indication of required fields
 * ======================================== */

.form-label .text-danger {
    display: inline !important;
    line-height: inherit;
    vertical-align: baseline;
    margin-left: 0.25rem;
    font-weight: bold;
}

@media (max-width: 767px) {
    .form-label .text-danger {
        font-size: 1.125rem;
    }
}

/* ========================================
 * INPUT GROUPS ON MOBILE
 * Stack input group elements vertically if needed
 * ======================================== */

@media (max-width: 767px) {
    .input-group {
        flex-wrap: wrap;
    }
    
    .input-group > .form-control,
    .input-group > .form-select {
        flex: 1 1 100%;
    }
    
    .input-group-text {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
}

/* ========================================
 * FORM ACTIONS / BUTTONS
 * Better button layout on mobile
 * ======================================== */

@media (max-width: 767px) {
    /* Stack action buttons vertically on mobile.
     * Note: Using 'column' (not 'column-reverse') to maintain HTML order.
     * This ensures buttons appear in the expected order: Opslaan, Opslaan en Nieuwe, Concept, Annuleren.
     */
    .form-actions,
    .modal-footer,
    .btn-group {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-md, 1rem);
    }
    
    .form-actions .btn,
    .modal-footer .btn,
    .btn-group .btn {
        width: 100%;
        margin: 0;
    }
}

/* ========================================
 * SELECT / DROPDOWN OPTIMIZATION
 * Better mobile experience for dropdowns
 * ======================================== */

@media (max-width: 767px) {
    .form-select,
    select.form-control {
        min-height: 44px;
        font-size: 1rem;
        background-position: right 0.75rem center;
        background-size: 16px 12px;
        padding-right: 2.5rem;
    }
    
    /* Multiple select sizing */
    select[multiple].form-select {
        min-height: 132px; /* 3 items * 44px */
    }
}

/* ========================================
 * TEXTAREA OPTIMIZATION
 * Better mobile textarea experience
 * ======================================== */

@media (max-width: 767px) {
    textarea.form-control {
        min-height: 72px; /* ~3 lines minimum (16px * 1.5 line-height * 3) */
        font-size: 1rem;
        line-height: 1.5;
        resize: vertical;
    }
}

/* ========================================
 * FOCUS STATES
 * Enhanced focus visibility for accessibility
 * Using consistent focus pattern from site.css
 * ======================================== */

@media (max-width: 767px) {
    .form-control:focus,
    .form-select:focus,
    input:focus,
    textarea:focus,
    select:focus {
        /* Use the same two-layer focus pattern from site.css for consistency */
        box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
        outline: none;
    }
    
    .btn:focus {
        box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
        outline: none;
    }
}

/* Note: -webkit-appearance rules for date/time inputs are defined 
 * in the DATEPICKER MOBILE OPTIMIZATION section above to avoid duplication */

/**
 * ERPAthos Tables Mobile Responsive Styles
 * 
 * General-purpose responsive table styles for all modules
 * that don't have specific mobile CSS files.
 * 
 * This ensures tables are usable on mobile devices by:
 * - Making tables horizontally scrollable
 * - Optimizing for touch interaction
 * - Providing mobile-friendly alternatives where applicable
 * 
 * Modules covered: HRM, Inventory, Project, WMS, and other modules
 * without dedicated mobile CSS files.
 */

/* ========================================
 * MOBILE TABLE WRAPPER (< 768px)
 * ======================================== */

@media (max-width: 767px) {
    /* Make tables horizontally scrollable on mobile */
    .table-responsive {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    }
    
    /* Make all tables horizontally scrollable on mobile */
    /* Note: Tables inside .table-responsive will inherit from parent container */
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        width: 100%;
    }
    
    /* Reset for tables already wrapped in .table-responsive */
    .table-responsive table {
        display: table;
        overflow-x: visible;
    }
    
    /* Ensure table cells don't wrap too aggressively */
    table th,
    table td {
        white-space: nowrap;
        padding: 0.5rem;
        font-size: 0.875rem;
    }
    
    /* Make table headers sticky when scrolling horizontally */
    table thead th {
        position: sticky;
        top: 0;
        background-color: var(--bs-table-bg, #fff);
        z-index: 10;
        border-bottom: 2px solid var(--bs-border-color, #dee2e6);
    }
    
    /* Adjust table cell height for touch targets (applied to cells, not rows) */
    table tbody td,
    table tbody th {
        min-height: 44px;
        padding: 0.75rem 0.5rem; /* Increased vertical padding for touch targets */
    }
    
    /* Make action buttons in tables touch-friendly */
    table .btn,
    table button,
    table a.btn {
        min-height: 36px;
        min-width: 36px;
        padding: 0.375rem 0.75rem;
        margin: 0.125rem;
        font-size: 0.875rem;
    }
    
    /* Icon buttons in tables */
    table .btn-sm,
    table button.btn-sm {
        min-height: 32px;
        min-width: 32px;
        padding: 0.25rem 0.5rem;
    }
}

/* ========================================
 * TABLET OPTIMIZATION (768px - 1023px)
 * ======================================== */

@media (min-width: 768px) and (max-width: 1023px) {
    /* Tables can show more content on tablet but may still need scroll */
    .table-responsive {
        overflow-x: auto;
    }
    
    table th,
    table td {
        font-size: 0.9375rem; /* 15px */
        padding: 0.625rem;
    }
    
    /* Maintain touch-friendly buttons on tablet */
    table .btn,
    table button {
        min-height: 40px;
        padding: 0.5rem 1rem;
    }
}

/* ========================================
 * CARD-BASED ALTERNATIVE FOR LISTS
 * Mobile-friendly card layout as alternative to tables
 * Use class .mobile-card-view to enable
 * ======================================== */

@media (max-width: 767px) {
    /* Hide table when card view is enabled on mobile */
    .mobile-card-view .table-responsive,
    .mobile-card-view table {
        display: none;
    }
    
    /* Show card container on mobile */
    .mobile-card-container {
        display: block;
        width: 100%;
    }
    
    /* Individual card styling */
    .mobile-card {
        background: var(--bs-body-bg, #fff);
        border: 1px solid var(--bs-border-color, #dee2e6);
        border-radius: 0.5rem;
        padding: 1rem;
        margin-bottom: 1rem;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }
    
    /* Card header */
    .mobile-card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.75rem;
        padding-bottom: 0.75rem;
        border-bottom: 1px solid var(--bs-border-color, #dee2e6);
    }
    
    .mobile-card-title {
        font-size: 1.125rem;
        font-weight: 600;
        margin: 0;
        flex: 1;
    }
    
    .mobile-card-badges {
        display: flex;
        gap: 0.25rem;
        flex-wrap: wrap;
        justify-content: flex-end;
    }
    
    /* Card body */
    .mobile-card-body {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .mobile-card-row {
        display: flex;
        justify-content: space-between;
        padding: 0.25rem 0;
    }
    
    .mobile-card-label {
        font-weight: 500;
        color: var(--bs-secondary, #6c757d);
        font-size: 0.875rem;
    }
    
    .mobile-card-value {
        font-size: 0.9375rem;
        text-align: right;
        color: var(--bs-body-color, #212529);
    }
    
    /* Card actions */
    .mobile-card-actions {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        margin-top: 1rem;
        padding-top: 1rem;
        border-top: 1px solid var(--bs-border-color, #dee2e6);
    }
    
    .mobile-card-actions .btn {
        width: 100%;
        min-height: 44px;
        justify-content: center;
    }
    
    /* Quick actions (horizontal row) */
    .mobile-card-quick-actions {
        display: flex;
        gap: 0.5rem;
        margin-top: 0.75rem;
    }
    
    .mobile-card-quick-actions .btn {
        flex: 1;
        min-height: 44px;
    }
}

/* ========================================
 * DESKTOP: HIDE CARD VIEW, SHOW TABLES
 * ======================================== */

@media (min-width: 768px) {
    /* Hide mobile card view on desktop */
    .mobile-card-container {
        display: none;
    }
    
    /* Always show tables on desktop */
    .mobile-card-view .table-responsive {
        display: block;
    }
    
    .mobile-card-view table {
        display: table;
        width: 100%;
    }
}

/* ========================================
 * PAGINATION ON MOBILE
 * ======================================== */

@media (max-width: 767px) {
    /* Stack pagination vertically or make it scrollable */
    .pagination {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.25rem;
    }
    
    .pagination .page-item {
        margin: 0.125rem;
    }
    
    .pagination .page-link {
        min-height: 44px;
        min-width: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0.5rem;
    }
    
    /* Show only essential pagination on mobile */
    .pagination .page-item:not(.active):not(:first-child):not(:last-child):not(.disabled) {
        display: none;
    }
    
    /* Always show first, last, prev, next, and current page */
    .pagination .page-item.active,
    .pagination .page-item:first-child,
    .pagination .page-item:last-child,
    .pagination .page-item.disabled {
        display: block;
    }
}

/* ========================================
 * FILTER AND SEARCH FORMS ON MOBILE
 * ======================================== */

@media (max-width: 767px) {
    /* Stack filter forms vertically */
    .table-filters .row,
    .search-filters .row {
        flex-direction: column;
    }
    
    .table-filters [class*="col-"],
    .search-filters [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 0.75rem;
    }
    
    /* Make search inputs full width */
    .table-filters .form-control,
    .search-filters .form-control {
        width: 100%;
    }
    
    /* Filter buttons full width */
    .table-filters .btn,
    .search-filters .btn {
        width: 100%;
        min-height: 44px;
        margin-bottom: 0.5rem;
    }
}

/* ========================================
 * LOADING STATES
 * ======================================== */

@media (max-width: 767px) {
    /* Center and enlarge loading spinner on mobile */
    .table-loading,
    .loading-spinner {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 2rem;
        font-size: 1.25rem;
    }
}

/* ========================================
 * EMPTY STATES
 * ======================================== */

@media (max-width: 767px) {
    /* Improve empty state presentation on mobile */
    .table-empty,
    .no-results {
        text-align: center;
        padding: 2rem 1rem;
        color: var(--bs-secondary, #6c757d);
    }
    
    .table-empty i,
    .no-results i {
        font-size: 3rem;
        margin-bottom: 1rem;
        opacity: 0.5;
    }
}

/* ========================================
 * DARK MODE SUPPORT
 * ======================================== */

html.dark-mode .mobile-card {
    background: var(--bs-dark, #212529);
    border-color: var(--bs-gray-700, #495057);
}

html.dark-mode .mobile-card-header,
html.dark-mode .mobile-card-actions {
    border-color: var(--bs-gray-700, #495057);
}

html.dark-mode .mobile-card-label {
    color: var(--bs-gray-400, #adb5bd);
}

html.dark-mode .mobile-card-value {
    color: var(--bs-gray-200, #e9ecef);
}

html.dark-mode table thead th {
    background-color: var(--bs-dark, #212529);
}

/* ========================================
 * ACCESSIBILITY IMPROVEMENTS
 * ======================================== */

@media (max-width: 767px) {
    /* Increase focus outline visibility on mobile */
    table a:focus,
    table button:focus,
    .mobile-card a:focus,
    .mobile-card button:focus {
        outline: 2px solid var(--bs-primary, #0d6efd);
        outline-offset: 2px;
    }
    
    /* Ensure sufficient contrast for focus states */
    table .btn:focus,
    .mobile-card .btn:focus {
        box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    }
}

@import url('open-iconic/font/css/open-iconic-bootstrap.min.css?v=YcdmR4W3O6-TqZohxJs-Q-dNuh4');

.erp-base-grid-table thead th {
    white-space: nowrap;
    vertical-align: middle;
}

.erp-base-grid-table tbody td {
    vertical-align: middle;
}

.erp-grid-row {
    cursor: pointer;
}

.erp-grid-row:focus {
    outline: 2px solid #0d6efd;
    outline-offset: -2px;
}

.erp-grid-selection-column {
    width: 44px;
    text-align: center;
}

.erp-grid-actions {
    justify-content: flex-end;
    min-height: 44px;
}

.erp-grid-filterbar .form-control,
.erp-grid-filterbar .form-select,
.erp-grid-filterbar .btn {
    min-height: 44px;
}

@media (max-width: 767.98px) {
    .erp-base-grid .table-responsive {
        border-top: 1px solid #dee2e6;
    }

    .erp-base-grid-table {
        font-size: 0.95rem;
    }

    .erp-grid-actions .btn {
        min-height: 44px;
    }
}

:root {
    --erp-color-primary: #f28c28;
    --erp-color-secondary: #1b6ec2;
    --erp-color-disabled: #9aa0a6;
    --erp-alert-success: #1f8f4a;
    --erp-alert-warning: #f28c28;
    --erp-alert-error: #c0392b;
    --erp-alert-info: #1b6ec2;
    --erp-modal-overlay: rgba(0, 0, 0, 0.5);
    --grid-hover: #f4f8ff;
}

.clickable-row {
    cursor: pointer;
}

.clickable-row:hover {
    background-color: var(--grid-hover);
}

.clickable-row:focus-visible {
    outline: 2px solid var(--erp-color-secondary);
    outline-offset: -2px;
}

.clickable-card {
    cursor: pointer;
    transition: box-shadow 0.3s ease;
}

.clickable-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.clickable-card:focus-visible {
    outline: 2px solid var(--erp-color-secondary);
    outline-offset: 2px;
}

.erp-btn {
    min-height: 44px;
    font-weight: 600;
}

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

.erp-btn-secondary {
    color: #fff;
    background-color: var(--erp-color-secondary);
    border-color: var(--erp-color-secondary);
}

.erp-btn-info {
    color: #fff;
    background-color: var(--erp-alert-info);
    border-color: var(--erp-alert-info);
}

.erp-btn-warning {
    color: #111;
    background-color: var(--erp-alert-warning);
    border-color: var(--erp-alert-warning);
}

.erp-btn-danger {
    color: #fff;
    background-color: var(--erp-alert-error);
    border-color: var(--erp-alert-error);
}

.erp-btn:disabled,
.erp-btn[aria-disabled='true'] {
    background-color: var(--erp-color-disabled);
    border-color: var(--erp-color-disabled);
    color: #fff;
    cursor: not-allowed;
    opacity: 1;
}

.erp-tabs {
    border-bottom: 1px solid #d5dbe1;
}

.erp-tabs .nav-link {
    color: var(--erp-color-secondary) !important;
    background-color: #ffffff !important;
    border: 1px solid #d5dbe1 !important;
    opacity: 1 !important;
}

.erp-tabs .nav-link.active {
    color: #ffffff !important;
    background-color: var(--erp-color-primary) !important;
    border-color: var(--erp-color-primary) !important;
}

.erp-tabs .nav-link:hover,
.erp-tabs .nav-link:focus {
    color: #ffffff !important;
    background-color: var(--erp-color-secondary) !important;
    border-color: var(--erp-color-secondary) !important;
}

/* Global tab consistency for non-sidebar screens */
.content .nav-tabs,
.card .nav-tabs,
.container-fluid .nav-tabs {
    border-bottom: 1px solid #d5dbe1;
}

.content .nav-tabs .nav-link,
.card .nav-tabs .nav-link,
.container-fluid .nav-tabs .nav-link {
    color: #ffffff !important;
    background-color: var(--erp-color-secondary) !important;
    border: 1px solid var(--erp-color-secondary) !important;
    border-bottom: 3px solid #1558a0 !important;
    opacity: 1 !important;
}

.content .nav-tabs .nav-link:hover,
.content .nav-tabs .nav-link:focus,
.card .nav-tabs .nav-link:hover,
.card .nav-tabs .nav-link:focus,
.container-fluid .nav-tabs .nav-link:hover,
.container-fluid .nav-tabs .nav-link:focus {
    color: #ffffff !important;
    background-color: #1558a0 !important;
    border-color: #1558a0 !important;
    border-bottom: 3px solid #0f4379 !important;
}

.content .nav-tabs .nav-link.active,
.card .nav-tabs .nav-link.active,
.container-fluid .nav-tabs .nav-link.active {
    color: #ffffff !important;
    background-color: var(--erp-color-primary) !important;
    border-color: var(--erp-color-primary) !important;
    border-bottom: 3px solid #d97706 !important;
}

.erp-alert {
    border-width: 1px;
    border-style: solid;
}

.erp-alert-success {
    background-color: #eaf7ef;
    border-color: var(--erp-alert-success);
    color: #0f4f29;
}

.erp-alert-warning {
    background-color: #fff2e5;
    border-color: var(--erp-alert-warning);
    color: #663c00;
}

.erp-alert-error {
    background-color: #fdeceb;
    border-color: var(--erp-alert-error);
    color: #6f1d13;
}

.erp-alert-info {
    background-color: #ebf4fd;
    border-color: var(--erp-alert-info);
    color: #133c69;
}

.erp-form-label {
    font-weight: 600;
}

.erp-form-field .form-control,
.erp-form-field .form-select {
    min-height: 44px;
}

.erp-form-error {
    margin-top: 0.25rem;
    color: var(--erp-alert-error);
    font-size: 0.875rem;
}

.erp-modal-backdrop {
    background-color: var(--erp-modal-overlay);
}

.erp-modal-content {
    max-height: 90vh;
}

.erp-modal-header,
.erp-modal-footer {
    position: sticky;
    background-color: #fff;
    z-index: 1;
}

.erp-modal-header {
    top: 0;
    border-bottom: 1px solid #e5e7eb;
}

.erp-modal-footer {
    bottom: 0;
    border-top: 1px solid #e5e7eb;
}

.erp-modal-body {
    overflow-y: auto;
    max-height: calc(90vh - 140px);
}

@media (max-width: 767.98px) {
    .erp-modal-dialog {
        margin: 0;
        max-width: 100%;
        height: 100%;
    }

    .erp-modal-content {
        min-height: 100%;
        border-radius: 0;
    }
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: #0071c1;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
    max-width: 100%;
    padding-left: var(--container-padding-mobile);
    padding-right: var(--container-padding-mobile);
}

/* Purchase module pages use one shared container strategy so alignment stays consistent.
   Rule: all purchase-page containers fill 100% of the article content area and have no
   extra side-padding so content starts at the same left-edge as on non-purchase pages
   (e.g. Organisaties Beheren). The !important overrides Bootstrap container-fluid defaults. */
.content .purchase-page,
.purchase-page {
    width: 100% !important;
    max-width: 100% !important;
}

.content .purchase-page.container-fluid,
.purchase-page.container-fluid {
    /* Use standard Bootstrap container-fluid gutters so Purchase aligns with Sales. */
    padding-left: calc(var(--bs-gutter-x, 1.5rem) * 0.5) !important;
    padding-right: calc(var(--bs-gutter-x, 1.5rem) * 0.5) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Align PurchaseNavigation top-bar content with the page body below it.
   Bootstrap .container-fluid inside the navbar adds 0.75rem gutter by default,
   causing a visual 0.75rem left-shift between nav items and page content.
   Setting it to 0 makes both start at the same left edge as the article padding.
   Scope this override to Purchase pages only so other module navbars keep their
   default Bootstrap gutter behavior. */
.content .purchase-page nav.navbar .container-fluid {
    padding-left: calc(var(--bs-gutter-x, 1.5rem) * 0.5) !important;
    padding-right: calc(var(--bs-gutter-x, 1.5rem) * 0.5) !important;
}

/* Keep long Purchase navbar menus from widening the full page.
   Desktop: horizontal overflow stays inside the navbar area, not the document. */
.content .purchase-page nav.navbar,
.content .purchase-page nav.navbar .container-fluid,
.content .purchase-page nav.navbar .navbar-collapse {
    max-width: 100%;
}

@media (min-width: 992px) {
    .content .purchase-page nav.navbar .navbar-collapse {
        overflow-x: auto;
        overflow-y: visible;
    }

    .content .purchase-page nav.navbar .navbar-nav {
        flex-wrap: nowrap;
        white-space: nowrap;
    }

    .content .purchase-page nav.navbar .navbar-nav .nav-item {
        flex: 0 0 auto;
    }
}

/* Responsive padding for content */
@media (min-width: 768px) {
    .content {
        padding-left: var(--container-padding-tablet);
        padding-right: var(--container-padding-tablet);
    }
}

@media (min-width: 1024px) {
    .content {
        padding-left: var(--container-padding-desktop);
        padding-right: var(--container-padding-desktop);
    }
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA9NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

/* Menu collapse styles */
.menu-collapsed {
    display: none !important;
}

.menu-expanded {
    display: block !important;
}

/* Fix for navigation menu visibility */
.sidebar {
    overflow-y: auto;
    min-height: 100vh;
}

.nav-scrollable {
    position: relative !important;
    height: auto !important;
}

/* Override any fixed positioning that might interfere */
.navbar, .top-row {
    position: relative !important;
}

/* Ultra-Force Menu Visibility - Emergency Override */
.sidebar,
div.sidebar,
.sidebar > *,
.sidebar .nav-scrollable,
.sidebar.d-lg-block {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 250px !important;
    height: 100vh !important;
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    z-index: 9999 !important;
    background: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%) !important;
    overflow-y: auto !important;
    max-width: 250px; /* Prevent sidebar from causing overflow */
}

/* Main content spacing */
main {
    margin-left: 250px !important;
    padding-left: var(--container-padding-desktop, 2rem) !important;
    max-width: calc(100vw - 250px); /* Prevent overflow */
    overflow-x: hidden; /* fallback for browsers without clip support */
    overflow-x: clip; /* clip prevents horizontal overflow without creating a vertical scroll context */
}

main > *,
.content,
article {
    /* No margin-left here: main itself is already offset by 250px; adding it again would double-shift */
    max-width: 100%; /* Prevent overflow relative to main */
    overflow-x: hidden; /* fallback for browsers without clip support */
    overflow-x: clip; /* clip prevents horizontal overflow without creating a vertical scroll context */
}

/* Menu items forced visibility */
.sidebar .nav-item,
.sidebar .nav-link,
.sidebar nav,
.sidebar nav > * {
    display: block !important;
    visibility: visible !important;
    color: white !important;
}

.sidebar .nav-link:hover {
    background-color: rgba(255,255,255,0.1) !important;
}

/* Top row adjustment */
.top-row {
    margin-left: 250px !important;
    background-color: #f7f7f7 !important;
    max-width: calc(100vw - 250px); /* Prevent overflow */
    overflow-x: hidden; /* Voorkom horizontale scrollbalk in de navigatiebalk; laat absolute dropdowns (notificaties) verticaal doorstromen */
}

/* Mobile responsive - Use standard mobile breakpoint */
@media (max-width: 640px) {
    .sidebar {
        transform: translateX(0) !important;
        max-width: 100vw;
    }
    
    main,
    main > *,
    .content,
    article {
        margin-left: 0 !important;
        max-width: 100vw;
        padding-left: var(--container-padding-mobile, 1rem) !important;
        padding-right: var(--container-padding-mobile, 1rem) !important;
    }
    
    .top-row {
        margin-left: 0 !important;
        max-width: 100vw;
    }
    
    .sidebar.collapse {
        transform: translateX(-100%) !important;
    }
}

/* Custom modal size for Nieuwe Verkooporder */
.modal-dialog.modal-wider {
    width: min(1200px, calc(100vw - 2rem)) !important;
    max-width: calc(100vw - 2rem) !important;
    margin: 1rem auto !important;
    left: 0 !important;
    right: 0 !important;
}

/* Mobile/Tablet breakpoint - Use standard tablet breakpoint */
@media (max-width: 768px) {
    .modal-dialog.modal-wider {
        width: calc(100vw - 1rem) !important;
        max-width: calc(100vw - 1rem) !important;
        margin: 0.5rem auto !important;
        left: 0 !important;
        right: 0 !important;
    }
}

.modal-dialog.modal-wider .modal-content {
    max-height: calc(100vh - 2rem);
    width: 100%;
    overflow: hidden;
}

.modal-dialog.modal-wider .modal-body {
    max-height: calc(100vh - 12rem);
    overflow-y: auto;
    overflow-x: hidden;
}

/* Ensure tables inside the wider modal can use the available space and avoid unnecessary wrapping */
.modal-dialog.modal-wider .table {
    table-layout: fixed; /* enforce column widths set via CSS percentages */
    width: 100%;
    max-width: 100%; /* Prevent table overflow */
}

/* Allow cell contents to wrap if needed and make inputs fill the cell */
.modal-dialog.modal-wider .table td,
.modal-dialog.modal-wider .table th {
    white-space: normal; /* allow wrapping so fixed layout percentages apply */
    overflow: hidden; /* Prevent cell overflow */
}

.modal-dialog.modal-wider .table td .form-control,
.modal-dialog.modal-wider .table td .input-group,
.modal-dialog.modal-wider .table td .input-group .form-control {
    width: 100%;
    box-sizing: border-box;
    max-width: 100%; /* Prevent input overflow */
}

/* Force responsive wrapper and table to occupy full modal width */
.modal-dialog.modal-wider .table-responsive {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow-x: auto;
    max-width: 100%; /* Prevent overflow */
}

.modal-dialog.modal-wider table.table.table-sm.table-bordered {
    width: 100% !important;
    margin: 0 !important;
    table-layout: fixed !important;
}

    /* Stamgegevens tabs: extra specifieke, conflict-vrije leesbaarheid */
    .card-header .stamgegevens-tabs .nav-link,
    .card-header .stamgegevens-tabs button.nav-link {
        color: #1f2d3d !important;
        background-color: #f8f9fa !important;
        border: 1px solid #ced4da !important;
        margin-right: 0.25rem;
        font-weight: 600 !important;
        transition: all 0.2s ease-in-out;
        border-bottom: 3px solid #adb5bd !important;
        opacity: 1 !important;
    }

    .card-header .stamgegevens-tabs .nav-link i,
    .card-header .stamgegevens-tabs button.nav-link i {
        color: #495057 !important;
    }

    .card-header .stamgegevens-tabs .nav-link:hover,
    .card-header .stamgegevens-tabs .nav-link:focus,
    .card-header .stamgegevens-tabs button.nav-link:hover,
    .card-header .stamgegevens-tabs button.nav-link:focus {
        color: #ffffff !important;
        background-color: #1b6ec2 !important;
        border-color: #1b6ec2 !important;
        border-bottom: 3px solid #1558a0 !important;
    }

    .card-header .stamgegevens-tabs .nav-link:hover i,
    .card-header .stamgegevens-tabs button.nav-link:hover i {
        color: #ffffff !important;
    }

    .card-header .stamgegevens-tabs .nav-link.active,
    .card-header .stamgegevens-tabs button.nav-link.active {
        color: #ffffff !important;
        background-color: #f28c28 !important;
        border-color: #f28c28 !important;
        border-bottom: 3px solid #d97706 !important;
        font-weight: 700 !important;
        box-shadow: 0 2px 4px rgba(242, 140, 40, 0.35) !important;
    }

    .card-header .stamgegevens-tabs .nav-link.active i,
    .card-header .stamgegevens-tabs button.nav-link.active i {
        color: #ffffff !important;
    }

    @media (max-width: 768px) {
        .stamgegevens-tabs .nav-link {
            padding: 0.75rem 0.9rem;
            font-size: 0.95rem;
            /* Ensure minimum 44px touch target height */
            min-height: 44px;
        }
    }

    /* Dark mode styling - maintains contrast ratios */
    body.dark-mode .card-header .stamgegevens-tabs .nav-link,
    body.dark-mode .card-header .stamgegevens-tabs button.nav-link {
        color: #ffffff !important;
        background-color: #1b6ec2 !important;
        border-color: #1b6ec2 !important;
        opacity: 1 !important;
    }

    body.dark-mode .card-header .stamgegevens-tabs .nav-link i,
    body.dark-mode .card-header .stamgegevens-tabs button.nav-link i {
        color: #ffffff !important;
    }

    body.dark-mode .card-header .stamgegevens-tabs .nav-link:hover,
    body.dark-mode .card-header .stamgegevens-tabs .nav-link:focus,
    body.dark-mode .card-header .stamgegevens-tabs button.nav-link:hover,
    body.dark-mode .card-header .stamgegevens-tabs button.nav-link:focus {
        color: #ffffff !important;
        background-color: #1558a0 !important;
        border-color: #1558a0 !important;
        border-bottom: 3px solid #0f4379 !important;
    }

    body.dark-mode .card-header .stamgegevens-tabs .nav-link:hover i,
    body.dark-mode .card-header .stamgegevens-tabs button.nav-link:hover i {
        color: #ffffff !important;
    }

    body.dark-mode .card-header .stamgegevens-tabs .nav-link.active,
    body.dark-mode .card-header .stamgegevens-tabs button.nav-link.active {
        color: #ffffff !important;
        background-color: #f28c28 !important;
        border-color: #f28c28 !important;
        border-bottom: 3px solid #d97706 !important;
    }

    body.dark-mode .card-header .stamgegevens-tabs .nav-link.active i,
    body.dark-mode .card-header .stamgegevens-tabs button.nav-link.active i {
        color: #ffffff !important;
    }

/* Ensure input-groups don't shrink columns by fixed button widths */
.modal-dialog.modal-wider .input-group {
    display: flex !important;
    flex-wrap: nowrap !important;
}

.modal-dialog.modal-wider .input-group .form-control {
    flex: 1 1 auto !important;
    width: 100% !important;
}

/* If the table still overflows, allow horizontal scroll only inside the table container */
.modal-dialog.modal-wider .table-responsive {
    overflow-x: auto;
}

/* Adjust column widths specifically for the order lines table inside the wider modal */
.modal-dialog.modal-wider .table thead th:nth-child(7),
.modal-dialog.modal-wider .table tbody td:nth-child(7) {
    /* BTW column slightly smaller */
    width: 5% !important;
    max-width: 5% !important;
}

.modal-dialog.modal-wider .table thead th:nth-child(8),
.modal-dialog.modal-wider .table tbody td:nth-child(8),
.modal-dialog.modal-wider .table tfoot td:nth-child(8) {
    /* Totaal column slightly wider */
    width: 16% !important;
    max-width: 16% !important;
}

/* Make the final action column small so it doesn't consume space */
.modal-dialog.modal-wider table.table.table-sm.table-bordered thead th:nth-child(9),
.modal-dialog.modal-wider table.table.table-sm.table-bordered tbody td:nth-child(9),
.modal-dialog.modal-wider table.table.table-sm.table-bordered tfoot td:nth-child(9) {
    width: 4% !important;
    max-width: 4% !important;
}

/* Explicit colgroup width rules to reliably enforce column sizes */
.modal-dialog.modal-wider table.table.table-sm.table-bordered col.col-btw {
    width: 5% !important;
}

.modal-dialog.modal-wider table.table.table-sm.table-bordered col.col-totaal {
    width: 16% !important;
}

.modal-dialog.modal-wider table.table.table-sm.table-bordered col.col-action {
    width: 4% !important;
}

/* Responsive modal styling for Organization edit modal - SCOPED to avoid affecting other modals */
.modal-dialog.modal-organization-edit {
    max-width: 800px;
    margin: 1.75rem auto;
}

.modal-dialog.modal-organization-edit .modal-content {
    /* Constrain modal to 90vh on desktop to ensure it fits within viewport */
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Prevent overflow */
}

/* Fixed header */
.modal-dialog.modal-organization-edit .modal-header {
    flex-shrink: 0;
    border-bottom: 1px solid #dee2e6;
    position: sticky;
    top: 0;
    background-color: #fff;
    z-index: 1;
}

/* Scrollable body */
.modal-dialog.modal-organization-edit .modal-body {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    /* Use spacing variable for padding */
    padding: var(--spacing-md, 1rem);
    max-width: 100%; /* Prevent overflow */
}

/* Fixed footer - now a direct child of modal-content so sticky works correctly */
.modal-dialog.modal-organization-edit .modal-footer {
    flex-shrink: 0;
    border-top: 1px solid #dee2e6;
    background-color: #fff;
    /* Use spacing variable for padding */
    padding: var(--spacing-sm, 0.75rem);
    position: sticky;
    bottom: 0;
    z-index: 1;
}

/* Ensure form fields are responsive */
.modal-dialog.modal-organization-edit .modal-body .form-control,
.modal-dialog.modal-organization-edit .modal-body .form-select {
    width: 100%;
    max-width: 100%; /* Prevent overflow */
}

/* 2-column layout on tablet and up - Use standard tablet breakpoint */
@media (min-width: 768px) {
    .modal-dialog.modal-organization-edit .modal-body .row {
        display: flex;
        flex-wrap: wrap;
    }
    
    .modal-dialog.modal-organization-edit .modal-body .row > [class*='col-'] {
        padding-right: var(--spacing-sm, 0.75rem);
        padding-left: var(--spacing-sm, 0.75rem);
    }
}

/* 1-column layout on mobile - Use standard mobile breakpoint */
@media (max-width: 767px) {
    .modal-dialog.modal-organization-edit {
        /* Use spacing variable for margin */
        margin: var(--spacing-sm, 0.5rem);
        max-width: calc(100% - 1rem);
    }
    
    .modal-dialog.modal-organization-edit .modal-content {
        /* Increase to 95vh on mobile to maximize available screen space */
        max-height: 95vh;
    }
    
    .modal-dialog.modal-organization-edit .modal-body .row > [class*='col-'] {
        width: 100%;
        max-width: 100%;
    }
}

/* Prevent horizontal scroll - apply box-sizing to modal body and direct form elements */
.modal-dialog.modal-organization-edit .modal-body,
.modal-dialog.modal-organization-edit .modal-body > form,
.modal-dialog.modal-organization-edit .modal-body .row,
.modal-dialog.modal-organization-edit .modal-body .form-control,
.modal-dialog.modal-organization-edit .modal-body .form-select,
.modal-dialog.modal-organization-edit .modal-body .input-group {
    box-sizing: border-box;
    max-width: 100%; /* Prevent overflow */
}

/* Adjust input groups and form controls to prevent overflow */
.modal-dialog.modal-organization-edit .modal-body .input-group {
    flex-wrap: nowrap;
}

/* Handle nested address editor cards within modal */
.modal-dialog.modal-organization-edit .modal-body .card {
    margin-bottom: var(--spacing-md, 1rem);
    max-width: 100%; /* Prevent card overflow */
}

/* Ensure dropdown menus within modal don't cause scroll issues */
.modal-dialog.modal-organization-edit .modal-body .list-group {
    max-width: 100%;
}

/* Make table responsive inside modal */
.modal-dialog.modal-organization-edit .modal-body .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%; /* Prevent table overflow */
}

/* Screenshot Capture Mode - Hide modal/overlay without layout shift */
body.screenshot-capture-mode .modal,
body.screenshot-capture-mode .modal-backdrop,
body.screenshot-capture-mode .modal.show,
body.screenshot-capture-mode .modal-backdrop.show,
body.screenshot-capture-mode .modal-overlay,
body.screenshot-capture-mode .dialog-root,
body.screenshot-capture-mode .cookie-consent-banner {
    visibility: hidden !important;
    pointer-events: none !important;
}

/* EMERGENCY SIDEBAR VISIBILITY FIX */
/* This CSS will force the sidebar to be visible at all costs */

/* Reset all potentially conflicting classes */
* {
    box-sizing: border-box;
}

/* Force sidebar container */
.sidebar {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 250px !important;
    height: 100vh !important;
    z-index: 99999 !important;
    background: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    transform: translateX(0) !important;
    transition: none !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Force navigation container */
.nav-scrollable {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
    background: transparent !important;
    padding: 1rem !important;
}

/* Force all Bootstrap display classes */
.d-none,
.collapse:not(.show) {
    display: block !important;
}

.d-block,
.d-lg-block {
    display: block !important;
}

/* Force navigation items */
.nav-item {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin: 0.5rem 0 !important;
}

.nav-link {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #ffffff !important;
    text-decoration: none !important;
    padding: 0.75rem 1rem !important;
    border-radius: 0.25rem !important;
    transition: background-color 0.2s ease !important;
}

.nav-link:hover,
.nav-link:focus {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

/* Force menu expanded/collapsed classes */
.menu-expanded {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    max-height: none !important;
    overflow: visible !important;
}

.menu-collapsed {
    display: none !important;
}

/* Force navbar brand */
.navbar-brand {
    color: #ffffff !important;
    font-weight: bold !important;
}

/* Force navbar toggler */
.navbar-toggler {
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    background: transparent !important;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* Adjust main content to accommodate fixed sidebar */
main {
    margin-left: 250px !important;
    min-height: 100vh !important;
    width: calc(100% - 250px) !important;
    padding: 0 !important;
}

.content {
    padding: 2rem !important;
    width: 100% !important;
}

.top-row {
    background-color: #f8f9fa !important;
    border-bottom: 1px solid #dee2e6 !important;
    padding: 1rem 2rem !important;
    margin: 0 !important;
    width: 100% !important;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .sidebar {
        width: 100% !important;
        transform: translateX(-100%) !important;
    }
    
    .sidebar.show {
        transform: translateX(0) !important;
    }
    
    main {
        margin-left: 0 !important;
        width: 100% !important;
    }
}

/* Force icons to show */
.oi {
    display: inline-block !important;
    margin-right: 0.5rem !important;
    width: 1rem !important;
    text-align: center !important;
}

/* Button styling for logout */
.btn-link {
    border: none !important;
    background: none !important;
    color: inherit !important;
    text-align: left !important;
    width: 100% !important;
    padding: 0.75rem 1rem !important;
}

.btn-link:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* LAYOUT FIX - REMOVE WHITE SPACE - PERSISTENT */

/* Reset all margins and padding on root elements */
* {
    box-sizing: border-box;
}

/* Force page layout ALWAYS */
.page {
    margin: 0 !important;
    padding: 0 !important;
    background: white;
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    min-height: 100vh !important;
}

/* Dark mode override for page */
body.dark-mode .page,
html.dark-mode .page {
    background: #1a1a1a !important;
}

/* Ensure sidebar is ALWAYS exactly 250px */
.sidebar,
div.sidebar,
.page .sidebar {
    width: 250px !important;
    min-width: 250px !important;
    max-width: 250px !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    height: 100vh !important;
    z-index: 9999 !important;
    background: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    flex-shrink: 0 !important;
    transform: translateX(0) !important;
    transition: none !important;
}

/* Force main content to ALWAYS start at 250px */
main,
.page main,
div main {
    margin-left: 250px !important;
    margin-top: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 20px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: calc(100% - 250px) !important;
    background: white;
    min-height: 100vh !important;
    position: relative !important;
    left: 0 !important;
    border-left: none !important;
}

/* Dark mode override for main */
body.dark-mode main,
body.dark-mode .page main,
body.dark-mode div main,
html.dark-mode main,
html.dark-mode .page main,
html.dark-mode div main {
    background: #1a1a1a !important;
}

/* Remove any potential padding/margin from body and html */
html, body {
    margin: 0 !important;
    padding: 0 !important;
    background: white;
    overflow-x: hidden !important;
    width: 100% !important;
}

/* Dark mode override for html and body */
html.dark-mode,
body.dark-mode {
    background: #1a1a1a !important;
}

/* Ensure content areas don't have extra margins */
.content, 
article,
main .content,
main article {
    margin-left: 0 !important;
    background: white;
    padding-left: 2rem !important;
    width: 100% !important;
}

/* Dark mode override for content areas */
body.dark-mode .content,
body.dark-mode article,
html.dark-mode .content,
html.dark-mode article {
    background: #1a1a1a !important;
}

/* Top row should not add extra margins */
.top-row,
main .top-row {
    margin-left: 0 !important;
    width: 100% !important;
    background-color: #f7f7f7 !important;
    padding-left: 2rem !important;
    position: relative !important;
}

/* Override ANY potential conflicting Bootstrap or component styles */
@media (min-width: 1px) {
    .page {
        flex-direction: row !important;
    }
    
    .sidebar {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    main {
        margin-left: 250px !important;
    }
}

/* Force layout on component refresh/navigation */
.page * {
    box-sizing: border-box !important;
}

/* Mobile-specific layout adjustments */
@media (max-width: 1023px) {
    /* Mobile menu toggle button */
    .mobile-menu-toggle {
        padding: 8px 12px;
        border: 1px solid #ddd;
        background: white;
        border-radius: 4px;
        font-size: 1.25rem;
        color: #333;
        cursor: pointer;
        transition: background 0.2s;
        min-height: 44px;
        min-width: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Dark mode override for mobile menu toggle */
    body.dark-mode .mobile-menu-toggle,
    html.dark-mode .mobile-menu-toggle {
        background: #353535 !important;
        border-color: #505050 !important;
        color: #e0e0e0 !important;
    }

    .mobile-menu-toggle:hover,
    .mobile-menu-toggle:focus {
        background: #f8f9fa;
        border-color: #007bff;
        outline: 2px solid #007bff;
        outline-offset: 2px;
    }

    .mobile-menu-toggle:active {
        background: #e9ecef;
    }

    /* Hide sidebar on mobile by default */
    .sidebar,
    div.sidebar,
    .page .sidebar {
        transform: translateX(-100%) !important;
        transition: transform 0.3s ease-in-out !important;
    }

    /* Show sidebar when toggled */
    .sidebar.show,
    div.sidebar.show,
    .page .sidebar.show {
        transform: translateX(0) !important;
    }

    /* Full width main content on mobile */
    main,
    .page main,
    div main {
        margin-left: 0 !important;
        width: 100% !important;
        padding-top: 60px !important; /* Room for mobile header */
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* Adjust content padding */
    .content, 
    article,
    main .content,
    main article {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .top-row,
    main .top-row {
        padding-left: 15px !important;
        padding-right: 15px !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 1000 !important;
    }

    /* Overlay when sidebar is open */
    .sidebar-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 9998;
        display: none;
        opacity: 0;
        transition: opacity 0.3s ease-in-out;
    }

    .sidebar-overlay.show {
        display: block;
        opacity: 1;
    }
}

/* Hide mobile menu toggle on desktop (matches Bootstrap lg breakpoint) */
@media (min-width: 992px) {
    .mobile-menu-toggle {
        display: none !important;
    }
}

@media (min-width: 1024px) {
    /* Ensure desktop layout is enforced */
    .sidebar {
        transform: translateX(0) !important;
    }
    
    main {
        margin-left: 250px !important;
        padding-top: 20px !important;
    }
    
    /* Ensure overlay is never shown on desktop */
    .sidebar-overlay {
        display: none !important;
    }
}

/* Print styles for Financial Statements */
@media print {
    body {
        font-family: Arial, sans-serif !important;
        color: #000 !important;
        background: white !important;
    }

    /* Hide non-printable elements */
    .no-print,
    .btn,
    button,
    .dropdown,
    .navbar,
    .sidebar,
    nav,
    .breadcrumb,
    .alert,
    .toast,
    .modal,
    header,
    footer,
    .top-row {
        display: none !important;
    }

    /* Ensure print area takes full width */
    .print-area {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Main content adjustments */
    main {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }

    .container-fluid {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Table styling for print */
    table {
        width: 100% !important;
        border-collapse: collapse !important;
        margin-bottom: 20px !important;
        font-size: 12px !important;
    }

    th, td {
        padding: 8px !important;
        border: 1px solid #000 !important;
        text-align: left !important;
        vertical-align: top !important;
    }

    th {
        background-color: #f5f5f5 !important;
        font-weight: bold !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* Card styling for print */
    .card {
        border: 2px solid #000 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        margin-bottom: 20px !important;
        background: white !important;
    }

    .card-header {
        background-color: #f8f9fa !important;
        border-bottom: 1px solid #000 !important;
        padding: 10px !important;
        font-weight: bold !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .card-body {
        padding: 15px !important;
        background: white !important;
    }

    /* Financial statement specific styling */
    .text-success {
        color: #000 !important;
        font-weight: bold !important;
    }

    .text-danger {
        color: #000 !important;
        font-weight: bold !important;
    }

    .text-muted {
        color: #666 !important;
    }

    /* Balance totals */
    .fw-bold {
        font-weight: bold !important;
        border-top: 2px solid #000 !important;
    }

    /* Page breaks */
    .page-break {
        page-break-before: always !important;
    }

    /* Header information */
    h1, h2, h3, h4, h5, h6 {
        color: #000 !important;
        margin-bottom: 10px !important;
    }

    /* Hide chart canvas elements in print */
    canvas {
        display: none !important;
    }

    /* Ensure proper spacing */
    .row {
        margin-bottom: 15px !important;
    }

    .col-md-6, .col-lg-6 {
        width: 48% !important;
        float: left !important;
        margin-right: 2% !important;
    }

    /* Financial totals styling */
    .bg-success, .bg-primary, .bg-warning {
        background-color: #f8f9fa !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* Summary sections */
    .badge {
        border: 1px solid #000 !important;
        background-color: white !important;
        color: #000 !important;
        padding: 3px 6px !important;
        font-size: 11px !important;
    }

    /* Icons - convert to text or hide */
    .fas, .fa {
        display: none !important;
    }
}

/* Screen-only styles for enhanced UI */
@media screen {
    /* Chart containers */
    .chart-container {
        position: relative;
        height: 300px;
        margin-bottom: 20px;
    }

    /* Export button styling */
    .dropdown-toggle {
        border-top-right-radius: 0.375rem;
        border-bottom-right-radius: 0.375rem;
    }

    /* Enhanced cards */
    .card {
        border: none;
        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
        transition: all 0.15s ease-in-out;
    }

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

    /* Animation for chart toggle */
    .chart-fade-in {
        animation: fadeIn 0.3s ease-in;
    }

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

    /* Loading states */
    .btn:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }

    /* Enhanced table styling */
    .table-hover tbody tr:hover {
        background-color: rgba(0, 123, 255, 0.075);
    }

    /* Financial statement specific enhancements */
    .balance-positive {
        color: #28a745;
        font-weight: 600;
    }

    .balance-negative {
        color: #dc3545;
        font-weight: 600;
    }

    .balance-zero {
        color: #6c757d;
        font-style: italic;
    }
}
/* Support Desk Mobile-First CSS */

/* Mobile-first responsive design for Support Desk */
.support-desk-container {
    padding: 15px;
    max-width: 100%;
    overflow-x: hidden;
}

.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 10px;
}

.dashboard-header h1 {
    font-size: 1.5rem;
    margin: 0;
    flex: 1;
    min-width: 200px;
}

/* Real-time status indicator */
.realtime-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 20px;
    font-size: 0.875em;
    font-weight: 500;
    white-space: nowrap;
}

.realtime-status.connected {
    background-color: #e8f5e8;
    color: #2e7d2e;
    border: 1px solid #4caf50;
}

.realtime-status.disconnected {
    background-color: #ffeaea;
    color: #d32f2f;
    border: 1px solid #f44336;
}

.status-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: currentColor;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

/* Support statistics cards - mobile responsive */
.support-stats {
    display: grid;
    gap: 15px;
    margin-bottom: 25px;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.stat-card {
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: transform 0.2s, box-shadow 0.2s;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.stat-card h3 {
    font-size: 0.9rem;
    margin: 0 0 10px 0;
    color: #666;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-number {
    font-size: 2rem;
    font-weight: bold;
    margin: 0 0 5px 0;
    color: #333;
}

.stat-card small {
    color: #888;
    font-size: 0.8rem;
}

/* Support content layout */
.support-content {
    display: grid;
    gap: 25px;
    grid-template-columns: 1fr;
}

/* Agents section */
.agents-section {
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 10px;
}

.section-header h2 {
    margin: 0;
    color: #333;
    font-size: 1.25rem;
}

/* Agents grid - responsive */
.agents-grid {
    display: grid;
    gap: 15px;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.agent-card {
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: transform 0.2s, box-shadow 0.2s;
}

.agent-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.agent-card.active {
    border-left: 4px solid #4caf50;
}

.agent-card.inactive {
    border-left: 4px solid #f44336;
    opacity: 0.8;
}

.agent-info h4 {
    margin: 0 0 8px 0;
    color: #333;
    font-size: 1.1rem;
}

.agent-info p {
    margin: 4px 0;
    color: #666;
    font-size: 0.9rem;
}

.agent-status {
    margin: 10px 0;
}

.status-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 500;
}

.status-active {
    background-color: #e8f5e8;
    color: #2e7d2e;
}

.status-inactive {
    background-color: #ffeaea;
    color: #d32f2f;
}

.agent-expertise {
    margin-top: 10px;
}

.expertise-tag {
    display: inline-block;
    background-color: #e3f2fd;
    color: #1976d2;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.75em;
    margin-right: 8px;
    margin-bottom: 4px;
}

/* Performance section */
.performance-section {
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    margin-top: 25px;
}

.performers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 15px;
}

.performer-card {
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.performer-card h4 {
    margin: 0 0 15px 0;
    color: #333;
    font-weight: 600;
}

.performance-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 15px;
}

.performance-stats .stat {
    display: flex;
    flex-direction: column;
    font-size: 0.9em;
}

.performance-stats .label {
    color: #666;
    font-size: 0.8em;
    margin-bottom: 2px;
}

.performance-stats .value {
    font-weight: 600;
    color: #333;
}

/* Empty state */
.empty-state {
    text-align: center;
    padding: 40px 20px;
    color: #666;
}

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

/* Loading spinner */
.loading-spinner {
    text-align: center;
    padding: 40px 20px;
}

.loading-spinner p {
    margin: 10px 0 0 0;
    color: #666;
}

/* Buttons */
.btn {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;
}

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

.btn-primary {
    background-color: #007bff;
    color: white;
}

.btn-primary:hover {
    background-color: #0056b3;
}

.btn-secondary {
    background-color: #6c757d;
    color: white;
}

.btn-secondary:hover {
    background-color: #545b62;
}

.btn-warning {
    background-color: #ffc107;
    color: #212529;
}

.btn-warning:hover {
    background-color: #e0a800;
}

/* Mobile breakpoints */
@media (max-width: 768px) {
    .dashboard-header {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }
    
    .dashboard-header h1 {
        font-size: 1.3rem;
        margin-bottom: 10px;
    }
    
    .realtime-status {
        justify-content: center;
    }
    
    .support-stats {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }
    
    .stat-card {
        padding: 15px;
    }
    
    .stat-number {
        font-size: 1.5rem;
    }
    
    .agents-grid {
        grid-template-columns: 1fr;
    }
    
    .section-header {
        flex-direction: column;
        align-items: stretch;
    }
    
    .section-header h2 {
        text-align: center;
        margin-bottom: 10px;
    }
    
    .performers-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .support-desk-container {
        padding: 10px;
    }
    
    .stat-card {
        padding: 12px;
    }
    
    .stat-number {
        font-size: 1.3rem;
    }
    
    .agent-card,
    .performer-card {
        padding: 12px;
    }
    
    .agents-section,
    .performance-section {
        padding: 15px;
    }
}

/* Print styles */
@media print {
    .realtime-status,
    .btn {
        display: none;
    }
    
    .support-desk-container {
        padding: 0;
    }
    
    .agent-card,
    .performer-card,
    .stat-card {
        break-inside: avoid;
        page-break-inside: avoid;
    }
}

/**
 * ERPAthos Help Drawer Styles
 * Right-side sliding drawer for contextual help and application flow guides
 * 
 * Features:
 * - Mobile-first responsive design
 * - Fullscreen on mobile (< 768px)
 * - Right-side drawer on desktop (≥ 768px)
 * - Smooth slide-in animations
 * - Overlay backdrop
 * - Sticky header on mobile
 * - Internal scrolling
 * - ESC key support via JavaScript interop
 */

/* ========================================
 * DRAWER OVERLAY (backdrop)
 * ======================================== */
.help-drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1049; /* Below modals (1050) but above content */
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* ========================================
 * HELP DRAWER - MOBILE FIRST (< 768px)
 * ======================================== */
.help-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100vh;
    background-color: var(--bs-body-bg, #fff);
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: 1050; /* Same as modal */
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.help-drawer.open {
    transform: translateX(0);
}

/* ========================================
 * DRAWER HEADER
 * ======================================== */
.help-drawer-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
    background-color: var(--bs-body-bg, #fff);
    position: sticky;
    top: 0;
    z-index: 10;
}

.help-drawer-title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--bs-body-color, #212529);
    display: flex;
    align-items: center;
}

.help-drawer-header .btn-close {
    padding: 0.5rem;
    margin: -0.5rem -0.5rem -0.5rem auto;
}

/* ========================================
 * DRAWER TABS
 * ======================================== */
.help-drawer-tabs {
    flex-shrink: 0;
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
    background-color: var(--bs-light, #f8f9fa);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.help-tab {
    flex-shrink: 0;
    padding: 0.5rem 1rem;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.375rem;
    background-color: var(--bs-body-bg, #fff);
    color: var(--bs-body-color, #212529);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.help-tab:hover {
    background-color: var(--bs-primary, #007bff);
    color: #fff;
    border-color: var(--bs-primary, #007bff);
}

.help-tab.active {
    background-color: var(--bs-primary, #007bff);
    color: #fff;
    border-color: var(--bs-primary, #007bff);
    box-shadow: 0 2px 4px rgba(0, 123, 255, 0.25);
}

/* ========================================
 * DRAWER CONTENT
 * ======================================== */
.help-drawer-content {
    flex: 1 1 auto;
    padding: 1rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Smooth scroll behavior */
.help-drawer-content::-webkit-scrollbar {
    width: 8px;
}

.help-drawer-content::-webkit-scrollbar-track {
    background: var(--bs-light, #f8f9fa);
}

.help-drawer-content::-webkit-scrollbar-thumb {
    background: var(--bs-gray-400, #ced4da);
    border-radius: 4px;
}

.help-drawer-content::-webkit-scrollbar-thumb:hover {
    background: var(--bs-gray-500, #adb5bd);
}

/* ========================================
 * SEARCH TAB CONTENT
 * ======================================== */
.help-search-tab {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.help-search-results {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.help-search-result-item {
    padding: 1rem;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.375rem;
    background-color: var(--bs-body-bg, #fff);
    cursor: pointer;
    transition: all 0.2s ease;
}

.help-search-result-item:hover {
    border-color: var(--bs-primary, #007bff);
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.15);
}

.help-search-result-item h5 {
    margin: 0 0 0.5rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--bs-body-color, #212529);
}

.help-search-result-item p {
    margin: 0;
    font-size: 0.875rem;
    color: var(--bs-gray-600, #6c757d);
    line-height: 1.5;
}

/* ========================================
 * RESPONSIVE - TABLET (768px - 1023px)
 * ======================================== */
@media (min-width: 768px) {
    .help-drawer {
        width: 480px;
        max-width: 95vw;
    }

    .help-drawer-title {
        font-size: 1.25rem;
    }

    .help-drawer-content {
        padding: 1.5rem;
    }
}

/* ========================================
 * RESPONSIVE - DESKTOP (≥ 1024px)
 * ======================================== */
@media (min-width: 1024px) {
    .help-drawer {
        width: 540px;
        max-width: 40vw;
    }

    .help-drawer-header {
        padding: 1.25rem 1.5rem;
    }

    .help-drawer-tabs {
        padding: 1rem 1.5rem;
    }

    .help-drawer-content {
        padding: 2rem 1.5rem;
    }

    .help-tab {
        font-size: 0.9375rem;
    }
}

/* ========================================
 * DARK MODE SUPPORT
 * ======================================== */
.dark-mode .help-drawer {
    background-color: var(--bs-dark, #212529);
    color: var(--bs-light, #f8f9fa);
}

.dark-mode .help-drawer-header {
    background-color: var(--bs-dark, #212529);
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

.dark-mode .help-drawer-title {
    color: var(--bs-light, #f8f9fa);
}

.dark-mode .help-drawer-tabs {
    background-color: rgba(255, 255, 255, 0.05);
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

.dark-mode .help-tab {
    background-color: var(--bs-dark, #212529);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--bs-light, #f8f9fa);
}

.dark-mode .help-tab:hover,
.dark-mode .help-tab.active {
    background-color: var(--bs-primary, #007bff);
    border-color: var(--bs-primary, #007bff);
    color: #fff;
}

.dark-mode .help-drawer-content::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
}

.dark-mode .help-drawer-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
}

.dark-mode .help-drawer-content::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

.dark-mode .help-search-result-item {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

.dark-mode .help-search-result-item:hover {
    border-color: var(--bs-primary, #007bff);
}

/* ========================================
 * ACCESSIBILITY
 * ======================================== */
.help-drawer:focus-visible {
    outline: 2px solid var(--bs-primary, #007bff);
    outline-offset: -2px;
}

.help-tab:focus-visible {
    outline: 2px solid var(--bs-primary, #007bff);
    outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .help-drawer {
        border: 2px solid currentColor;
    }

    .help-tab {
        border-width: 2px;
    }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    .help-drawer,
    .help-drawer-overlay,
    .help-tab {
        transition: none;
    }
}

/* 
 * Mobile-Friendly Dashboard Layout for ERPAthos
 * 
 * This CSS ensures all dashboard widgets/cards are stacked vertically
 * on mobile devices (< 768px) while preserving the desktop grid layout.
 * 
 * Breakpoints:
 * - Mobile: < 768px (stacked layout)
 * - Tablet: 768px - 1023px (partial grid)
 * - Desktop: >= 1024px (full grid preserved)
 */

/* ==========================================
   MOBILE: < 768px - Stack All Widgets/Cards
   ========================================== */
@media (max-width: 767px) {
    /* Force all dashboard cards to full width (stacked) */
    .container-fluid .row > [class*="col-"],
    .container .row > [class*="col-"],
    .row > [class*="col-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        margin-bottom: 1rem;
    }

    /* Reduce container padding for mobile */
    .container-fluid,
    .container {
        padding-left: 12px;
        padding-right: 12px;
    }

    /* Stack header sections vertically */
    .d-flex.justify-content-between,
    .d-flex.justify-content-between.align-items-center {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 1rem;
    }

    /* Center page titles on mobile - scoped to dashboard containers */
    .container-fluid h1, 
    .container-fluid h2, 
    .container-fluid h3,
    .support-dashboard h1,
    .support-dashboard h2,
    .support-dashboard h3 {
        text-align: center;
    }

    .container-fluid .text-muted,
    .support-dashboard .text-muted {
        text-align: center;
    }

    /* Stack button groups vertically */
    .btn-group {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        width: 100%;
    }

    .btn-group > .btn {
        width: 100%;
        border-radius: 0.375rem !important;
    }

    /* Touch-optimized buttons */
    .btn {
        min-height: 44px;
        padding: 12px 16px;
        font-size: 1rem;
    }

    /* Card optimizations */
    .card {
        border-radius: 8px;
        margin-bottom: 1rem;
    }

    .card-body {
        padding: 1rem;
    }

    .card h3, .card h4 {
        font-size: 1.25rem;
    }

    .card p {
        font-size: 0.875rem;
    }

    /* Responsive tables - rely on Bootstrap's .table-responsive */
    table {
        font-size: 0.875rem;
    }

    /* Charts and visualizations */
    canvas {
        max-width: 100%;
        height: auto !important;
    }

    .chart-container {
        position: relative;
        height: 250px !important;
        margin-bottom: 1rem;
    }

    /* Action buttons at top of page */
    .d-flex.gap-2 {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }

    .d-flex.gap-2 > .btn {
        width: 100%;
    }
}

/* ==========================================
   EXTRA SMALL MOBILE: < 480px
   ========================================== */
@media (max-width: 479px) {
    /* Even tighter spacing */
    .container-fluid,
    .container {
        padding-left: 8px;
        padding-right: 8px;
    }

    /* Scoped heading sizes for dashboards */
    .container-fluid h1,
    .support-dashboard h1 {
        font-size: 1.5rem;
    }

    .container-fluid h2,
    .support-dashboard h2 {
        font-size: 1.3rem;
    }

    .container-fluid h3,
    .support-dashboard h3 {
        font-size: 1.1rem;
    }

    .card-body {
        padding: 0.75rem;
    }

    .btn {
        padding: 10px 12px;
        font-size: 0.95rem;
    }
}

/* ==========================================
   VERY SMALL SCREENS: < 360px
   ========================================== */
@media (max-width: 359px) {
    /* Minimal layout for very small phones */
    .container-fluid,
    .container {
        padding-left: 6px;
        padding-right: 6px;
    }

    /* Scoped heading size for very small screens */
    .container-fluid h1,
    .support-dashboard h1 {
        font-size: 1.3rem;
    }

    .card-body {
        padding: 0.5rem;
    }

    /* Simplify charts on tiny screens */
    .chart-container {
        height: 200px !important;
    }

    /* Hide optional visual elements on tiny screens */
    .fa-2x, .fa-3x {
        font-size: 1.25rem !important;
    }
}

/* ==========================================
   DESKTOP: >= 1024px - Preserve Grid Layout
   ========================================== */
@media (min-width: 1024px) {
    /* Ensure desktop grid classes work as expected */
    .row > .col-lg-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
    .row > .col-lg-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .row > .col-lg-3 { flex: 0 0 25%; max-width: 25%; }
    .row > .col-lg-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .row > .col-lg-6 { flex: 0 0 50%; max-width: 50%; }
    .row > .col-lg-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .row > .col-lg-9 { flex: 0 0 75%; max-width: 75%; }
    .row > .col-lg-12 { flex: 0 0 100%; max-width: 100%; }

    /* Desktop spacing */
    .container-fluid {
        padding-left: 24px;
        padding-right: 24px;
    }
}

/* ==========================================
   LEGACY: Support Dashboard Specific Styles
   ========================================== */
.support-dashboard {
    padding: 20px;
}

@media (max-width: 767px) {
    .support-dashboard {
        padding: 10px;
    }

    /* Agent cards */
    .support-dashboard .agent-card {
        margin-bottom: 12px;
    }
}

@media (max-width: 479px) {
    .support-dashboard {
        padding: 8px;
    }

    /* Force single column on small phones */
    .support-dashboard .row.g-3 > [class*="col-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* Mobile-Responsive Optimizations for Ticket System */

/* Touch-optimized ticket list */
.tickets-page {
    padding: 20px;
}

/* Mobile-first responsive design */
@media (max-width: 768px) {
    .tickets-page {
        padding: 10px;
    }

    /* Stack header vertically on mobile */
    .tickets-page .d-flex.justify-content-between.align-items-center {
        flex-direction: column;
        align-items: stretch !important;
        gap: 15px;
    }

    .tickets-page h2 {
        font-size: 1.5rem;
        text-align: center;
    }

    /* Touch-optimized buttons */
    .tickets-page .btn-group {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .tickets-page .btn {
        width: 100%;
        padding: 12px 16px;
        font-size: 1rem;
        min-height: 44px; /* iOS minimum touch target */
    }

    /* Mobile-friendly search and filters */
    .tickets-page .row.mb-4 {
        gap: 10px;
    }

    .tickets-page .row.mb-4 > [class*="col-"] {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
        padding-left: 0;
        padding-right: 0;
        margin-bottom: 10px;
    }

    .tickets-page .form-control,
    .tickets-page .form-select {
        font-size: 16px; /* Prevents zoom on iOS */
        min-height: 44px;
    }

    /* Hide table on mobile, show card layout */
    .tickets-page .table-responsive {
        display: none;
    }

    /* Mobile card layout for tickets */
    .tickets-page .mobile-ticket-list {
        display: block;
    }

    .mobile-ticket-card {
        background: white;
        border: 1px solid #dee2e6;
        border-radius: 8px;
        padding: 16px;
        margin-bottom: 12px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        transition: transform 0.2s, box-shadow 0.2s;
        position: relative;
        overflow: hidden;
    }

    .mobile-ticket-card:active {
        transform: scale(0.98);
    }

    .mobile-ticket-card.swipe-active {
        transform: translateX(var(--swipe-offset, 0));
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .mobile-ticket-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 12px;
    }

    .mobile-ticket-number {
        font-weight: 700;
        font-size: 1.1rem;
        color: #007bff;
    }

    .mobile-ticket-title {
        font-size: 1rem;
        font-weight: 600;
        margin-bottom: 8px;
        color: #212529;
    }

    .mobile-ticket-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 12px;
    }

    .mobile-ticket-meta .badge {
        font-size: 0.875rem;
        padding: 6px 12px;
    }

    .mobile-ticket-info {
        font-size: 0.875rem;
        color: #6c757d;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .mobile-ticket-actions {
        display: flex;
        gap: 8px;
        margin-top: 12px;
        border-top: 1px solid #dee2e6;
        padding-top: 12px;
    }

    .mobile-ticket-actions .btn {
        flex: 1;
        min-height: 44px;
        font-size: 0.9rem;
    }

    /* Swipe action buttons */
    .swipe-actions {
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        display: flex;
        transform: translateX(100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .mobile-ticket-card.swipe-active .swipe-actions {
        transform: translateX(0);
    }

    .swipe-action-btn {
        width: 80px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: white;
        border: none;
        cursor: pointer;
        font-size: 0.875rem;
        gap: 4px;
    }

    .swipe-action-btn i {
        font-size: 1.5rem;
    }

    .swipe-action-view {
        background-color: #007bff;
    }

    .swipe-action-edit {
        background-color: #6c757d;
    }

    /* Modal optimizations for mobile */
    .tickets-page .modal-dialog {
        margin: 0;
        max-width: 100%;
        height: 100%;
    }

    .tickets-page .modal-content {
        border-radius: 0;
        height: 100%;
    }

    .tickets-page .modal-body {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (min-width: 769px) {
    /* Hide mobile-only elements on desktop */
    .mobile-ticket-list {
        display: none;
    }
}

/* Ticket Details Mobile Optimization */
.ticket-details-page {
    padding: 20px;
}

@media (max-width: 768px) {
    .ticket-details-page {
        padding: 10px;
    }

    .ticket-details-page h2 {
        font-size: 1.3rem;
    }

    /* Stack columns vertically */
    .ticket-details-page .row > [class*="col-"] {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }

    /* Touch-optimized buttons */
    .ticket-details-page .btn {
        min-height: 44px;
        padding: 12px 16px;
    }

    .ticket-details-page .btn-group {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .ticket-details-page .btn-group .btn {
        width: 100%;
    }

    /* Card optimizations */
    .ticket-details-page .card {
        margin-bottom: 16px;
        border-radius: 8px;
    }

    .ticket-details-page .card-body {
        padding: 16px;
    }

    /* Timeline optimization */
    .timeline {
        padding-left: 20px;
    }

    .timeline::before {
        left: 10px;
    }

    .timeline-icon {
        left: -15px;
        width: 24px;
        height: 24px;
        font-size: 12px;
    }

    .timeline-content {
        padding-left: 10px;
    }

    /* Table responsiveness */
    .ticket-details-page table {
        font-size: 0.9rem;
    }

    .ticket-details-page table td,
    .ticket-details-page table th {
        padding: 8px 4px;
    }

    /* Quick actions as full-width buttons */
    .ticket-details-page .d-grid.gap-2 .btn {
        width: 100%;
        justify-content: center;
    }

    /* Textarea optimization */
    .ticket-details-page textarea {
        font-size: 16px; /* Prevents zoom on iOS */
    }

    /* Notes section */
    .ticket-details-page .list-group-item {
        padding: 12px;
    }
}

/* Pull-to-refresh indicator */
.pull-to-refresh {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%) translateY(-100%);
    background: rgba(0, 123, 255, 0.9);
    color: white;
    padding: 12px 24px;
    border-radius: 0 0 8px 8px;
    font-size: 0.875rem;
    z-index: 1000;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.pull-to-refresh.active {
    transform: translateX(-50%) translateY(0);
}

/* Loading states for mobile */
.mobile-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 20px;
    flex-direction: column;
    gap: 12px;
}

/* Offline indicator */
.offline-indicator {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: #dc3545;
    color: white;
    padding: 12px 24px;
    border-radius: 24px;
    font-size: 0.875rem;
    z-index: 1050;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    animation: slideUp 0.3s ease-out;
}

.offline-indicator.online {
    background: #28a745;
}

@keyframes slideUp {
    from {
        transform: translateX(-50%) translateY(100px);
        opacity: 0;
    }
    to {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }
}

/* Touch feedback */
@media (hover: none) and (pointer: coarse) {
    .btn:active,
    .mobile-ticket-card:active,
    a:active {
        opacity: 0.7;
    }
}

/* Accessibility improvements for touch */
@media (max-width: 768px) {
    /* Ensure all interactive elements are at least 44x44px */
    button, a, input[type="button"], input[type="submit"] {
        min-height: 44px;
        min-width: 44px;
    }

    /* Improve contrast for badges on mobile */
    .badge {
        font-weight: 600;
        padding: 6px 12px;
    }
}

/* Dashboard mobile optimization */
@media (max-width: 768px) {
    .support-stats {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .stat-card {
        padding: 12px;
    }

    .stat-number {
        font-size: 1.5rem;
    }
}

@media (max-width: 480px) {
    .support-stats {
        grid-template-columns: 1fr;
    }
}

/* Mobile-Responsive Optimizations for Tasks and Time Entry Pages */

/* Common Mobile Styles */
.mobile-tasks-page,
.mobile-timeentry-page {
    padding: 16px;
    max-width: 100%;
    overflow-x: hidden;
    background-color: #f5f5f5;
}

/* Mobile Header */
.mobile-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 12px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.mobile-header h1 {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0;
    color: #333;
    display: flex;
    align-items: center;
    gap: 8px;
}

.mobile-header i {
    font-size: 1.3rem;
}

.mobile-actions {
    display: flex;
    gap: 8px;
}

/* Touch-Optimized Buttons */
.mobile-btn {
    min-height: 44px;
    min-width: 44px;
    padding: 10px 16px;
    font-size: 1rem;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: transform 0.1s, box-shadow 0.1s;
}

.mobile-btn:active {
    transform: scale(0.95);
}

/* Loading State */
.mobile-loading {
    text-align: center;
    padding: 60px 20px;
}

.mobile-loading p {
    margin-top: 16px;
    color: #6c757d;
    font-size: 1rem;
}

/* Mobile Stats Cards */
.mobile-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.stat-card {
    background: white;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: transform 0.2s, box-shadow 0.2s;
}

.stat-card:active {
    transform: scale(0.97);
}

.stat-card i {
    font-size: 2rem;
}

.stat-content {
    display: flex;
    flex-direction: column;
}

.stat-label {
    font-size: 0.75rem;
    color: #6c757d;
    text-transform: uppercase;
    font-weight: 600;
}

.stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #333;
}

/* Stat Card Color Variants */
.stat-total i { color: #007bff; }
.stat-active i { color: #28a745; }
.stat-pending i { color: #ffc107; }
.stat-completed i { color: #17a2b8; }

/* Mobile Filters */
.mobile-filters {
    background: white;
    padding: 16px;
    border-radius: 12px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.filter-row {
    display: flex;
    gap: 8px;
}

.filter-row .mobile-input {
    flex: 1;
}

.filter-row .mobile-btn {
    flex-shrink: 0;
}

.mobile-input {
    font-size: 16px; /* Prevents zoom on iOS */
    min-height: 44px;
    border-radius: 8px;
    border: 1px solid #dee2e6;
    padding: 10px 12px;
}

.mobile-input:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,0.25);
}

/* Mobile Task/Entry Lists */
.mobile-task-list,
.mobile-timeentry-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

/* Mobile Cards */
.mobile-task-card,
.mobile-timeentry-card {
    background: white;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    position: relative;
    overflow: hidden;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    touch-action: pan-y;
}

.mobile-task-card:active,
.mobile-timeentry-card:active {
    transform: scale(0.98);
}

.mobile-task-card.swipe-active,
.mobile-timeentry-card.swipe-active {
    transform: translateX(var(--swipe-offset, 0));
}

/* Card Header */
.task-card-header,
.entry-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.task-id,
.entry-id {
    font-size: 0.875rem;
    font-weight: 600;
    color: #6c757d;
}

/* Card Title */
.task-title,
.entry-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 12px;
    line-height: 1.4;
}

/* Card Meta Information */
.task-meta,
.entry-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 8px;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.875rem;
    color: #6c757d;
}

.meta-item i {
    font-size: 1rem;
}

/* Entry Project */
.entry-project {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.875rem;
    color: #007bff;
    margin-top: 8px;
    padding: 8px;
    background: #f0f8ff;
    border-radius: 6px;
}

/* Swipe Actions */
.swipe-actions {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-task-card.swipe-active .swipe-actions,
.mobile-timeentry-card.swipe-active .swipe-actions {
    transform: translateX(0);
}

.action-btn {
    width: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: none;
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
    min-height: 44px;
}

.action-btn i {
    font-size: 1.25rem;
}

.action-view {
    background: #007bff;
}

.action-view:active {
    background: #0056b3;
}

.action-edit {
    background: #28a745;
}

.action-edit:active {
    background: #1e7e34;
}

/* Empty State */
.mobile-empty-state {
    text-align: center;
    padding: 60px 20px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.mobile-empty-state i {
    font-size: 4rem;
    color: #dee2e6;
    margin-bottom: 16px;
}

.mobile-empty-state p {
    font-size: 1rem;
    color: #6c757d;
}

/* Pull to Refresh Indicator */
.pull-to-refresh-indicator {
    position: fixed;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
    background: white;
    padding: 12px 24px;
    border-radius: 24px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #007bff;
    z-index: 1000;
    transition: top 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.pull-to-refresh-indicator.active {
    top: 20px;
}

.pull-to-refresh-indicator i {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Touch Feedback */
.mobile-task-card,
.mobile-timeentry-card,
.mobile-btn,
.stat-card {
    -webkit-tap-highlight-color: rgba(0,0,0,0.1);
}

/* Responsive Breakpoints */
@media (max-width: 375px) {
    .mobile-stats {
        grid-template-columns: 1fr;
    }
    
    .mobile-header {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    
    .mobile-header h1 {
        text-align: center;
        justify-content: center;
    }
    
    .mobile-actions {
        justify-content: center;
    }
}

@media (min-width: 768px) {
    /* Hide mobile pages on tablet/desktop */
    .mobile-tasks-page,
    .mobile-timeentry-page {
        display: none;
    }
}

/* Prevent zoom on double-tap */
* {
    touch-action: manipulation;
}

/* Accessibility */
.mobile-task-card:focus,
.mobile-timeentry-card:focus,
.mobile-btn:focus,
.action-btn:focus {
    outline: 2px solid #007bff;
    outline-offset: 2px;
}

/* Safe area for notched devices */
@supports (padding: max(0px)) {
    .mobile-tasks-page,
    .mobile-timeentry-page {
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
        padding-bottom: max(16px, env(safe-area-inset-bottom));
    }
}

/* Smooth scrolling */
.mobile-task-list,
.mobile-timeentry-list {
    -webkit-overflow-scrolling: touch;
}

/* Badge Styling */
.badge {
    padding: 4px 10px;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 12px;
}

/* 
 * Mobile-Responsive Organizations List for ERPAthos CRM
 * 
 * This CSS provides a mobile-friendly card layout for the Organizations list
 * on small and medium screens while preserving the desktop table view on larger screens.
 * 
 * Breakpoints:
 * - Mobile & Tablet: < 1024px (card layout)
 * - Desktop: >= 1024px (table layout)
 */

/* ==========================================
   DEFAULT STYLES - Prevent FOUC
   ========================================== */
.organizations-page .mobile-organizations-list {
    display: none;
}

.organizations-page .organization-search-button {
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}
.organizations-page .crm-organization-action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 44px;
    white-space: nowrap;
}

.organizations-page .crm-organization-action-icon .oi {
    display: inline-block;
    width: 1rem;
    text-align: center;
    font-size: 0.95rem;
    line-height: 1;
}

/* ==========================================
   MOBILE: < 768px - Card Layout
   ========================================== */
@media (max-width: 767px) {
    /* Hide main organizations list table on mobile (not address/detail tables inside modals) */
    .organizations-page .org-main-table {
        display: none !important;
    }

    /* Show mobile card list */
    .organizations-page .mobile-organizations-list {
        display: block;
    }

    /* Organization card styling */
    .mobile-organization-card {
        background: white;
        border: 1px solid #dee2e6;
        border-radius: 8px;
        padding: 16px;
        margin-bottom: 12px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        transition: transform 0.2s, box-shadow 0.2s;
        position: relative;
        overflow: hidden;
    }

    .mobile-organization-card:active {
        transform: scale(0.98);
        box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    }

    /* Card header with name and type badges */
    .mobile-org-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 12px;
        gap: 8px;
    }

    .mobile-org-name {
        font-weight: 700;
        font-size: 1.1rem;
        color: #212529;
        flex: 1;
        word-break: break-word;
    }

    .mobile-org-code {
        font-size: 0.875rem;
        color: #6c757d;
        margin-top: 2px;
    }

    .mobile-org-types {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        align-items: flex-start;
    }

    /* Organization meta information */
    .mobile-org-meta {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-bottom: 12px;
    }

    .mobile-org-info-row {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 0.875rem;
        color: #495057;
    }

    .mobile-org-info-row i {
        width: 16px;
        text-align: center;
        color: #6c757d;
    }

    .mobile-org-info-label {
        font-weight: 600;
        min-width: 70px;
        color: #6c757d;
    }

    .mobile-org-info-value {
        flex: 1;
        word-break: break-word;
    }

    /* Status badge */
    .mobile-org-status {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-top: 8px;
        padding-top: 8px;
        border-top: 1px solid #e9ecef;
    }

    .mobile-org-status .badge {
        font-size: 0.8rem;
        padding: 6px 12px;
    }

    /* Card actions at the bottom */
    .mobile-org-actions {
        display: flex;
        gap: 8px;
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid #dee2e6;
    }

    .mobile-org-actions .btn {
        flex: 1;
        min-height: 44px;
        font-size: 0.9rem;
        padding: 8px 12px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
    }

    .mobile-org-actions .btn i {
        font-size: 1.1rem;
    }

    .mobile-org-actions .btn-text {
        font-size: 0.75rem;
        line-height: 1;
    }

    /* Touch-optimized filters and search */
    .organizations-page .row.mb-3 > [class*="col-"] {
        margin-bottom: 10px;
    }

    .organizations-page .form-control,
    .organizations-page .form-select {
        font-size: 16px; /* Prevents zoom on iOS */
        min-height: 44px;
    }

    .organizations-page .btn {
        min-height: 44px;
        padding: 12px 16px;
    }

    .organizations-page .organization-search-button {
        padding: 0 12px;
    }

    /* Page title optimization */
    .organizations-page h3 {
        font-size: 1.5rem;
        text-align: center;
        margin-bottom: 20px;
    }

    /* Pagination optimization */
    .organizations-page .d-flex.align-items-center.justify-content-center {
        flex-direction: column;
        gap: 10px;
    }

    .organizations-page .d-flex.align-items-center.justify-content-center .btn {
        width: 100%;
        max-width: 200px;
    }

    /* Alert optimizations */
    .organizations-page .alert {
        font-size: 0.9rem;
        padding: 12px;
    }
}

/* ==========================================
   TABLET: 768px - 1023px
   ========================================== */
@media (min-width: 768px) and (max-width: 1023px) {
    /* On tablet, still use cards but with slightly different layout */
    .organizations-page .org-main-table {
        display: none !important;
    }

    .organizations-page .mobile-organizations-list {
        display: block;
    }

    .mobile-organization-card {
        background: white;
        border: 1px solid #dee2e6;
        border-radius: 8px;
        padding: 20px;
        margin-bottom: 16px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .mobile-org-actions .btn {
        flex-direction: row;
        gap: 6px;
    }

    .mobile-org-actions .btn i {
        font-size: 1rem;
    }
}

/* ==========================================
   DESKTOP: >= 1024px - Table Layout
   ========================================== */
@media (min-width: 1024px) {
    /* Show table on desktop */
    .organizations-page .org-main-table {
        display: block !important;
    }

    /* Hide mobile card layout on desktop */
    .organizations-page .mobile-organizations-list {
        display: none !important;
    }
}

/* ==========================================
   EXTRA SMALL MOBILE: < 480px
   ========================================== */
@media (max-width: 479px) {
    .mobile-organization-card {
        padding: 12px;
        margin-bottom: 10px;
    }

    .mobile-org-name {
        font-size: 1rem;
    }

    .mobile-org-info-row {
        font-size: 0.8rem;
    }

    .mobile-org-actions {
        flex-wrap: wrap;
    }

    .mobile-org-actions .btn {
        flex: 1 1 calc(50% - 4px);
        min-width: 0;
    }
}

/* ==========================================
   DARK MODE SUPPORT
   ========================================== */
@media (prefers-color-scheme: dark) {
    @media (max-width: 767px) {
        .mobile-organization-card {
            background: #2b2b2b;
            border-color: #404040;
            color: #e0e0e0;
        }

        .mobile-org-name {
            color: #e0e0e0;
        }

        .mobile-org-code,
        .mobile-org-info-label {
            color: #a0a0a0;
        }

        .mobile-org-info-value {
            color: #d0d0d0;
        }

        .mobile-org-status {
            border-top-color: #404040;
        }

        .mobile-org-actions {
            border-top-color: #404040;
        }
    }
}

/* ==========================================
   TOUCH FEEDBACK
   ========================================== */
@media (hover: none) and (pointer: coarse) {
    .mobile-organization-card:active,
    .mobile-org-actions .btn:active {
        opacity: 0.7;
    }
}

/* ==========================================
   ACCESSIBILITY
   ========================================== */
@media (max-width: 767px) {
    /* Ensure all interactive elements meet minimum touch target size */
    .mobile-org-actions button,
    .mobile-org-actions a {
        min-height: 44px;
        min-width: 44px;
    }

    /* Improve contrast for badges */
    .badge {
        font-weight: 600;
    }
}

/* ==========================================
   LOADING STATES
   ========================================== */
.mobile-organizations-list .spinner-border {
    margin: 40px auto;
    display: block;
}

/* Empty state */
.mobile-organizations-list .alert-info {
    text-align: center;
    padding: 24px;
    margin: 20px 0;
}

.organizations-page .crm-organization-action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    text-decoration: none;
}

.organizations-page .crm-organization-action-icon .oi {
    font-size: 0.95rem;
    line-height: 1;
}
/* Ensure action icons stay visible in grid action columns */
.contacts-page .crm-contact-action-button i,
.organizations-page .crm-organization-action-icon i,
.organizations-page .crm-organization-action-button i {
    display: inline-block !important;
    width: 1rem;
    text-align: center;
    line-height: 1;
    font-size: 0.95rem;
}
/* 
 * Mobile-Responsive Contacts List for ERPAthos CRM
 * 
 * This CSS provides a mobile-friendly card layout for the Contacts list
 * on small and medium screens while preserving the desktop table view on larger screens.
 * 
 * Breakpoints:
 * - Mobile & Tablet: < 1024px (card layout)
 * - Desktop: >= 1024px (table layout)
 */

/* ==========================================
   DEFAULT STYLES - Prevent FOUC
   ========================================== */
.contacts-page .mobile-contacts-list {
    display: none;
}

.contacts-page .organization-search-button {
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.contacts-page .crm-contact-action-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 44px;
    white-space: nowrap;
}

.contacts-page .crm-contact-action-button span {
    line-height: 1;
}

.contacts-page .crm-contact-action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    text-decoration: none;
}

/* ==========================================
   MOBILE: < 768px - Card Layout
   ========================================== */
@media (max-width: 767px) {
    /* Hide table on mobile */
    .contacts-page .table-responsive {
        display: none !important;
    }

    /* Show mobile card list */
    .contacts-page .mobile-contacts-list {
        display: block;
    }

    /* Contact card styling */
    .contacts-page .mobile-contact-card {
        background: white;
        border: 1px solid #dee2e6;
        border-radius: 8px;
        padding: 16px;
        margin-bottom: 12px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        transition: transform 0.2s, box-shadow 0.2s;
        position: relative;
        overflow: hidden;
        cursor: pointer;
    }

    .contacts-page .mobile-contact-card:active {
        transform: scale(0.98);
        box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    }

    /* Card header with name and status badges */
    .contacts-page .mobile-contact-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 12px;
        gap: 8px;
    }

    .contacts-page .mobile-contact-name {
        font-weight: 700;
        font-size: 1.1rem;
        color: #212529;
        flex: 1;
        word-break: break-word;
    }

    .contacts-page .mobile-contact-title {
        font-size: 0.875rem;
        color: #6c757d;
        margin-top: 2px;
    }

    .contacts-page .mobile-contact-badges {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        align-items: flex-start;
    }

    /* Contact meta information */
    .contacts-page .mobile-contact-meta {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-bottom: 12px;
    }

    .contacts-page .mobile-contact-info-row {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 0.875rem;
        color: #495057;
    }

    .contacts-page .mobile-contact-info-row i {
        width: 16px;
        text-align: center;
        color: #6c757d;
    }

    .contacts-page .mobile-contact-info-label {
        font-weight: 600;
        min-width: 80px;
        color: #6c757d;
    }

    .contacts-page .mobile-contact-info-value {
        flex: 1;
        word-break: break-word;
    }

    /* Job information */
    .contacts-page .mobile-contact-job {
        display: flex;
        flex-direction: column;
        gap: 4px;
        margin-bottom: 12px;
        padding: 8px;
        background: #f8f9fa;
        border-radius: 4px;
    }

    .contacts-page .mobile-contact-job-title {
        font-weight: 600;
        color: #495057;
        font-size: 0.875rem;
    }

    .contacts-page .mobile-contact-department {
        font-size: 0.8rem;
        color: #6c757d;
    }

    /* Quick actions - call and mail buttons */
    .contacts-page .mobile-contact-quick-actions,
    .contacts-page .mobile-contact-actions {
        display: flex;
        gap: 8px;
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid #dee2e6;
    }

    .contacts-page .mobile-contact-quick-actions {
        position: relative;
        z-index: 1;
    }

    .contacts-page .mobile-contact-quick-actions .btn,
    .contacts-page .mobile-contact-actions .btn {
        flex: 1;
        min-height: 44px;
        font-size: 0.9rem;
        padding: 8px 12px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
    }

    .contacts-page .mobile-contact-quick-actions .btn i,
    .contacts-page .mobile-contact-actions .btn i {
        font-size: 1.1rem;
    }

    .contacts-page .mobile-contact-quick-actions .btn-text,
    .contacts-page .mobile-contact-actions .btn-text {
        font-size: 0.75rem;
        line-height: 1;
    }

    /* Touch-optimized filters and search */
    .contacts-page .row.mb-3 > [class*="col-"] {
        margin-bottom: 10px;
    }

    .contacts-page .form-control,
    .contacts-page .form-select {
        font-size: 16px; /* Prevents zoom on iOS */
        min-height: 44px;
    }

    .contacts-page .btn {
        min-height: 44px;
        padding: 12px 16px;
    }

    /* Page title optimization */
    .contacts-page h3 {
        font-size: 1.5rem;
        text-align: center;
        margin-bottom: 20px;
    }

    /* Alert optimizations */
    .contacts-page .alert {
        font-size: 0.9rem;
        padding: 12px;
    }
}

/* ==========================================
   TABLET: 768px - 1023px
   ========================================== */
@media (min-width: 768px) and (max-width: 1023px) {
    /* On tablet, still use cards but with slightly different layout */
    .contacts-page .table-responsive {
        display: none !important;
    }

    .contacts-page .mobile-contacts-list {
        display: block;
    }

    .contacts-page .mobile-contact-card {
        background: white;
        border: 1px solid #dee2e6;
        border-radius: 8px;
        padding: 20px;
        margin-bottom: 16px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        cursor: pointer;
    }

    .contacts-page .mobile-contact-quick-actions .btn,
    .contacts-page .mobile-contact-actions .btn {
        flex-direction: row;
        gap: 6px;
    }

    .contacts-page .mobile-contact-quick-actions .btn i,
    .contacts-page .mobile-contact-actions .btn i {
        font-size: 1rem;
    }
}

/* ==========================================
   DESKTOP: >= 1024px - Table Layout
   ========================================== */
@media (min-width: 1024px) {
    /* Show table on desktop */
    .contacts-page .table-responsive {
        display: block !important;
    }

    /* Hide mobile card layout on desktop */
    .contacts-page .mobile-contacts-list {
        display: none !important;
    }

    .contacts-page .erp-grid-actions {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
}

/* ==========================================
   EXTRA SMALL MOBILE: < 480px
   ========================================== */
@media (max-width: 479px) {
    .contacts-page .mobile-contact-card {
        padding: 12px;
        margin-bottom: 10px;
    }

    .contacts-page .mobile-contact-name {
        font-size: 1rem;
    }

    .contacts-page .mobile-contact-quick-actions .btn,
    .contacts-page .mobile-contact-actions .btn {
        font-size: 0.8rem;
        padding: 6px 8px;
    }

    .contacts-page .mobile-contact-quick-actions .btn i,
    .contacts-page .mobile-contact-actions .btn i {
        font-size: 1rem;
    }
}

/* ==========================================
   DARK MODE SUPPORT
   ========================================== */
html.dark-mode .contacts-page .mobile-contact-card {
    background: #2d3748;
    border-color: #4a5568;
    color: #e2e8f0;
}

html.dark-mode .contacts-page .mobile-contact-name {
    color: #f7fafc;
}

html.dark-mode .contacts-page .mobile-contact-title,
html.dark-mode .contacts-page .mobile-contact-info-label,
html.dark-mode .contacts-page .mobile-contact-department {
    color: #a0aec0;
}

html.dark-mode .contacts-page .mobile-contact-info-value {
    color: #cbd5e0;
}

html.dark-mode .contacts-page .mobile-contact-job {
    background: #1a202c;
}

html.dark-mode .contacts-page .mobile-contact-job-title {
    color: #cbd5e0;
}


/* Ensure action icons stay visible in grid action columns */
.contacts-page .crm-contact-action-button i,
.contacts-page .crm-contact-action-icon i,
.organizations-page .crm-organization-action-icon i,
.organizations-page .crm-organization-action-button i {
    display: inline-block !important;
    width: 1rem;
    text-align: center;
    line-height: 1;
    font-size: 0.95rem;
}
/* 
 * Mobile-Responsive CRM Quotes List for ERPAthos CRM
 * 
 * This CSS provides a mobile-friendly card layout for the CRM Quotes list
 * on small and medium screens while preserving the desktop table view on larger screens.
 * 
 * Breakpoints:
 * - Mobile: < 768px (card layout)
 * - Tablet: 768px - 1023px (card layout)
 * - Desktop: >= 1024px (table layout)
 */

/* ==========================================
   DEFAULT STYLES - Prevent FOUC
   ========================================== */
.crm-quotes-page .mobile-quotes-list {
    display: none;
}

/* ==========================================
   MOBILE: < 768px - Card Layout
   ========================================== */
@media (max-width: 767px) {
    /* Hide table on mobile */
    .crm-quotes-page .table-responsive {
        display: none !important;
    }

    /* Show mobile card list */
    .crm-quotes-page .mobile-quotes-list {
        display: block;
    }

    /* Quote card styling */
    .mobile-quote-card {
        background: white;
        border: 1px solid #dee2e6;
        border-radius: 8px;
        padding: 16px;
        margin-bottom: 12px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        transition: transform 0.2s, box-shadow 0.2s;
        position: relative;
        overflow: hidden;
        cursor: pointer;
    }

    .mobile-quote-card:active {
        transform: scale(0.98);
        box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    }

    /* Card header with quote number and status */
    .mobile-quote-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 12px;
        gap: 8px;
    }

    .mobile-quote-number {
        font-weight: 700;
        font-size: 1.1rem;
        color: #212529;
        flex: 1;
    }

    .mobile-quote-ref {
        font-size: 0.875rem;
        color: #6c757d;
        margin-top: 2px;
    }

    /* Conversion badges container */
    .mobile-quote-badges {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        margin-top: 4px;
    }

    /* Status badge positioning */
    .mobile-quote-status {
        align-self: flex-start;
    }

    /* Quote meta information */
    .mobile-quote-meta {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-bottom: 12px;
    }

    .mobile-quote-info-row {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 0.875rem;
        color: #495057;
    }

    .mobile-quote-info-row i {
        width: 16px;
        text-align: center;
        color: #6c757d;
    }

    .mobile-quote-info-label {
        font-weight: 600;
        min-width: 100px;
    }

    .mobile-quote-info-value {
        flex: 1;
    }

    /* Amount display box */
    .mobile-quote-amounts {
        background: #f8f9fa;
        border-radius: 6px;
        padding: 12px;
        margin-bottom: 12px;
    }

    .mobile-quote-amount-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 4px 0;
        font-size: 0.875rem;
    }

    .mobile-quote-amount-row.total {
        border-top: 2px solid #dee2e6;
        margin-top: 8px;
        padding-top: 8px;
    }

    .mobile-quote-amount-label {
        color: #6c757d;
        font-weight: 500;
    }

    .mobile-quote-amount-value {
        font-weight: 600;
        color: #212529;
    }

    .mobile-quote-amount-row.total .mobile-quote-amount-label {
        font-weight: 700;
        color: #212529;
    }

    .mobile-quote-amount-row.total .mobile-quote-amount-value {
        font-weight: 700;
        font-size: 1.1rem;
        color: #6610f2;
    }

    /* Expiry warning */
    .mobile-quote-expiry-warning {
        color: #dc3545;
        font-weight: 600;
    }

    /* Card actions */
    .mobile-quote-actions {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        margin-top: 12px;
    }

    .mobile-quote-actions .btn {
        font-size: 0.875rem;
        padding: 10px 12px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        border-radius: 6px;
        font-weight: 500;
    }

    .mobile-quote-actions .btn i {
        font-size: 1rem;
    }

    /* Ensure badges don't wrap awkwardly */
    .badge {
        white-space: nowrap;
        padding: 6px 10px;
        font-size: 0.75rem;
        font-weight: 600;
    }
}

/* ==========================================
   TABLET: 768px - 1023px
   ========================================== */
@media (min-width: 768px) and (max-width: 1023px) {
    /* Hide table on tablet */
    .crm-quotes-page .table-responsive {
        display: none !important;
    }

    /* Show mobile card list */
    .crm-quotes-page .mobile-quotes-list {
        display: block;
    }

    /* Tablet: 3 column layout for action buttons */
    .mobile-quote-actions {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    /* Slightly larger cards on tablet */
    .mobile-quote-card {
        padding: 20px;
    }
}

/* ==========================================
   DESKTOP: >= 1024px - Show Table
   ========================================== */
@media (min-width: 1024px) {
    /* Show table on desktop */
    .crm-quotes-page .table-responsive {
        display: block !important;
    }

    /* Hide mobile cards on desktop */
    .crm-quotes-page .mobile-quotes-list {
        display: none !important;
    }
}

/* ==========================================
   EXTRA SMALL MOBILE: < 480px
   ========================================== */
@media (max-width: 479px) {
    .mobile-quote-card {
        padding: 12px;
        margin-bottom: 10px;
    }

    .mobile-quote-number {
        font-size: 1rem;
    }

    .mobile-quote-info-label {
        min-width: 80px;
        font-size: 0.8rem;
    }

    .mobile-quote-amount-row {
        font-size: 0.8rem;
    }

    .mobile-quote-amount-row.total .mobile-quote-amount-value {
        font-size: 1rem;
    }
}

/* ==========================================
   DARK MODE SUPPORT
   ========================================== */
@media (prefers-color-scheme: dark) {
    html.dark-mode .mobile-quote-card {
        background: #2d3748;
        border-color: #4a5568;
        box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    }

    html.dark-mode .mobile-quote-number {
        color: #f7fafc;
    }

    html.dark-mode .mobile-quote-ref {
        color: #a0aec0;
    }

    html.dark-mode .mobile-quote-info-row {
        color: #e2e8f0;
    }

    html.dark-mode .mobile-quote-info-row i {
        color: #a0aec0;
    }

    html.dark-mode .mobile-quote-amounts {
        background: #1a202c;
    }

    html.dark-mode .mobile-quote-amount-label {
        color: #a0aec0;
    }

    html.dark-mode .mobile-quote-amount-value {
        color: #e2e8f0;
    }

    html.dark-mode .mobile-quote-amount-row.total .mobile-quote-amount-label,
    html.dark-mode .mobile-quote-amount-row.total .mobile-quote-amount-value {
        color: #f7fafc;
    }

    html.dark-mode .mobile-quote-amount-row.total .mobile-quote-amount-value {
        color: #9f7aea;
    }

    html.dark-mode .mobile-quote-expiry-warning {
        color: #fc8181;
    }
}

/* ==========================================
   ACCESSIBILITY & TOUCH OPTIMIZATIONS
   ========================================== */
@media (max-width: 1023px) {
    /* Ensure touch targets are at least 44px */
    .mobile-quote-actions button,
    .mobile-quote-actions a {
        min-height: 44px;
        min-width: 44px;
    }

    /* Prevent zoom on iOS */
    input[type="text"],
    input[type="date"],
    input[type="number"],
    select {
        font-size: 16px !important;
    }

    /* Better focus indicators for keyboard navigation */
    .mobile-quote-card:focus-within {
        outline: 2px solid #0d6efd;
        outline-offset: 2px;
    }

    /* Smooth scrolling */
    .mobile-quotes-list {
        scroll-behavior: smooth;
    }
}

/* 
 * Mobile-Responsive Sales Quotes List for ERPAthos Sales
 * 
 * This CSS provides a mobile-friendly card layout for the Sales Quotes list
 * on small and medium screens while preserving the desktop table view on larger screens.
 * 
 * Breakpoints:
 * - Mobile & Tablet: < 1024px (card layout)
 * - Desktop: >= 1024px (table layout)
 */

/* ==========================================
   DEFAULT STYLES - Prevent FOUC
   ========================================== */
.sales-quotes-page .mobile-quotes-list {
    display: none;
}

/* ==========================================
   MOBILE: < 768px - Card Layout
   ========================================== */
@media (max-width: 767px) {
    /* Hide table on mobile */
    .sales-quotes-page .table-responsive {
        display: none !important;
    }

    /* Show mobile card list */
    .sales-quotes-page .mobile-quotes-list {
        display: block;
    }

    /* Quote card styling */
    .mobile-quote-card {
        background: white;
        border: 1px solid #dee2e6;
        border-radius: 8px;
        padding: 16px;
        margin-bottom: 12px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        transition: transform 0.2s, box-shadow 0.2s;
        position: relative;
        overflow: hidden;
        cursor: pointer;
    }

    .mobile-quote-card:active {
        transform: scale(0.98);
        box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    }

    /* Card header with quote number and status */
    .mobile-quote-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 12px;
        gap: 8px;
    }

    .mobile-quote-number {
        font-weight: 700;
        font-size: 1.1rem;
        color: #212529;
        flex: 1;
    }

    .mobile-quote-ref {
        font-size: 0.875rem;
        color: #6c757d;
        margin-top: 2px;
    }

    /* Quote meta information */
    .mobile-quote-meta {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-bottom: 12px;
    }

    .mobile-quote-info-row {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 0.875rem;
        color: #495057;
    }

    .mobile-quote-info-row i {
        width: 16px;
        text-align: center;
        color: #6c757d;
    }

    .mobile-quote-info-label {
        font-weight: 600;
        min-width: 100px;
    }

    /* Amount display */
    .mobile-quote-amount {
        background: #f8f9fa;
        border-radius: 6px;
        padding: 12px;
        margin-bottom: 12px;
        text-align: center;
    }

    .mobile-quote-amount-label {
        font-size: 0.75rem;
        color: #6c757d;
        text-transform: uppercase;
        margin-bottom: 4px;
    }

    .mobile-quote-amount-value {
        font-size: 1.25rem;
        font-weight: 700;
        color: #6610f2;
    }

    /* Card actions */
    .mobile-quote-actions {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        margin-top: 12px;
    }

    .mobile-quote-actions .btn {
        font-size: 0.875rem;
        padding: 10px 12px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        border-radius: 6px;
        font-weight: 500;
    }

    .mobile-quote-actions .btn i {
        font-size: 1rem;
    }

    /* Status badge positioning */
    .mobile-quote-status {
        align-self: flex-start;
    }

    /* Ensure badges don't wrap awkwardly */
    .badge {
        white-space: nowrap;
        padding: 6px 10px;
        font-size: 0.75rem;
        font-weight: 600;
    }
}

/* ==========================================
   TABLET: 768px - 1023px
   ========================================== */
@media (min-width: 768px) and (max-width: 1023px) {
    /* Hide table on tablet */
    .sales-quotes-page .table-responsive {
        display: none !important;
    }

    /* Show mobile card list */
    .sales-quotes-page .mobile-quotes-list {
        display: block;
    }

    /* Tablet: 3 column layout for action buttons */
    .mobile-quote-actions {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    /* Slightly larger cards on tablet */
    .mobile-quote-card {
        padding: 20px;
    }
}

/* ==========================================
   DESKTOP: >= 1024px - Show Table
   ========================================== */
@media (min-width: 1024px) {
    /* Show table on desktop */
    .sales-quotes-page .table-responsive {
        display: block !important;
    }

    /* Hide mobile cards on desktop */
    .sales-quotes-page .mobile-quotes-list {
        display: none !important;
    }
}

/* ==========================================
   EXTRA SMALL MOBILE: < 480px
   ========================================== */
@media (max-width: 479px) {
    .mobile-quote-card {
        padding: 12px;
        margin-bottom: 10px;
    }

    .mobile-quote-number {
        font-size: 1rem;
    }

    .mobile-quote-amount-value {
        font-size: 1.1rem;
    }

    .mobile-quote-info-label {
        min-width: 80px;
        font-size: 0.8rem;
    }
}

/* ==========================================
   DARK MODE SUPPORT
   ========================================== */
@media (prefers-color-scheme: dark) {
    html.dark-mode .mobile-quote-card {
        background: #2d3748;
        border-color: #4a5568;
        box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    }

    html.dark-mode .mobile-quote-number {
        color: #f7fafc;
    }

    html.dark-mode .mobile-quote-ref {
        color: #a0aec0;
    }

    html.dark-mode .mobile-quote-info-row {
        color: #e2e8f0;
    }

    html.dark-mode .mobile-quote-info-row i {
        color: #a0aec0;
    }

    html.dark-mode .mobile-quote-amount {
        background: #1a202c;
    }

    html.dark-mode .mobile-quote-amount-label {
        color: #a0aec0;
    }

    html.dark-mode .mobile-quote-amount-value {
        color: #9f7aea;
    }
}

/* ==========================================
   ACCESSIBILITY & TOUCH OPTIMIZATIONS
   ========================================== */
@media (max-width: 1023px) {
    /* Ensure touch targets are at least 44px */
    .mobile-quote-actions button,
    .mobile-quote-actions a {
        min-height: 44px;
        min-width: 44px;
    }

    /* Prevent zoom on iOS */
    input[type="text"],
    input[type="date"],
    select {
        font-size: 16px !important;
    }

    /* Better focus indicators for keyboard navigation */
    .mobile-quote-card:focus-within {
        outline: 2px solid #0d6efd;
        outline-offset: 2px;
    }

    /* Smooth scrolling */
    .mobile-quotes-list {
        scroll-behavior: smooth;
    }
}

/* 
 * Mobile-Responsive Sales Orders List for ERPAthos Sales
 * 
 * This CSS provides a mobile-friendly card layout for the Sales Orders list
 * on small and medium screens while preserving the desktop table view on larger screens.
 * 
 * Breakpoints:
 * - Mobile & Tablet: < 1024px (card layout)
 * - Desktop: >= 1024px (table layout)
 */

/* ==========================================
   DEFAULT STYLES - Prevent FOUC
   ========================================== */
.sales-orders-page .mobile-orders-list {
    display: none;
}

/* ==========================================
   MOBILE: < 768px - Card Layout
   ========================================== */
@media (max-width: 767px) {
    /* Hide table on mobile */
    .sales-orders-page .table-responsive {
        display: none !important;
    }

    /* Show mobile card list */
    .sales-orders-page .mobile-orders-list {
        display: block;
    }

    /* Order card styling */
    .mobile-order-card {
        background: white;
        border: 1px solid #dee2e6;
        border-radius: 8px;
        padding: 16px;
        margin-bottom: 12px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        transition: transform 0.2s, box-shadow 0.2s;
        position: relative;
        overflow: hidden;
        cursor: pointer;
    }

    .mobile-order-card:active {
        transform: scale(0.98);
        box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    }

    /* Card header with order number and status */
    .mobile-order-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 12px;
        gap: 8px;
    }

    .mobile-order-number {
        font-weight: 700;
        font-size: 1.1rem;
        color: #212529;
        flex: 1;
    }

    .mobile-order-po {
        font-size: 0.875rem;
        color: #6c757d;
        margin-top: 2px;
    }

    /* Order meta information */
    .mobile-order-meta {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-bottom: 12px;
    }

    .mobile-order-info-row {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 0.875rem;
        color: #495057;
    }

    .mobile-order-info-row i {
        width: 16px;
        text-align: center;
        color: #6c757d;
    }

    .mobile-order-info-label {
        font-weight: 600;
        min-width: 100px;
    }

    /* Amount display */
    .mobile-order-amount {
        background: #f8f9fa;
        border-radius: 6px;
        padding: 12px;
        margin-bottom: 12px;
        text-align: center;
    }

    .mobile-order-amount-label {
        font-size: 0.75rem;
        color: #6c757d;
        text-transform: uppercase;
        margin-bottom: 4px;
    }

    .mobile-order-amount-value {
        font-size: 1.25rem;
        font-weight: 700;
        color: #0d6efd;
    }

    /* Card actions */
    .mobile-order-actions {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        margin-top: 12px;
    }

    .mobile-order-actions .btn {
        font-size: 0.875rem;
        padding: 10px 12px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        border-radius: 6px;
        font-weight: 500;
    }

    .mobile-order-actions .btn i {
        font-size: 1rem;
    }

    /* Status badge positioning */
    .mobile-order-status {
        align-self: flex-start;
    }

    /* Ensure badges don't wrap awkwardly */
    .badge {
        white-space: nowrap;
        padding: 6px 10px;
        font-size: 0.75rem;
        font-weight: 600;
    }
}

/* ==========================================
   TABLET: 768px - 1023px
   ========================================== */
@media (min-width: 768px) and (max-width: 1023px) {
    /* Hide table on tablet */
    .sales-orders-page .table-responsive {
        display: none !important;
    }

    /* Show mobile card list */
    .sales-orders-page .mobile-orders-list {
        display: block;
    }

    /* Tablet: 3 column layout for action buttons */
    .mobile-order-actions {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    /* Slightly larger cards on tablet */
    .mobile-order-card {
        padding: 20px;
    }
}

/* ==========================================
   DESKTOP: >= 1024px - Show Table
   ========================================== */
@media (min-width: 1024px) {
    /* Show table on desktop */
    .sales-orders-page .table-responsive {
        display: block !important;
    }

    /* Hide mobile cards on desktop */
    .sales-orders-page .mobile-orders-list {
        display: none !important;
    }
}

/* ==========================================
   EXTRA SMALL MOBILE: < 480px
   ========================================== */
@media (max-width: 479px) {
    .mobile-order-card {
        padding: 12px;
        margin-bottom: 10px;
    }

    .mobile-order-number {
        font-size: 1rem;
    }

    .mobile-order-amount-value {
        font-size: 1.1rem;
    }

    .mobile-order-info-label {
        min-width: 80px;
        font-size: 0.8rem;
    }
}

/* ==========================================
   DARK MODE SUPPORT
   ========================================== */
@media (prefers-color-scheme: dark) {
    html.dark-mode .mobile-order-card {
        background: #2d3748;
        border-color: #4a5568;
        box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    }

    html.dark-mode .mobile-order-number {
        color: #f7fafc;
    }

    html.dark-mode .mobile-order-po {
        color: #a0aec0;
    }

    html.dark-mode .mobile-order-info-row {
        color: #e2e8f0;
    }

    html.dark-mode .mobile-order-info-row i {
        color: #a0aec0;
    }

    html.dark-mode .mobile-order-amount {
        background: #1a202c;
    }

    html.dark-mode .mobile-order-amount-label {
        color: #a0aec0;
    }

    html.dark-mode .mobile-order-amount-value {
        color: #4299e1;
    }
}

/* ==========================================
   ACCESSIBILITY & TOUCH OPTIMIZATIONS
   ========================================== */
@media (max-width: 1023px) {
    /* Ensure touch targets are at least 44px */
    .mobile-order-actions button,
    .mobile-order-actions a {
        min-height: 44px;
        min-width: 44px;
    }

    /* Prevent zoom on iOS */
    input[type="text"],
    input[type="date"],
    select {
        font-size: 16px !important;
    }

    /* Better focus indicators for keyboard navigation */
    .mobile-order-card:focus-within {
        outline: 2px solid #0d6efd;
        outline-offset: 2px;
    }

    /* Smooth scrolling */
    .mobile-orders-list {
        scroll-behavior: smooth;
    }
}

/* 
 * Mobile-Responsive Sales Invoices List for ERPAthos Sales
 * 
 * This CSS provides a mobile-friendly card layout for the Sales Invoices list
 * on small and medium screens while preserving the desktop table view on larger screens.
 * 
 * Breakpoints:
 * - Mobile & Tablet: < 1024px (card layout)
 * - Desktop: >= 1024px (table layout)
 */

/* ==========================================
   DEFAULT STYLES - Prevent FOUC
   ========================================== */
.sales-invoices-page .mobile-invoices-list {
    display: none;
}

/* ==========================================
   MOBILE: < 768px - Card Layout
   ========================================== */
@media (max-width: 767px) {
    /* Hide table on mobile */
    .sales-invoices-page .table-responsive {
        display: none !important;
    }

    /* Show mobile card list */
    .sales-invoices-page .mobile-invoices-list {
        display: block;
    }

    /* Invoice card styling */
    .mobile-invoice-card {
        background: white;
        border: 1px solid #dee2e6;
        border-radius: 8px;
        padding: 16px;
        margin-bottom: 12px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        transition: transform 0.2s, box-shadow 0.2s;
        position: relative;
        overflow: hidden;
        cursor: pointer;
    }

    .mobile-invoice-card:active {
        transform: scale(0.98);
        box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    }

    /* Card header with invoice number and status */
    .mobile-invoice-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 12px;
        gap: 8px;
    }

    .mobile-invoice-number {
        font-weight: 700;
        font-size: 1.1rem;
        color: #212529;
        flex: 1;
    }

    .mobile-invoice-ref {
        font-size: 0.875rem;
        color: #6c757d;
        margin-top: 2px;
    }

    /* Invoice meta information */
    .mobile-invoice-meta {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-bottom: 12px;
    }

    .mobile-invoice-info-row {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 0.875rem;
        color: #495057;
    }

    .mobile-invoice-info-row i {
        width: 16px;
        text-align: center;
        color: #6c757d;
    }

    .mobile-invoice-info-label {
        font-weight: 600;
        min-width: 110px;
    }

    /* Amount display */
    .mobile-invoice-amount {
        background: #f8f9fa;
        border-radius: 6px;
        padding: 12px;
        margin-bottom: 12px;
        text-align: center;
    }

    .mobile-invoice-amount-label {
        font-size: 0.75rem;
        color: #6c757d;
        text-transform: uppercase;
        margin-bottom: 4px;
    }

    .mobile-invoice-amount-value {
        font-size: 1.25rem;
        font-weight: 700;
        color: #198754;
    }

    /* Card actions */
    .mobile-invoice-actions {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        margin-top: 12px;
    }

    .mobile-invoice-actions .btn {
        font-size: 0.875rem;
        padding: 10px 12px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        border-radius: 6px;
        font-weight: 500;
    }

    .mobile-invoice-actions .btn i {
        font-size: 1rem;
    }

    /* Status badge positioning */
    .mobile-invoice-status {
        align-self: flex-start;
    }

    /* Ensure badges don't wrap awkwardly */
    .badge {
        white-space: nowrap;
        padding: 6px 10px;
        font-size: 0.75rem;
        font-weight: 600;
    }
}

/* ==========================================
   TABLET: 768px - 1023px
   ========================================== */
@media (min-width: 768px) and (max-width: 1023px) {
    /* Hide table on tablet */
    .sales-invoices-page .table-responsive {
        display: none !important;
    }

    /* Show mobile card list */
    .sales-invoices-page .mobile-invoices-list {
        display: block;
    }

    /* Tablet: 2 column layout for action buttons */
    .mobile-invoice-actions {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Slightly larger cards on tablet */
    .mobile-invoice-card {
        padding: 20px;
    }
}

/* ==========================================
   DESKTOP: >= 1024px - Show Table
   ========================================== */
@media (min-width: 1024px) {
    /* Show table on desktop */
    .sales-invoices-page .table-responsive {
        display: block !important;
    }

    /* Hide mobile cards on desktop */
    .sales-invoices-page .mobile-invoices-list {
        display: none !important;
    }
}

/* ==========================================
   EXTRA SMALL MOBILE: < 480px
   ========================================== */
@media (max-width: 479px) {
    .mobile-invoice-card {
        padding: 12px;
        margin-bottom: 10px;
    }

    .mobile-invoice-number {
        font-size: 1rem;
    }

    .mobile-invoice-amount-value {
        font-size: 1.1rem;
    }

    .mobile-invoice-info-label {
        min-width: 90px;
        font-size: 0.8rem;
    }
}

/* ==========================================
   DARK MODE SUPPORT
   ========================================== */
@media (prefers-color-scheme: dark) {
    html.dark-mode .mobile-invoice-card {
        background: #2d3748;
        border-color: #4a5568;
        box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    }

    html.dark-mode .mobile-invoice-number {
        color: #f7fafc;
    }

    html.dark-mode .mobile-invoice-ref {
        color: #a0aec0;
    }

    html.dark-mode .mobile-invoice-info-row {
        color: #e2e8f0;
    }

    html.dark-mode .mobile-invoice-info-row i {
        color: #a0aec0;
    }

    html.dark-mode .mobile-invoice-amount {
        background: #1a202c;
    }

    html.dark-mode .mobile-invoice-amount-label {
        color: #a0aec0;
    }

    html.dark-mode .mobile-invoice-amount-value {
        color: #48bb78;
    }
}

/* ==========================================
   ACCESSIBILITY & TOUCH OPTIMIZATIONS
   ========================================== */
@media (max-width: 1023px) {
    /* Ensure touch targets are at least 44px */
    .mobile-invoice-actions button,
    .mobile-invoice-actions a {
        min-height: 44px;
        min-width: 44px;
    }

    /* Prevent zoom on iOS */
    input[type="text"],
    input[type="date"],
    select {
        font-size: 16px !important;
    }

    /* Better focus indicators for keyboard navigation */
    .mobile-invoice-card:focus-within {
        outline: 2px solid #0d6efd;
        outline-offset: 2px;
    }

    /* Smooth scrolling */
    .mobile-invoices-list {
        scroll-behavior: smooth;
    }
}

/* 
 * Mobile-Responsive Finance Customers List for ERPAthos
 * 
 * This CSS provides a mobile-friendly card layout for the Finance Customers list
 * on small and medium screens while preserving the desktop table view on larger screens.
 * 
 * Breakpoints:
 * - Mobile: < 768px (card layout)
 * - Tablet: 768px - 1023px (card layout, optimized)
 * - Desktop: >= 1024px (table layout - unchanged)
 */

/* ==========================================
   DEFAULT STYLES - Prevent FOUC
   ========================================== */
.finance-customers-page .mobile-customers-list {
    display: none;
}

/* ==========================================
   MOBILE: < 768px - Card Layout
   ========================================== */
@media (max-width: 767px) {
    /* Hide table on mobile */
    .finance-customers-page .table-responsive {
        display: none !important;
    }

    /* Show mobile card list */
    .finance-customers-page .mobile-customers-list {
        display: block;
    }

    /* Customer card styling */
    .mobile-customer-card {
        background: white;
        border: 1px solid #dee2e6;
        border-radius: 8px;
        padding: 16px;
        margin-bottom: 12px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        transition: transform 0.2s, box-shadow 0.2s;
        position: relative;
        overflow: hidden;
        cursor: pointer;
    }

    .mobile-customer-card:active {
        transform: scale(0.98);
        box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    }

    /* Card header with name and status */
    .mobile-customer-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 12px;
        gap: 8px;
    }

    .mobile-customer-name {
        font-weight: 700;
        font-size: 1.1rem;
        color: #212529;
        flex: 1;
        word-break: break-word;
    }

    .mobile-customer-code {
        font-size: 0.875rem;
        color: #6c757d;
        margin-top: 2px;
    }

    .mobile-customer-status {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        align-items: flex-start;
    }

    .mobile-customer-status .badge {
        font-size: 0.8rem;
        padding: 6px 12px;
    }

    /* Customer meta information */
    .mobile-customer-meta {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-bottom: 12px;
    }

    .mobile-customer-info-row {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 0.875rem;
        color: #495057;
    }

    .mobile-customer-info-row i {
        width: 16px;
        text-align: center;
        color: #6c757d;
    }

    .mobile-customer-info-label {
        font-weight: 600;
        min-width: 70px;
        color: #6c757d;
    }

    .mobile-customer-info-value {
        flex: 1;
        word-break: break-word;
    }

    /* Card actions at the bottom */
    .mobile-customer-actions {
        display: flex;
        gap: 8px;
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid #dee2e6;
    }

    .mobile-customer-actions .btn {
        flex: 1;
        min-height: 44px;
        font-size: 0.9rem;
        padding: 8px 12px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
    }

    .mobile-customer-actions .btn i {
        font-size: 1.1rem;
    }

    .mobile-customer-actions .btn-text {
        font-size: 0.75rem;
        line-height: 1;
    }

    /* Touch-optimized filters and search */
    .finance-customers-page .row > [class*="col-"] {
        margin-bottom: 10px;
    }

    .finance-customers-page .form-control,
    .finance-customers-page .form-select {
        font-size: 16px; /* Prevents zoom on iOS */
        min-height: 44px;
    }

    .finance-customers-page .btn {
        min-height: 44px;
        padding: 12px 16px;
    }

    /* Page title optimization */
    .finance-customers-page h1 {
        font-size: 1.5rem;
    }

    .finance-customers-page .text-muted {
        font-size: 0.875rem;
    }

    /* Pagination optimization */
    .finance-customers-page .d-flex.align-items-center.justify-content-center {
        flex-direction: column;
        gap: 10px;
    }

    .finance-customers-page .d-flex.align-items-center.justify-content-center .btn {
        width: 100%;
        max-width: 200px;
    }

    /* Alert optimizations */
    .finance-customers-page .alert {
        font-size: 0.9rem;
        padding: 12px;
    }

    /* Header row optimization */
    .finance-customers-page .row.mb-4 {
        margin-bottom: 1rem !important;
    }

    .finance-customers-page .row.mb-4 .col-auto {
        width: 100%;
        text-align: center;
        margin-top: 10px;
    }

    .finance-customers-page .row.mb-4 .col-auto .btn {
        width: 100%;
    }
}

/* ==========================================
   TABLET: 768px - 1023px
   ========================================== */
@media (min-width: 768px) and (max-width: 1023px) {
    /* On tablet, still use cards but with slightly different layout */
    .finance-customers-page .table-responsive {
        display: none !important;
    }

    .finance-customers-page .mobile-customers-list {
        display: block;
    }

    .mobile-customer-card {
        background: white;
        border: 1px solid #dee2e6;
        border-radius: 8px;
        padding: 20px;
        margin-bottom: 16px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        cursor: pointer;
    }

    .mobile-customer-actions .btn {
        flex-direction: row;
        gap: 6px;
    }

    .mobile-customer-actions .btn i {
        font-size: 1rem;
    }

    /* Better use of tablet screen space */
    .mobile-customer-meta {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
}

/* ==========================================
   DESKTOP: >= 1024px - Table Layout
   ========================================== */
@media (min-width: 1024px) {
    /* Show table on desktop */
    .finance-customers-page .table-responsive {
        display: block !important;
    }

    /* Hide mobile card layout on desktop */
    .finance-customers-page .mobile-customers-list {
        display: none !important;
    }
}

/* ==========================================
   EXTRA SMALL MOBILE: < 480px
   ========================================== */
@media (max-width: 479px) {
    .mobile-customer-card {
        padding: 12px;
        margin-bottom: 10px;
    }

    .mobile-customer-name {
        font-size: 1rem;
    }

    .mobile-customer-info-row {
        font-size: 0.8rem;
    }

    .mobile-customer-info-label {
        min-width: 70px;
    }

    .mobile-customer-actions {
        flex-wrap: wrap;
    }

    .mobile-customer-actions .btn {
        flex: 1 1 calc(50% - 4px);
        min-width: 0;
    }
}

/* ==========================================
   DARK MODE SUPPORT
   ========================================== */
@media (prefers-color-scheme: dark) {
    @media (max-width: 1023px) {
        .mobile-customer-card {
            background: #2b2b2b;
            border-color: #404040;
            color: #e0e0e0;
        }

        .mobile-customer-name {
            color: #e0e0e0;
        }

        .mobile-customer-code,
        .mobile-customer-info-label {
            color: #a0a0a0;
        }

        .mobile-customer-info-value {
            color: #d0d0d0;
        }

        .mobile-customer-actions {
            border-top-color: #404040;
        }
    }
}

/* ==========================================
   TOUCH FEEDBACK
   ========================================== */
@media (hover: none) and (pointer: coarse) {
    .mobile-customer-card:active,
    .mobile-customer-actions .btn:active {
        opacity: 0.7;
    }
}

/* ==========================================
   ACCESSIBILITY
   ========================================== */
@media (max-width: 767px) {
    /* Ensure all interactive elements meet minimum touch target size */
    .mobile-customer-actions button,
    .mobile-customer-actions a {
        min-height: 44px;
        min-width: 44px;
    }

    /* Improve contrast for badges */
    .badge {
        font-weight: 600;
    }
}

/* ==========================================
   LOADING STATES
   ========================================== */
.mobile-customers-list .spinner-border {
    margin: 40px auto;
    display: block;
}

/* Empty state */
.mobile-customers-list .alert-info,
.mobile-customers-list .text-center {
    text-align: center;
    padding: 24px;
    margin: 20px 0;
}

/* 
 * Mobile-Responsive Finance Bank Accounts List for ERPAthos
 * 
 * This CSS provides a mobile-friendly card layout for the Finance Bank Accounts list
 * on small and medium screens while preserving the desktop table view on larger screens.
 * 
 * Breakpoints:
 * - Mobile: < 768px (card layout)
 * - Tablet: 768px - 1023px (card layout, optimized)
 * - Desktop: >= 1024px (table layout - unchanged)
 */

/* ==========================================
   DEFAULT STYLES - Prevent FOUC
   ========================================== */
.finance-bankaccounts-page .mobile-bankaccounts-list {
    display: none;
}

/* ==========================================
   MOBILE: < 768px - Card Layout
   ========================================== */
@media (max-width: 767px) {
    /* Hide table on mobile */
    .finance-bankaccounts-page .table-responsive {
        display: none !important;
    }

    /* Show mobile card list */
    .finance-bankaccounts-page .mobile-bankaccounts-list {
        display: block;
    }

    /* Bank account card styling */
    .mobile-bankaccount-card {
        background: white;
        border: 1px solid #dee2e6;
        border-radius: 8px;
        padding: 16px;
        margin-bottom: 12px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        transition: transform 0.2s, box-shadow 0.2s;
        position: relative;
        overflow: hidden;
    }

    .mobile-bankaccount-card:active {
        transform: scale(0.98);
        box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    }

    /* Card header with name and status */
    .mobile-bankaccount-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 12px;
        gap: 8px;
    }

    .mobile-bankaccount-name {
        font-weight: 700;
        font-size: 1.1rem;
        color: #212529;
        flex: 1;
        word-break: break-word;
    }

    .mobile-bankaccount-badges {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        align-items: flex-start;
    }

    .mobile-bankaccount-badges .badge {
        font-size: 0.8rem;
        padding: 6px 12px;
    }

    /* IBAN display */
    .mobile-bankaccount-iban {
        background: #f8f9fa;
        border: 1px solid #dee2e6;
        border-radius: 4px;
        padding: 8px 12px;
        margin-bottom: 12px;
        font-family: 'Courier New', monospace;
        font-size: 0.9rem;
        color: #495057;
        word-break: break-all;
    }

    /* Bank account meta information */
    .mobile-bankaccount-meta {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-bottom: 12px;
    }

    .mobile-bankaccount-info-row {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 0.875rem;
        color: #495057;
    }

    .mobile-bankaccount-info-row i {
        width: 16px;
        text-align: center;
        color: #6c757d;
    }

    .mobile-bankaccount-info-label {
        font-weight: 600;
        min-width: 70px;
        color: #6c757d;
    }

    .mobile-bankaccount-info-value {
        flex: 1;
        word-break: break-word;
    }

    /* Card actions at the bottom */
    .mobile-bankaccount-actions {
        display: flex;
        gap: 8px;
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid #dee2e6;
    }

    .mobile-bankaccount-actions .btn {
        flex: 1;
        min-height: 44px;
        font-size: 0.85rem;
        padding: 8px 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
    }

    .mobile-bankaccount-actions .btn i {
        font-size: 1.1rem;
    }

    .mobile-bankaccount-actions .btn-text {
        font-size: 0.75rem;
        line-height: 1;
    }

    /* Touch-optimized filters and search */
    .finance-bankaccounts-page .row.g-3 > [class*="col-"] {
        margin-bottom: 10px;
    }

    .finance-bankaccounts-page .form-control,
    .finance-bankaccounts-page .form-select {
        font-size: 16px; /* Prevents zoom on iOS */
        min-height: 44px;
    }

    .finance-bankaccounts-page .btn {
        min-height: 44px;
        padding: 12px 16px;
    }

    /* Page title optimization */
    .finance-bankaccounts-page h1 {
        font-size: 1.5rem;
    }

    .finance-bankaccounts-page .text-muted {
        font-size: 0.875rem;
    }

    /* Pagination optimization */
    .finance-bankaccounts-page .card-footer .d-flex {
        flex-direction: column;
        gap: 10px;
    }

    .finance-bankaccounts-page .card-footer .btn {
        width: 100%;
        max-width: 200px;
    }

    /* Alert optimizations */
    .finance-bankaccounts-page .alert {
        font-size: 0.9rem;
        padding: 12px;
    }

    /* Header row optimization */
    .finance-bankaccounts-page .row.mb-4 {
        margin-bottom: 1rem !important;
    }

    .finance-bankaccounts-page .row.mb-4 .col-auto {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-top: 10px;
    }

    .finance-bankaccounts-page .row.mb-4 .col-auto .btn {
        width: 100%;
    }

    /* Summary cards optimization */
    .finance-bankaccounts-page .row.mb-4 .col-md-4 {
        margin-bottom: 12px;
    }

    .finance-bankaccounts-page .card.border-primary,
    .finance-bankaccounts-page .card.border-success,
    .finance-bankaccounts-page .card.border-secondary {
        margin-bottom: 0;
    }
}

/* ==========================================
   TABLET: 768px - 1023px
   ========================================== */
@media (min-width: 768px) and (max-width: 1023px) {
    /* On tablet, still use cards but with slightly different layout */
    .finance-bankaccounts-page .table-responsive {
        display: none !important;
    }

    .finance-bankaccounts-page .mobile-bankaccounts-list {
        display: block;
    }

    .mobile-bankaccount-card {
        background: white;
        border: 1px solid #dee2e6;
        border-radius: 8px;
        padding: 20px;
        margin-bottom: 16px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .mobile-bankaccount-actions .btn {
        flex-direction: row;
        gap: 6px;
    }

    .mobile-bankaccount-actions .btn i {
        font-size: 1rem;
    }

    .mobile-bankaccount-actions .btn-text {
        font-size: 0.85rem;
    }

    /* Better use of tablet screen space */
    .mobile-bankaccount-meta {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
}

/* ==========================================
   DESKTOP: >= 1024px - Table Layout
   ========================================== */
@media (min-width: 1024px) {
    /* Show table on desktop */
    .finance-bankaccounts-page .table-responsive {
        display: block !important;
    }

    /* Hide mobile card layout on desktop */
    .finance-bankaccounts-page .mobile-bankaccounts-list {
        display: none !important;
    }
}

/* ==========================================
   EXTRA SMALL MOBILE: < 480px
   ========================================== */
@media (max-width: 479px) {
    .mobile-bankaccount-card {
        padding: 12px;
        margin-bottom: 10px;
    }

    .mobile-bankaccount-name {
        font-size: 1rem;
    }

    .mobile-bankaccount-iban {
        font-size: 0.8rem;
        padding: 6px 10px;
    }

    .mobile-bankaccount-info-row {
        font-size: 0.8rem;
    }

    .mobile-bankaccount-info-label {
        min-width: 60px;
    }

    .mobile-bankaccount-actions {
        flex-wrap: wrap;
    }

    .mobile-bankaccount-actions .btn {
        flex: 1 1 calc(50% - 4px);
        min-width: 0;
    }
}

/* ==========================================
   DARK MODE SUPPORT
   ========================================== */
@media (prefers-color-scheme: dark) {
    @media (max-width: 1023px) {
        .mobile-bankaccount-card {
            background: #2b2b2b;
            border-color: #404040;
            color: #e0e0e0;
        }

        .mobile-bankaccount-name {
            color: #e0e0e0;
        }

        .mobile-bankaccount-iban {
            background: #1a1a1a;
            border-color: #404040;
            color: #d0d0d0;
        }

        .mobile-bankaccount-info-label {
            color: #a0a0a0;
        }

        .mobile-bankaccount-info-value {
            color: #d0d0d0;
        }

        .mobile-bankaccount-actions {
            border-top-color: #404040;
        }
    }
}

/* ==========================================
   TOUCH FEEDBACK
   ========================================== */
@media (hover: none) and (pointer: coarse) {
    .mobile-bankaccount-card:active,
    .mobile-bankaccount-actions .btn:active {
        opacity: 0.7;
    }
}

/* ==========================================
   ACCESSIBILITY
   ========================================== */
@media (max-width: 767px) {
    /* Ensure all interactive elements meet minimum touch target size */
    .mobile-bankaccount-actions button,
    .mobile-bankaccount-actions a {
        min-height: 44px;
        min-width: 44px;
    }

    /* Improve contrast for badges */
    .badge {
        font-weight: 600;
    }
}

/* ==========================================
   LOADING STATES
   ========================================== */
.mobile-bankaccounts-list .spinner-border {
    margin: 40px auto;
    display: block;
}

/* Empty state */
.mobile-bankaccounts-list .alert-info,
.mobile-bankaccounts-list .text-center {
    text-align: center;
    padding: 24px;
    margin: 20px 0;
}

/* 
 * Mobile-Responsive Purchase Invoices List for ERPAthos Purchase
 * 
 * This CSS provides a mobile-friendly card layout for the Purchase Invoices list
 * on small and medium screens while preserving the desktop table view on larger screens.
 * 
 * Breakpoints:
 * - Mobile & Tablet: < 1024px (card layout)
 * - Desktop: >= 1024px (table layout)
 */

/* ==========================================
   DEFAULT STYLES - Prevent FOUC
   ========================================== */
.purchase-invoices-page .mobile-invoices-list {
    display: none;
}

/* ==========================================
   MOBILE: < 768px - Card Layout
   ========================================== */
@media (max-width: 767px) {
    /* Hide table on mobile */
    .purchase-invoices-page .table-responsive {
        display: none !important;
    }

    /* Show mobile card list */
    .purchase-invoices-page .mobile-invoices-list {
        display: block;
    }

    /* Invoice card styling */
    .mobile-invoice-card {
        background: white;
        border: 1px solid #dee2e6;
        border-radius: 8px;
        padding: 16px;
        margin-bottom: 12px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        transition: transform 0.2s, box-shadow 0.2s;
        position: relative;
        overflow: hidden;
        cursor: pointer;
    }

    .mobile-invoice-card:active {
        transform: scale(0.98);
        box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    }

    /* Card header with invoice number and status */
    .mobile-invoice-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 12px;
        gap: 8px;
    }

    .mobile-invoice-number {
        font-weight: 700;
        font-size: 1.1rem;
        color: #212529;
        flex: 1;
    }

    .mobile-invoice-id {
        font-size: 0.875rem;
        color: #6c757d;
        margin-top: 2px;
    }

    /* Invoice meta information */
    .mobile-invoice-meta {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-bottom: 12px;
    }

    .mobile-invoice-info-row {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 0.875rem;
        color: #495057;
    }

    .mobile-invoice-info-row i {
        width: 16px;
        text-align: center;
        color: #6c757d;
    }

    .mobile-invoice-info-label {
        font-weight: 600;
        min-width: 110px;
    }

    /* Amount display */
    .mobile-invoice-amount {
        background: #f8f9fa;
        border-radius: 6px;
        padding: 12px;
        margin-bottom: 12px;
        text-align: center;
    }

    .mobile-invoice-amount-label {
        font-size: 0.75rem;
        color: #6c757d;
        text-transform: uppercase;
        margin-bottom: 4px;
    }

    .mobile-invoice-amount-value {
        font-size: 1.25rem;
        font-weight: 700;
        color: #198754;
    }

    /* Card actions */
    .mobile-invoice-actions {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        margin-top: 12px;
    }

    .mobile-invoice-actions .btn {
        font-size: 0.875rem;
        padding: 10px 12px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        border-radius: 6px;
        font-weight: 500;
    }

    .mobile-invoice-actions .btn i {
        font-size: 1rem;
    }

    /* Status badge positioning */
    .mobile-invoice-status {
        align-self: flex-start;
    }

    /* Ensure badges don't wrap awkwardly */
    .badge {
        white-space: nowrap;
        padding: 6px 10px;
        font-size: 0.75rem;
        font-weight: 600;
    }
}

/* ==========================================
   TABLET: 768px - 1023px
   ========================================== */
@media (min-width: 768px) and (max-width: 1023px) {
    /* Hide table on tablet */
    .purchase-invoices-page .table-responsive {
        display: none !important;
    }

    /* Show mobile card list */
    .purchase-invoices-page .mobile-invoices-list {
        display: block;
    }

    /* Tablet: 2 column layout for action buttons */
    .mobile-invoice-actions {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Slightly larger cards on tablet */
    .mobile-invoice-card {
        padding: 20px;
    }
}

/* ==========================================
   DESKTOP: >= 1024px - Show Table
   ========================================== */
@media (min-width: 1024px) {
    /* Show table on desktop */
    .purchase-invoices-page .table-responsive {
        display: block !important;
    }

    /* Hide mobile cards on desktop */
    .purchase-invoices-page .mobile-invoices-list {
        display: none !important;
    }
}

/* ==========================================
   EXTRA SMALL MOBILE: < 480px
   ========================================== */
@media (max-width: 479px) {
    .mobile-invoice-card {
        padding: 12px;
        margin-bottom: 10px;
    }

    .mobile-invoice-number {
        font-size: 1rem;
    }

    .mobile-invoice-amount-value {
        font-size: 1.1rem;
    }

    .mobile-invoice-info-label {
        min-width: 90px;
        font-size: 0.8rem;
    }
}

/* ==========================================
   DARK MODE SUPPORT
   ========================================== */
@media (prefers-color-scheme: dark) {
    html.dark-mode .mobile-invoice-card {
        background: #2d3748;
        border-color: #4a5568;
        box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    }

    html.dark-mode .mobile-invoice-number {
        color: #f7fafc;
    }

    html.dark-mode .mobile-invoice-id {
        color: #a0aec0;
    }

    html.dark-mode .mobile-invoice-info-row {
        color: #e2e8f0;
    }

    html.dark-mode .mobile-invoice-info-row i {
        color: #a0aec0;
    }

    html.dark-mode .mobile-invoice-amount {
        background: #1a202c;
    }

    html.dark-mode .mobile-invoice-amount-label {
        color: #a0aec0;
    }

    html.dark-mode .mobile-invoice-amount-value {
        color: #48bb78;
    }
}

/* ==========================================
   ACCESSIBILITY & TOUCH OPTIMIZATIONS
   ========================================== */
@media (max-width: 1023px) {
    /* Ensure touch targets are at least 44px */
    .mobile-invoice-actions button,
    .mobile-invoice-actions a {
        min-height: 44px;
        min-width: 44px;
    }

    /* Prevent zoom on iOS */
    input[type="text"],
    input[type="date"],
    select {
        font-size: 16px !important;
    }

    /* Better focus indicators for keyboard navigation */
    .mobile-invoice-card:focus-within {
        outline: 2px solid #0d6efd;
        outline-offset: 2px;
    }

    /* Smooth scrolling */
    .mobile-invoices-list {
        scroll-behavior: smooth;
    }
}

/* 
 * Mobile-Responsive Purchase Invoice Detail for ERPAthos Purchase
 * 
 * This CSS provides a mobile-friendly layout for the Purchase Invoice Detail page
 * with responsive cards, action buttons, and table handling for small screens.
 * 
 * Breakpoints:
 * - Mobile: < 768px
 * - Tablet: 768px - 1023px
 * - Desktop: >= 1024px
 */

/* ==========================================
   MOBILE: < 768px - Responsive Detail Layout
   ========================================== */
@media (max-width: 767px) {
    /* Stack columns vertically on mobile */
    .purchase-invoice-detail-page .row .col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Card spacing adjustments */
    .purchase-invoice-detail-page .card {
        margin-bottom: 1rem;
    }

    /* Header actions - wrap on mobile */
    .purchase-invoice-detail-page .row .col-auto {
        flex: 0 0 100%;
        max-width: 100%;
        margin-top: 1rem;
    }

    .purchase-invoice-detail-page .row .col-auto button {
        width: 100%;
        margin-bottom: 0.5rem;
        margin-right: 0 !important;
        min-height: 44px;
    }

    /* Invoice lines table - enable horizontal scroll */
    .purchase-invoice-detail-page .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .purchase-invoice-detail-page .table-responsive table {
        min-width: 800px; /* Force horizontal scroll for wide table */
    }

    /* Reduce table font size on mobile */
    .purchase-invoice-detail-page .table {
        font-size: 0.875rem;
    }

    .purchase-invoice-detail-page .table th,
    .purchase-invoice-detail-page .table td {
        padding: 0.5rem;
        white-space: nowrap;
    }

    /* Card headers - smaller on mobile */
    .purchase-invoice-detail-page .card-header h5 {
        font-size: 1rem;
    }

    /* Better spacing for mobile cards */
    .purchase-invoice-detail-page .card-body table th {
        font-size: 0.85rem;
    }

    .purchase-invoice-detail-page .card-body table td {
        font-size: 0.9rem;
    }

    /* Status badges - ensure readable */
    .purchase-invoice-detail-page .badge {
        font-size: 0.7rem;
        padding: 4px 8px;
    }

    /* Alert messages - better mobile spacing */
    .purchase-invoice-detail-page .alert {
        font-size: 0.9rem;
        padding: 0.75rem;
    }

    .purchase-invoice-detail-page .alert h5 {
        font-size: 1rem;
    }
}

/* ==========================================
   TABLET: 768px - 1023px
   ========================================== */
@media (min-width: 768px) and (max-width: 1023px) {
    /* Two-column layout for tablet */
    .purchase-invoice-detail-page .row .col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Header actions - keep in row but wrap if needed */
    .purchase-invoice-detail-page .row .col-auto button {
        min-height: 44px;
    }

    /* Invoice lines table - slightly smaller */
    .purchase-invoice-detail-page .table {
        font-size: 0.9rem;
    }
}

/* ==========================================
   DESKTOP: >= 1024px - Default Layout
   ========================================== */
@media (min-width: 1024px) {
    /* Desktop uses default Bootstrap grid - no changes needed */
}

/* ==========================================
   EXTRA SMALL MOBILE: < 480px
   ========================================== */
@media (max-width: 479px) {
    /* Even more compact on very small screens */
    .purchase-invoice-detail-page h2 {
        font-size: 1.5rem;
    }

    .purchase-invoice-detail-page .card-header h5 {
        font-size: 0.95rem;
    }

    .purchase-invoice-detail-page .card-body table th {
        font-size: 0.8rem;
        width: 45%;
    }

    .purchase-invoice-detail-page .card-body table td {
        font-size: 0.85rem;
    }

    .purchase-invoice-detail-page .table {
        font-size: 0.8rem;
    }

    .purchase-invoice-detail-page .table th,
    .purchase-invoice-detail-page .table td {
        padding: 0.4rem;
    }
}

/* ==========================================
   ACTION BUTTONS - Mobile Optimization
   ========================================== */
@media (max-width: 767px) {
    /* Make action buttons more prominent on mobile */
    .purchase-invoice-detail-page button.btn {
        font-size: 0.9rem;
        font-weight: 500;
    }

    .purchase-invoice-detail-page button.btn i {
        font-size: 1rem;
    }

    /* Ensure touch targets */
    .purchase-invoice-detail-page .btn {
        min-height: 44px;
        min-width: 44px;
    }
}

/* ==========================================
   TABLE OVERFLOW HANDLING
   ========================================== */
@media (max-width: 1023px) {
    /* Prevent page-wide horizontal scroll */
    .purchase-invoice-detail-page .container-fluid {
        overflow-x: hidden;
    }

    /* Allow only table to scroll horizontally */
    .purchase-invoice-detail-page .table-responsive {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin-bottom: 1rem;
    }

    /* Add scroll indicator shadow */
    .purchase-invoice-detail-page .table-responsive::-webkit-scrollbar {
        height: 8px;
    }

    .purchase-invoice-detail-page .table-responsive::-webkit-scrollbar-track {
        background: #f1f1f1;
    }

    .purchase-invoice-detail-page .table-responsive::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 4px;
    }

    .purchase-invoice-detail-page .table-responsive::-webkit-scrollbar-thumb:hover {
        background: #555;
    }
}

/* ==========================================
   DARK MODE SUPPORT
   ========================================== */
@media (prefers-color-scheme: dark) {
    html.dark-mode .purchase-invoice-detail-page .card {
        background: #2d3748;
        border-color: #4a5568;
    }

    html.dark-mode .purchase-invoice-detail-page .card-header {
        border-color: #4a5568;
    }

    html.dark-mode .purchase-invoice-detail-page .table {
        color: #e2e8f0;
    }

    html.dark-mode .purchase-invoice-detail-page .table-light {
        background-color: #1a202c;
        color: #e2e8f0;
    }

    html.dark-mode .purchase-invoice-detail-page .text-muted {
        color: #a0aec0 !important;
    }

    html.dark-mode .purchase-invoice-detail-page .table-responsive::-webkit-scrollbar-track {
        background: #1a202c;
    }

    html.dark-mode .purchase-invoice-detail-page .table-responsive::-webkit-scrollbar-thumb {
        background: #4a5568;
    }

    html.dark-mode .purchase-invoice-detail-page .table-responsive::-webkit-scrollbar-thumb:hover {
        background: #718096;
    }
}

/* ==========================================
   ACCESSIBILITY
   ========================================== */
@media (max-width: 1023px) {
    /* Better focus indicators */
    .purchase-invoice-detail-page button:focus,
    .purchase-invoice-detail-page a:focus {
        outline: 2px solid #0d6efd;
        outline-offset: 2px;
    }

    /* Prevent iOS zoom on input focus */
    .purchase-invoice-detail-page input,
    .purchase-invoice-detail-page select,
    .purchase-invoice-detail-page textarea {
        font-size: 16px !important;
    }

    /* Smooth scrolling */
    .purchase-invoice-detail-page {
        scroll-behavior: smooth;
    }
}

/**
 * HeaderActions Component Styles
 * Mobile-friendly header actions with overflow menu
 */

.header-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm, 0.5rem);
    flex-wrap: wrap;
}

.header-actions-primary {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm, 0.5rem);
    flex-wrap: wrap;
}

.header-actions-secondary {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm, 0.5rem);
    position: relative;
}

/* Desktop view - show all actions directly */
.header-actions-desktop {
    gap: var(--spacing-sm, 0.5rem);
}

/* Mobile view - overflow menu */
.header-actions-mobile {
    position: relative;
}

.overflow-menu-toggle {
    padding: 0.375rem 0.75rem;
    min-width: 44px; /* Touch target size */
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.overflow-menu-toggle i {
    font-size: 1.1rem;
}

.overflow-menu {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    z-index: var(--z-index-dropdown, 1000);
    min-width: 200px;
    max-width: 90vw;
    animation: fadeInScale 0.15s ease-out;
}

.overflow-menu-content {
    display: flex;
    flex-direction: column;
    padding: 0.5rem;
    gap: 0.25rem;
}

.overflow-menu-content > * {
    width: 100%;
    text-align: left;
    justify-content: flex-start;
    white-space: nowrap;
}

.overflow-menu-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: calc(var(--z-index-dropdown, 1000) - 1);
    background: transparent;
}

/* Animation */
@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-0.5rem);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .overflow-menu {
        background: #212529;
        border-color: #495057;
    }
}

/* Dark mode class support */
body.dark-mode .overflow-menu {
    background: #212529;
    border-color: #495057;
}

/* Responsive adjustments */
@media (max-width: 767px) {
    .header-actions {
        gap: var(--spacing-xs, 0.25rem);
    }

    .header-actions-primary {
        gap: var(--spacing-xs, 0.25rem);
    }

    /* Make primary action buttons more compact on mobile */
    .header-actions-primary .btn {
        padding: 0.375rem 0.75rem;
        font-size: 0.875rem;
    }

    /* Keep button text visible for accessibility - icon + text pattern */
    .header-actions-primary .btn span {
        display: inline;
    }

    .header-actions-primary .btn i {
        margin-right: 0.25rem !important;
    }
}

@media (min-width: 375px) {
    /* Consistent styling across all mobile sizes */
    .header-actions-primary .btn span {
        display: inline;
    }

    .header-actions-primary .btn i {
        margin-right: 0.25rem !important;
    }
}

/* Tablet and up - show full buttons */
@media (min-width: 768px) {
    .header-actions-primary .btn {
        padding: 0.5rem 1rem;
        font-size: 1rem;
    }

    .header-actions-primary .btn span {
        display: inline;
    }

    .header-actions-primary .btn i {
        margin-right: 0.5rem !important;
    }
}

/* Focus styles for accessibility */
.overflow-menu-toggle:focus,
.overflow-menu-content > *:focus {
    outline: 2px solid #0d6efd;
    outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .overflow-menu {
        border-width: 2px;
    }
}

/* Print styles - hide overflow menus */
@media print {
    .header-actions-mobile,
    .overflow-menu,
    .overflow-menu-backdrop {
        display: none !important;
    }

    .header-actions-desktop {
        display: flex !important;
    }
}

/**
 * Master Data Menu Styling
 * Provides enhanced visual distinction for menu items in the Settings > Master Data (Stamgegevens) screens
 * Ensures WCAG AA contrast compliance and clear active/inactive/hover states
 */

/* Base list group item styling for master data menus */
.masterdata-menu .list-group-item {
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    margin-bottom: 0.5rem;
    padding: 0.875rem 1rem;
    transition: all 0.2s ease-in-out;
    background-color: #f8f9fa;
    color: #495057;
    font-weight: 500;
    position: relative;
}

/* Inactive state - clear but subdued */
.masterdata-menu .list-group-item:not(.active) {
    background-color: #f8f9fa;
    color: #495057;
    border-left: 4px solid transparent;
}

/* Active state - visually dominant with accent border */
.masterdata-menu .list-group-item.active {
    background-color: #0d6efd;
    color: #ffffff;
    border-color: #0d6efd;
    border-left: 4px solid #ffc107;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(13, 110, 253, 0.3);
}

/* Active state icon color */
.masterdata-menu .list-group-item.active i {
    color: #ffc107;
}

/* Inactive state icon color */
.masterdata-menu .list-group-item:not(.active) i {
    color: #6c757d;
}

/* Hover state - clear visual feedback */
.masterdata-menu .list-group-item:not(.active):hover {
    background-color: #e9ecef;
    color: #212529;
    border-left: 4px solid #6c757d;
    cursor: pointer;
    transform: translateX(2px);
}

/* Hover state for icons */
.masterdata-menu .list-group-item:not(.active):hover i {
    color: #495057;
}

/* Focus state for accessibility */
.masterdata-menu .list-group-item:focus {
    outline: 2px solid #0d6efd;
    outline-offset: 2px;
}

/* Badge styling for counts */
.masterdata-menu .list-group-item .badge {
    font-size: 0.75rem;
    padding: 0.35em 0.65em;
}

/* Active item badge - higher specificity to override Bootstrap defaults */
.masterdata-menu .list-group-item.active .badge.bg-secondary {
    background-color: #ffc107;
    color: #000000;
}

/* Inactive item badge */
.masterdata-menu .list-group-item:not(.active) .badge {
    background-color: #6c757d;
    color: #ffffff;
}

/* Remove default Bootstrap active state styling for non-active items only */
.masterdata-menu .list-group-item-action:not(.active):active {
    color: inherit;
    background-color: inherit;
}

/* Mobile responsiveness - larger touch targets */
@media (max-width: 768px) {
    .masterdata-menu .list-group-item {
        padding: 1rem 1.25rem;
        margin-bottom: 0.75rem;
        font-size: 1rem;
    }
    
    .masterdata-menu .list-group-item i {
        font-size: 1.1rem;
    }
}

/* Dark mode support - if dark mode is implemented */
.dark-mode .masterdata-menu .list-group-item:not(.active) {
    background-color: #2b3035;
    color: #e9ecef;
    border-color: #495057;
}

.dark-mode .masterdata-menu .list-group-item:not(.active):hover {
    background-color: #343a40;
    color: #ffffff;
    border-left-color: #adb5bd;
}

.dark-mode .masterdata-menu .list-group-item.active {
    background-color: #0d6efd;
    color: #ffffff;
    border-color: #0d6efd;
    border-left-color: #ffc107;
}

/* Active item badge in dark mode - ensure yellow accent is preserved */
body.dark-mode .masterdata-menu .list-group-item.active .badge.bg-secondary {
    background-color: #ffc107 !important;
    color: #000000 !important;
}

/* High contrast mode for accessibility */
@media (prefers-contrast: high) {
    .masterdata-menu .list-group-item:not(.active) {
        border-width: 2px;
        border-color: #212529;
    }
    
    .masterdata-menu .list-group-item.active {
        border-left-width: 6px;
    }
}

/* ============================================================
 * ERPAthos Financial Master Data Theme
 * Scoped to the FinancialMasterData screen
 * ============================================================ */
.erp-financial {
    --erp-primary: #052767;
    --erp-primary-dark: #041f55;
    --erp-secondary: #3a0647;
    --erp-accent: #f5c400;
}

.erp-financial .text-primary {
    color: var(--erp-primary) !important;
}

.erp-financial .erp-card-header {
    background: linear-gradient(90deg, var(--erp-primary) 0%, var(--erp-secondary) 100%);
    border-color: var(--erp-primary);
}

.erp-financial .btn-erp-primary {
    color: #ffffff;
    background-color: var(--erp-primary);
    border-color: var(--erp-primary);
}

.erp-financial .btn-erp-primary:hover:not(:disabled):not(.disabled),
.erp-financial .btn-erp-primary:focus:not(:disabled):not(.disabled) {
    color: #ffffff;
    background-color: var(--erp-primary-dark);
    border-color: var(--erp-primary-dark);
}

.erp-financial .btn-erp-primary:disabled,
.erp-financial .btn-erp-primary[disabled],
.erp-financial .btn-erp-primary.disabled {
    color: #ffffff;
    background-color: #6c757d;
    border-color: #6c757d;
    opacity: 0.65;
    cursor: not-allowed;
    box-shadow: none;
}

.erp-financial .btn-outline-primary {
    color: var(--erp-primary);
    border-color: var(--erp-primary);
}

.erp-financial .btn-outline-primary:hover,
.erp-financial .btn-outline-primary:focus {
    color: #ffffff;
    background-color: var(--erp-primary);
    border-color: var(--erp-primary);
}

.erp-financial .masterdata-menu .list-group-item.active {
    background-color: var(--erp-primary);
    border-color: var(--erp-primary);
    border-left-color: var(--erp-secondary);
    box-shadow: 0 2px 8px rgba(5, 39, 103, 0.3);
}

.erp-financial .masterdata-menu .list-group-item.active i {
    color: var(--erp-accent);
}

.erp-financial .masterdata-menu .list-group-item.active .badge.bg-secondary {
    background-color: var(--erp-accent);
    color: #000000;
}

.erp-financial .table .table-dark,
.erp-financial .table-dark {
    --bs-table-bg: var(--erp-primary) !important;
    --bs-table-striped-bg: var(--erp-primary) !important;
    --bs-table-striped-color: #ffffff !important;
    --bs-table-color: #ffffff !important;
    --bs-table-border-color: var(--erp-primary-dark) !important;
}

.erp-financial .table .table-dark th,
.erp-financial .table .table-dark td,
.erp-financial .table thead.table-dark th,
.erp-financial .table thead.table-dark td {
    background-color: var(--erp-primary) !important;
    border-color: var(--erp-primary-dark) !important;
    color: #ffffff !important;
}

.erp-financial .erp-financial-table thead,
.erp-financial .erp-financial-table thead th,
.erp-financial .erp-financial-table thead td {
    background-color: var(--erp-primary) !important;
    border-color: var(--erp-primary-dark) !important;
    color: #ffffff !important;
}

/* ERPAthos Table Header - Force blue background */
.erp-financial .erp-table-header {
    background-color: var(--erp-primary) !important;
    border-color: var(--erp-primary-dark) !important;
}

.erp-financial .erp-table-header th,
.erp-financial .erp-table-header td {
    background-color: var(--erp-primary) !important;
    border-color: var(--erp-primary-dark) !important;
    color: #ffffff !important;
    font-weight: 500;
}

.erp-financial .spinner-border.text-primary {
    color: var(--erp-primary) !important;
}

.erp-financial .badge.bg-success {
    background-color: #1f8f5f;
}

.erp-financial .badge.bg-secondary {
    background-color: #6b7280;
}

/* Dark mode overrides for ERPAthos Financial theme */
body.dark-mode .erp-financial .erp-financial-table thead,
body.dark-mode .erp-financial .erp-financial-table thead th,
body.dark-mode .erp-financial .erp-financial-table thead td {
    background-color: #111827 !important;
    border-color: #1f2937 !important;
    color: #e5e7eb !important;
}

body.dark-mode .erp-financial .erp-table-header {
    background-color: #111827 !important;
    border-color: #1f2937 !important;
}

body.dark-mode .erp-financial .erp-table-header th,
body.dark-mode .erp-financial .erp-table-header td {
    background-color: #111827 !important;
    border-color: #1f2937 !important;
    color: #e5e7eb !important;
    font-weight: 500;
}

body.dark-mode .erp-financial .badge.bg-success {
    background-color: #15803d;
}

body.dark-mode .erp-financial .badge.bg-secondary {
    background-color: #4b5563;
}

/* Customer Portal Settings - Scoped Styles */
/* All styles scoped to .customer-portal-settings to prevent global conflicts */

/* QR code container styling - scoped to prevent conflicts if ID is reused */
.customer-portal-settings #qrcode {
    display: inline-block;
    background: white;
    padding: 1rem;
    border-radius: 0.5rem;
}

.customer-portal-settings #qrcode canvas,
.customer-portal-settings #qrcode img {
    display: block;
    margin: 0 auto;
}

/* Mobile-first approach - scoped to customer portal settings */
@media (max-width: 767px) {
    /* QR code container responsive */
    .customer-portal-settings #qrcode {
        max-width: 100%;
        overflow: hidden;
    }

    .customer-portal-settings #qrcode canvas,
    .customer-portal-settings #qrcode img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Page-specific adjustments for customer portal settings */
    .customer-portal-settings .card {
        margin-bottom: 1rem !important;
    }

    .customer-portal-settings .btn-group-sm {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .customer-portal-settings .btn-group-sm .btn {
        margin-bottom: 0.25rem;
        border-radius: 0.25rem !important;
    }

    .customer-portal-settings .card-header {
        padding: 0.75rem 1rem;
    }

    .customer-portal-settings .card-header h5 {
        font-size: 1rem;
        margin-bottom: 0;
    }

    .customer-portal-settings .card-header .btn-sm {
        font-size: 0.8rem;
        padding: 0.25rem 0.5rem;
    }
}

/* Tablet adjustments - scoped to customer portal settings */
@media (min-width: 768px) and (max-width: 991px) {
    .customer-portal-settings .col-md-4,
    .customer-portal-settings .col-md-8 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Stack columns on tablet within customer portal settings */
    .customer-portal-settings .row > [class*='col-md-'] {
        margin-bottom: 1rem;
    }
}

/* Desktop optimizations - scoped */
@media (min-width: 992px) {
    .customer-portal-settings .card {
        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    }
}

/* Touch-friendly button sizing - scoped */
.customer-portal-settings .btn-group .btn {
    min-height: 44px;
    min-width: 44px;
}

/* Status badge improvements - scoped */
.customer-portal-settings .badge {
    font-size: 0.85em;
    padding: 0.35em 0.65em;
    font-weight: 500;
}

/* Better monospace font for DNS records - scoped */
.customer-portal-settings .font-monospace {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.9em;
}

/* Improved loading states - scoped */
.customer-portal-settings .spinner-border-sm {
    width: 1rem;
    height: 1rem;
    border-width: 0.15em;
}

/* Smooth transitions - scoped */
.customer-portal-settings .alert,
.customer-portal-settings .card,
.customer-portal-settings .btn,
.customer-portal-settings .badge {
    transition: all 0.2s ease-in-out;
}

/* Print styles - scoped */
@media print {
    .customer-portal-settings .btn,
    .customer-portal-settings .btn-group,
    .customer-portal-settings .card-header .btn {
        display: none !important;
    }

    .customer-portal-settings .card {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    #qrcode {
        display: block;
        text-align: center;
    }
}

/* Accessibility improvements - scoped */
.customer-portal-settings .btn:focus,
.customer-portal-settings .form-control:focus,
.customer-portal-settings .btn-close:focus {
    outline: 2px solid #0d6efd;
    outline-offset: 2px;
}

/* Animation for success/error messages - scoped */
@keyframes slideInPortalSettings {
    from {
        transform: translateY(-20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.customer-portal-settings .alert {
    animation: slideInPortalSettings 0.3s ease-out;
}

/* Enhanced card headers - scoped */
.customer-portal-settings .card-header.bg-primary,
.customer-portal-settings .card-header.bg-info,
.customer-portal-settings .card-header.bg-secondary {
    padding: 1rem;
}

.customer-portal-settings .card-header h5 {
    display: flex;
    align-items: center;
    margin-bottom: 0;
}

.customer-portal-settings .card-header h5 i {
    margin-right: 0.5rem;
}

/* Better empty state styling - scoped */
.customer-portal-settings .text-center.py-4 {
    padding: 2rem 1rem;
}

.customer-portal-settings .text-center.py-4 i.fa-3x {
    opacity: 0.5;
}

/* Dark Mode Styling */
body.dark-mode {
    background-color: #1a1a1a;
    color: #e0e0e0;
}

body.dark-mode .card {
    background-color: #2d2d2d;
    border-color: #404040;
    color: #e0e0e0;
}

body.dark-mode .card-header {
    background-color: #252525;
    border-bottom-color: #404040;
    color: #e0e0e0;
}

body.dark-mode .card-body {
    background-color: #2d2d2d;
}

body.dark-mode .table {
    color: #e0e0e0;
    border-color: #404040;
}

body.dark-mode .table thead th {
    background-color: #252525;
    border-color: #404040;
    color: #e0e0e0;
}

body.dark-mode .table tbody tr {
    background-color: #2d2d2d;
}

body.dark-mode .table tbody tr:hover {
    background-color: #353535;
}

body.dark-mode .table-striped tbody tr:nth-of-type(odd) {
    background-color: #2a2a2a;
}

body.dark-mode .form-control,
body.dark-mode .form-select {
    background-color: #353535;
    border-color: #505050;
    color: #e0e0e0;
}

body.dark-mode .form-control:focus,
body.dark-mode .form-select:focus {
    background-color: #3a3a3a;
    border-color: #1b6ec2;
    color: #e0e0e0;
}

body.dark-mode .form-control::placeholder {
    color: #888;
}

body.dark-mode .btn-primary {
    background-color: #1b6ec2;
    border-color: #1861ac;
    color: #fff;
}

body.dark-mode .btn-primary:hover {
    background-color: #1558a0;
    border-color: #134d85;
}

body.dark-mode .btn-secondary {
    background-color: #505050;
    border-color: #404040;
    color: #e0e0e0;
}

body.dark-mode .btn-secondary:hover {
    background-color: #5a5a5a;
    border-color: #4a4a4a;
}

body.dark-mode .btn-success {
    background-color: #28a745;
    border-color: #28a745;
}

body.dark-mode .btn-danger {
    background-color: #dc3545;
    border-color: #dc3545;
}

body.dark-mode .btn-warning {
    background-color: #ffc107;
    border-color: #ffc107;
    color: #000;
}

body.dark-mode .btn-info {
    background-color: #17a2b8;
    border-color: #17a2b8;
}

body.dark-mode .btn-light {
    background-color: #505050;
    border-color: #404040;
    color: #e0e0e0;
}

body.dark-mode .btn-dark {
    background-color: #1a1a1a;
    border-color: #000;
}

body.dark-mode .modal-content {
    background-color: #2d2d2d;
    border-color: #404040;
    color: #e0e0e0;
}

body.dark-mode .modal-header {
    background-color: #252525;
    border-bottom-color: #404040;
}

body.dark-mode .modal-footer {
    background-color: #252525;
    border-top-color: #404040;
}

body.dark-mode .alert-info {
    background-color: #1a3a4a;
    border-color: #17a2b8;
    color: #9dd9ec;
}

body.dark-mode .alert-success {
    background-color: #1a3a2a;
    border-color: #28a745;
    color: #9de7ad;
}

body.dark-mode .alert-warning {
    background-color: #3a3a1a;
    border-color: #ffc107;
    color: #ffe69c;
}

body.dark-mode .alert-danger {
    background-color: #3a1a1a;
    border-color: #dc3545;
    color: #f1aeb5;
}

/* Dark mode overrides for ERPAthos design system alerts */
body.dark-mode .erp-alert {
    background-color: #262626;
    border-color: #4d4d4d;
    color: #f5f5f5;
}

body.dark-mode .erp-alert-info {
    background-color: #1a3a4a;
    border-color: #17a2b8;
    color: #9dd9ec;
}

body.dark-mode .erp-alert-success {
    background-color: #1a3a2a;
    border-color: #28a745;
    color: #9de7ad;
}

body.dark-mode .erp-alert-warning {
    background-color: #3a3a1a;
    border-color: #ffc107;
    color: #ffe69c;
}

body.dark-mode .erp-alert-error {
    background-color: #3a1a1a;
    border-color: #dc3545;
    color: #f1aeb5;
}

/* Dark mode overrides for ERPAthos design system buttons */
body.dark-mode .erp-btn {
    color: #ffffff;
    background-color: #3a3a3a;
    border-color: #555555;
}

body.dark-mode .erp-btn-primary {
    color: #ffffff;
    background-color: #1b6ec2;
    border-color: #1b6ec2;
}

body.dark-mode .erp-btn-secondary {
    color: #ffffff;
    background-color: #4a4a4a;
    border-color: #6c757d;
}

body.dark-mode .erp-btn-info {
    color: #ffffff;
    background-color: #17a2b8;
    border-color: #17a2b8;
}

body.dark-mode .erp-btn-warning {
    color: #212529;
    background-color: #ffc107;
    border-color: #ffca2c;
}

body.dark-mode .erp-btn-danger {
    color: #ffffff;
    background-color: #dc3545;
    border-color: #dc3545;
}

/* Dark mode overrides for ERPAthos design system form fields */
body.dark-mode .erp-form-label {
    color: #e0e0e0;
}

body.dark-mode .erp-form-error {
    color: #f1aeb5;
}

/* Dark mode overrides for ERPAthos design system modals */
body.dark-mode .erp-modal-content {
    background-color: #2d2d2d;
    color: #e0e0e0;
    border-color: #404040;
}

body.dark-mode .erp-modal-header {
    background-color: #2d2d2d;
    border-bottom-color: #404040;
    color: #e0e0e0;
}

body.dark-mode .erp-modal-body {
    background-color: #2d2d2d;
    color: #e0e0e0;
}

body.dark-mode .erp-modal-footer {
    background-color: #2d2d2d;
    border-top-color: #404040;
}

body.dark-mode .nav-tabs {
    border-bottom-color: #505050;
}

body.dark-mode .nav-tabs .nav-link {
    color: #ffffff !important;
    background-color: #1b6ec2 !important;
    border-color: #1b6ec2 !important;
    border-bottom: 3px solid #1558a0 !important;
}

body.dark-mode .nav-tabs .nav-link:hover {
    color: #ffffff !important;
    background-color: #1558a0 !important;
    border-color: #1558a0 !important;
    border-bottom: 3px solid #0f4379 !important;
}

body.dark-mode .nav-tabs .nav-link.active {
    color: #ffffff !important;
    background-color: #f28c28 !important;
    border-color: #f28c28 !important;
    border-bottom: 3px solid #d97706 !important;
}

body.dark-mode .erp-tabs {
    border-bottom-color: #505050 !important;
}

body.dark-mode .erp-tabs .nav-link {
    color: #ffffff !important;
    background-color: #1b6ec2 !important;
    border-color: #1b6ec2 !important;
}

body.dark-mode .erp-tabs .nav-link:hover,
body.dark-mode .erp-tabs .nav-link:focus {
    color: #ffffff !important;
    background-color: #1b6ec2 !important;
    border-color: #1b6ec2 !important;
}

body.dark-mode .erp-tabs .nav-link.active {
    color: #ffffff !important;
    background-color: #f28c28 !important;
    border-color: #f28c28 !important;
}

body.dark-mode .erp-tabs .nav-link:focus-visible {
    outline: 2px solid #9fc5ff;
    outline-offset: 2px;
}

body.dark-mode .dropdown-menu {
    background-color: #2d2d2d;
    border-color: #404040;
}

body.dark-mode .dropdown-item {
    color: #e0e0e0;
}

body.dark-mode .dropdown-item:hover {
    background-color: #353535;
    color: #fff;
}

body.dark-mode .badge {
    background-color: #505050;
    color: #e0e0e0;
}

body.dark-mode .badge.bg-primary {
    background-color: #1b6ec2 !important;
}

body.dark-mode .badge.bg-success {
    background-color: #28a745 !important;
}

body.dark-mode .badge.bg-danger {
    background-color: #dc3545 !important;
}

body.dark-mode .badge.bg-warning {
    background-color: #ffc107 !important;
    color: #000 !important;
}

body.dark-mode .badge.bg-info {
    background-color: #17a2b8 !important;
}

body.dark-mode .badge.bg-secondary {
    background-color: #6c757d !important;
}

/* Strong overrides for things that may be forced white elsewhere (e.g., financial-statements.css) */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {
    color: #e0e0e0 !important;
}

body.dark-mode .badge {
    background-color: #505050 !important;
    color: #e0e0e0 !important;
    border-color: #333 !important;
}

/* Override Bootstrap utility background classes (some files set these with !important) */
body.dark-mode .bg-success,
body.dark-mode .bg-primary,
body.dark-mode .bg-warning,
body.dark-mode .bg-info,
body.dark-mode .bg-light,
body.dark-mode .bg-white,
body.dark-mode .bg-body {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
    border-color: #404040 !important;
}

/* Also override explicit white backgrounds used for special components */
body.dark-mode .summary-badge,
body.dark-mode .financial-summary .badge,
body.dark-mode .report-badge {
    background-color: #505050 !important;
    color: #e0e0e0 !important;
}

/* If some components still force colours via inline styles or very specific selectors, this last-resort rule
   will attempt to neutralize white backgrounds for common containers used in app pages. Use sparingly. */
body.dark-mode .card .badge,
body.dark-mode .panel .badge,
body.dark-mode .card .summary,
body.dark-mode .card .report-value {
    background-color: #505050 !important;
    color: #e0e0e0 !important;
}

/* Global fallback overrides for elements not explicitly covered above */
body.dark-mode .page,
body.dark-mode main,
body.dark-mode article.content,
body.dark-mode .content,
body.dark-mode .container,
body.dark-mode .container-fluid,
body.dark-mode .row {
    background-color: #1a1a1a !important;
    color: #e0e0e0 !important;
}

/* Navbar / header / sticky areas */
body.dark-mode .navbar,
body.dark-mode .navbar.navbar-dark,
body.dark-mode .navbar-light,
body.dark-mode .top-row,
body.dark-mode header,
body.dark-mode .app-header,
body.dark-mode .page-header {
    background-color: #252525 !important;
    color: #e0e0e0 !important;
}

/* Override common Bootstrap background utility classes that may keep a white box */
body.dark-mode .bg-white,
body.dark-mode .bg-light,
body.dark-mode .bg-body {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
}

/* Text utilities that force dark text should be neutralized */
body.dark-mode .text-dark,
body.dark-mode .text-body {
    color: #e0e0e0 !important;
}

/* Make sure sidebar and top-row (headers) stay dark even if other styles interfere */
body.dark-mode .sidebar {
    background: linear-gradient(180deg, rgb(2, 20, 52) 0%, #1a0a28 70%) !important;
}
body.dark-mode .top-row {
    background-color: #252525 !important;
}

/* Toaster / notifications */
body.dark-mode .toast,
body.dark-mode .toast-header,
body.dark-mode .toast-body {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
    border-color: #404040 !important;
}

/* Dropdowns, modals and overlays */
body.dark-mode .dropdown-menu,
body.dark-mode .dropdown-menu.show {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
    border-color: #404040 !important;
}

body.dark-mode .modal-backdrop.show {
    background-color: rgba(0,0,0,0.65) !important;
}

/* Ensure cards/forms/buttons that use utility classes are covered */
body.dark-mode .card,
body.dark-mode .card-body,
body.dark-mode .card-header,
body.dark-mode .panel {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
    border-color: #404040 !important;
}

body.dark-mode .form-control,
body.dark-mode input.form-control,
body.dark-mode textarea.form-control,
body.dark-mode .form-select {
    background-color: #353535 !important;
    color: #e0e0e0 !important;
    border-color: #505050 !important;
}

/* Buttons that rely on outline or background utilities */
body.dark-mode .btn-outline-primary,
body.dark-mode .btn-outline-secondary,
body.dark-mode .btn-outline-light {
    background: transparent !important;
    color: #1b6ec2 !important;
    border-color: #1b6ec2 !important;
}

/* Ensure breadcrumb, list-group and pagination are dark */
body.dark-mode .breadcrumb,
body.dark-mode .list-group-item,
body.dark-mode .pagination .page-link {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
    border-color: #404040 !important;
}

/* Global catch-all: reduce risk of plain white elements by forcing background/text defaults
   This is deliberately last-resort and scoped to elements likely to contain content. */
body.dark-mode .content :where(div,section,header,aside,main,article) {
    background-color: transparent !important;
    color: inherit !important;
}

/* Last-resort overrides to catch inline styles or very specific selectors that force white backgrounds
   These are intentionally narrow and only active under body.dark-mode to minimise side-effects. */
body.dark-mode [style*="background-color: white"] {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
}
body.dark-mode [style*="background-color:#fff"] {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
}
body.dark-mode [style*="background-color: #fff"] {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
}
body.dark-mode [style*="background: white"] {
    background: #2d2d2d !important;
    color: #e0e0e0 !important;
}

/* Additional patterns to match other inline notations for white backgrounds */
body.dark-mode [style*="background-color:#ffffff"] {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
}
body.dark-mode [style*="background-color: #ffffff"] {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
}
body.dark-mode [style*="background:#ffffff"] {
    background: #2d2d2d !important;
    color: #e0e0e0 !important;
}
body.dark-mode [style*="rgb(255,255,255)"] {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
}
body.dark-mode [style*="rgb(255, 255, 255)"] {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
}

/* Neutralize inline color forcing dark text specifically */
body.dark-mode [style*="color: #000"] {
    color: #e0e0e0 !important;
}

/* End of last-resort overrides */

/* Also apply rules when <html> has dark-mode class (we add it in JS now) */
html.dark-mode, html.dark-mode body {
    background-color: #1a1a1a !important;
    color: #e0e0e0 !important;
}

/* Target direct children of .content/.page with increased specificity to avoid being overridden */
body.dark-mode .content > *,
html.dark-mode .content > *,
body.dark-mode .page > *,
html.dark-mode .page > * {
    background-color: transparent !important; /* let parent handle the page background */
    color: inherit !important;
}

/* If direct children still have white backgrounds, force them dark explicitly */
body.dark-mode .content > *[style*="background"],
html.dark-mode .content > *[style*="background"],
body.dark-mode .page > *[style*="background"],
html.dark-mode .page > *[style*="background"] {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
}

/* High-specificity fallback for main/article/section headers and panels */
html.dark-mode main,
html.dark-mode article,
html.dark-mode section,
html.dark-mode header,
html.dark-mode aside {
    background-color: #1a1a1a !important;
    color: #e0e0e0 !important;
}

/* End of dark-mode.css additions */