/* ============================================
   RESPONSIVE 2026 - Modern CSS Best Practices
   Standards: WCAG 2.2, Container Queries, Fluid Typography
   ============================================ */

/* === FLUID TYPOGRAPHY SYSTEM ===
   Using clamp() for smooth scaling
   Reference: https://www.smashingmagazine.com/2022/01/modern-fluid-typography-css-clamp/
*/
:root {
    /* Fluid Font Sizes - Mobile First */
    --font-size-xs: clamp(0.625rem, 0.6rem + 0.25vw, 0.75rem);      /* 10-12px */
    --font-size-sm: clamp(0.75rem, 0.7rem + 0.35vw, 0.875rem);      /* 12-14px */
    --font-size-base: clamp(0.875rem, 0.8rem + 0.5vw, 1rem);        /* 14-16px */
    --font-size-md: clamp(1rem, 0.9rem + 0.6vw, 1.125rem);          /* 16-18px */
    --font-size-lg: clamp(1.125rem, 1rem + 0.75vw, 1.375rem);       /* 18-22px */
    --font-size-xl: clamp(1.25rem, 1.1rem + 1vw, 1.75rem);          /* 20-28px */
    --font-size-2xl: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);        /* 24-36px */
    --font-size-3xl: clamp(1.875rem, 1.5rem + 2vw, 3rem);           /* 30-48px */

    /* Fluid Spacing */
    --space-fluid-xs: clamp(0.25rem, 0.2rem + 0.25vw, 0.5rem);
    --space-fluid-sm: clamp(0.5rem, 0.4rem + 0.5vw, 0.75rem);
    --space-fluid-md: clamp(0.75rem, 0.6rem + 0.75vw, 1.25rem);
    --space-fluid-lg: clamp(1rem, 0.8rem + 1vw, 1.75rem);
    --space-fluid-xl: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);

    /* Touch Target - WCAG 2.2 AAA = 44px minimum */
    --touch-target-min: 44px;
    --touch-target-recommended: 48px;

    /* Container Widths */
    --container-sm: min(100% - 2rem, 640px);
    --container-md: min(100% - 2rem, 768px);
    --container-lg: min(100% - 2rem, 1024px);
    --container-xl: min(100% - 2rem, 1280px);
    --container-2xl: min(100% - 2rem, 1536px);

    /* Dynamic Viewport Height (for mobile browsers with address bar) */
    --dvh: 1dvh;
}

/* Fallback for browsers without dvh support */
@supports not (height: 1dvh) {
    :root {
        --dvh: 1vh;
    }
}

/* === APPLY FLUID TYPOGRAPHY === */
body {
    font-size: var(--font-size-base);
    line-height: 1.6;
}

h1, .h1 {
    font-size: var(--font-size-3xl);
    line-height: 1.2;
}

h2, .h2 {
    font-size: var(--font-size-2xl);
    line-height: 1.25;
}

h3, .h3 {
    font-size: var(--font-size-xl);
    line-height: 1.3;
}

h4, .h4 {
    font-size: var(--font-size-lg);
    line-height: 1.35;
}

h5, .h5, h6, .h6 {
    font-size: var(--font-size-md);
    line-height: 1.4;
}

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

.text-xs {
    font-size: var(--font-size-xs);
}

/* === TOUCH TARGETS - WCAG 2.2 Compliance ===
   Reference: https://www.w3.org/WAI/WCAG22/Understanding/target-size-enhanced.html
*/
.btn,
.nav-link,
.tab,
button,
[role="button"],
input[type="submit"],
input[type="button"],
input[type="reset"],
a.clickable {
    min-height: var(--touch-target-min);
    min-width: var(--touch-target-min);
}

/* Small buttons still need touch-friendly spacing */
.btn-sm {
    min-height: 40px;
    padding: 0.5rem 1rem;
}

/* Icon-only buttons */
.btn-icon,
.icon-btn {
    min-width: var(--touch-target-min);
    min-height: var(--touch-target-min);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Form Controls */
.form-control,
.form-select,
select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
textarea {
    min-height: var(--touch-target-min);
    font-size: max(16px, var(--font-size-base)); /* Prevent iOS zoom */
    padding: var(--space-fluid-sm) var(--space-fluid-md);
}

/* Checkboxes & Radios */
input[type="checkbox"],
input[type="radio"] {
    min-width: 24px;
    min-height: 24px;
}

/* === CONTAINER QUERIES - 2026 Standard ===
   Reference: https://blog.logrocket.com/container-queries-2026
*/

/* Define containers */
.card,
.stat-card,
.kpi-card,
.chart-card,
.config-section,
.alert-item,
.demande-card,
.equipement-card {
    container-type: inline-size;
}

/* Card responsive behavior based on container width */
@container (max-width: 300px) {
    .card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .card-actions {
        width: 100%;
        justify-content: flex-end;
    }

    .stat-value {
        font-size: var(--font-size-xl);
    }
}

@container (min-width: 301px) and (max-width: 500px) {
    .card-content {
        padding: var(--space-fluid-md);
    }
}

@container (min-width: 501px) {
    .card-content {
        padding: var(--space-fluid-lg);
    }
}

/* === MOBILE-FIRST BREAKPOINTS === */

/* Base styles = Mobile (< 576px) */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    .container {
        max-width: var(--container-sm);
    }

    .grid-responsive {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .container {
        max-width: var(--container-md);
    }

    .grid-responsive {
        grid-template-columns: repeat(2, 1fr);
    }

    .hide-mobile {
        display: initial;
    }

    .show-mobile-only {
        display: none;
    }

    /* Tables become scrollable on mobile, normal on tablet+ */
    .table-responsive-wrapper {
        overflow-x: visible;
    }
}

/* Large devices (desktops, 1024px and up) */
@media (min-width: 1024px) {
    .container {
        max-width: var(--container-lg);
    }

    .grid-responsive {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Sidebar visible on desktop */
    .sidebar-desktop {
        display: block;
    }
}

/* Extra large devices (large desktops, 1280px and up) */
@media (min-width: 1280px) {
    .container {
        max-width: var(--container-xl);
    }

    .grid-responsive {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* 2XL devices (1536px and up) */
@media (min-width: 1536px) {
    .container {
        max-width: var(--container-2xl);
    }
}

/* === MOBILE SPECIFIC FIXES === */
@media (max-width: 575.98px) {
    /* Full-width buttons on mobile */
    .btn-mobile-full {
        width: 100%;
    }

    /* Stack horizontal layouts */
    .flex-mobile-column {
        flex-direction: column;
    }

    /* Hide non-essential on mobile */
    .hide-mobile {
        display: none !important;
    }

    /* Show mobile-only elements */
    .show-mobile-only {
        display: block;
    }

    /* Tables scroll horizontally */
    .table-responsive-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Modal full-width on mobile */
    .modal {
        max-width: calc(100vw - 1rem) !important;
        margin: 0.5rem;
    }

    /* Reduce padding on mobile */
    .page-content {
        padding: var(--space-fluid-sm);
    }

    /* Stack form rows */
    .form-row,
    .form-grid {
        grid-template-columns: 1fr !important;
    }

    /* Bottom navigation padding */
    body {
        padding-bottom: calc(70px + env(safe-area-inset-bottom));
    }
}

/* === TABLET SPECIFIC === */
@media (min-width: 576px) and (max-width: 1023.98px) {
    /* 2 columns for grids */
    .grid-auto-fit {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Sidebar overlay on tablet */
    .sidebar {
        position: fixed;
        z-index: 1000;
        transform: translateX(-100%);
        transition: transform var(--transition-normal);
    }

    .sidebar.open {
        transform: translateX(0);
    }
}

/* === LANDSCAPE MODE FIX === */
@media (max-height: 500px) and (orientation: landscape) {
    /* Reduce vertical spacing */
    .header {
        padding-block: var(--space-fluid-xs);
    }

    .modal {
        max-height: 95vh;
    }

    /* Horizontal scrolling for bottom nav */
    .bottom-nav {
        overflow-x: auto;
    }
}

/* === SAFE AREAS (iPhone notch, etc.) === */
@supports (padding: max(0px)) {
    .header {
        padding-top: max(var(--spacing-md), env(safe-area-inset-top));
        padding-left: max(var(--spacing-lg), env(safe-area-inset-left));
        padding-right: max(var(--spacing-lg), env(safe-area-inset-right));
    }

    .bottom-nav {
        padding-bottom: max(var(--spacing-sm), env(safe-area-inset-bottom));
    }

    .page-content {
        padding-left: max(var(--spacing-lg), env(safe-area-inset-left));
        padding-right: max(var(--spacing-lg), env(safe-area-inset-right));
    }
}

/* === 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;
    }
}

/* === DARK MODE ENHANCEMENTS === */
@media (prefers-color-scheme: dark) {
    /* Already dark theme, but ensure contrast */
    :root {
        color-scheme: dark;
    }
}

/* === PRINT STYLES === */
@media print {
    .no-print,
    .bottom-nav,
    .sidebar,
    .btn,
    button {
        display: none !important;
    }

    body {
        background: white;
        color: black;
    }

    .card {
        border: 1px solid #ccc;
        break-inside: avoid;
    }
}

/* === SPECIFIC PAGE FIXES === */

/* Console page - KPI grid */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
    gap: var(--space-fluid-md);
}

/* Charts grid - responsive */
.charts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(350px, 100%), 1fr));
    gap: var(--space-fluid-lg);
}

/* Config grid - responsive */
.config-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: var(--space-fluid-md);
}

/* Stats grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
    gap: var(--space-fluid-sm);
}

/* Table responsive */
.table-container {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

table {
    min-width: 100%;
}

/* Fix table columns on mobile */
@media (max-width: 767.98px) {
    table th,
    table td {
        padding: var(--space-fluid-sm);
        font-size: var(--font-size-sm);
    }

    /* Hide less important columns on mobile */
    .hide-mobile-table {
        display: none;
    }
}

/* Modal responsive improvements */
.modal {
    width: min(95vw, 600px);
    max-height: min(90vh, 90dvh);
    margin: auto;
}

.modal-lg {
    width: min(95vw, 900px);
}

.modal-sm {
    width: min(95vw, 400px);
}

/* Form improvements */
.form-group {
    margin-bottom: var(--space-fluid-md);
}

.form-label {
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-fluid-xs);
}

/* Button group responsive */
.btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-fluid-xs);
}

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

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

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

/* Responsive text alignment */
.text-center-mobile {
    text-align: center;
}

@media (min-width: 768px) {
    .text-center-mobile {
        text-align: inherit;
    }
}

/* Responsive display */
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-flex { display: flex !important; }
.d-grid { display: grid !important; }

@media (min-width: 576px) {
    .d-sm-none { display: none !important; }
    .d-sm-block { display: block !important; }
    .d-sm-flex { display: flex !important; }
    .d-sm-grid { display: grid !important; }
}

@media (min-width: 768px) {
    .d-md-none { display: none !important; }
    .d-md-block { display: block !important; }
    .d-md-flex { display: flex !important; }
    .d-md-grid { display: grid !important; }
}

@media (min-width: 1024px) {
    .d-lg-none { display: none !important; }
    .d-lg-block { display: block !important; }
    .d-lg-flex { display: flex !important; }
    .d-lg-grid { display: grid !important; }
}

/* Responsive gap */
.gap-responsive {
    gap: var(--space-fluid-md);
}

/* Responsive padding */
.p-responsive {
    padding: var(--space-fluid-md);
}

.px-responsive {
    padding-inline: var(--space-fluid-md);
}

.py-responsive {
    padding-block: var(--space-fluid-md);
}

/* Aspect ratio utilities */
.aspect-square { aspect-ratio: 1; }
.aspect-video { aspect-ratio: 16 / 9; }
.aspect-portrait { aspect-ratio: 3 / 4; }

/* Overflow utilities */
.overflow-x-auto {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.overflow-y-auto {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* === SPECIFIC COMPONENT FIXES === */

/* Header responsive */
.header-content {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-fluid-sm);
    align-items: center;
    justify-content: space-between;
}

@media (max-width: 575.98px) {
    .header-content {
        flex-direction: column;
        align-items: stretch;
    }

    .header-actions {
        justify-content: center;
    }
}

/* Navigation tabs responsive */
.nav-tabs {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    gap: var(--space-fluid-xs);
}

.nav-tabs::-webkit-scrollbar {
    display: none;
}

.nav-tabs .tab {
    flex-shrink: 0;
    white-space: nowrap;
}

/* Console tabs responsive */
.console-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-fluid-xs);
}

@media (max-width: 767.98px) {
    .console-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        padding-bottom: var(--space-fluid-xs);
    }

    .console-tab {
        flex-shrink: 0;
        font-size: var(--font-size-sm);
        padding: var(--space-fluid-sm);
    }
}

/* Detail grid responsive */
.detail-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-fluid-lg);
}

@media (min-width: 1024px) {
    .detail-grid {
        grid-template-columns: 2fr 1fr;
    }
}

/* Action buttons group */
.action-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-fluid-xs);
}

@media (max-width: 575.98px) {
    .action-buttons {
        width: 100%;
    }

    .action-buttons .btn {
        flex: 1;
        min-width: calc(50% - var(--space-fluid-xs));
    }
}

/* Alert/Notification items */
.alert-item {
    padding: var(--space-fluid-md);
}

@container (max-width: 400px) {
    .alert-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .alert-item .alert-actions {
        margin-top: var(--space-fluid-sm);
        width: 100%;
    }
}

/* Demande card responsive */
.demande-card {
    container-type: inline-size;
}

@container (max-width: 350px) {
    .demande-card .demande-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-fluid-xs);
    }

    .demande-card .demande-meta {
        flex-wrap: wrap;
    }
}

/* Empty state responsive */
.empty-state {
    padding: var(--space-fluid-xl);
    text-align: center;
}

.empty-state-icon {
    font-size: var(--font-size-3xl);
    margin-bottom: var(--space-fluid-md);
}

/* Loading states */
.skeleton {
    background: linear-gradient(
        90deg,
        var(--bg-tertiary) 25%,
        var(--bg-card-hover) 50%,
        var(--bg-tertiary) 75%
    );
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    border-radius: var(--radius-md);
}

@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Image responsive */
img {
    max-width: 100%;
    height: auto;
}

/* Video responsive */
video,
iframe {
    max-width: 100%;
    aspect-ratio: 16 / 9;
}

/* === FOCUS VISIBLE FOR ACCESSIBILITY === */
:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

/* Remove outline for mouse users */
:focus:not(:focus-visible) {
    outline: none;
}