/* =============================================================================
   LAYOUT - RESPONSIVE STYLES
   Path: /css/_shared/_layout-responsive.css
   
   Purpose: ALL media queries for the main layout.
   Dependencies: _variables.css, _typography.css, _layout-base.css, _layout-theme.css
   
   Approach: Desktop-first (use max-width queries)
   ========================================================================== */

/* =============================================================================
   LARGE DESKTOP (≥992px) - Sidebar always visible
   ========================================================================== */

@media (min-width: 992px) {
    /* Prevent body scroll when sidebar layout is active */
    body {
        overflow: hidden;
    }

    .layout-shell {
        display: flex;
        align-items: flex-start;
        min-height: calc(100vh - var(--navbar-height));
        gap: 0;
    }

    /* Sidebar: Fixed position, always visible */
    #sidebar.offcanvas-lg {
        position: fixed;
        top: var(--navbar-height);
        left: 0;
        bottom: 0;
        transform: none !important;
        visibility: visible !important;
        opacity: 1 !important;
        box-shadow: none !important;
        border-right: 1px solid var(--border);
        width: var(--sidebar-width);
        max-width: var(--sidebar-width);
        flex: 0 0 var(--sidebar-width);
        height: calc(100vh - var(--navbar-height));
        overflow: hidden;
        z-index: var(--z-sidebar);
        background-color: var(--bg);
    }

    #sidebar .offcanvas-body {
        height: 100%;
        overflow-y: auto;
    }

    /* Main content: Offset by sidebar width */
    .with-sidebar {
        flex: 1 1 auto;
        min-width: 0;
        margin-left: var(--sidebar-width) !important;
        padding-left: var(--space-4);
        padding-right: var(--space-4);
        height: calc(100vh - var(--navbar-height));
        overflow-y: auto;
        overflow-x: hidden;
    }

    .with-sidebar .content,
    .with-sidebar .main-content {
        margin-left: 0 !important;
        padding-left: 0 !important;
    }

    /* Hide backdrop on desktop */
    .offcanvas-backdrop {
        display: none !important;
    }
}

/* =============================================================================
   TABLET (768px - 991px)
   ========================================================================== */

@media (min-width: 768px) and (max-width: 991.98px) {
    .with-sidebar {
        padding: var(--space-4);
    }

    /* Sidebar as overlay */
    #sidebar.offcanvas {
        width: 280px;
    }
}

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

@media (max-width: 767.98px) {
    /* Navbar adjustments */
    .navbar {
        padding: 0 var(--space-3);
    }

    .navbar-brand-logo {
        height: 28px;
    }

    /* Content padding */
    .with-sidebar {
        padding: var(--space-3);
    }

    /* Sidebar width */
    #sidebar.offcanvas {
        width: 280px;
    }

    /* Alert styling */
    .alert-success#successAlert {
        border-left-width: 3px;
        font-size: var(--font-sm);
    }

    /* Ensure touch targets */
    .btn {
        min-height: var(--touch-target-min);
    }

    .btn-sm {
        min-height: var(--touch-target-min);
    }

    /* Prevent iOS zoom on input focus */
    .form-control,
    .form-select,
    input,
    textarea,
    select {
        font-size: 16px !important;
    }

    /* Dropdown full width on mobile */
    .dropdown-menu {
        width: calc(100vw - var(--space-6));
        max-width: 320px;
    }

    /* Cards: less padding */
    .card-body {
        padding: var(--space-3);
    }

    /* Tables: smaller text */
    .table {
        font-size: var(--font-xs);
    }

    .table th,
    .table td {
        padding: var(--space-2);
    }
}

/* =============================================================================
   SMALL MOBILE (<576px)
   ========================================================================== */

@media (max-width: 575.98px) {
    /* Even tighter spacing */
    .with-sidebar {
        padding: var(--space-2);
    }

    .container-fluid {
        padding-left: var(--space-2);
        padding-right: var(--space-2);
    }

    /* Stack buttons */
    .d-flex.gap-2 {
        flex-direction: column;
    }

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

    /* Full-width cards */
    .card {
        border-radius: 0;
        border-left: none;
        border-right: none;
        margin-left: calc(-1 * var(--space-2));
        margin-right: calc(-1 * var(--space-2));
    }
}

/* =============================================================================
   EXTRA SMALL (<375px)
   ========================================================================== */

@media (max-width: 374px) {
    /* Minimum font sizes */
    .form-label,
    label {
        font-size: var(--font-xs);
    }

    /* Sidebar narrower */
    #sidebar.offcanvas {
        width: 260px;
    }
}

/* =============================================================================
   TOUCH DEVICES
   ========================================================================== */

@media (pointer: coarse) {
    /* Larger touch targets */
    .btn {
        min-height: var(--touch-target-min);
        min-width: var(--touch-target-min);
    }

    .nav-link {
        min-height: var(--touch-target-min);
        padding-top: var(--space-3);
        padding-bottom: var(--space-3);
    }

    .dropdown-item {
        min-height: var(--touch-target-min);
        padding-top: var(--space-3);
        padding-bottom: var(--space-3);
    }

    /* Larger form controls */
    .form-control,
    .form-select {
        min-height: var(--touch-target-min);
    }
}

/* =============================================================================
   HIGH CONTRAST MODE
   ========================================================================== */

@media (prefers-contrast: high) {
    :root {
        --border: #000000;
        --border-light: #333333;
        --text-muted: #555555;
    }

    .btn {
        border-width: 2px;
    }

    .form-control,
    .form-select {
        border-width: 2px;
    }

    a {
        text-decoration: underline;
    }
}

/* =============================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .alert-success#successAlert.show,
    .alert.alert-success[role="alert"].show {
        animation: none;
    }

    .alert-success#successAlert .fa-circle-check,
    .alert.alert-success[role="alert"] .fa-circle-check {
        animation: none;
    }
}

/* =============================================================================
   PRINT STYLES
   ========================================================================== */

@media print {
    /* Hide navigation */
    .navbar,
    #sidebar,
    .offcanvas,
    .offcanvas-backdrop {
        display: none !important;
    }

    /* Full width content */
    .with-sidebar {
        margin-left: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }

    /* Remove backgrounds and shadows */
    body {
        background: white !important;
        color: black !important;
    }

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

    /* Show link URLs */
    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #666;
    }

    /* Avoid page breaks in cards */
    .card {
        break-inside: avoid;
    }

    /* Hide buttons */
    .btn:not(.btn-print) {
        display: none !important;
    }
}