@media print {
    .sidebar,
    .sidebar-overlay,
    .sidebar-toggle,
    .notification,
    .modal,
    .btn-sidebar-logout,
    .btn-close,
    .modal-footer,
    .pdf-filter-modal,
    #smsModal,
    #pdfFilterModal {
        display: none !important;
    }

    body,
    #staffView,
    #clientView,
    #publicOrderView {
        background: #fff !important;
        color: #000 !important;
    }

    .main-content,
    .client-view,
    .public-order-view {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: none !important;
    }
}

/* ============================================================
   MOBILE & RESPONSIVE — Section 7
   7.2 Touch targets · 7.3 Scroll · 7.6 dvh · 7.7 Orientation · 7.8 Safe areas
   ============================================================ */

/* ===== SIDEBAR TOGGLE: hide when sidebar is open ===== */
body.sidebar-open .sidebar-toggle {
    display: none !important;
}

/* ===== 7.2 — TAP HIGHLIGHT ===== */
/* Remove the default iOS grey flash on tap; restore a subtle one on interactive elements */
* {
    -webkit-tap-highlight-color: transparent;
}
a, button, [role="button"],
.sidebar-link, .choice-btn, .po-back, .cv-logout,
.time-slot, .po-rgpd, .po-carte-btn, .po-submit,
.cv-modify-btn, .cv-cancel-btn {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.06);
}

/* ===== 7.6 — DYNAMIC VIEWPORT HEIGHT (dvh) ===== */
/* Prevents layout shift from the mobile browser URL bar */
@supports (min-height: 100dvh) {
    #publicOrderView,
    #clientView {
        min-height: 100dvh;
    }
    .main-content {
        min-height: 100dvh;
    }
}

/* ===== 7.8 — SAFE AREAS (notch / home indicator) ===== */
/* Active only when viewport-fit=cover is set in <meta name="viewport"> */

/* Top bar side padding for landscape notch */
.po-topbar {
    padding-left: max(24px, env(safe-area-inset-left));
    padding-right: max(24px, env(safe-area-inset-right));
}
.cv-topbar {
    padding-left: max(24px, env(safe-area-inset-left));
    padding-right: max(24px, env(safe-area-inset-right));
}

/* Sidebar: top notch + bottom home indicator */
.sidebar {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
}

@media (max-width: 767px) {
    /* Sidebar toggle button: stay below notch */
    .sidebar-toggle {
        top: max(16px, calc(16px + env(safe-area-inset-top)));
        left: max(16px, env(safe-area-inset-left));
    }

    /* Main content areas: add home indicator clearance */
    .po-main {
        padding-bottom: max(40px, calc(40px + env(safe-area-inset-bottom)));
    }
    .cv-main {
        padding-bottom: max(80px, calc(80px + env(safe-area-inset-bottom)));
    }
    .container {
        padding-bottom: max(16px, calc(16px + env(safe-area-inset-bottom)));
    }

    /* Submit / action buttons: stay above home indicator */
    .po-submit {
        margin-bottom: max(24px, calc(24px + env(safe-area-inset-bottom)));
    }

    /* Login screen bottom clearance */
    .login-screen {
        padding-bottom: env(safe-area-inset-bottom);
    }
}

/* ===== 7.2 — TOUCH TARGETS (min 48 × 48 px) ===== */
@media (max-width: 767px) {
    /* Sidebar navigation items */
    .sidebar-link {
        min-height: 48px;
        padding-top: 12px;
        padding-bottom: 12px;
    }

    /* Topbar action buttons */
    .po-back,
    .cv-logout {
        min-height: 48px;
        padding-top: 12px;
        padding-bottom: 12px;
    }

    /* Sidebar open/close toggle */
    .sidebar-toggle {
        width: 48px;
        height: 48px;
    }

    /* Time slot picker buttons */
    #staffTimeSlotsPicker .time-slot,
    #publicTimeSlotsPicker .time-slot {
        min-height: 48px !important;
        padding: 12px 6px !important;
    }

    /* Login choice buttons */
    .choice-btn {
        min-height: 72px;
    }

    /* RGPD checkbox row */
    .po-rgpd {
        min-height: 48px;
    }
}

/* ===== 7.3 — SCROLL BEHAVIOUR ===== */
@media (max-width: 767px) {
    /* Contain vertical overscroll so the app doesn't rubber-band */
    html {
        overscroll-behavior-y: contain;
    }

    /* Prevent scroll from propagating out of modals / sidebar */
    .modal,
    .dialog-overlay,
    .sidebar {
        overscroll-behavior: contain;
    }

    /* Smooth momentum on scrollable article / order lists */
    .po-articles-grid,
    .cv-articles {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
    }
}

/* ===== 7.7 — ORIENTATION: LANDSCAPE (compact) ===== */
/* Triggered on mobile phones rotated sideways (≤ 500 px tall) */
@media (orientation: landscape) and (max-height: 500px) {
    /* Compact top bars */
    .po-topbar,
    .cv-topbar {
        height: 52px;
        padding-top: 0;
        padding-bottom: 0;
    }

    /* Shrink logo */
    .po-topbar-brand img,
    .cv-topbar-brand img {
        height: 36px;
    }

    /* Reduce hero section vertical space */
    .po-hero {
        margin-bottom: 16px;
    }
    .po-hero-title {
        font-size: 20px;
    }
    .po-hero-sub {
        font-size: 12px;
    }

    /* Calendar day cells: smaller in landscape */
    .calendar-day {
        min-height: 32px;
        max-height: 32px;
    }

    /* Sidebar: ensure it scrolls fully in landscape */
    .sidebar {
        overflow-y: auto;
    }
}

/* ============================================================
   ESPACE EMPLOYÉ — FIXES MOBILE (overflow, grilles, pagination)
   ============================================================ */

@media (max-width: 767px) {

    /* ── Calendrier Horaires: prevent overflow ── */
    .cal-section {
        padding: 12px !important;
    }

    /* Calendar nav row: centre le mois entre les deux boutons */
    .cal-nav-row {
        justify-content: space-between !important;
        gap: 8px !important;
    }

    /* Calendar nav buttons: compact */
    #calPrevMonth,
    #calNextMonth {
        padding: 6px 10px !important;
        font-size: 12px !important;
        flex-shrink: 0 !important;
    }
    #calCurrentMonth {
        font-size: 15px !important;
        text-align: center !important;
        flex: 1 !important;
    }

    /* Day name header row: reduce padding so 7 columns fit */
    .cal-day-names {
        gap: 3px !important;
    }
    .cal-day-names > div {
        padding: 4px 1px !important;
        font-size: 10px !important;
    }

    /* Calendar day cells grid: reduce gap to match */
    #calendarGrid {
        gap: 3px !important;
    }
    #calendarGrid > div {
        padding: 4px 2px !important;
        font-size: 11px !important;
        min-height: 34px !important;
    }

    /* Action buttons row in Horaires: full width, stacked */
    .cal-section > div[style*="display: flex"][style*="flex-wrap: wrap"] {
        flex-direction: column;
    }
    .cal-section > div[style*="display: flex"][style*="flex-wrap: wrap"] > button {
        width: 100% !important;
        justify-content: center !important;
    }

    /* ── Formulaire Articles traiteur: 1 colonne ── */
    .article-form-grid {
        grid-template-columns: 1fr !important;
    }
    .article-form-grid .form-group input[type="number"] {
        width: 100% !important;
    }

    /* ── Formulaire Comptes administrateurs: 1 colonne ── */
    .admin-form-grid {
        grid-template-columns: 1fr !important;
    }
    .admin-form-grid button[type="submit"] {
        width: 100%;
    }

    /* ── Lignes compte admin: structure gérée en JS (bloc plein largeur) ── */

    /* ── Pagination: scrollable horizontalement, sans wrapping ── */
    .log-pagination {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 4px !important;
        gap: 3px !important;
        /* hide scrollbar visually but keep scroll */
        scrollbar-width: none !important;
    }
    .log-pagination::-webkit-scrollbar {
        display: none !important;
    }
    .log-pagination button,
    .pagination-btn {
        padding: 5px 9px !important;
        font-size: 12px !important;
        min-width: 30px !important;
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }

    /* Stats KPI cards (onglet Stats): 2 cols on mobile */
    #statsKPI {
        grid-template-columns: 1fr 1fr !important;
    }

    /* ── Lignes catégories d'articles: bloc plein largeur sur mobile ── */
    .category-manager-item {
        flex-wrap: wrap !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }
    .category-manager-main {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }
    .category-manager-main span:last-child {
        white-space: normal !important;
        word-break: break-word !important;
    }
    .category-manager-actions {
        width: 100% !important;
        display: flex !important;
        justify-content: flex-end !important;
        gap: 6px !important;
    }
    .category-manager-actions button {
        white-space: nowrap !important;
    }

    /* Les flèches restent compactes, sans écraser le nom */
    .category-order-controls {
        margin-right: 6px !important;
    }
}