/**
 * Layout - Responsive core (header, navigation, footer, menu mobile)
 * Elements toujours charges sur toutes les pages
 */

/* ========================================
   COMPOSANTS GLOBAUX
   ======================================== */

.empty_state {
    text-align: center;
    padding: 48px 24px;
    color: var(--color-text-secondary);
}

.sortable_header {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    user-select: none;
}

.sortable_header:hover {
    color: var(--color-primary);
}

.sort_arrow {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    line-height: 0.7;
    font-size: 8px;
}

.sort_up,
.sort_down {
    opacity: 0.3;
}

/* Sens trié mis en valeur (plein + couleur) ; l'autre flèche reste estompée. */
.sortable_header[data-order="asc"] .sort_up,
.sortable_header[data-order="desc"] .sort_down {
    opacity: 1;
    color: var(--color-primary);
}

/* ========================================
   TABLETTE (max-width: 1350px)
   ======================================== */

@media (max-width: 1350px) {
    /* Header */
    .header_container {
        gap: 16px;
    }

    /* Cacher la navigation desktop */
    .navigation {
        display: none;
    }

    /* Afficher le bouton hamburger */
    .header_menu_toggle {
        display: block;
        order: 3;
    }

    .header_user {
        order: 2;
        margin-left: auto;
    }

    .user_name,
    .user_name_static {
        display: none;
    }

    /* Footer */
    .footer_container {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }
}

/* ========================================
   MOBILE (max-width: 500px)
   ======================================== */

@media (max-width: 500px) {
    :root {
        --text-title: 22px;
        --text-subtitle: 16px;
    }

    .main_content {
        padding: 12px;
    }

    .header_container {
        padding: 0 16px;
    }

    .card {
        padding: 16px;
    }

    /* Page header */
    .page_header {
        margin-bottom: 24px;
    }

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

    /* Menu mobile - plus large sur petit ecran */
    .menu_mobile {
        width: 85%;
        max-width: 300px;
    }
}