/* ============================================================
   DESIGN RESPONSIVE - KinéHand
   Mobile First - Accessible sur tous les appareils
   ============================================================ */

/* ============ RESPONSIVE BREAKPOINTS ============ */
/* Mobile & Tablette: < 1024px
   Desktop: >= 1024px */

/* ============ LAYOUT RESPONSIF ============ */

/* MOBILE & TABLETTE (< 1024px) */
@media (max-width: 1023px) {
    body {
        font-size: 14px;
    }

    .sidebar-active {
        position: fixed;
        left: -100%;
        top: 0;
        width: 100%;
        max-width: 280px;
        height: 100vh;
        transition: left 0.3s ease;
        z-index: 50;
        background: white;
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
    }

    .sidebar-active.open {
        left: 0;
    }

    /* Overlay derrière la sidebar */
    .sidebar-active::before {
        content: '';
        position: fixed;
        left: 0;
        top: 0;
        width: 100vw;
        height: 100vh;
        display: none;
        z-index: -1;
    }

    .sidebar-active.open::before {
        display: block;
    }

    /* Bouton de fermeture sidebar */
    .sidebar-close-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        padding: 8px !important;
        min-width: 36px;
        min-height: 36px;
    }

    .sidebar-close-btn:hover {
        background: #f1f5f9 !important;
    }

    .flex-1.ml-\[300px\] {
        margin-left: 0 !important;
        width: 100%;
    }

    /* Header responsive */
    .header-bar {
        padding: 12px 16px !important;
        height: auto;
    }

    #pageTitle {
        font-size: 18px !important;
    }

    /* Contenu avec padding ajusté */
    main {
        padding: 12px 12px !important;
    }

    /* Grille de stat cards */
    .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4 {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .stat-card {
        padding: 12px !important;
    }

    .stat-card p {
        font-size: 12px;
    }

    .stat-card .text-3xl {
        font-size: 24px !important;
    }

    /* Tables */
    .overflow-x-auto {
        font-size: 12px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    table th,
    table td {
        padding: 8px 12px !important;
        font-size: 12px;
    }

    /* Boutons */
    .btn-primary,
    .btn-cancel,
    .btn-save {
        padding: 10px 16px !important;
        font-size: 14px !important;
    }

    /* Modal responsive */
    .modal-edit {
        padding: 12px !important;
    }

    .modal-edit-content {
        width: 100% !important;
        max-width: 95vw !important;
        margin: auto !important;
    }

    /* Formulaires */
    .form-group {
        margin-bottom: 12px !important;
    }

    .form-input,
    .form-control {
        font-size: 16px !important;
        padding: 12px !important;
    }

    /* Avatar profile sur mobile */
    .w-32.h-32 {
        width: 80px !important;
        height: 80px !important;
        font-size: 36px !important;
    }

    /* Texte header profile */
    .text-4xl {
        font-size: 24px !important;
    }

    /* Profil info cards */
    .grid.grid-cols-1.md\:grid-cols-2 {
        grid-template-columns: 1fr !important;
    }

    /* Hamburger menu button */
    .hamburger-btn {
        display: flex !important;
        width: 40px;
        height: 40px;
        align-items: center;
        justify-content: center;
        background: white;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.2s;
    }

    .hamburger-btn:active {
        background: #f1f5f9;
    }

    .hamburger-btn svg {
        width: 20px;
        height: 20px;
    }

    /* Flexbox pour responsive forms */
    .flex.gap-3.mt-8 {
        flex-direction: column;
        gap: 8px !important;
    }

    .btn-save,
    .btn-cancel {
        flex: 1 !important;
        width: 100% !important;
    }

    /* User profile menu */
    .user-avatar {
        width: 36px !important;
        height: 36px !important;
        font-size: 16px !important;
    }

    .user-avatar.cursor-pointer {
        min-width: 36px;
        min-height: 36px;
    }

    /* Dropdown menu position */
    .dropdown-menu {
        position: fixed !important;
        top: 60px !important;
        right: 12px !important;
        width: calc(100vw - 24px) !important;
        max-width: 280px !important;
        left: auto !important;
    }
}

/* DESKTOP (>= 1024px) */
@media (min-width: 1024px) {
    .sidebar-active {
        width: 300px;
    }

    .flex-1.ml-\[300px\] {
        margin-left: 300px !important;
    }

    /* Grille de stat cards */
    .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4 {
        grid-template-columns: repeat(4, 1fr) !important;
    }

    /* Hamburger menu caché */
    .hamburger-btn {
        display: none !important;
    }

    /* Bouton de fermeture sidebar caché sur desktop */
    .sidebar-close-btn {
        display: none !important;
    }
}

/* ============ AMÉLIORATIONS GÉNÉRALES ============ */

/* Sidebar nav items responsive */
.sidebar-nav-item {
    font-size: 14px;
    padding: 12px 16px;
}

.sidebar-nav-label {
    /* Cacher le texte sur très petit mobile si nécessaire */
}

/* Tables scrollables */
.overflow-x-auto {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 8px;
}

table {
    min-width: 100%;
}

/* Touch-friendly buttons */
button {
    min-height: 44px !important;
    min-width: 44px !important;
}

a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

/* Forms touchable */
input,
select,
textarea {
    min-height: 44px !important;
    font-size: 16px !important;
}

/* Spacing pour mobile & tablette */
@media (max-width: 1023px) {
    .space-y-6 {
        gap: 16px !important;
    }

    .gap-6 {
        gap: 12px !important;
    }

    .mb-8 {
        margin-bottom: 16px !important;
    }

    .mt-6 {
        margin-top: 16px !important;
    }

    .p-8 {
        padding: 16px !important;
    }

    .p-6 {
        padding: 12px !important;
    }
}

/* ============ HEADER RESPONSIVE ============ */

.header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.header-bar > div:first-child {
    display: flex;
    align-items: center;
    gap: 8px;
}

.header-bar > div:last-child {
    display: flex;
    align-items: center;
    gap: 8px;
}

@media (max-width: 1023px) {
    .header-bar > div:last-child {
        margin-left: auto;
    }
}

/* ============ PROFILE RESPONSIVE ============ */

.profile-avatar-container {
    position: relative;
    display: inline-block;
}

.profile-avatar-upload {
    position: absolute;
    bottom: 0;
    right: 0;
    background: #00938a;
    color: white;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.profile-avatar-upload:hover {
    background: #2BA7A0;
    transform: scale(1.1);
}

@media (max-width: 1023px) {
    .profile-avatar-upload {
        width: 30px;
        height: 30px;
    }

    .profile-avatar-upload svg {
        width: 16px;
        height: 16px;
    }
}

/* ============ TOAST NOTIFICATIONS ============ */

#toastContainer {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 9999;
    max-width: calc(100vw - 32px);
}

@media (max-width: 1023px) {
    #toastContainer {
        top: 12px;
        right: 12px;
        left: 12px;
        max-width: calc(100vw - 24px);
    }
}

/* ============ GRID RESPONSIVE ============ */

/* Grid layouts */
.grid {
    display: grid;
    gap: 16px;
}

@media (max-width: 1023px) {
    .grid.grid-cols-3 {
        grid-template-columns: 1fr !important;
    }

    .grid.grid-cols-2 {
        grid-template-columns: 1fr !important;
    }

    .lg\:col-span-2 {
        grid-column: span 1 !important;
    }

    .lg\:col-span-3 {
        grid-column: span 1 !important;
    }
}

/* ============ VISIBILITY RESPONSIVE ============ */

@media (max-width: 1023px) {
    .hidden-mobile {
        display: none !important;
    }

    .hidden-tablet {
        display: none !important;
    }
}