/* ============================================================
   mobile.css — CommandePro
   UNIQUEMENT @media (max-width: 768px)
   ZÉRO IMPACT SUR DESKTOP (> 768px)
   ============================================================ */

@media screen and (max-width: 768px) {

/* ----------------------------------------------------------
   BASE
   ---------------------------------------------------------- */
html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}

/* ----------------------------------------------------------
   SIDEBAR — slide depuis la gauche avec animation
   ---------------------------------------------------------- */
#sidebar {
    display: flex !important;
    flex-direction: column !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 85vw !important;
    max-width: 320px !important;
    height: 100vh !important;
    z-index: 9999 !important;
    transform: translateX(-100%) !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 60px 12px 20px !important;
    box-shadow: 4px 0 24px rgba(0,0,0,0.5) !important;
}

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

/* Liens du menu */
#sidebar .menu-item,
#sidebar a.menu-item {
    display: flex !important;
    align-items: center !important;
    min-height: 48px !important;
    padding: 12px 16px !important;
    font-size: 15px !important;
    border-radius: 8px !important;
    margin-bottom: 4px !important;
}

/* Bouton fermer ✕ dans la sidebar */
.sidebar-close {
    display: flex !important;
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    width: 40px !important;
    height: 40px !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 22px !important;
    border-radius: 8px !important;
    z-index: 10001 !important;
}

/* Overlay derrière la sidebar */
#overlay {
    z-index: 9998 !important;
    display: none !important;
}
#overlay.show {
    display: block !important;
}

/* Hamburger ☰ fixé en haut-gauche */
.hamburger {
    position: fixed !important;
    top: 10px !important;
    left: 10px !important;
    z-index: 10000 !important;
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 8px !important;
    font-size: 20px !important;
}

/* ----------------------------------------------------------
   LAYOUT PRINCIPAL
   ---------------------------------------------------------- */
.main {
    margin-left: 0 !important;
    padding: 68px 12px 20px !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
}

.container {
    overflow-x: hidden !important;
}

/* ----------------------------------------------------------
   HEADER & TITRES
   ---------------------------------------------------------- */
.header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    margin-bottom: 16px !important;
    padding-top: 4px !important;
}

.header h2 {
    font-size: 20px !important;
}

h1 { font-size: 22px !important; }
h2 { font-size: 20px !important; }
h3 { font-size: 17px !important; }

/* Recherche globale pleine largeur */
.global-search-wrap {
    width: 100% !important;
    margin-left: 0 !important;
}
.global-search-input {
    width: 100% !important;
    font-size: 16px !important;
    min-height: 44px !important;
    box-sizing: border-box !important;
}
.global-search-input:focus {
    width: 100% !important;
}
.global-search-dropdown {
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    max-width: 100vw !important;
}

/* ----------------------------------------------------------
   TABLEAUX → MODE CARTE
   ---------------------------------------------------------- */
.table-container {
    overflow-x: visible !important;
    padding: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

table {
    min-width: unset !important;
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 0 10px 0 !important;
}

table thead {
    display: none !important;
}

table tbody tr {
    display: block !important;
    background: #252542 !important;
    border: 1px solid #333 !important;
    border-radius: 10px !important;
    padding: 12px 14px !important;
    margin-bottom: 10px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25) !important;
}

table tbody td {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 8px 0 !important;
    border-bottom: 1px solid #2a2a4a !important;
    font-size: 14px !important;
    min-height: unset !important;
    text-align: right !important;
    gap: 8px !important;
}

table tbody td:last-child {
    border-bottom: none !important;
    padding-bottom: 4px !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    padding-top: 10px !important;
}

/* Label automatique via data-label (injecté par mobile.js) */
table tbody td::before {
    content: attr(data-label);
    font-weight: 600;
    font-size: 12px;
    color: #888;
    text-align: left;
    flex-shrink: 0;
    min-width: 80px;
    max-width: 45%;
}

/* Pas de label sur la colonne Actions */
table tbody td:last-child::before {
    display: none !important;
}

/* Boutons dans les cartes */
table tbody td .btn,
table tbody td .btn-sm,
table tbody td button:not(.sidebar-close) {
    flex: 1 !important;
    min-height: 40px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
}

/* Image QR dans tableau */
.qr-img {
    width: 56px !important;
    height: 56px !important;
}

/* ----------------------------------------------------------
   FILTRES & BOUTONS DE PAGE
   ---------------------------------------------------------- */
.filters {
    flex-direction: column !important;
    width: 100% !important;
    gap: 8px !important;
}

.filters select,
.filters input,
.filters button {
    width: 100% !important;
    min-height: 44px !important;
    font-size: 15px !important;
    box-sizing: border-box !important;
}

.header .btn,
.header > button,
.header > a.btn {
    width: 100% !important;
    min-height: 48px !important;
    font-size: 15px !important;
    text-align: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
}

/* ----------------------------------------------------------
   FORMULAIRES — zones tactiles 44px, pas de zoom iOS
   ---------------------------------------------------------- */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select,
textarea {
    width: 100% !important;
    min-height: 44px !important;
    font-size: 16px !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
}

textarea {
    min-height: 90px !important;
    height: auto !important;
    resize: vertical !important;
}

label {
    display: block !important;
    margin-bottom: 6px !important;
    font-size: 14px !important;
}

.form-group {
    margin-bottom: 14px !important;
}

.form-row {
    flex-direction: column !important;
    gap: 12px !important;
}

.form-row > .form-group {
    width: 100% !important;
}

button:not(.sidebar-close):not(.hamburger):not(.mob-accordion-header),
.btn {
    min-height: 44px !important;
    font-size: 15px !important;
}

.btn-sm {
    min-height: 40px !important;
    padding: 8px 14px !important;
    font-size: 13px !important;
}

/* Checkboxes et radios plus grands */
input[type="checkbox"],
input[type="radio"] {
    width: 22px !important;
    height: 22px !important;
    min-height: 22px !important;
    min-width: 22px !important;
}

/* ----------------------------------------------------------
   MODALS → BOTTOM SHEET (glisse depuis le bas)
   ---------------------------------------------------------- */
.modal,
.modal-bg,
.modal-overlay {
    align-items: flex-end !important;
    padding: 0 !important;
}

.modal-content,
.modal .modal-content {
    width: 100vw !important;
    max-width: 100vw !important;
    max-height: 88vh !important;
    border-radius: 16px 16px 0 0 !important;
    overflow-y: auto !important;
    margin: 0 !important;
    padding: 20px 16px 30px !important;
    box-sizing: border-box !important;
}

.modal-actions {
    flex-direction: column !important;
    gap: 8px !important;
    margin-top: 16px !important;
}

.modal-actions button {
    width: 100% !important;
    min-height: 48px !important;
}

/* ----------------------------------------------------------
   DASHBOARD — KPI & GRAPHIQUES
   ---------------------------------------------------------- */
.stats {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin-bottom: 16px !important;
}

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

.stat-card .number {
    font-size: 26px !important;
}

.stat-card .label {
    font-size: 12px !important;
}

.charts-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
}

.chart-card {
    padding: 14px !important;
}

.chart-card canvas {
    max-height: 220px !important;
}

/* ----------------------------------------------------------
   CALENDRIER
   ---------------------------------------------------------- */
.cal-header,
.calendar-header {
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.cal-grid,
.calendar-grid,
table.calendrier {
    overflow-x: auto !important;
    display: block !important;
}

/* ----------------------------------------------------------
   SCANNER
   ---------------------------------------------------------- */
#reader {
    width: 100% !important;
    max-width: 100% !important;
}
#reader video,
#reader img {
    width: 100% !important;
    height: auto !important;
}

/* ----------------------------------------------------------
   STATS CA — graphiques responsive
   ---------------------------------------------------------- */
.section-grid {
    grid-template-columns: 1fr !important;
}

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

/* ----------------------------------------------------------
   BARRE REGROUPEMENT (factures)
   ---------------------------------------------------------- */
.regrouper-bar,
#regrouperBar {
    width: calc(100vw - 24px) !important;
    left: 12px !important;
    right: 12px !important;
    transform: none !important;
    min-width: unset !important;
    bottom: 12px !important;
}

/* ----------------------------------------------------------
   ACCORDÉONS CROQUIS (créés par mobile.js)
   ---------------------------------------------------------- */
.mob-accordion-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 14px 16px !important;
    background: #252542 !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    margin-bottom: 6px !important;
    border: 1px solid #333 !important;
    color: #fff !important;
    width: 100% !important;
    text-align: left !important;
    min-height: 48px !important;
}

.mob-accordion-arrow {
    font-size: 12px !important;
    transition: transform 0.3s !important;
    flex-shrink: 0 !important;
}

.mob-accordion-header.open .mob-accordion-arrow {
    transform: rotate(180deg) !important;
}

.mob-accordion-body {
    overflow: hidden !important;
    max-height: 0 !important;
    transition: max-height 0.35s ease !important;
    padding: 0 4px !important;
}

.mob-accordion-body.open {
    max-height: 3000px !important;
}

/* ----------------------------------------------------------
   BOUTON STICKY SUBMIT (croquis, barre-pivot)
   ---------------------------------------------------------- */
.mob-sticky-bar {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    padding: 10px 16px !important;
    background: #1a1a2e !important;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.4) !important;
    z-index: 5000 !important;
    border-top: 1px solid #333 !important;
    box-sizing: border-box !important;
}

.mob-sticky-bar button,
.mob-sticky-bar input[type="submit"] {
    width: 100% !important;
    min-height: 52px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
}

/* Espace en bas pour ne pas cacher le contenu sous le bouton sticky */
body.has-sticky-bar {
    padding-bottom: 80px !important;
}

/* ----------------------------------------------------------
   DIVERS — accessibilité tactile
   ---------------------------------------------------------- */
a, button, [role="button"] {
    -webkit-tap-highlight-color: rgba(99, 102, 241, 0.2);
}

.status, .badge, .tag {
    font-size: 11px !important;
    white-space: nowrap !important;
}

/* Salaries — pas de sidebar, layout spécifique */
.salary-header,
.page-header {
    flex-wrap: wrap !important;
    gap: 10px !important;
}

/* ----------------------------------------------------------
   PORTAIL CLIENT — client.html
   ---------------------------------------------------------- */

/* Barre de progression : scroll horizontal sur petit écran */
.progress-bar {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    padding-bottom: 8px !important;
    gap: 0 !important;
    -webkit-overflow-scrolling: touch !important;
}

.progress-step {
    min-width: 64px !important;
    flex-shrink: 0 !important;
}

.step-label {
    font-size: 9px !important;
    text-align: center !important;
}

/* Boutons "Nouvelle…" empilés */
.btns-nouvelle {
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
}

.btn-nouvelle {
    width: 100% !important;
    min-height: 48px !important;
    font-size: 15px !important;
    justify-content: center !important;
    box-sizing: border-box !important;
}

/* Onglets : scroll horizontal */
.tabs {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
}

/* Item commande */
.order-item {
    padding: 12px !important;
}

.order-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
}

/* ----------------------------------------------------------
   PORTAIL CLIENT — croquis-client.html
   ---------------------------------------------------------- */

/* Layout principal : 2 colonnes → 1 colonne */
.container {
    grid-template-columns: 1fr !important;
    display: block !important;
}

/* Canvas croquis : jamais plus large que l'écran */
#croquisCanvas {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
}

/* Zone canvas + résultat : empilés */
#zoneVisu {
    flex-direction: column !important;
    gap: 10px !important;
}

#resultat {
    min-height: unset !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* ----------------------------------------------------------
   PORTAIL CLIENT — pivot-client.html
   ---------------------------------------------------------- */

/* Layout 2 colonnes → 1 colonne */
.content {
    grid-template-columns: 1fr !important;
    display: block !important;
}

/* SVGs côte-à-côte → empilés */
.preview-svg {
    flex-direction: column !important;
    align-items: center !important;
    gap: 16px !important;
}

.preview-svg svg {
    max-width: 100% !important;
    height: auto !important;
}

/* Rangées 2 colonnes → 1 colonne */
.row {
    grid-template-columns: 1fr !important;
    flex-direction: column !important;
    gap: 10px !important;
}

/* ----------------------------------------------------------
   PORTAIL CLIENT — pliage-client.html
   ---------------------------------------------------------- */

/* Section haute 2 colonnes → 1 colonne */
.top-section {
    grid-template-columns: 1fr !important;
    display: block !important;
}

/* Grille types : 4 colonnes → 2 colonnes */
.types-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
}

/* Rangées 3 colonnes → 1 colonne */
.row-3 {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
}

/* Item pliage en colonne sur mobile */
.pliage-item {
    flex-direction: column !important;
    gap: 8px !important;
}

/* ----------------------------------------------------------
   PORTAIL CLIENT — voir-arc.html
   ---------------------------------------------------------- */

.arc-container {
    padding: 16px 12px !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
}

/* Grille infos : 2 colonnes → 1 colonne */
.info-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
}

/* SVG / image croquis */
.croquis-section svg,
.croquis-section img {
    max-width: 100% !important;
    height: auto !important;
}

} /* fin @media screen and (max-width: 768px) */