/* ==========================================================================
   BIOGOOD — Système de design unifié
   Un seul fichier, partagé par toutes les interfaces (tablette, panels,
   espace client, site public). Toute la cohérence visuelle vient d'ici.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. JETONS DE DESIGN
   -------------------------------------------------------------------------- */
:root {
    /* Palette — vert ferme, sobre et lisible */
    --bg-root:        #080b0a;
    --bg-surface:     #0f1413;
    --bg-elevated:    #151c1a;
    --bg-input:       #0b100f;
    --bg-hover:       rgba(255, 255, 255, .04);

    --line:           rgba(255, 255, 255, .07);
    --line-strong:    rgba(255, 255, 255, .14);

    --txt:            #eef2f0;
    --txt-soft:       #9fb0a8;
    --txt-faint:      #5f7069;

    --brand:          #35d07f;
    --brand-deep:     #1f8f55;
    --brand-glow:     rgba(53, 208, 127, .18);

    --info:           #4aa8ff;
    --warn:           #f0b429;
    --danger:         #f2584f;
    --violet:         #a07bff;

    /* Typographie */
    --font-ui:   'Outfit', 'Inter', system-ui, -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;

    /* Rayons & ombres — arrondis doux, ombres discrètes */
    --r-sm: 10px;
    --r-md: 14px;
    --r-lg: 20px;
    --r-xl: 28px;
    --r-pill: 999px;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, .35);
    --shadow-lg: 0 24px 60px rgba(0, 0, 0, .45);

    /* Rythme */
    --gap: 18px;
    --pad: 24px;

    --ease: cubic-bezier(.4, 0, .2, 1);
}

/* Thème clair — activé par .light-mode sur <body> */
body.light-mode {
    --bg-root:     #f4f7f5;
    --bg-surface:  #ffffff;
    --bg-elevated: #ffffff;
    --bg-input:    #f0f3f1;
    --bg-hover:    rgba(0, 0, 0, .035);

    --line:        rgba(16, 32, 25, .09);
    --line-strong: rgba(16, 32, 25, .18);

    --txt:        #10201a;
    --txt-soft:   #4d6159;
    --txt-faint:  #8a9b94;

    --brand:      #17a65c;
    --brand-deep: #0d7a42;
    --brand-glow: rgba(23, 166, 92, .14);

    --shadow-sm: 0 1px 2px rgba(16, 32, 25, .06);
    --shadow-md: 0 8px 24px rgba(16, 32, 25, .08);
    --shadow-lg: 0 24px 60px rgba(16, 32, 25, .12);
}

/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--bg-root);
    color: var(--txt);
    font-family: var(--font-ui);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    transition: background .25s var(--ease), color .25s var(--ease);
}

h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
h1 { font-size: 1.9rem; }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.1rem; }
h4 { font-size: .95rem; }

p { margin: 0 0 .8em; }
a { color: inherit; text-decoration: none; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }

::selection { background: var(--brand-glow); }

/* Barres de défilement discrètes */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: var(--r-pill); }
::-webkit-scrollbar-thumb:hover { background: var(--txt-faint); }

/* --------------------------------------------------------------------------
   3. SURFACES
   -------------------------------------------------------------------------- */
.bg-card {
    background: var(--bg-surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
}

.bg-card-pad { padding: var(--pad); }

.bg-section-title {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--txt-faint);
    margin-bottom: 14px;
}

/* --------------------------------------------------------------------------
   4. BOUTONS
   -------------------------------------------------------------------------- */
.bg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 11px 18px;
    border-radius: var(--r-md);
    border: 1px solid var(--line);
    background: var(--bg-elevated);
    color: var(--txt);
    font-weight: 600;
    font-size: .9rem;
    white-space: nowrap;
    transition: background .18s var(--ease), border-color .18s var(--ease), transform .12s var(--ease);
}
.bg-btn:hover  { background: var(--bg-hover); border-color: var(--line-strong); }
.bg-btn:active { transform: translateY(1px); }
.bg-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }

.bg-btn--primary {
    background: var(--brand);
    border-color: transparent;
    color: #04140c;
}
.bg-btn--primary:hover { background: var(--brand-deep); color: #fff; }

.bg-btn--danger  { color: var(--danger); border-color: rgba(242, 88, 79, .3); }
.bg-btn--danger:hover { background: rgba(242, 88, 79, .12); }

.bg-btn--ghost { background: transparent; }
.bg-btn--block { width: 100%; }
.bg-btn--sm    { padding: 8px 13px; font-size: .82rem; border-radius: var(--r-sm); }
.bg-btn--icon  { padding: 0; width: 40px; height: 40px; }

/* --------------------------------------------------------------------------
   5. CHAMPS
   -------------------------------------------------------------------------- */
.bg-field {
    width: 100%;
    padding: 12px 15px;
    border-radius: var(--r-md);
    border: 1px solid var(--line);
    background: var(--bg-input);
    color: var(--txt);
    outline: none;
    transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.bg-field::placeholder { color: var(--txt-faint); }
.bg-field:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-glow);
}

select.bg-field {
    cursor: pointer;
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--txt-soft) 50%),
                      linear-gradient(135deg, var(--txt-soft) 50%, transparent 50%);
    background-position: calc(100% - 18px) calc(50% + 1px), calc(100% - 13px) calc(50% + 1px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 38px;
}
select.bg-field option { background: var(--bg-elevated); color: var(--txt); }

.bg-label {
    display: block;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--txt-faint);
    margin-bottom: 7px;
}

/* --------------------------------------------------------------------------
   6. ÉTIQUETTES DE STATUT
   -------------------------------------------------------------------------- */
.bg-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border-radius: var(--r-pill);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .03em;
    border: 1px solid transparent;
    white-space: nowrap;
}
.bg-tag::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
}
.bg-tag--neutral { color: var(--txt-soft); background: var(--bg-hover);              border-color: var(--line); }
.bg-tag--success { color: var(--brand);    background: rgba(53, 208, 127, .12);      border-color: rgba(53, 208, 127, .25); }
.bg-tag--info    { color: var(--info);     background: rgba(74, 168, 255, .12);      border-color: rgba(74, 168, 255, .25); }
.bg-tag--warn    { color: var(--warn);     background: rgba(240, 180, 41, .12);      border-color: rgba(240, 180, 41, .25); }
.bg-tag--danger  { color: var(--danger);   background: rgba(242, 88, 79, .12);       border-color: rgba(242, 88, 79, .25); }
.bg-tag--violet  { color: var(--violet);   background: rgba(160, 123, 255, .12);     border-color: rgba(160, 123, 255, .25); }

/* --------------------------------------------------------------------------
   7. TABLEAUX
   -------------------------------------------------------------------------- */
.bg-table { width: 100%; border-collapse: collapse; font-size: .89rem; }
.bg-table th {
    text-align: left;
    padding: 11px 14px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--txt-faint);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    background: var(--bg-surface);
    z-index: 1;
}
.bg-table td { padding: 13px 14px; border-bottom: 1px solid var(--line); }
.bg-table tbody tr { transition: background .14s var(--ease); }
.bg-table tbody tr:hover { background: var(--bg-hover); }
.bg-table tbody tr:last-child td { border-bottom: none; }

.bg-table-wrap {
    overflow: auto;
    border-radius: var(--r-lg);
    border: 1px solid var(--line);
    background: var(--bg-surface);
}

/* --------------------------------------------------------------------------
   8. NOTIFICATIONS
   -------------------------------------------------------------------------- */
.bg-toasts {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}
.bg-toast {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 18px;
    min-width: 260px;
    max-width: 380px;
    border-radius: var(--r-md);
    background: var(--bg-elevated);
    border: 1px solid var(--line-strong);
    border-left: 3px solid var(--brand);
    box-shadow: var(--shadow-lg);
    font-size: .88rem;
    font-weight: 500;
    animation: bgToastIn .3s var(--ease);
    pointer-events: auto;
}
.bg-toast--error { border-left-color: var(--danger); }
.bg-toast--warn  { border-left-color: var(--warn); }
.bg-toast--info  { border-left-color: var(--info); }
.bg-toast.is-out { animation: bgToastOut .25s var(--ease) forwards; }

@keyframes bgToastIn  { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes bgToastOut { to   { opacity: 0; transform: translateX(28px); } }

/* --------------------------------------------------------------------------
   9. FENÊTRES MODALES
   -------------------------------------------------------------------------- */
.bg-modal {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, .66);
    backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .22s var(--ease), visibility .22s var(--ease);
}
.bg-modal.is-open { opacity: 1; visibility: visible; }

.bg-modal__box {
    width: 100%;
    max-width: 520px;
    max-height: 88vh;
    overflow: auto;
    background: var(--bg-surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-lg);
    transform: translateY(14px) scale(.98);
    transition: transform .22s var(--ease);
}
.bg-modal.is-open .bg-modal__box { transform: none; }

.bg-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px var(--pad);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    background: var(--bg-surface);
    z-index: 2;
}
.bg-modal__body { padding: var(--pad); }
.bg-modal__foot {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    padding: 18px var(--pad);
    border-top: 1px solid var(--line);
}
.bg-modal__close {
    width: 34px; height: 34px;
    border-radius: var(--r-sm);
    color: var(--txt-soft);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}
.bg-modal__close:hover { background: var(--bg-hover); color: var(--txt); }

/* --------------------------------------------------------------------------
   10. UTILITAIRES
   -------------------------------------------------------------------------- */
.bg-row    { display: flex; align-items: center; gap: var(--gap); }
.bg-row--between { justify-content: space-between; }
.bg-col    { display: flex; flex-direction: column; gap: var(--gap); }
.bg-wrap   { flex-wrap: wrap; }
.bg-grow   { flex: 1; min-width: 0; }
.bg-mono   { font-family: var(--font-mono); }
.bg-muted  { color: var(--txt-soft); }
.bg-faint  { color: var(--txt-faint); }
.bg-hidden { display: none !important; }
.bg-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.bg-empty {
    padding: 48px 20px;
    text-align: center;
    color: var(--txt-faint);
}
.bg-empty i { font-size: 1.9rem; display: block; margin-bottom: 12px; opacity: .5; }

.bg-skeleton {
    background: linear-gradient(90deg, var(--bg-hover) 25%, var(--line) 50%, var(--bg-hover) 75%);
    background-size: 200% 100%;
    animation: bgShimmer 1.3s infinite;
    border-radius: var(--r-sm);
}
@keyframes bgShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* --------------------------------------------------------------------------
   11. AJOUTS — polish partagé (additif, rétro-compatible)
   Ajouté lors de la passe de finition de commercial.html ; ces règles ne
   redéfinissent ni ne renomment aucune classe existante, elles ne font
   qu'ajouter un comportement optionnel que les autres interfaces peuvent
   aussi adopter si besoin.
   -------------------------------------------------------------------------- */

/* Anneau de focus clavier cohérent sur tous les boutons (accessibilité +
   finition "pro"), sans toucher au style par défaut au survol/clic. */
.bg-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--brand-glow);
}

/* Utilitaire optionnel : légère élévation au survol pour les cartes
   cliquables (KPI, tuiles de stock, lignes de liste...). Les autres pages
   peuvent l'ajouter à une .bg-card existante sans rien casser. */
.bg-card--hover {
    cursor: pointer;
    transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.bg-card--hover:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--line-strong);
}

/* Utilitaire optionnel : alignement à droite pour les colonnes numériques
   d'un .bg-table (montants, quantités) — meilleure lisibilité tabulaire. */
.bg-table th.num, .bg-table td.num { text-align: right; }

/* Icône des toasts teintée selon la variante, au lieu d'hériter du blanc
   par défaut — purement cosmétique, n'affecte pas la mise en page. */
.bg-toast > i:first-child { color: var(--brand); }
.bg-toast--error > i:first-child { color: var(--danger); }
.bg-toast--warn  > i:first-child { color: var(--warn); }
.bg-toast--info  > i:first-child { color: var(--info); }

/* Petit espace au-dessus d'un éventuel bouton d'action dans un état vide
   (.bg-empty), pour que l'icône + texte + CTA respirent correctement. */
.bg-empty .bg-btn { margin-top: 16px; }