/**
 * Responsive global — Asaris
 * Breakpoints : sm 560px · md 768px · lg 900px
 */

/* Défilement tactile des tableaux larges */
.table-wrap,
.lunas-table-wrap,
.sejour-table-wrap,
.sejours-table-wrap,
.rapports-table-wrap {
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}

/* ——— ≤ 768px (tablettes & téléphones) ——— */
@media (max-width: 768px) {
    body {
        font-size: 14px;
    }

    /* Évite le zoom auto sur iOS lors du focus des champs */
    input,
    select,
    textarea {
        font-size: 16px;
    }

    .main {
        padding: 18px 14px 40px;
    }

    .lunas-shell {
        padding: 0 14px 40px;
    }

    body.page-compact .lunas-shell {
        padding: 12px 12px 16px;
    }

    body.page-compact .app-header {
        padding: 6px 12px;
    }

    .lunas-card {
        padding: 18px 16px;
    }

    /* En-tête global */
    .app-header {
        padding: 0 12px;
        gap: 8px;
        min-height: 56px;
    }

    .header-brand {
        flex: 1;
        min-width: 0;
        gap: 10px;
    }

    .header-logo {
        width: 40px !important;
        height: 40px !important;
    }

    .header-app {
        font-size: 1.12rem;
    }

    .header-module {
        font-size: 0.65rem;
        letter-spacing: 0.08em;
    }

    .header-stars {
        display: none;
    }

    .header-nav {
        gap: 6px;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .header-user-pill {
        padding: 4px 10px 4px 4px;
        font-size: 0.8rem;
    }

    .header-user-name {
        display: none;
    }

    .header-nav .btn {
        padding: 8px 12px;
        font-size: 0.78rem;
    }

    /* Topbar pages */
    .lunas-topbar {
        margin: 16px 0 14px;
        gap: 12px;
    }

    .lunas-topbar h1 {
        font-size: 1.45rem;
    }

    .lunas-topbar-right {
        width: 100%;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .lunas-date-chip {
        padding: 8px 12px;
        font-size: 0.76rem;
    }

    .lunas-clock {
        font-size: 1.1rem;
        min-width: 92px;
        padding: 8px 14px;
    }

    /* Hub */
    .hub-hero {
        padding: 24px 20px;
    }

    .hub-hero h2 {
        font-size: 1.55rem;
    }

    .hub-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .hub-tile {
        padding: 20px 18px;
    }

    /* Cartes génériques */
    .card {
        padding: 18px 16px;
    }

    .card h2 {
        font-size: 1.35rem;
    }

    .subnav {
        gap: 6px;
    }

    .subnav-link {
        padding: 7px 11px;
        font-size: 0.8rem;
    }

    /* Dashboard — bannière date */
    .dash-date-banner {
        flex-wrap: wrap;
        padding: 10px 14px;
        gap: 8px;
        font-size: 0.82rem;
    }

    .dash-date-banner strong {
        font-size: 0.95rem;
    }

    .dash-banner-actions {
        width: 100%;
        margin-left: 0;
        justify-content: space-between;
    }

    .dash-date-banner .dash-banner-clock {
        font-size: 1rem;
        min-width: 86px;
        padding: 7px 12px;
    }

    .dash-panel-header {
        padding: 14px 16px;
        flex-wrap: wrap;
        gap: 8px;
    }

    .dash-panel-body {
        padding: 14px;
        max-height: none;
    }

    /* Rapports */
    body.reception-lunas.page-compact .rapports-wrap {
        padding: 14px 12px 18px;
    }

    .rapports-filters {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .rapports-filters label {
        width: 100%;
    }

    .rapports-filters input,
    .rapports-filters select {
        width: 100%;
    }

    .rapports-filters button {
        width: 100%;
    }

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

    /* Listes séjours / réservations */
    body.reception-lunas .sejours-wrap {
        padding: 14px 12px 16px;
        border-radius: 10px;
    }

    .sejours-quick-search {
        margin-left: 0;
        max-width: none;
        width: 100%;
        flex: 1 1 100%;
    }

    .sejours-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .sejours-top-bar {
        flex-direction: column;
    }

    .sejours-top-links {
        width: 100%;
    }

    .sejours-top-links .btn-lunas {
        flex: 1;
        justify-content: center;
    }
}

/* ——— ≤ 560px (petits téléphones) ——— */
@media (max-width: 560px) {
    .dash-func-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    body.dashboard-home .dash-func-card {
        min-height: 108px;
        padding: 14px 12px;
    }

    .dash-func-title {
        font-size: 0.9rem;
    }

    .dash-func-desc {
        display: none;
    }

    .dash-func-icon {
        width: 40px;
        height: 40px;
    }

    .dash-hero-compact .dash-stat-card {
        min-height: 48px;
        padding: 8px;
    }

    .dash-hero-compact .dash-stat-card .stat-val {
        font-size: 1.1rem;
    }

    .dash-guest-card {
        flex-wrap: wrap;
        gap: 10px;
    }

    .dash-guest-status {
        margin-left: 0;
    }

    .rapports-kpis {
        grid-template-columns: 1fr 1fr;
    }

    .rapports-top h1 {
        font-size: 1.05rem;
    }

    .rapports-nav {
        width: 100%;
    }

    .rapports-nav .btn-lunas {
        flex: 1;
        justify-content: center;
    }

    .btn-lunas {
        padding: 10px 16px;
    }

    .quick-actions {
        flex-direction: column;
    }

    .quick-actions .btn-lunas,
    .quick-actions .btn {
        width: 100%;
        justify-content: center;
    }

    .login-card-head h2 {
        font-size: 1.35rem;
    }
}

/* ——— ≤ 400px (très petits écrans) ——— */
@media (max-width: 400px) {
    .dash-func-grid {
        grid-template-columns: 1fr;
    }

    .header-nav .btn {
        padding: 7px 8px;
    }

    .rapports-kpis {
        grid-template-columns: 1fr;
    }
}