/* ============================================================
   LaBroche — Les Halles Charly
   Styles personnalisés — Mobile-first
   ============================================================ */

:root {
    --or: #C8942A;
    --or-clair: #F5DFA0;
    --brun: #3D1F00;
    --brun-moyen: #6B3A1F;
    --creme: #FDF8F0;
    --blanc: #FFFFFF;
    --rouge: #D64E2A;
    --vert: #2E7D4F;
    --gris: #8A8070;
    --gris-clair: #F0EBE0;
}

/* ── Base ──────────────────────────────────────────────────── */
body {
    font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
    background: var(--creme);
    color: var(--brun);
    min-height: 100vh;
    margin: 0;
    -webkit-tap-highlight-color: transparent;
}

/* ── Header ───────────────────────────────────────────────── */
.app-header {
    background: var(--brun);
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 8px 40px rgba(61, 31, 0, 0.22);
}
.header-emoji { font-size: 26px; margin-right: 12px; }
.header-title {
    font-family: Georgia, serif;
    color: var(--or);
    font-size: 1.15rem;
    font-weight: 700;
}
.header-subtitle {
    color: var(--or-clair);
    font-size: 0.65rem;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* ── Navigation par onglets ───────────────────────────────── */
.app-nav {
    background: var(--blanc);
    border-bottom: 2px solid var(--gris-clair);
    display: flex;
    overflow-x: auto;
    padding: 0 12px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.app-nav::-webkit-scrollbar { display: none; }
.nav-tab {
    padding: 13px 14px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--gris);
    white-space: nowrap;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    transition: all 0.2s;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 4px;
}
.nav-tab.active {
    font-weight: 700;
    color: var(--or);
    border-bottom-color: var(--or);
}
.nav-tab:hover { color: var(--or); text-decoration: none; }
.nav-emoji { font-size: 0.9rem; }

@media (max-width: 576px) {
    .nav-label { font-size: 0.7rem; }
    .nav-tab { padding: 10px 8px; }
}

/* ── Contenu principal ────────────────────────────────────── */
.app-content {
    max-width: 860px;
    margin: 0 auto;
    padding: 20px 14px 80px;
}

/* ── Cartes ────────────────────────────────────────────────── */
.card-app {
    background: var(--blanc);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 4px 24px rgba(61, 31, 0, 0.12);
    margin-bottom: 16px;
}

/* ── Titres ────────────────────────────────────────────────── */
.titre-section {
    font-family: Georgia, serif;
    font-size: 1.25rem;
    color: var(--brun);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
}

/* ── Labels de section ────────────────────────────────────── */
.section-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--gris);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 12px 0 8px;
}

/* ── Formulaires ──────────────────────────────────────────── */
.form-label-app {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--brun-moyen);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
    display: block;
}
.form-control-app {
    padding: 10px 14px;
    border: 2px solid var(--gris-clair);
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--brun);
    background: var(--creme);
}
.form-control-app:focus {
    border-color: var(--or);
    box-shadow: 0 0 0 3px rgba(200, 148, 42, 0.15);
    background: var(--blanc);
}

/* ── Séparateur ───────────────────────────────────────────── */
.divider {
    border: none;
    height: 1px;
    background: var(--gris-clair);
    margin: 16px 0;
}

/* ── Boutons ──────────────────────────────────────────────── */
.btn-gold {
    background: var(--or);
    color: var(--blanc);
    border: none;
    border-radius: 10px;
    font-family: inherit;
    font-weight: 600;
}
.btn-gold:hover, .btn-gold:active { background: #B5841F; color: var(--blanc); }
.btn-outline-gold {
    background: transparent;
    border: 2px solid var(--or);
    color: var(--or);
    border-radius: 10px;
    font-family: inherit;
    font-weight: 600;
}
.btn-outline-gold:hover { background: var(--or); color: var(--blanc); }
.btn-vert {
    background: var(--vert);
    color: var(--blanc);
    border: none;
    border-radius: 10px;
    font-family: inherit;
    font-weight: 600;
}
.btn-vert:hover { background: #256844; color: var(--blanc); }
.btn-outline-rouge {
    background: transparent;
    border: 2px solid var(--rouge);
    color: var(--rouge);
    border-radius: 8px;
    font-family: inherit;
    font-weight: 600;
}
.btn-outline-rouge:hover { background: var(--rouge); color: var(--blanc); }

/* ── Stat cards ───────────────────────────────────────────── */
.stat-card {
    background: var(--brun);
    border-radius: 14px;
    padding: 16px;
    text-align: center;
}
.stat-num {
    font-family: Georgia, serif;
    font-size: 1.6rem;
    color: var(--or);
    line-height: 1;
}
.stat-label {
    font-size: 0.68rem;
    color: var(--or-clair);
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
@media (max-width: 576px) {
    .stat-num { font-size: 1.2rem; }
    .stat-label { font-size: 0.6rem; }
}

/* ── Jauges ───────────────────────────────────────────────── */
.jauge-barre {
    background: var(--gris-clair);
    border-radius: 10px;
    height: 12px;
    overflow: hidden;
}
.jauge-remplir {
    height: 100%;
    border-radius: 10px;
    transition: width 0.3s;
}
.text-vert { color: var(--vert) !important; }
.text-orange { color: #F59E0B !important; }
.text-rouge { color: var(--rouge) !important; }
.text-gris { color: var(--gris) !important; }
.text-brun { color: var(--brun) !important; }
.text-gold { color: var(--or) !important; }
.text-gold-light { color: var(--or-clair) !important; }
.bg-vert { background: var(--vert) !important; }
.bg-orange { background: #F59E0B !important; }
.bg-rouge { background: var(--rouge) !important; }
.bg-creme { background: var(--creme) !important; }
.bg-gold { background: var(--or) !important; }
.bg-gris { background: var(--gris) !important; }
.bg-gris-clair { background: var(--gris-clair) !important; }

/* ── Produits (formulaire commande) ───────────────────────── */
.produit-item {
    border: 2px solid var(--gris-clair);
    border-radius: 14px;
    padding: 13px 16px;
    cursor: pointer;
    background: var(--blanc);
    display: flex;
    align-items: center;
    gap: 14px;
    transition: all 0.15s;
    margin-bottom: 8px;
}
.produit-item:active { border-color: var(--or); background: #FFFBF0; }
.produit-emoji { font-size: 1.8rem; width: 38px; text-align: center; flex-shrink: 0; }
.produit-info { flex: 1; }
.produit-nom { font-size: 0.95rem; font-weight: 700; color: var(--brun); }
.produit-detail { font-size: 0.72rem; color: var(--gris); margin-top: 2px; }
.produit-prix { font-size: 1rem; font-weight: 800; color: var(--or); flex-shrink: 0; }
.produit-detail-prix { font-size: 0.72rem; color: var(--gris); flex-shrink: 0; }
.produit-btn-add {
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--or-clair); color: var(--or);
    font-size: 1.3rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}

/* ── Panier ───────────────────────────────────────────────── */
.panier-ligne {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px; background: var(--creme);
    border-radius: 10px; margin-bottom: 8px;
    flex-wrap: wrap;
}
.panier-qte-btn {
    width: 28px; height: 28px; border-radius: 50%;
    border: 2px solid var(--or); background: none;
    color: var(--or); font-size: 1.1rem; font-weight: 700;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    min-height: 44px; min-width: 44px;
}

/* ── Boutons de date ──────────────────────────────────────── */
.boutons-date {
    display: flex; gap: 8px; flex-wrap: wrap;
}
.btn-date {
    padding: 8px 12px;
    border: 2px solid var(--gris-clair);
    border-radius: 10px;
    background: var(--blanc);
    color: var(--brun);
    cursor: pointer;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    line-height: 1.3;
    transition: all 0.2s;
}
.btn-date:hover { border-color: var(--or); text-decoration: none; color: var(--brun); }
.btn-date.active { border-color: var(--or); background: var(--or); color: var(--blanc); }
.btn-date.ferie { border-color: #F59E0B; background: #FFFBEB; }
.btn-date.autre { border-style: dashed; color: var(--gris); }
.btn-date-label { font-size: 0.7rem; opacity: 0.85; }

.date-selectionnee {
    padding: 8px 14px;
    background: var(--or-clair);
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--brun);
}

/* ── Boutons créneau ──────────────────────────────────────── */
.btn-creneau {
    padding: 14px;
    border: 2px solid var(--gris-clair);
    border-radius: 12px;
    background: var(--blanc);
    color: var(--brun);
    cursor: pointer;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    transition: all 0.2s;
    min-height: 44px;
}
.btn-creneau.active { border-color: var(--or); background: var(--or); color: var(--blanc); }

.btn-creneau-radio {
    display: block; width: 100%; padding: 12px;
    border: 2px solid var(--gris-clair);
    border-radius: 10px; background: var(--blanc);
    color: var(--brun); cursor: pointer;
    font-family: inherit; font-size: 0.95rem;
    font-weight: 600; text-align: center;
    transition: all 0.2s;
}
.btn-creneau-radio.active,
.btn-creneau-radio:has(input:checked) {
    border-color: var(--or); background: var(--or); color: var(--blanc);
}

/* ── Récapitulatif commande ───────────────────────────────── */
.recap-commande {
    background: linear-gradient(135deg, var(--brun), var(--brun-moyen));
    color: var(--blanc); border-radius: 14px;
    padding: 16px 20px; margin-top: 16px;
}
.recap-total {
    display: flex; justify-content: space-between;
    font-size: 1.1rem; font-weight: 700;
    color: var(--or); padding-top: 8px;
    border-top: 1px solid rgba(200, 148, 42, 0.3);
}

/* ── Autocomplete ─────────────────────────────────────────── */
.autocomplete-dropdown {
    border: 2px solid var(--or);
    border-radius: 14px;
    background: var(--blanc);
    box-shadow: 0 8px 40px rgba(61, 31, 0, 0.22);
    margin-bottom: 12px;
    max-height: 300px;
    overflow-y: auto;
}
.autocomplete-item {
    padding: 12px 16px;
    border-bottom: 1px solid var(--gris-clair);
    cursor: pointer;
    transition: background 0.15s;
}
.autocomplete-item:hover { background: #FFFBF0; }
.autocomplete-item:last-child { border-bottom: none; }

/* ── Client chargé ────────────────────────────────────────── */
.client-charge-banner {
    background: linear-gradient(135deg, #FFFBF0, #FEF3C7);
    border: 2px solid var(--or);
    border-radius: 12px;
    padding: 10px 14px;
    margin-bottom: 14px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}

/* ── Badges de statut ─────────────────────────────────────── */
.badge-statut {
    padding: 3px 10px; border-radius: 20px;
    font-size: 0.72rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.5px;
    white-space: nowrap;
}
.badge-statut.attente { background: #FFF3CD; color: #856404; }
.badge-statut.prete { background: #D4EDDA; color: #155724; }
.badge-statut.livree { background: #D1ECF1; color: #0C5460; }
.badge-statut.annulee { background: #F8D7DA; color: #721C24; }
.badge-statut.avendre { background: #FEE2E2; color: #DC2626; }

.badge-dispo {
    margin-left: 8px;
    background: #FEF3C7; color: #92400E;
    padding: 2px 6px; border-radius: 6px;
    font-size: 0.65rem; font-weight: 600;
}

.badge-activite {
    padding: 3px 8px; border-radius: 8px;
    font-size: 0.72rem; font-weight: 600;
}
.badge-activite.vert { background: #D1FAE5; color: #065F46; }
.badge-activite.orange { background: #FEF3C7; color: #92400E; }
.badge-activite.rouge { background: #FEE2E2; color: #991B1B; }

/* ── Pill produit ─────────────────────────────────────────── */
.pill-produit {
    display: inline-block;
    background: var(--or-clair); color: var(--brun-moyen);
    border-radius: 20px; padding: 2px 8px;
    font-size: 0.72rem; font-weight: 600;
    margin: 2px 2px 0 0;
}

/* ── Commandes (cuisson du jour) ──────────────────────────── */
.commande-card {
    border: 2px solid var(--gris-clair);
    border-radius: 12px;
    padding: 13px 16px;
    margin-bottom: 10px;
    transition: border-color 0.2s;
}
.commande-card.livree { opacity: 0.55; }
.commande-card.avendre {
    border-color: var(--rouge);
    background: #FEF2F2;
    cursor: pointer;
}
.commande-nom {
    font-family: Georgia, serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--brun);
}

/* ── Poulets dispo ────────────────────────────────────────── */
.poulet-dispo-item {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px; background: var(--creme);
    border-radius: 12px; margin-bottom: 8px;
    flex-wrap: wrap;
}
.poulet-numero {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--or); color: var(--blanc);
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 0.75rem;
    flex-shrink: 0;
}
.poulet-numero-small {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--or); color: var(--blanc);
    font-size: 0.7rem; font-weight: 800;
    margin-right: 6px;
}

/* ── Boutons tactiles (numéro/poids) ──────────────────────── */
.btn-tactile-numero {
    min-width: 50px; height: 44px;
    border: 3px solid var(--gris-clair);
    border-radius: 10px; background: var(--blanc);
    cursor: pointer; font-family: inherit;
    font-size: 1.1rem; font-weight: 800;
    color: var(--gris);
    display: flex; align-items: center; justify-content: center;
    min-height: 44px;
}
.btn-tactile-numero.selected { border-color: var(--or); background: var(--or-clair); color: var(--or); }
.btn-tactile-poids {
    min-width: 70px; height: 44px;
    border: 3px solid var(--gris-clair);
    border-radius: 10px; background: var(--blanc);
    cursor: pointer; font-family: inherit;
    font-size: 1.1rem; font-weight: 700;
    color: var(--gris);
    display: flex; align-items: center; justify-content: center;
    min-height: 44px;
}
.btn-tactile-poids.selected { border-color: var(--vert); background: #D1FAE5; color: var(--vert); }

.prix-calcule {
    padding: 12px 16px;
    background: var(--brun);
    border-radius: 12px;
    color: var(--or);
    font-weight: 700;
    font-size: 1.2rem;
}

/* ── Grilles (modales) ────────────────────────────────────── */
.grille-numeros {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 5px;
    max-height: 60vh;
    overflow-y: auto;
    padding: 4px;
}
.grille-poids {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
    max-height: 50vh;
    overflow-y: auto;
    padding: 4px;
}
.btn-grille-num {
    aspect-ratio: 1;
    border: 2px solid var(--gris-clair);
    border-radius: 8px; background: var(--blanc);
    color: var(--brun);
    font-size: 0.9rem; font-weight: 700;
    cursor: pointer; font-family: inherit;
    display: flex; align-items: center; justify-content: center;
    min-height: 36px;
}
.btn-grille-num:disabled, .btn-grille-num.pris {
    background: var(--gris-clair); color: #AAA;
    cursor: not-allowed; opacity: 0.4;
    border: none;
}
.btn-grille-num.selected { border: 3px solid var(--vert); background: #D1FAE5; color: var(--vert); }
.btn-grille-poids {
    padding: 14px 8px;
    border: 2px solid var(--gris-clair);
    border-radius: 10px; background: var(--blanc);
    color: var(--brun);
    font-size: 1.1rem; font-weight: 700;
    cursor: pointer; font-family: inherit;
}
.btn-grille-poids.selected { border: 3px solid var(--vert); background: #D1FAE5; color: var(--vert); }

/* ── Modale header brun ───────────────────────────────────── */
.modal-header-brun {
    background: var(--brun);
    padding: 20px 24px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

/* ── Préparation ──────────────────────────────────────────── */
.prep-card { position: relative; }
.border-left-complete { border-left: 5px solid var(--vert) !important; }
.border-left-partielle { border-left: 5px solid var(--or) !important; }
.border-left-vide { border-left: 5px solid var(--gris-clair) !important; }
.prep-ligne {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 10px 14px; background: var(--creme);
    border-radius: 10px; flex-wrap: wrap;
    margin-bottom: 8px;
}

/* ── Taille (modale) ──────────────────────────────────────── */
.btn-taille {
    border: 2px solid var(--gris-clair);
    border-radius: 12px;
    padding: 14px 8px;
    cursor: pointer;
    background: var(--blanc);
    font-family: inherit;
    text-align: center;
    width: 100%;
    transition: all 0.15s;
    min-height: 44px;
}
.btn-taille:active { border-color: var(--or); background: #FFFBF0; }

/* ── Alertes spécifiques ──────────────────────────────────── */
.alert-pdt {
    background: #FEF3C7;
    border: 2px solid #F59E0B;
    border-radius: 12px;
    padding: 14px 16px;
    color: #92400E;
}
.alert-numeros {
    background: #E0F2FE;
    border: 2px solid #0EA5E9;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 0.82rem;
    color: #0369A1;
}
.alert-relances {
    background: linear-gradient(135deg, #FFF7ED, #FEF3C7);
    border: 2px solid #F59E0B;
    border-radius: 16px;
    padding: 20px;
}

/* ── Zones tactiles ───────────────────────────────────────── */
button, .btn, a.btn, [role="button"] {
    min-height: 44px;
    min-width: 44px;
}
.btn-sm { min-height: 36px; min-width: 36px; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 576px) {
    .app-content { padding: 12px 10px 80px; }
    .card-app { padding: 14px; border-radius: 12px; }
    .titre-section { font-size: 1.05rem; }
    .grille-numeros { grid-template-columns: repeat(8, 1fr); }
    .grille-poids { grid-template-columns: repeat(4, 1fr); }
    .commande-nom { font-size: 0.95rem; }
}