/**
 * =======================================================================
 * PACIOLI ACCOUNTING - COMPREHENSIVE RESPONSIVE CSS
 * =======================================================================
 *
 * This file provides a complete responsive framework for the Pacioli
 * accounting application with mobile-first design principles.
 *
 * Contents:
 * 1. CSS Custom Properties & Root Variables
 * 2. Responsive Breakpoints & Media Query Definitions
 * 3. Responsive Grid System (12-column)
 * 4. Mobile-Friendly Navigation
 * 5. Responsive Typography
 * 6. Touch-Friendly Button Sizing
 * 7. Responsive Spacing Utilities
 * 8. Card/Tile Responsive Layouts
 * 9. Table Responsive Patterns
 * 10. Form Responsive Layouts
 * 11. Mobile-Optimized Modals
 * 12. Visibility Utilities
 * 13. Flexbox Utilities
 * 14. Print Styles
 *
 * Browser Support: Modern browsers (Chrome, Firefox, Safari, Edge)
 * Mobile Support: iOS 12+, Android 5+
 * =======================================================================
 */

/* =======================================================================
   1. CSS CUSTOM PROPERTIES & ROOT VARIABLES
   ======================================================================= */

:root {
    /* Breakpoint values for JavaScript access */
    --breakpoint-mobile: 480px;
    --breakpoint-tablet: 768px;
    --breakpoint-desktop: 1199px;
    --breakpoint-large: 1200px;

    /* Grid system */
    --grid-columns: 12;
    --grid-gutter: 1rem;
    --grid-gutter-mobile: 0.75rem;

    /* Touch target sizes (WCAG 2.1 Level AAA) */
    --touch-target-min: 44px;
    --touch-target-comfortable: 48px;

    /* Responsive spacing scale */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-xxl: 3rem;

    /* Typography scale */
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;

    /* Line heights */
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;

    /* Container widths */
    --container-sm: 640px;
    --container-md: 768px;
    --container-lg: 1024px;
    --container-xl: 1280px;
    --container-2xl: 1400px;

    /* Z-index scale */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
}

/* =======================================================================
   2. RESPONSIVE BREAKPOINTS & MEDIA QUERY DEFINITIONS
   ======================================================================= */

/*
 * Breakpoint Strategy:
 * - Mobile First: Base styles apply to mobile, then enhanced for larger screens
 * - Mobile: 0px - 480px (phones)
 * - Tablet: 481px - 768px (tablets in portrait)
 * - Desktop: 769px - 1199px (tablets landscape, small desktops)
 * - Large Desktop: 1200px+ (full desktop experience)
 */

/* Base mobile styles are applied by default (no media query needed) */

/* =======================================================================
   3. RESPONSIVE GRID SYSTEM (12-COLUMN)
   ======================================================================= */

/**
 * Flexible 12-column grid system with responsive behavior
 * Usage: <div class="row"><div class="col-12 col-md-6 col-lg-4">...</div></div>
 */

.container-fluid {
    width: 100%;
    padding-right: var(--grid-gutter-mobile);
    padding-left: var(--grid-gutter-mobile);
    margin-right: auto;
    margin-left: auto;
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: calc(var(--grid-gutter-mobile) * -0.5);
    margin-left: calc(var(--grid-gutter-mobile) * -0.5);
}

/* Column base styles */
[class*="col-"] {
    position: relative;
    width: 100%;
    padding-right: calc(var(--grid-gutter-mobile) * 0.5);
    padding-left: calc(var(--grid-gutter-mobile) * 0.5);
}

/* Mobile columns (default) */
.col-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
.col-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
.col-3 { flex: 0 0 25%; max-width: 25%; }
.col-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
.col-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
.col-6 { flex: 0 0 50%; max-width: 50%; }
.col-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
.col-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
.col-9 { flex: 0 0 75%; max-width: 75%; }
.col-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
.col-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
.col-12 { flex: 0 0 100%; max-width: 100%; }

/* Auto-width columns */
.col-auto {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
}

/* Flexible column that grows to fill space */
.col {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
}

/* Tablet breakpoint (481px - 768px) */
@media (min-width: 481px) {
    .container-fluid {
        padding-right: var(--grid-gutter);
        padding-left: var(--grid-gutter);
    }

    .row {
        margin-right: calc(var(--grid-gutter) * -0.5);
        margin-left: calc(var(--grid-gutter) * -0.5);
    }

    [class*="col-"] {
        padding-right: calc(var(--grid-gutter) * 0.5);
        padding-left: calc(var(--grid-gutter) * 0.5);
    }

    .col-sm-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
    .col-sm-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .col-sm-3 { flex: 0 0 25%; max-width: 25%; }
    .col-sm-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .col-sm-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .col-sm-6 { flex: 0 0 50%; max-width: 50%; }
    .col-sm-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .col-sm-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .col-sm-9 { flex: 0 0 75%; max-width: 75%; }
    .col-sm-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .col-sm-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .col-sm-12 { flex: 0 0 100%; max-width: 100%; }
    .col-sm-auto { flex: 0 0 auto; width: auto; max-width: 100%; }
}

/* Desktop breakpoint (769px - 1199px) */
@media (min-width: 769px) {
    .col-md-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
    .col-md-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .col-md-3 { flex: 0 0 25%; max-width: 25%; }
    .col-md-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .col-md-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .col-md-6 { flex: 0 0 50%; max-width: 50%; }
    .col-md-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .col-md-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .col-md-9 { flex: 0 0 75%; max-width: 75%; }
    .col-md-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .col-md-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .col-md-12 { flex: 0 0 100%; max-width: 100%; }
    .col-md-auto { flex: 0 0 auto; width: auto; max-width: 100%; }
}

/* Large desktop breakpoint (1200px+) */
@media (min-width: 1200px) {
    .col-lg-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
    .col-lg-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .col-lg-3 { flex: 0 0 25%; max-width: 25%; }
    .col-lg-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .col-lg-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .col-lg-6 { flex: 0 0 50%; max-width: 50%; }
    .col-lg-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .col-lg-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .col-lg-9 { flex: 0 0 75%; max-width: 75%; }
    .col-lg-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .col-lg-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .col-lg-12 { flex: 0 0 100%; max-width: 100%; }
    .col-lg-auto { flex: 0 0 auto; width: auto; max-width: 100%; }
}

/* =======================================================================
   4. MOBILE-FRIENDLY NAVIGATION
   ======================================================================= */

/**
 * Hamburger menu styles for mobile navigation
 * Works with existing navbar structure from base.html
 */

/* Hamburger menu button (hidden by default, shown on mobile) */
.navbar-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    color: white;
    font-size: 1.5rem;
    line-height: 1;
    z-index: var(--z-sticky);
}

.navbar-toggle:hover {
    color: var(--brand-alt);
}

/* Hamburger icon */
.navbar-toggle-icon {
    display: block;
    width: 24px;
    height: 2px;
    background-color: currentColor;
    position: relative;
    transition: background-color 0.3s;
}

.navbar-toggle-icon::before,
.navbar-toggle-icon::after {
    content: '';
    display: block;
    width: 24px;
    height: 2px;
    background-color: currentColor;
    position: absolute;
    transition: transform 0.3s;
}

.navbar-toggle-icon::before {
    top: -8px;
}

.navbar-toggle-icon::after {
    top: 8px;
}

/* Hamburger animation when menu is open */
.navbar-toggle.active .navbar-toggle-icon {
    background-color: transparent;
}

.navbar-toggle.active .navbar-toggle-icon::before {
    transform: translateY(8px) rotate(45deg);
}

.navbar-toggle.active .navbar-toggle-icon::after {
    transform: translateY(-8px) rotate(-45deg);
}

/* Mobile navigation styles */
@media (max-width: 768px) {
    .navbar-toggle {
        display: block;
    }

    .navbar-content {
        position: relative;
    }

    /* Hide menu by default on mobile */
    .navbar-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: var(--heading);
        flex-direction: column;
        padding: 1rem;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        z-index: var(--z-dropdown);
        margin-top: 1rem;
        border-radius: 8px;
        max-height: calc(100vh - 100px);
        overflow-y: auto;
    }

    /* Show menu when toggled */
    .navbar-menu.show {
        display: flex;
    }

    .navbar-menu li {
        width: 100%;
        margin: 0;
    }

    .navbar-menu a {
        display: block;
        padding: 0.75rem 1rem;
        border-radius: 6px;
        transition: background-color 0.2s;
    }

    .navbar-menu a:hover {
        background-color: rgba(255, 255, 255, 0.1);
    }

    /* User section on mobile */
    .navbar-user {
        flex-direction: column;
        align-items: flex-start;
        padding-top: 1rem;
        border-top: 1px solid rgba(255, 255, 255, 0.2);
        margin-top: 1rem;
    }

    .navbar-user .btn {
        width: 100%;
        text-align: center;
    }
}

/* Tablet adjustments */
@media (min-width: 481px) and (max-width: 768px) {
    .navbar-menu {
        padding: 1.5rem;
    }
}

/* =======================================================================
   5. RESPONSIVE TYPOGRAPHY
   ======================================================================= */

/**
 * Fluid typography that scales smoothly between breakpoints
 * Uses clamp() for modern browsers with fallbacks
 */

/* Base font size adjustments */
html {
    font-size: 16px; /* Base for desktop */
}

@media (max-width: 480px) {
    html {
        font-size: 14px; /* Slightly smaller on mobile */
    }
}

/* Headings - responsive scaling */
h1, .h1 {
    font-size: var(--font-size-3xl);
    line-height: var(--line-height-tight);
    margin-bottom: var(--spacing-lg);
}

h2, .h2 {
    font-size: var(--font-size-2xl);
    line-height: var(--line-height-tight);
    margin-bottom: var(--spacing-md);
}

h3, .h3 {
    font-size: var(--font-size-xl);
    line-height: var(--line-height-normal);
    margin-bottom: var(--spacing-md);
}

h4, .h4 {
    font-size: var(--font-size-lg);
    line-height: var(--line-height-normal);
    margin-bottom: var(--spacing-sm);
}

h5, .h5 {
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    margin-bottom: var(--spacing-sm);
}

h6, .h6 {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
    margin-bottom: var(--spacing-sm);
}

/* Mobile typography adjustments */
@media (max-width: 480px) {
    h1, .h1 {
        font-size: var(--font-size-2xl);
    }

    h2, .h2 {
        font-size: var(--font-size-xl);
    }

    h3, .h3 {
        font-size: var(--font-size-lg);
    }
}

/* Tablet typography adjustments */
@media (min-width: 481px) and (max-width: 768px) {
    h1, .h1 {
        font-size: calc(var(--font-size-2xl) + 0.25rem);
    }
}

/* Large desktop typography enhancements */
@media (min-width: 1200px) {
    h1, .h1 {
        font-size: var(--font-size-4xl);
    }
}

/* Paragraph and body text */
p {
    margin-bottom: var(--spacing-md);
    line-height: var(--line-height-relaxed);
}

/* Text size utilities */
.text-xs { font-size: var(--font-size-xs); }
.text-sm { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }
.text-2xl { font-size: var(--font-size-2xl); }
.text-3xl { font-size: var(--font-size-3xl); }

/* =======================================================================
   6. TOUCH-FRIENDLY BUTTON SIZING
   ======================================================================= */

/**
 * Ensures all interactive elements meet WCAG 2.1 touch target guidelines
 * Minimum 44x44px for Level AA compliance
 */

/* Enhanced button styles for touch devices */
.btn {
    min-height: var(--touch-target-min);
    min-width: var(--touch-target-min);
    padding: 0.75rem 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    touch-action: manipulation; /* Prevents double-tap zoom */
    -webkit-tap-highlight-color: transparent; /* Removes tap highlight on iOS */
}

/* Mobile-optimized button sizes */
@media (max-width: 768px) {
    .btn {
        min-height: var(--touch-target-comfortable);
        padding: 0.875rem 1.75rem;
        font-size: var(--font-size-base);
    }

    .btn-sm {
        min-height: var(--touch-target-min);
        padding: 0.625rem 1.25rem;
        font-size: var(--font-size-sm);
    }

    .btn-lg {
        min-height: 56px;
        padding: 1rem 2rem;
        font-size: var(--font-size-lg);
    }

    /* Full-width buttons on mobile */
    .btn-block {
        display: flex;
        width: 100%;
    }
}

/* Button groups - prevent accidental taps */
.btn-group {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

@media (max-width: 480px) {
    .btn-group {
        flex-direction: column;
    }

    .btn-group .btn {
        width: 100%;
    }
}

/* Icon buttons - ensure proper touch target size */
.btn-icon {
    min-width: var(--touch-target-min);
    min-height: var(--touch-target-min);
    padding: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 768px) {
    .btn-icon {
        min-width: var(--touch-target-comfortable);
        min-height: var(--touch-target-comfortable);
    }
}

/* Link styling for better touch targets */
a:not(.btn) {
    padding: 0.25rem 0;
    display: inline-block;
}

@media (max-width: 768px) {
    /* Increase link tap area on mobile */
    a:not(.btn) {
        padding: 0.5rem 0;
    }

    /* Larger tap areas for navigation links */
    .navbar-menu a {
        min-height: var(--touch-target-comfortable);
        padding: 0.875rem 1rem;
        display: flex;
        align-items: center;
    }
}

/* =======================================================================
   7. RESPONSIVE SPACING UTILITIES
   ======================================================================= */

/**
 * Responsive margin and padding utilities
 * Pattern: .{property}{side}-{size}
 * Example: .mt-2 (margin-top: 1rem), .px-4 (padding-x: 2rem)
 */

/* Margin utilities - all breakpoints */
.m-0 { margin: 0 !important; }
.m-1 { margin: var(--spacing-xs) !important; }
.m-2 { margin: var(--spacing-sm) !important; }
.m-3 { margin: var(--spacing-md) !important; }
.m-4 { margin: var(--spacing-lg) !important; }
.m-5 { margin: var(--spacing-xl) !important; }
.m-6 { margin: var(--spacing-xxl) !important; }
.m-auto { margin: auto !important; }

/* Margin top */
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: var(--spacing-xs) !important; }
.mt-2 { margin-top: var(--spacing-sm) !important; }
.mt-3 { margin-top: var(--spacing-md) !important; }
.mt-4 { margin-top: var(--spacing-lg) !important; }
.mt-5 { margin-top: var(--spacing-xl) !important; }
.mt-6 { margin-top: var(--spacing-xxl) !important; }
.mt-auto { margin-top: auto !important; }

/* Margin bottom */
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: var(--spacing-xs) !important; }
.mb-2 { margin-bottom: var(--spacing-sm) !important; }
.mb-3 { margin-bottom: var(--spacing-md) !important; }
.mb-4 { margin-bottom: var(--spacing-lg) !important; }
.mb-5 { margin-bottom: var(--spacing-xl) !important; }
.mb-6 { margin-bottom: var(--spacing-xxl) !important; }
.mb-auto { margin-bottom: auto !important; }

/* Margin left */
.ml-0 { margin-left: 0 !important; }
.ml-1 { margin-left: var(--spacing-xs) !important; }
.ml-2 { margin-left: var(--spacing-sm) !important; }
.ml-3 { margin-left: var(--spacing-md) !important; }
.ml-4 { margin-left: var(--spacing-lg) !important; }
.ml-5 { margin-left: var(--spacing-xl) !important; }
.ml-6 { margin-left: var(--spacing-xxl) !important; }
.ml-auto { margin-left: auto !important; }

/* Margin right */
.mr-0 { margin-right: 0 !important; }
.mr-1 { margin-right: var(--spacing-xs) !important; }
.mr-2 { margin-right: var(--spacing-sm) !important; }
.mr-3 { margin-right: var(--spacing-md) !important; }
.mr-4 { margin-right: var(--spacing-lg) !important; }
.mr-5 { margin-right: var(--spacing-xl) !important; }
.mr-6 { margin-right: var(--spacing-xxl) !important; }
.mr-auto { margin-right: auto !important; }

/* Margin X-axis (left + right) */
.mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
.mx-1 { margin-left: var(--spacing-xs) !important; margin-right: var(--spacing-xs) !important; }
.mx-2 { margin-left: var(--spacing-sm) !important; margin-right: var(--spacing-sm) !important; }
.mx-3 { margin-left: var(--spacing-md) !important; margin-right: var(--spacing-md) !important; }
.mx-4 { margin-left: var(--spacing-lg) !important; margin-right: var(--spacing-lg) !important; }
.mx-5 { margin-left: var(--spacing-xl) !important; margin-right: var(--spacing-xl) !important; }
.mx-6 { margin-left: var(--spacing-xxl) !important; margin-right: var(--spacing-xxl) !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }

/* Margin Y-axis (top + bottom) */
.my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.my-1 { margin-top: var(--spacing-xs) !important; margin-bottom: var(--spacing-xs) !important; }
.my-2 { margin-top: var(--spacing-sm) !important; margin-bottom: var(--spacing-sm) !important; }
.my-3 { margin-top: var(--spacing-md) !important; margin-bottom: var(--spacing-md) !important; }
.my-4 { margin-top: var(--spacing-lg) !important; margin-bottom: var(--spacing-lg) !important; }
.my-5 { margin-top: var(--spacing-xl) !important; margin-bottom: var(--spacing-xl) !important; }
.my-6 { margin-top: var(--spacing-xxl) !important; margin-bottom: var(--spacing-xxl) !important; }
.my-auto { margin-top: auto !important; margin-bottom: auto !important; }

/* Padding utilities - all breakpoints */
.p-0 { padding: 0 !important; }
.p-1 { padding: var(--spacing-xs) !important; }
.p-2 { padding: var(--spacing-sm) !important; }
.p-3 { padding: var(--spacing-md) !important; }
.p-4 { padding: var(--spacing-lg) !important; }
.p-5 { padding: var(--spacing-xl) !important; }
.p-6 { padding: var(--spacing-xxl) !important; }

/* Padding top */
.pt-0 { padding-top: 0 !important; }
.pt-1 { padding-top: var(--spacing-xs) !important; }
.pt-2 { padding-top: var(--spacing-sm) !important; }
.pt-3 { padding-top: var(--spacing-md) !important; }
.pt-4 { padding-top: var(--spacing-lg) !important; }
.pt-5 { padding-top: var(--spacing-xl) !important; }
.pt-6 { padding-top: var(--spacing-xxl) !important; }

/* Padding bottom */
.pb-0 { padding-bottom: 0 !important; }
.pb-1 { padding-bottom: var(--spacing-xs) !important; }
.pb-2 { padding-bottom: var(--spacing-sm) !important; }
.pb-3 { padding-bottom: var(--spacing-md) !important; }
.pb-4 { padding-bottom: var(--spacing-lg) !important; }
.pb-5 { padding-bottom: var(--spacing-xl) !important; }
.pb-6 { padding-bottom: var(--spacing-xxl) !important; }

/* Padding left */
.pl-0 { padding-left: 0 !important; }
.pl-1 { padding-left: var(--spacing-xs) !important; }
.pl-2 { padding-left: var(--spacing-sm) !important; }
.pl-3 { padding-left: var(--spacing-md) !important; }
.pl-4 { padding-left: var(--spacing-lg) !important; }
.pl-5 { padding-left: var(--spacing-xl) !important; }
.pl-6 { padding-left: var(--spacing-xxl) !important; }

/* Padding right */
.pr-0 { padding-right: 0 !important; }
.pr-1 { padding-right: var(--spacing-xs) !important; }
.pr-2 { padding-right: var(--spacing-sm) !important; }
.pr-3 { padding-right: var(--spacing-md) !important; }
.pr-4 { padding-right: var(--spacing-lg) !important; }
.pr-5 { padding-right: var(--spacing-xl) !important; }
.pr-6 { padding-right: var(--spacing-xxl) !important; }

/* Padding X-axis (left + right) */
.px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.px-1 { padding-left: var(--spacing-xs) !important; padding-right: var(--spacing-xs) !important; }
.px-2 { padding-left: var(--spacing-sm) !important; padding-right: var(--spacing-sm) !important; }
.px-3 { padding-left: var(--spacing-md) !important; padding-right: var(--spacing-md) !important; }
.px-4 { padding-left: var(--spacing-lg) !important; padding-right: var(--spacing-lg) !important; }
.px-5 { padding-left: var(--spacing-xl) !important; padding-right: var(--spacing-xl) !important; }
.px-6 { padding-left: var(--spacing-xxl) !important; padding-right: var(--spacing-xxl) !important; }

/* Padding Y-axis (top + bottom) */
.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.py-1 { padding-top: var(--spacing-xs) !important; padding-bottom: var(--spacing-xs) !important; }
.py-2 { padding-top: var(--spacing-sm) !important; padding-bottom: var(--spacing-sm) !important; }
.py-3 { padding-top: var(--spacing-md) !important; padding-bottom: var(--spacing-md) !important; }
.py-4 { padding-top: var(--spacing-lg) !important; padding-bottom: var(--spacing-lg) !important; }
.py-5 { padding-top: var(--spacing-xl) !important; padding-bottom: var(--spacing-xl) !important; }
.py-6 { padding-top: var(--spacing-xxl) !important; padding-bottom: var(--spacing-xxl) !important; }

/* Responsive spacing modifiers for mobile */
@media (max-width: 480px) {
    .m-mobile-0 { margin: 0 !important; }
    .p-mobile-0 { padding: 0 !important; }
    .px-mobile-2 { padding-left: var(--spacing-sm) !important; padding-right: var(--spacing-sm) !important; }
    .py-mobile-2 { padding-top: var(--spacing-sm) !important; padding-bottom: var(--spacing-sm) !important; }
}

/* =======================================================================
   8. CARD/TILE RESPONSIVE LAYOUTS
   ======================================================================= */

/**
 * Responsive card layouts with automatic stacking on mobile
 * Cards maintain readability across all screen sizes
 */

/* Card enhancements for responsiveness */
.card {
    margin-bottom: var(--spacing-lg);
}

@media (max-width: 480px) {
    .card {
        padding: var(--spacing-md);
        margin-bottom: var(--spacing-md);
        border-radius: 6px;
    }

    .card-header {
        font-size: var(--font-size-lg);
        padding-bottom: var(--spacing-sm);
    }
}

/* Card grid layouts */
.card-grid {
    display: grid;
    gap: var(--spacing-lg);
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

@media (max-width: 768px) {
    .card-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
}

@media (min-width: 769px) and (max-width: 1199px) {
    .card-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }
}

/* Card deck - equal height cards */
.card-deck {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-lg);
}

.card-deck > .card {
    flex: 1 1 300px;
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .card-deck {
        flex-direction: column;
        gap: var(--spacing-md);
    }

    .card-deck > .card {
        flex: 1 1 auto;
    }
}

/* Compact cards for mobile */
@media (max-width: 480px) {
    .card-compact {
        padding: var(--spacing-sm);
    }

    .card-compact .card-header {
        font-size: var(--font-size-base);
        margin-bottom: var(--spacing-sm);
    }
}

/* =======================================================================
   9. TABLE RESPONSIVE PATTERNS
   ======================================================================= */

/**
 * Multiple strategies for responsive tables:
 * 1. Horizontal scroll (default)
 * 2. Stack on mobile (optional)
 * 3. Card layout (optional)
 */

/* Strategy 1: Horizontal scroll with enhanced UX */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: var(--spacing-lg);
}

@media (max-width: 768px) {
    .table-responsive {
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    /* Sticky first column on mobile */
    .table-responsive.table-sticky-col table th:first-child,
    .table-responsive.table-sticky-col table td:first-child {
        position: sticky;
        left: 0;
        background-color: var(--bg-primary);
        z-index: 10;
        box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
    }

    .table-responsive.table-sticky-col table thead th:first-child {
        background-color: var(--brand);
        z-index: 11;
    }
}

/* Improve table scrollbar on mobile */
.table-responsive::-webkit-scrollbar {
    height: 8px;
}

.table-responsive::-webkit-scrollbar-track {
    background: var(--bg-subtle);
    border-radius: 4px;
}

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

/* Strategy 2: Stack table rows on mobile */
@media (max-width: 768px) {
    .table-stack thead {
        display: none;
    }

    .table-stack tbody,
    .table-stack tr,
    .table-stack td {
        display: block;
        width: 100%;
    }

    .table-stack tr {
        margin-bottom: var(--spacing-md);
        border: 1px solid var(--bg-subtle);
        border-radius: 8px;
        overflow: hidden;
        background-color: var(--bg-primary);
    }

    .table-stack td {
        text-align: right;
        padding: 0.75rem 1rem;
        border-bottom: 1px solid var(--bg-subtle);
        position: relative;
        padding-left: 50%;
    }

    .table-stack td:last-child {
        border-bottom: none;
    }

    /* Add labels from data attributes */
    .table-stack td::before {
        content: attr(data-label);
        position: absolute;
        left: 1rem;
        top: 50%;
        transform: translateY(-50%);
        font-weight: 600;
        color: var(--heading);
        text-align: left;
    }
}

/* Strategy 3: Card-based table layout */
@media (max-width: 768px) {
    .table-cards {
        display: block;
    }

    .table-cards thead {
        display: none;
    }

    .table-cards tbody {
        display: grid;
        gap: var(--spacing-md);
    }

    .table-cards tr {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-sm);
        padding: var(--spacing-md);
        background-color: var(--bg-primary);
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .table-cards td {
        padding: var(--spacing-sm);
        border: none;
    }

    .table-cards td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-weight: 600;
        color: var(--heading);
        margin-bottom: 0.25rem;
        font-size: var(--font-size-xs);
        text-transform: uppercase;
    }
}

/* Responsive table text sizing */
@media (max-width: 480px) {
    table {
        font-size: var(--font-size-sm);
    }

    th, td {
        padding: 0.5rem;
    }
}

/* =======================================================================
   10. FORM RESPONSIVE LAYOUTS
   ======================================================================= */

/**
 * Forms that adapt to screen size with proper touch targets
 * Stack form groups on mobile, arrange in grids on desktop
 */

/* Form group responsive spacing */
.form-group {
    margin-bottom: var(--spacing-md);
}

@media (max-width: 480px) {
    .form-group {
        margin-bottom: var(--spacing-sm);
    }
}

/* Form control enhancements for mobile */
@media (max-width: 768px) {
    .form-control,
    select,
    textarea {
        min-height: var(--touch-target-comfortable);
        padding: 0.875rem;
        font-size: var(--font-size-base);
        border-radius: 6px;
    }

    /* Prevent zoom on iOS when focusing inputs */
    .form-control,
    select,
    textarea,
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"] {
        font-size: 16px; /* iOS won't zoom if font-size is 16px or larger */
    }
}

/* Form grid layouts */
.form-grid {
    display: grid;
    gap: var(--spacing-md);
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

@media (max-width: 768px) {
    .form-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-sm);
    }
}

/* Two-column form layout */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
}

@media (max-width: 768px) {
    .form-row {
        grid-template-columns: 1fr;
        gap: var(--spacing-sm);
    }
}

/* Inline form elements */
.form-inline {
    display: flex;
    gap: var(--spacing-md);
    align-items: flex-end;
}

@media (max-width: 768px) {
    .form-inline {
        flex-direction: column;
        align-items: stretch;
    }

    .form-inline .form-group {
        width: 100%;
    }
}

/* Checkboxes and radio buttons - larger tap targets */
@media (max-width: 768px) {
    input[type="checkbox"],
    input[type="radio"] {
        width: 20px;
        height: 20px;
        cursor: pointer;
    }

    input[type="checkbox"] + label,
    input[type="radio"] + label {
        padding-left: var(--spacing-sm);
        cursor: pointer;
        min-height: var(--touch-target-min);
        display: inline-flex;
        align-items: center;
    }
}

/* Select dropdowns - enhanced for mobile */
@media (max-width: 768px) {
    select {
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 1rem center;
        background-size: 12px;
        padding-right: 2.5rem;
    }
}

/* Form actions - button groups */
.form-actions {
    display: flex;
    gap: var(--spacing-md);
    justify-content: flex-end;
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--bg-subtle);
}

@media (max-width: 768px) {
    .form-actions {
        flex-direction: column-reverse;
        gap: var(--spacing-sm);
    }

    .form-actions .btn {
        width: 100%;
    }
}

/* =======================================================================
   11. MOBILE-OPTIMIZED MODALS
   ======================================================================= */

/**
 * Modals that work beautifully on mobile devices
 * Full-screen on mobile, centered dialog on desktop
 */

/* Modal backdrop */
.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: var(--z-modal-backdrop);
    animation: fadeIn 0.3s ease-out;
}

/* Modal container */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-md);
    overflow-y: auto;
}

/* Modal dialog - responsive sizing */
.modal-dialog {
    position: relative;
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    margin: auto;
    animation: slideUp 0.3s ease-out;
}

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

/* Large modals */
.modal-dialog.modal-lg {
    max-width: 900px;
}

/* Extra large modals */
.modal-dialog.modal-xl {
    max-width: 1200px;
}

/* Small modals */
.modal-dialog.modal-sm {
    max-width: 400px;
}

/* Mobile modal adjustments - full screen */
@media (max-width: 768px) {
    .modal {
        padding: 0;
        align-items: flex-end;
    }

    .modal-dialog {
        max-width: 100%;
        max-height: 95vh;
        margin: 0;
        border-radius: 16px 16px 0 0;
        animation: slideUpMobile 0.3s ease-out;
    }

    @keyframes slideUpMobile {
        from {
            transform: translateY(100%);
        }
        to {
            transform: translateY(0);
        }
    }

    .modal-header,
    .modal-footer {
        padding: var(--spacing-md);
    }

    .modal-body {
        padding: var(--spacing-md);
        max-height: calc(95vh - 140px);
    }

    /* Close button positioning for mobile */
    .modal-close {
        min-width: var(--touch-target-comfortable);
        min-height: var(--touch-target-comfortable);
    }
}

/* Full screen modals on small mobile */
@media (max-width: 480px) {
    .modal-dialog.modal-fullscreen-sm {
        max-width: 100%;
        max-height: 100vh;
        height: 100vh;
        margin: 0;
        border-radius: 0;
    }

    .modal-dialog.modal-fullscreen-sm .modal-body {
        max-height: calc(100vh - 140px);
    }
}

/* Modal content scrolling */
.modal-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Modal footer - responsive button layout */
@media (max-width: 480px) {
    .modal-footer {
        flex-direction: column-reverse;
        gap: var(--spacing-sm);
    }

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

/* =======================================================================
   12. VISIBILITY UTILITIES
   ======================================================================= */

/**
 * Show/hide elements based on screen size
 * Useful for adapting UI elements across breakpoints
 */

/* Hide on mobile (0-480px) */
.hide-mobile {
    display: none !important;
}

@media (min-width: 481px) {
    .hide-mobile {
        display: block !important;
    }
}

/* Hide on tablet (481-768px) */
@media (min-width: 481px) and (max-width: 768px) {
    .hide-tablet {
        display: none !important;
    }
}

/* Hide on desktop (769px+) */
@media (min-width: 769px) {
    .hide-desktop {
        display: none !important;
    }
}

/* Show only on mobile */
.show-mobile-only {
    display: block !important;
}

@media (min-width: 481px) {
    .show-mobile-only {
        display: none !important;
    }
}

/* Show only on tablet */
.show-tablet-only {
    display: none !important;
}

@media (min-width: 481px) and (max-width: 768px) {
    .show-tablet-only {
        display: block !important;
    }
}

/* Show only on desktop */
.show-desktop-only {
    display: none !important;
}

@media (min-width: 769px) {
    .show-desktop-only {
        display: block !important;
    }
}

/* Show on mobile and tablet */
.show-mobile-tablet {
    display: block !important;
}

@media (min-width: 769px) {
    .show-mobile-tablet {
        display: none !important;
    }
}

/* Show on tablet and desktop */
.show-tablet-desktop {
    display: none !important;
}

@media (min-width: 481px) {
    .show-tablet-desktop {
        display: block !important;
    }
}

/* Inline display variants */
.hide-mobile.inline { display: none !important; }
@media (min-width: 481px) {
    .hide-mobile.inline { display: inline !important; }
}

.show-mobile-only.inline { display: inline !important; }
@media (min-width: 481px) {
    .show-mobile-only.inline { display: none !important; }
}

/* Flex display variants */
.hide-mobile.flex { display: none !important; }
@media (min-width: 481px) {
    .hide-mobile.flex { display: flex !important; }
}

.show-mobile-only.flex { display: flex !important; }
@media (min-width: 481px) {
    .show-mobile-only.flex { display: none !important; }
}

/* =======================================================================
   13. RESPONSIVE FLEXBOX UTILITIES
   ======================================================================= */

/**
 * Flexbox utilities with responsive variants
 * Pattern: .{property}-{breakpoint}
 */

/* Display flex */
.d-flex { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }
.d-block { display: block !important; }
.d-inline-block { display: inline-block !important; }
.d-none { display: none !important; }

/* Flex direction */
.flex-row { flex-direction: row !important; }
.flex-column { flex-direction: column !important; }
.flex-row-reverse { flex-direction: row-reverse !important; }
.flex-column-reverse { flex-direction: column-reverse !important; }

/* Flex wrap */
.flex-wrap { flex-wrap: wrap !important; }
.flex-nowrap { flex-wrap: nowrap !important; }
.flex-wrap-reverse { flex-wrap: wrap-reverse !important; }

/* Justify content */
.justify-start { justify-content: flex-start !important; }
.justify-end { justify-content: flex-end !important; }
.justify-center { justify-content: center !important; }
.justify-between { justify-content: space-between !important; }
.justify-around { justify-content: space-around !important; }
.justify-evenly { justify-content: space-evenly !important; }

/* Align items */
.items-start { align-items: flex-start !important; }
.items-end { align-items: flex-end !important; }
.items-center { align-items: center !important; }
.items-baseline { align-items: baseline !important; }
.items-stretch { align-items: stretch !important; }

/* Align self */
.self-start { align-self: flex-start !important; }
.self-end { align-self: flex-end !important; }
.self-center { align-self: center !important; }
.self-baseline { align-self: baseline !important; }
.self-stretch { align-self: stretch !important; }

/* Flex grow and shrink */
.flex-grow-0 { flex-grow: 0 !important; }
.flex-grow-1 { flex-grow: 1 !important; }
.flex-shrink-0 { flex-shrink: 0 !important; }
.flex-shrink-1 { flex-shrink: 1 !important; }

/* Gap utilities */
.gap-0 { gap: 0 !important; }
.gap-1 { gap: var(--spacing-xs) !important; }
.gap-2 { gap: var(--spacing-sm) !important; }
.gap-3 { gap: var(--spacing-md) !important; }
.gap-4 { gap: var(--spacing-lg) !important; }
.gap-5 { gap: var(--spacing-xl) !important; }
.gap-6 { gap: var(--spacing-xxl) !important; }

/* Responsive flex direction */
@media (max-width: 768px) {
    .flex-mobile-column { flex-direction: column !important; }
    .flex-mobile-row { flex-direction: row !important; }
}

@media (min-width: 769px) {
    .flex-desktop-row { flex-direction: row !important; }
    .flex-desktop-column { flex-direction: column !important; }
}

/* Responsive justify content */
@media (max-width: 768px) {
    .justify-mobile-start { justify-content: flex-start !important; }
    .justify-mobile-center { justify-content: center !important; }
    .justify-mobile-between { justify-content: space-between !important; }
}

/* Responsive align items */
@media (max-width: 768px) {
    .items-mobile-start { align-items: flex-start !important; }
    .items-mobile-center { align-items: center !important; }
    .items-mobile-stretch { align-items: stretch !important; }
}

/* =======================================================================
   14. PRINT STYLES
   ======================================================================= */

/**
 * Optimized styles for printing
 * Hides navigation, simplifies layout, ensures readability
 */

@media print {
    /* Hide non-essential elements */
    .navbar,
    .navbar-toggle,
    .btn,
    button,
    .modal,
    .modal-backdrop,
    .toast-container,
    .dropdown-menu-invoices,
    .hide-print {
        display: none !important;
    }

    /* Reset body styles */
    body {
        background-color: white !important;
        color: black !important;
        font-size: 12pt;
        line-height: 1.5;
    }

    /* Container adjustments */
    .container {
        max-width: 100%;
        margin: 0;
        padding: 0;
    }

    /* Card styles for print */
    .card {
        border: 1px solid #000;
        box-shadow: none;
        page-break-inside: avoid;
        margin-bottom: 1rem;
    }

    /* Table styles for print */
    table {
        border-collapse: collapse;
        width: 100%;
        page-break-inside: auto;
    }

    thead {
        display: table-header-group;
        background-color: #f0f0f0 !important;
        color: #000 !important;
    }

    tr {
        page-break-inside: avoid;
        page-break-after: auto;
    }

    th, td {
        border: 1px solid #000;
        padding: 0.5rem;
        text-align: left;
    }

    /* Typography for print */
    h1, h2, h3, h4, h5, h6 {
        page-break-after: avoid;
        page-break-inside: avoid;
    }

    /* Links */
    a[href]:after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        font-style: italic;
    }

    /* Prevent orphans and widows */
    p, li {
        orphans: 3;
        widows: 3;
    }

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

    .page-break-after {
        page-break-after: always;
    }

    .no-page-break {
        page-break-inside: avoid;
    }
}

/* =======================================================================
   15. ACCESSIBILITY ENHANCEMENTS
   ======================================================================= */

/**
 * Improved accessibility for keyboard and screen reader users
 * Focus states and skip links
 */

/* Enhanced focus states for keyboard navigation */
*:focus-visible {
    outline: 3px solid var(--brand);
    outline-offset: 2px;
}

/* Skip to main content link */
.skip-to-main {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--brand);
    color: white;
    padding: 0.5rem 1rem;
    text-decoration: none;
    z-index: 9999;
}

.skip-to-main:focus {
    top: 0;
}

/* Screen reader only content */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.sr-only-focusable:focus,
.sr-only-focusable:active {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

/* Reduced motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* =======================================================================
   16. UTILITY CLASSES - ADDITIONAL
   ======================================================================= */

/* Text alignment - responsive */
.text-left { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }
.text-justify { text-align: justify !important; }

@media (max-width: 768px) {
    .text-mobile-center { text-align: center !important; }
    .text-mobile-left { text-align: left !important; }
}

/* Width utilities */
.w-25 { width: 25% !important; }
.w-50 { width: 50% !important; }
.w-75 { width: 75% !important; }
.w-100 { width: 100% !important; }
.w-auto { width: auto !important; }

@media (max-width: 768px) {
    .w-mobile-100 { width: 100% !important; }
}

/* Height utilities */
.h-25 { height: 25% !important; }
.h-50 { height: 50% !important; }
.h-75 { height: 75% !important; }
.h-100 { height: 100% !important; }
.h-auto { height: auto !important; }

/* Position utilities */
.position-static { position: static !important; }
.position-relative { position: relative !important; }
.position-absolute { position: absolute !important; }
.position-fixed { position: fixed !important; }
.position-sticky { position: sticky !important; }

/* Overflow utilities */
.overflow-auto { overflow: auto !important; }
.overflow-hidden { overflow: hidden !important; }
.overflow-visible { overflow: visible !important; }
.overflow-scroll { overflow: scroll !important; }

/* Border radius utilities */
.rounded-0 { border-radius: 0 !important; }
.rounded-sm { border-radius: 4px !important; }
.rounded { border-radius: 6px !important; }
.rounded-lg { border-radius: 8px !important; }
.rounded-full { border-radius: 9999px !important; }

/* Shadow utilities */
.shadow-none { box-shadow: none !important; }
.shadow-sm { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important; }
.shadow { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important; }
.shadow-lg { box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important; }

/* Cursor utilities */
.cursor-pointer { cursor: pointer !important; }
.cursor-default { cursor: default !important; }
.cursor-not-allowed { cursor: not-allowed !important; }

/* User select utilities */
.select-none { user-select: none !important; }
.select-text { user-select: text !important; }
.select-all { user-select: all !important; }

/* =======================================================================
   END OF RESPONSIVE CSS
   ======================================================================= */