/* =========================================================
   BEST'IN — THE BEST INNOVATION
   STYLESHEET UNIFIÉ v2.0 — 2026
   Source unique de vérité pour toutes les variables CSS
   ========================================================= */

/* --- VARIABLES & THÈMES --- */
:root, :root[data-theme="dark"] {
    /* Couleurs principales */
    --bg:            #050a18;
    --card:          #16213e;
    --accent:        #2d62ff;
    --gold:          #D4AF37;
    --success:       #22c55e;
    --danger:        #f43f5e;
    --warn:          #f97316;
    --orange:        #f97316;

    /* Texte */
    --text-primary:  #ffffff;
    --text-secondary:#8a99af;

    /* Composants */
    --input-bg:      #0b1426;
    --border-color:  rgba(255, 255, 255, 0.08);
    --tab-bg:        rgba(0, 0, 0, 0.3);
    --shadow:        0 8px 20px rgba(0,0,0,0.3);

    /* Typographie — taille minimale 16px pour éviter zoom iOS */
    --font-size-base:  16px;
    --font-size-sm:    14px;
    --font-size-xs:    12px;
    --font-size-label: 13px;

    /* Espacement */
    --radius-sm:  8px;
    --radius-md:  12px;
    --radius-lg:  18px;
    --radius-xl:  20px;
    --padding-page: 16px;
}

:root[data-theme="light"] {
    --bg:            #f8fafc;
    --card:          #ffffff;
    --accent:        #2d62ff;
    --gold:          #b48500;
    --success:       #22c55e;
    --danger:        #e11d48;
    --warn:          #ea580c;
    --orange:        #ea580c;

    --text-primary:  #0f172a;
    --text-secondary:#64748b;

    --input-bg:      #f1f5f9;
    --border-color:  rgba(0, 0, 0, 0.1);
    --tab-bg:        #e2e8f0;
    --shadow:        0 8px 20px rgba(0,0,0,0.05);
}

/* =========================================================
   1. RESET & BASE
   ========================================================= */
*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    margin:    0 !important;
    padding:   0 !important;
    height:    100% !important;
    background-color: #000 !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                 'Helvetica Neue', Arial, sans-serif !important;
    overflow:  hidden !important;
    /* Désactiver highlight tap sur mobile */
    -webkit-tap-highlight-color: transparent;
}

/* =========================================================
   2. CONTENEUR MOBILE
   ========================================================= */
.mobile-container, .mobile-view, .container,
.c, .mobile, .login-box {
    width:            100% !important;
    max-width:        430px !important;
    margin:           0 auto !important;
    background-color: var(--bg) !important;
    height:           100vh !important;
    display:          flex !important;
    flex-direction:   column !important;
    position:         relative !important;
    box-sizing:       border-box !important;
    overflow:         hidden !important;
    color:            var(--text-primary) !important;
    transition:       background-color 0.3s ease, color 0.3s ease !important;
}

/* Zones de scroll */
.content-scroll, .content-wrapper, .products-list-container,
.table-container, .scroll-content, .notif-list-container,
.cat-list, .invoice-list-container, .timeline-container,
.modules-grid-wrapper {
    flex-grow:    1 !important;
    overflow-y:   auto !important;
    /* Padding bas généreux pour éviter que le contenu
       passe sous les boutons flottants */
    padding-bottom: 100px !important;
    scroll-behavior: smooth !important;
    /* Masquer scrollbar */
    -ms-overflow-style:  none !important;
    scrollbar-width:     none !important;
}

.content-scroll::-webkit-scrollbar,
.content-wrapper::-webkit-scrollbar,
.table-container::-webkit-scrollbar,
.cat-list::-webkit-scrollbar,
.modules-grid-wrapper::-webkit-scrollbar {
    display: none !important;
}

/* =========================================================
   3. EN-TÊTE & BOUTON RETOUR
   ========================================================= */
.header, .fixed-header {
    position:       sticky !important;
    top:            0 !important;
    z-index:        100 !important;
    flex-shrink:    0 !important;
    background:     var(--bg) !important;
    padding:        16px !important;
    display:        flex !important;
    align-items:    center !important;
    justify-content:center !important;
    min-height:     64px !important;
    box-sizing:     border-box !important;
    border-bottom:  1px solid var(--border-color) !important;
    transition:     background-color 0.3s ease !important;
}

/* Exception Dashboard — header sans bordure */
.mobile-container > .header:has(.logo-area) {
    justify-content: space-between !important;
    border-bottom:   none !important;
    padding:         16px 16px 0 16px !important;
}

/* Titres centrés */
.header h1, .header h2, .fixed-header h2, .header .title {
    flex:           1 !important;
    text-align:     center !important;
    margin:         0 !important;
    font-size:      1.15rem !important;
    font-weight:    700 !important;
    text-transform: uppercase !important;
    color:          var(--text-primary) !important;
    /* Espace pour les boutons latéraux */
    padding:        0 50px !important;
    white-space:    nowrap !important;
    overflow:       hidden !important;
    text-overflow:  ellipsis !important;
}

/* Exception titres Dashboard */
.mobile-container > .header:has(.logo-area) h1,
.mobile-container > .header:has(.logo-area) h2 {
    text-align: left !important;
    padding:    0 !important;
}

/* Bouton Retour — cercle unifié */
.back-btn, .btn-back, .back {
    position:        absolute !important;
    left:            16px !important;
    top:             50% !important;
    transform:       translateY(-50%) !important;
    width:           38px !important;
    height:          38px !important;
    border-radius:   50% !important;
    background:      var(--card) !important;
    color:           var(--text-primary) !important;
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    text-decoration: none !important;
    font-size:       1.4rem !important;
    border:          1px solid var(--border-color) !important;
    z-index:         110 !important;
    padding:         0 !important;
    line-height:     1 !important;
    flex-shrink:     0 !important;
    transition:      background-color 0.2s ease !important;
}

.back-btn:active, .btn-back:active, .back:active {
    background: var(--accent) !important;
    color:      #fff !important;
}

/* =========================================================
   4. ZONES FIXES (recherche, filtres, contrôles)
   ========================================================= */
.search-container, .filters-container,
.controls-container, .filter-box,
.search-area, .sync-action-bar {
    padding:    12px var(--padding-page) !important;
    flex-shrink: 0 !important;
    background:  var(--bg) !important;
    transition:  background-color 0.3s ease !important;
}

/* =========================================================
   5. FORMULAIRES — font-size 16px minimum partout
      (évite le zoom automatique sur iOS au focus)
   ========================================================= */
input, select, textarea {
    width:         100% !important;
    padding:       14px 16px !important;
    border-radius: var(--radius-md) !important;
    border:        1px solid var(--border-color) !important;
    background:    var(--input-bg) !important;
    color:         var(--text-primary) !important;
    /* CRITIQUE : 16px minimum — en dessous iOS zoome */
    font-size:     16px !important;
    box-sizing:    border-box !important;
    outline:       none !important;
    margin-bottom: 12px !important;
    font-family:   inherit !important;
    transition:    border-color 0.2s ease, background-color 0.3s ease !important;
    /* Apparence native désactivée */
    -webkit-appearance: none;
    -moz-appearance:    none;
    appearance:         none;
}

input:focus, select:focus, textarea:focus {
    border-color: var(--accent) !important;
    outline:      none !important;
}

input::placeholder, textarea::placeholder {
    color:   var(--text-secondary) !important;
    opacity: 0.7 !important;
}

/* Select — flèche custom */
select {
    background-image:    url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
    background-position: right 0.75rem center !important;
    background-repeat:   no-repeat !important;
    background-size:     1.25em 1.25em !important;
    padding-right:       2.5rem !important;
}

/* Checkbox & radio — taille tactile minimale */
input[type="checkbox"],
input[type="radio"] {
    width:         22px !important;
    height:        22px !important;
    padding:       0 !important;
    margin-bottom: 0 !important;
    flex-shrink:   0 !important;
    cursor:        pointer !important;
}

/* Date input */
input[type="date"] {
    color-scheme: dark !important;
}

/* Labels */
label {
    display:        block !important;
    font-size:      var(--font-size-label) !important;
    color:          var(--text-secondary) !important;
    margin-bottom:  6px !important;
    font-weight:    600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* =========================================================
   6. BOUTONS
   ========================================================= */
button, .btn, .btn-main, .btn-action,
.btn-op, .btn-confirm, .btn-update,
.btn-reg, .btn-primary {
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    width:           100% !important;
    padding:         15px 16px !important;
    border-radius:   var(--radius-md) !important;
    text-transform:  uppercase !important;
    font-weight:     700 !important;
    /* 16px minimum pour la lisibilité */
    font-size:       16px !important;
    letter-spacing:  0.5px !important;
    border:          none !important;
    cursor:          pointer !important;
    box-sizing:      border-box !important;
    line-height:     1.2 !important;
    font-family:     inherit !important;
    transition:      transform 0.1s ease, opacity 0.2s ease !important;
    /* Couleur par défaut : accent */
    background:      var(--accent) !important;
    color:           #ffffff !important;
}

button:active, .btn:active {
    transform: scale(0.97) !important;
}

button:disabled, .btn:disabled {
    background: var(--border-color) !important;
    color:      var(--text-secondary) !important;
    cursor:     not-allowed !important;
    transform:  none !important;
}

/* Variantes de couleur */
.btn-success, .btn-confirm, .success {
    background: var(--success) !important;
    color:      #000000 !important;
}

.btn-danger, .btn-cancel, .btn-arch, .danger {
    background: var(--danger) !important;
    color:      #ffffff !important;
}

.btn-warn, .warn {
    background: var(--warn) !important;
    color:      #000000 !important;
}

.btn-muted, .muted, .btn.muted {
    background: var(--card) !important;
    color:      var(--text-primary) !important;
    border:     1px solid var(--border-color) !important;
}

.btn-edit {
    background: var(--card) !important;
    color:      var(--accent) !important;
    border:     1px solid var(--accent) !important;
}

/* Bouton imprimer (taille auto) */
.btn-print {
    width:      auto !important;
    flex-shrink: 0 !important;
    padding:    10px 16px !important;
    font-size:  14px !important;
    background: var(--accent) !important;
    color:      #fff !important;
    border-radius: 10px !important;
    border:     none !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
}

/* Bouton désactiver livreur */
.btn-del {
    width:       40px !important;
    height:      40px !important;
    padding:     0 !important;
    display:     flex !important;
    align-items: center !important;
    justify-content: center !important;
    background:  rgba(244, 63, 94, 0.15) !important;
    color:       var(--danger) !important;
    border:      1px solid rgba(244, 63, 94, 0.3) !important;
    border-radius: 10px !important;
    font-weight: 900 !important;
    font-size:   1.2rem !important;
    flex-shrink: 0 !important;
    cursor:      pointer !important;
}

/* Bouton flottant ajout article */
.add-btn {
    position:    absolute !important;
    bottom:      25px !important;
    left:        16px !important;
    right:       16px !important;
    width:       auto !important;
    z-index:     1000 !important;
    background:  var(--accent) !important;
    color:       #fff !important;
    box-shadow:  0 10px 30px rgba(45, 98, 255, 0.4) !important;
    text-align:  center !important;
    text-decoration: none !important;
    padding:     16px !important;
    border-radius: var(--radius-lg) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    display:     block !important;
    font-size:   16px !important;
}

/* =========================================================
   7. CARTES
   ========================================================= */
.card, .status-card, .module-card, .cat-card,
.item-card, .product-card, .support-card,
.notif-card, .activity-item, .stat-card,
.invoice-card {
    background:    var(--card) !important;
    border-radius: var(--radius-lg) !important;
    padding:       16px !important;
    margin-bottom: 16px !important;
    border:        1px solid var(--border-color) !important;
    box-shadow:    var(--shadow) !important;
    position:      relative !important;
    transition:    background-color 0.3s ease !important;
}

.invoice-card {
    display:     flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap:         15px !important;
}

.inv-info {
    flex:      1 !important;
    min-width: 0 !important;
}

/* Actions dans les cartes */
.actions, .item-card-actions {
    display:               grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap:                   10px !important;
    margin-top:            16px !important;
    padding-top:           16px !important;
    border-top:            1px solid var(--border-color) !important;
}

/* =========================================================
   8. BADGES & STATUTS
   ========================================================= */
.badge, .status-pill, .sync-chip, .cat-count {
    display:        inline-block !important;
    padding:        5px 10px !important;
    border-radius:  8px !important;
    font-size:      12px !important;
    font-weight:    800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.b-prep { background: rgba(45, 98, 255, 0.1)   !important; color: var(--accent)  !important; border: 1px solid rgba(45,98,255,0.2)   !important; }
.b-run  { background: rgba(249, 115, 22, 0.1)  !important; color: var(--warn)    !important; border: 1px solid rgba(249,115,22,0.2)  !important; }
.b-done { background: rgba(34, 197, 94, 0.1)   !important; color: var(--success) !important; border: 1px solid rgba(34,197,94,0.2)   !important; }
.b-ret  { background: rgba(244, 63, 94, 0.1)   !important; color: var(--danger)  !important; border: 1px solid rgba(244,63,94,0.2)   !important; }

/* =========================================================
   9. ONGLETS
   ========================================================= */
.view-tabs, .tabs {
    display:       flex !important;
    background:    var(--tab-bg) !important;
    border-radius: var(--radius-lg) !important;
    padding:       5px !important;
    margin-bottom: 16px !important;
    border:        1px solid var(--border-color) !important;
    flex-shrink:   0 !important;
}

.view-tab, .tab {
    flex:           1 !important;
    text-align:     center !important;
    padding:        11px !important;
    border-radius:  var(--radius-md) !important;
    font-weight:    700 !important;
    font-size:      14px !important;
    text-transform: uppercase !important;
    color:          var(--text-secondary) !important;
    cursor:         pointer !important;
    transition:     background-color 0.2s ease, color 0.2s ease !important;
    user-select:    none !important;
}

.view-tab.active, .tab.active {
    background: var(--accent) !important;
    color:      #ffffff !important;
    box-shadow: 0 4px 10px rgba(45, 98, 255, 0.3) !important;
}

/* =========================================================
   10. TEXTES & TITRES
   ========================================================= */
h3, .title, .section, .stat-label {
    font-size:      12px !important;
    color:          var(--text-secondary) !important;
    text-transform: uppercase !important;
    letter-spacing: 1.2px !important;
    font-weight:    600 !important;
    margin-bottom:  8px !important;
    display:        block !important;
}

.title, .section { color: var(--gold) !important; }

p, .info-group, .mut, .details,
.article-details, .status-line {
    line-height: 1.6 !important;
    color:       var(--text-secondary) !important;
    font-size:   14px !important;
}

b, strong { color: var(--text-primary) !important; }

/* =========================================================
   11. MODALES — Adaptées petits écrans
   ========================================================= */
.modal, #modal, #editModal {
    display:         none;
    position:        fixed !important;
    inset:           0 !important;
    background:      rgba(0, 0, 0, 0.75) !important;
    backdrop-filter: blur(8px) !important;
    z-index:         1000 !important;
    align-items:     flex-end !important;
    justify-content: center !important;
    padding:         0 !important;
}

/* Modale visible */
.modal[style*="flex"], #modal[style*="flex"],
#editModal[style*="flex"] {
    display: flex !important;
}

.modal-box, .modal-content {
    background:    var(--card) !important;
    border:        1px solid var(--border-color) !important;
    /* Coins arrondis seulement en haut sur mobile */
    border-radius: 24px 24px 0 0 !important;
    padding:       24px 20px !important;
    width:         100% !important;
    max-width:     430px !important;
    /* Hauteur max adaptative — scroll interne */
    max-height:    92vh !important;
    overflow-y:    auto !important;
    box-sizing:    border-box !important;
    /* Animation slide-up */
    animation:     slideUp 0.25s ease-out !important;
}

@keyframes slideUp {
    from { transform: translateY(40px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

/* Sur écrans > 430px — modale centrée */
@media (min-width: 430px) {
    .modal, #modal, #editModal {
        align-items:     center !important;
        justify-content: center !important;
        padding:         20px !important;
    }
    .modal-box, .modal-content {
        border-radius: 24px !important;
        max-height:    85vh !important;
    }
}

/* Inputs dans modales */
.modal-box input, .modal-content input,
.modal-box select, .modal-content select,
.modal-box textarea, .modal-content textarea {
    font-size:     16px !important;
    margin-bottom: 14px !important;
}

.modal-box label, .modal-content label {
    font-size:     12px !important;
    margin-bottom: 5px !important;
}

/* =========================================================
   12. PETITS ÉCRANS — Corrections spécifiques < 375px
   ========================================================= */
@media (max-width: 375px) {

    /* Réduire padding sur très petits écrans */
    .mobile-container, .mobile-view,
    .container, .c, .mobile {
        padding: 0 !important;
    }

    .header, .fixed-header {
        padding: 12px !important;
        min-height: 56px !important;
    }

    .header h1, .header h2, .fixed-header h2 {
        font-size: 1rem !important;
        padding:   0 44px !important;
    }

    /* Boutons en grille 2 colonnes sur petits écrans */
    .actions, .item-card-actions {
        gap: 8px !important;
    }

    .btn, button {
        padding:   12px !important;
        font-size: 14px !important;
    }

    /* Texte des modules dashboard plus petit */
    .module-name {
        font-size: 0.8em !important;
    }

    /* Inputs */
    input, select, textarea {
        padding: 12px !important;
    }
}

/* =========================================================
   13. TRANSITIONS THÈME
   ========================================================= */
*, *::before, *::after {
    transition-property: background-color, color, border-color !important;
    transition-duration: 0.25s !important;
    transition-timing-function: ease !important;
}

/* Désactiver transitions sur les éléments animés */
.sync-dot, .status-dot, .notif-badge,
button, .btn, .back-btn {
    transition: background-color 0.3s ease,
                color 0.2s ease,
                transform 0.1s ease,
                opacity 0.2s ease,
                box-shadow 0.3s ease !important;
}

/* =========================================================
   14. UTILITAIRES
   ========================================================= */
.visually-hidden {
    position: absolute !important;
    width:    1px !important;
    height:   1px !important;
    overflow: hidden !important;
    clip:     rect(0,0,0,0) !important;
}

.text-gold    { color: var(--gold)    !important; }
.text-success { color: var(--success) !important; }
.text-danger  { color: var(--danger)  !important; }
.text-warn    { color: var(--warn)    !important; }
.text-accent  { color: var(--accent)  !important; }
.text-muted   { color: var(--text-secondary) !important; }

/* Fond de page extérieure (visible sur grand écran) */
body::before {
    content:    '';
    position:   fixed;
    inset:      0;
    background: #000;
    z-index:    -1;
}