/* ─────────────────────────────────────────────────────────────────────────────
   Peakfast ERP — thème global (DA peakfast.fr × inspiration jointrybe.com)
   Chargé APRÈS le <style> inline de chaque module (lien en fin de <head>),
   donc à spécificité égale c'est ce fichier qui gagne.

   Référencer en RELATIF depuis un module : ../static/theme.css
   (jamais /erp/ en dur — le préfixe doit rester agnostique).
   ──────────────────────────────────────────────────────────────────────────── */


/* ─────────────────────────────────────────────────────────────────────────────
   OPT-OUT « pf-v2 » — une page qui pose <body class="pf-app pf-v2"> adopte le
   système de design static/pf-ui.css et n'hérite plus des décorations
   historiques ci-dessous (rayon forcé, ombre sur les cartes, police
   d'affichage sur tous les titres). La trame pointillée, elle, RESTE : c'est
   un élément de marque (peakfast.fr), pas une décoration héritée.

   Le garde s'écrit `:where(body:not(.pf-v2))` et JAMAIS `body:not(.pf-v2)` :
   `:where()` a une spécificité NULLE, donc chaque sélecteur conserve le poids
   qu'il avait avant l'ajout du garde. Avec `body:not(...)`, `[class*="card"]`
   passerait de (0,1,0) à (0,2,1) et se mettrait à écraser les règles de module
   plus spécifiques (ex. `.x-card.compact`) qui le battaient jusqu'ici — les 48
   modules non migrés changeraient d'apparence sans qu'on y touche.

   Résultat : les modules non migrés ne bougent pas d'un pixel. Voir DESIGN.md.
   ──────────────────────────────────────────────────────────────────────────── */

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

:root {
    /* Palette Peakfast (peakfast.fr) */
    --pf-blue: #0147ff;
    --pf-blue-hover: #0139d6;
    --pf-blue-50: #eef3ff;
    --pf-dark: #14161d;
    --pf-bg: #f5f6f9;
    --pf-border: #e6e8ee;

    /* Overrides des tokens communs aux modules (mêmes noms → cascade) */
    --accent: var(--pf-blue);
    --accent-50: var(--pf-blue-50);
    --accent-light: var(--pf-blue-50);
    --bg: var(--pf-bg);
    --border: var(--pf-border);
}

/* ── Typographie ─────────────────────────────────────────────────────────── */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-feature-settings: 'cv11';
}

:where(body:not(.pf-v2)) h1, :where(body:not(.pf-v2)) h2,
:where(body:not(.pf-v2)) h3, :where(body:not(.pf-v2)) h4 {
    font-family: 'Instrument Sans', 'Inter', -apple-system, sans-serif;
    letter-spacing: -0.02em;
}
h1 { font-weight: 700; }

button, input, select, textarea {
    font-family: inherit;
}

/* ── Cartes : arrondis généreux + ombre douce (façon Trybe) ──────────────── */
/* Cible les classes contenant "card" (hm-card, tt-card, kpi-card…). Les règles
   de module plus spécifiques (ex : .x-card.compact) restent prioritaires. */
:where(body:not(.pf-v2)) [class*="card"] {
    border-radius: 16px;
}

/* Ombre douce uniquement sur les cartes posées sur le fond de page (fond
   blanc + bordure), pas sur les petits éléments internes. */
:where(body:not(.pf-v2)) .hm-card, :where(body:not(.pf-v2)) .tt-card, :where(body:not(.pf-v2)) .qs-card,
:where(body:not(.pf-v2)) .aa-card, :where(body:not(.pf-v2)) .mod-card,
:where(body:not(.pf-v2)) [class$="-card"]:not([class*="inner"]) {
    box-shadow: 0 1px 2px rgba(20, 22, 29, 0.03), 0 6px 20px rgba(20, 22, 29, 0.04);
}

/* ── Loader Peakfast : barres diagonales animées (façon peakfast.fr) ─────── */
/* Usage : <div class="pf-loader"><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div> */
.pf-loader {
    display: inline-flex;
    gap: 8px;
}
.pf-loader i {
    width: 5px;
    height: 20px;
    border-radius: 3px;
    background: var(--pf-blue);
    transform: rotate(35deg);
    opacity: 0.12;
    animation: pfLoaderWave 1.15s ease-in-out infinite;
}
.pf-loader i:nth-child(2) { animation-delay: 0.10s; }
.pf-loader i:nth-child(3) { animation-delay: 0.20s; }
.pf-loader i:nth-child(4) { animation-delay: 0.30s; }
.pf-loader i:nth-child(5) { animation-delay: 0.40s; }
.pf-loader i:nth-child(6) { animation-delay: 0.50s; }
.pf-loader i:nth-child(7) { animation-delay: 0.60s; }
@keyframes pfLoaderWave {
    0%, 100% { opacity: 0.12; }
    35%      { opacity: 1; }
}

/* ── Fond de page : pointillé Peakfast (même trame que le loader du shell) ─
   Posé sur <body> APRÈS le <style> inline des modules : la couleur de fond
   du module reste la sienne, on ne fait qu'ajouter la trame par-dessus.
   `fixed` = la trame ne défile pas avec le contenu. */
body {
    background-image: radial-gradient(circle, rgba(20, 22, 29, 0.07) 1px, transparent 1.5px);
    background-size: 24px 24px;
    background-attachment: fixed;
}

/* Jamais de trame à l'impression (étiquettes, packing lists, factures). */
@media print {
    body { background-image: none; }
}

/* ── Quadrillages (fond de zones graphiques / états vides) ───────────────── */
/* Pointillé façon courbes peakfast.fr */
.pf-dotgrid {
    background-image: radial-gradient(circle, rgba(20, 22, 29, 0.10) 1px, transparent 1.5px);
    background-size: 24px 24px;
}
/* Lignes fines discrètes */
.pf-grid {
    background-image:
        linear-gradient(to right, rgba(20, 22, 29, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(20, 22, 29, 0.05) 1px, transparent 1px);
    background-size: 44px 44px;
}