@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ================================================================
   GESTION COMMANDES — Système de design partagé
   Chargé sur toutes les pages. Palette bleu-gris raffinée,
   typographie Inter, échelle d'espacement/ombres/rayons cohérente.
   Ce fichier ne redéfinit jamais d'id/class métier propres au JS :
   il pose uniquement les fondations visuelles réutilisables.
   ================================================================ */

:root{
    /* ---- Couleurs neutres ---- */
    --gc-bg:            #eef1f6;
    --gc-bg-soft:       #f6f8fb;
    --gc-surface:       #ffffff;
    --gc-surface-alt:   #fafbfd;
    --gc-border:        #e1e6ed;
    --gc-border-strong: #cbd3de;

    --gc-text:          #1c2128;
    --gc-text-muted:    #5b6474;
    --gc-text-faint:    #8b93a1;

    /* ---- Couleur de marque (bleu-gris) ---- */
    --gc-primary-900:   #232c3d;
    --gc-primary-700:   #3a4658;
    --gc-primary-600:   #47566c;
    --gc-primary-500:   #566982;
    --gc-primary-400:   #7387a0;
    --gc-primary-100:   #e7ebf2;
    --gc-primary-50:    #f2f4f8;

    --gc-primary:       var(--gc-primary-600);
    --gc-primary-hover: var(--gc-primary-700);
    --gc-primary-active:var(--gc-primary-900);
    --gc-primary-soft:  var(--gc-primary-100);

    /* ---- Couleurs sémantiques ---- */
    --gc-success:       #0c7a5f;
    --gc-success-soft:  #e3f5ee;
    --gc-danger:        #c94a41;
    --gc-danger-soft:   #fbeae8;
    --gc-warning:       #b1780c;
    --gc-warning-soft:  #fbf1de;
    --gc-info:          #2f6fb0;
    --gc-info-soft:     #e8f1fb;

    /* ---- Typographie ---- */
    --gc-font: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    /* ---- Rayons / ombres / transitions ---- */
    --gc-radius-sm: 8px;
    --gc-radius-md: 12px;
    --gc-radius-lg: 18px;
    --gc-radius-full: 999px;

    --gc-shadow-xs: 0 1px 2px rgba(23,32,50,.06);
    --gc-shadow-sm: 0 2px 8px rgba(23,32,50,.07);
    --gc-shadow-md: 0 8px 24px rgba(23,32,50,.10);
    --gc-shadow-lg: 0 18px 40px rgba(23,32,50,.14);

    --gc-ease: cubic-bezier(.4,0,.2,1);
    --gc-transition: 160ms var(--gc-ease);
}

@media (prefers-color-scheme: dark){
    :root{
        /* L'application reste en thème clair pour l'instant (usage interne
           sur écrans fixes) ; ces variables existent pour une évolution future
           sans tout redéfinir. */
    }
}

*, *::before, *::after{ box-sizing: border-box; }

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

body{
    font-family: var(--gc-font);
    color: var(--gc-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4{
    font-family: var(--gc-font);
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--gc-text);
}

::-webkit-scrollbar{ width: 10px; height: 10px; }
::-webkit-scrollbar-track{ background: transparent; }
::-webkit-scrollbar-thumb{ background: var(--gc-border-strong); border-radius: var(--gc-radius-full); }
::-webkit-scrollbar-thumb:hover{ background: var(--gc-primary-400); }

::selection{ background: var(--gc-primary-400); color: #fff; }

a{ color: var(--gc-primary); }

button, input, select, textarea{
    font-family: var(--gc-font);
}

button{
    cursor: pointer;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible{
    outline: 2px solid var(--gc-primary-400);
    outline-offset: 2px;
}

/* ----------------------------------------------------------------
   Composants réutilisables génériques (classes optionnelles) —
   n'affectent que les éléments qui les portent explicitement.
   ---------------------------------------------------------------- */

.gc-card{
    background: var(--gc-surface);
    border: 1px solid var(--gc-border);
    border-radius: var(--gc-radius-lg);
    box-shadow: var(--gc-shadow-sm);
}

.gc-badge{
    display: inline-flex;
    align-items: center;
    gap: .4em;
    padding: .3em .75em;
    border-radius: var(--gc-radius-full);
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.4;
    background: var(--gc-primary-soft);
    color: var(--gc-primary-700);
}
.gc-badge--success{ background: var(--gc-success-soft); color: var(--gc-success); }
.gc-badge--danger{  background: var(--gc-danger-soft);  color: var(--gc-danger); }
.gc-badge--warning{ background: var(--gc-warning-soft); color: var(--gc-warning); }

.gc-empty{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: 3rem 1.5rem;
    color: var(--gc-text-faint);
    font-size: .95rem;
    text-align: center;
}
.gc-empty .icone{ font-size: 2rem; opacity: .55; }