/* ============================================================================
 * style.css — Feuille de style principale de l'application.
 *
 * Fournit :
 *   - Le design system (variables CSS oklch, polices, rythme vertical).
 *   - Les composants génériques (boutons, inputs, pills, modales, toasts,
 *     cartes Kanban, colonnes Kanban, etc.).
 *   - Les utilities essentielles (.mono, .tabular-nums, .truncate, …).
 *
 * Stratégie de cohabitation (Lots 0 → 3) :
 *   Tailwind (CDN) reste actif dans base.html jusqu'au Lot 4 (refactor
 *   Kanban). À ce moment-là, Tailwind sera retiré et kanban.html sera
 *   réécrit en CSS pur en utilisant ces classes. Les nouveaux écrans
 *   (Lots 5+) utilisent directement les classes définies ici.
 *
 * Source d'inspiration : design_handoff_plan_de_charge/Plan de charge - Hi-Fi.html
 * ============================================================================ */

/* --------------------------------------------------------------------------
 * Design tokens (variables CSS)
 * Référence : design_handoff_plan_de_charge/README.md (section "Design tokens")
 * -------------------------------------------------------------------------- */
:root {
    /* Surfaces — du plus bas (background) au plus haut (highlight) */
    --bg:           oklch(99% 0.003 240);
    --surface:      #ffffff;
    --surface-2:    oklch(97.5% 0.004 240);
    --surface-hi:   oklch(96% 0.004 240);

    /* Encre — du texte principal au plus discret */
    --ink:          oklch(22% 0.012 250);
    --ink-2:        oklch(40% 0.012 250);
    --ink-3:        oklch(58% 0.008 250);
    --ink-4:        oklch(72% 0.005 250);

    /* Bordures */
    --rule:         oklch(91% 0.004 250);
    --rule-2:       oklch(86% 0.005 250);
    --rule-strong:  oklch(78% 0.008 250);

    /* Marques MODUM / MOENIO (avec fond clair pour pills) */
    --modum:        oklch(52% 0.14 245);
    --modum-bg:     oklch(95% 0.025 245);
    --moenio:       oklch(54% 0.10 178);
    --moenio-bg:    oklch(95% 0.022 178);

    /* États sémantiques */
    --valid:        oklch(55% 0.12 152);
    --valid-bg:     oklch(95% 0.04 152);
    --chaud:        oklch(62% 0.16 45);    /* prêt à facturer */
    --chaud-bg:     oklch(96% 0.04 45);
    --froid:        oklch(58% 0.10 232);   /* diffusé */
    --froid-bg:     oklch(95% 0.03 232);
    --wip:          oklch(82% 0.07 55);    /* en cours — orange clair */
    --wip-bg:       oklch(97% 0.025 55);
    --danger:       oklch(54% 0.18 25);
    --danger-bg:    oklch(96% 0.04 25);

    /* Identité utilisateur + temporalité */
    --me:           oklch(50% 0.16 295);   /* utilisateur courant (violet) */
    --me-bg:        oklch(95% 0.04 295);
    --today:        oklch(52% 0.14 195);   /* aujourd'hui / restreint (teal) */
    --today-bg:     oklch(95% 0.04 195);

    /* Famille couleur des devis (stripe latérale gauche) */
    --d-base:       oklch(56% 0.10 235);
    --d-base-bg:    oklch(97.5% 0.018 235);
    --d-c1:         oklch(56% 0.10 152);
    --d-c1-bg:      oklch(97.5% 0.018 152);
    --d-c2:         oklch(54% 0.12 12);
    --d-c2-bg:      oklch(97.5% 0.022 12);
    --d-c3:         oklch(54% 0.12 308);
    --d-c3-bg:      oklch(97.5% 0.018 308);

    /* Typographie */
    --font:         "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
                    Roboto, Helvetica, Arial, sans-serif;
    --mono:         "JetBrains Mono", "Consolas", "Menlo", "Courier New", monospace;

    /* Rayons (cohérence avec hi-fi) */
    --radius-sm:    6px;
    --radius-md:    8px;
    --radius-lg:    12px;

    /* Ombres (4 niveaux subtils) */
    --shadow-1:     0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-2:     0 2px 6px rgba(15, 23, 42, 0.06);
    --shadow-3:     0 4px 14px rgba(15, 23, 42, 0.08);
    --shadow-4:     0 10px 30px rgba(15, 23, 42, 0.12);

    /* Z-index — empilement maîtrisé */
    --z-sticky:     50;
    --z-overlay:    100;
    --z-modal:      200;
    --z-popover:    300;
    --z-toast:      400;
}

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

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

button { cursor: pointer; font: inherit; color: inherit; background: none; border: 0; padding: 0; }
button:disabled { cursor: not-allowed; opacity: 0.5; }

a { color: inherit; text-decoration: none; }

input, select, textarea { font: inherit; color: inherit; }

img, svg { display: block; max-width: 100%; }

/* Lot 8 polish — Respect strict de l'attribut HTML5 `hidden`. Tailwind
   fournissait ce reset implicitement ; sans lui, certaines règles
   `display: flex/grid/block` override l'attribut natif. On force ici
   le comportement attendu pour tous les éléments. */
[hidden] { display: none !important; }

/* --------------------------------------------------------------------------
 * Typographie de base
 * -------------------------------------------------------------------------- */
body {
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; color: var(--ink); }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1rem; }
h4 { font-size: 0.875rem; }

.mono, .tabular-nums { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); }

/* --------------------------------------------------------------------------
 * Boutons
 * -------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: var(--radius-sm);
    border: 1px solid var(--rule-2);
    background: var(--surface);
    color: var(--ink);
    transition: background-color 120ms, border-color 120ms, color 120ms;
    white-space: nowrap;
}
.btn:hover { background: var(--surface-2); }
.btn:focus-visible { outline: 2px solid var(--today); outline-offset: 2px; }
.btn:active { background: var(--surface-hi); }

.btn-primary {
    background: var(--ink);
    color: var(--surface);
    border-color: var(--ink);
}
.btn-primary:hover { background: var(--ink-2); border-color: var(--ink-2); }

.btn-danger {
    background: var(--danger);
    color: var(--surface);
    border-color: var(--danger);
}
.btn-danger:hover { filter: brightness(0.95); }

.btn-ghost {
    border-color: transparent;
    background: transparent;
}
.btn-ghost:hover { background: var(--surface-2); }

.btn-sm { padding: 0.25rem 0.5rem; font-size: 0.8125rem; }

/* --------------------------------------------------------------------------
 * Inputs
 * -------------------------------------------------------------------------- */
.input, .select, .textarea {
    display: block;
    width: 100%;
    padding: 0.45rem 0.6rem;
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--rule-2);
    border-radius: var(--radius-sm);
    transition: border-color 120ms, box-shadow 120ms;
}
.input:focus, .select:focus, .textarea:focus {
    outline: none;
    border-color: var(--today);
    box-shadow: 0 0 0 3px var(--today-bg);
}
.input::placeholder, .textarea::placeholder { color: var(--ink-4); }
.textarea { resize: vertical; min-height: 5rem; }

/* --------------------------------------------------------------------------
 * Pills (badges)
 * Variantes : entité, type, nature, état devis, etc.
 * -------------------------------------------------------------------------- */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--ink-2);
    white-space: nowrap;
}

.pill-modum   { background: var(--modum-bg);  color: var(--modum); }
.pill-moenio  { background: var(--moenio-bg); color: var(--moenio); }
.pill-valid   { background: var(--valid-bg);  color: var(--valid); }
.pill-chaud   { background: var(--chaud-bg);  color: var(--chaud); }
.pill-froid   { background: var(--froid-bg);  color: var(--froid); }
.pill-wip     { background: var(--wip-bg);    color: oklch(45% 0.15 55); }
.pill-danger  { background: var(--danger-bg); color: var(--danger); }
.pill-me      { background: var(--me-bg);     color: var(--me); }
.pill-today   { background: var(--today-bg);  color: var(--today); }
.pill-d-base  { background: var(--d-base-bg); color: var(--d-base); }
.pill-d-c1    { background: var(--d-c1-bg);   color: var(--d-c1); }
.pill-d-c2    { background: var(--d-c2-bg);   color: var(--d-c2); }
.pill-d-c3    { background: var(--d-c3-bg);   color: var(--d-c3); }

/* Pills type/nature — mêmes couleurs que les pastilles du Kanban */
.pill-etu     { background: oklch(95% 0.07 95);  color: oklch(40% 0.13 95); }
.pill-exe     { background: oklch(95% 0.06 55);  color: oklch(45% 0.16 55); }
.pill-moe     { background: oklch(95% 0.05 230); color: oklch(45% 0.14 230); }
.pill-reha    { background: oklch(95% 0.06 290); color: oklch(45% 0.16 290); }
.pill-neuf    { background: oklch(95% 0.06 15);  color: oklch(48% 0.17 15); }

/* Pills statut Kanban — codé par étape du cycle commercial */
.pill-statut-prospect         { background: var(--surface-hi);  color: var(--ink-2); }
.pill-statut-devis_a_faire    { background: var(--wip-bg);      color: oklch(45% 0.15 55); }
.pill-statut-devis_envoye     { background: var(--froid-bg);    color: var(--froid); }
.pill-statut-mission_validee  { background: var(--valid-bg);    color: var(--valid); }
.pill-statut-commande_signee  { background: var(--modum-bg);    color: var(--modum); }
/* 2026-05-28 — Statut « Facture à faire » retiré du Kanban (la pastille
   « X € à facturer » sur les cartes donne déjà l'info). La règle CSS
   est gardée temporairement pour les bases pas encore migrées. */
.pill-statut-facture_a_faire  { background: var(--chaud-bg);    color: var(--chaud); }

/* Chip "chargé d'affaire" — avatar + nom (plus visuel qu'un simple pill) */
.charge-aff-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.625rem 0.25rem 0.25rem;
    border-radius: 999px;
    background: var(--me-bg);
    border: 1px solid color-mix(in oklch, var(--me) 30%, transparent);
    color: var(--ink);
    font-size: 0.8125rem;
}
.charge-aff-chip-avatar {
    width: 1.625rem;
    height: 1.625rem;
    border-radius: 50%;
    background: var(--me);
    color: var(--surface);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--mono);
    font-weight: 700;
    font-size: 0.6875rem;
    letter-spacing: 0.05em;
}
.charge-aff-chip-info { display: flex; flex-direction: column; line-height: 1.15; }
.charge-aff-chip-label { font-size: 0.625rem; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.05em; }
.charge-aff-chip-nom { font-weight: 500; }

/* --------------------------------------------------------------------------
 * Cartes (génériques)
 * -------------------------------------------------------------------------- */
.card {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-1);
}
.card-header,
.card-body,
.card-footer { padding: 0.75rem 1rem; }
.card-header { border-bottom: 1px solid var(--rule); }
.card-footer { border-top: 1px solid var(--rule); background: var(--surface-2); }

/* --------------------------------------------------------------------------
 * Kanban (utilisé à partir du Lot 4 — refactor)
 * Le kanban actuel utilise des classes Tailwind via kanban.html ; ces
 * classes seront migrées progressivement vers les sélecteurs ci-dessous.
 * -------------------------------------------------------------------------- */
.kanban-grid {
    display: grid;
    /* 2026-05-28 — Passage de 6 → 5 colonnes (retrait de « Facture à
       faire »). On laisse 5 colonnes égales remplir tout l'espace dispo. */
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.75rem;
    padding: 1rem;
}

.kcol {
    display: flex;
    flex-direction: column;
    background: var(--surface-2);
    border: 1px solid var(--rule);
    border-radius: var(--radius-md);
    min-height: 60vh;
    overflow: hidden;
}
.kcol-header {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--rule);
    font-weight: 600;
    background: var(--surface);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.kcol-body {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.kcol-footer {
    padding: 0.5rem 0.75rem;
    border-top: 1px solid var(--rule);
    font-size: 0.75rem;
    color: var(--ink-3);
    background: var(--surface);
}

.kcard {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
    padding: 0.625rem 0.75rem 0.625rem 1rem;
    box-shadow: var(--shadow-1);
    cursor: grab;
    transition: box-shadow 120ms, transform 120ms;
}
.kcard:hover { box-shadow: var(--shadow-2); }
.kcard:active { cursor: grabbing; }
.kcard::before {
    /* Stripe latérale gauche colorée selon l'entité */
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 4px;
    background: var(--ink-4);
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}
.kcard.is-modum::before  { background: var(--modum); }
.kcard.is-moenio::before { background: var(--moenio); }
.kcard-title { font-weight: 600; font-size: 0.875rem; color: var(--ink); }
.kcard-meta  { font-size: 0.75rem; color: var(--ink-3); margin-top: 0.125rem; }
.kcard-footer { display: flex; gap: 0.375rem; flex-wrap: wrap; margin-top: 0.5rem; }

/* --------------------------------------------------------------------------
 * Modales (overlay + content)
 * -------------------------------------------------------------------------- */
.modal-overlay {
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, 0.35);
    display: flex; align-items: center; justify-content: center;
    padding: 1rem;
    z-index: var(--z-modal);
}
.modal-overlay[hidden] { display: none; }

.modal-content {
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-4);
    max-width: 36rem;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    display: flex; flex-direction: column;
}
.modal-content-lg { max-width: 60rem; }
.modal-content-xl { max-width: 80rem; }

.modal-header,
.modal-footer { padding: 0.875rem 1.25rem; }
.modal-header {
    border-bottom: 1px solid var(--rule);
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem;
}
.modal-body { padding: 1.25rem; }
.modal-footer {
    border-top: 1px solid var(--rule);
    background: var(--surface-2);
    display: flex; justify-content: flex-end; gap: 0.5rem;
}
.modal-close {
    color: var(--ink-3);
    padding: 0.25rem;
    border-radius: var(--radius-sm);
}
.modal-close:hover { color: var(--ink); background: var(--surface-2); }

/* --------------------------------------------------------------------------
 * Toast (notifications éphémères)
 * Container global injecté par le JS (#toast-container)
 * -------------------------------------------------------------------------- */
.toast-container {
    /* Lot 8 polish — Bottom-right pour ne pas chevaucher le header (qui
       contient déjà des boutons en top-right). */
    position: fixed;
    bottom: 1rem; right: 1rem;
    display: flex;
    flex-direction: column-reverse;  /* les + récents en bas */
    gap: 0.5rem;
    z-index: var(--z-toast);
    pointer-events: none;
}
.toast {
    background: var(--surface);
    border: 1px solid var(--rule-2);
    border-left: 4px solid var(--ink-3);
    border-radius: var(--radius-sm);
    padding: 0.625rem 0.875rem;
    box-shadow: var(--shadow-3);
    font-size: 0.875rem;
    max-width: 24rem;
    pointer-events: auto;
}
.toast-info    { border-left-color: var(--froid); }
.toast-success { border-left-color: var(--valid); }
.toast-warning { border-left-color: var(--chaud); }
.toast-error   { border-left-color: var(--danger); }

/* --------------------------------------------------------------------------
 * Utilities
 * -------------------------------------------------------------------------- */
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.text-mono  { font-family: var(--mono); }
.mono       { font-family: var(--mono); }
.text-right { text-align: right; }
.text-left  { text-align: left; }
.text-center { text-align: center; }

/* Tailles typographiques (Lot 8 polish — Tailwind CDN retiré) */
.text-xs    { font-size: 0.75rem; }
.text-sm    { font-size: 0.875rem; }
.text-base  { font-size: 1rem; }
.text-lg    { font-size: 1.125rem; }

/* Poids typographiques */
.font-normal    { font-weight: 400; }
.font-medium    { font-weight: 500; }
.font-semibold  { font-weight: 600; }
.font-bold      { font-weight: 700; }
.font-mono      { font-family: var(--mono); }

/* Couleurs encre + sémantiques */
.text-ink   { color: var(--ink); }
.text-ink-2 { color: var(--ink-2); }
.text-ink-3 { color: var(--ink-3); }
.text-ink-4 { color: var(--ink-4); }
.text-danger { color: var(--danger); }
.text-valid  { color: var(--valid); }
.text-chaud  { color: var(--chaud); }
.text-froid  { color: var(--froid); }
.text-modum  { color: var(--modum); }
.text-moenio { color: var(--moenio); }
.text-today  { color: var(--today); }

/* Tabular nums (alignement chiffres dans les colonnes) */
.tabular-nums { font-variant-numeric: tabular-nums; }

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    clip: rect(0 0 0 0); overflow: hidden;
}

/* --------------------------------------------------------------------------
 * Scrollbars discrètes (Webkit / Chromium)
 * -------------------------------------------------------------------------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--rule-2);
    border-radius: 999px;
    border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--rule-strong); }


/* ===========================================================================
 * LOT 4 — Composants spécifiques Kanban (mini-barre, quick-actions, …)
 * Co-localisés avec les composants génériques (cohabitation Tailwind active).
 * =========================================================================== */

/* --- Mini-barre 3-segments de facturation -------------------------------- */
/*
 * Vert (billed)  = facturé
 * Orange (ready) = prêt à facturer (signalé par collab/CP)
 * Beige (todo)   = reste à venir
 * Affichée seulement si montant_signe > 0.
 */
.kbill {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: 0.375rem;
}
.kbill-bar {
    display: flex;
    height: 6px;
    border-radius: 3px;
    background: var(--surface-hi);
    overflow: hidden;
}
.kbill-seg {
    height: 100%;
    transition: width 200ms ease;
}
.kbill-seg-billed { background: var(--valid); }
.kbill-seg-ready  { background: var(--chaud); }
.kbill-seg-todo   { background: var(--ink-4); opacity: 0.35; }

.kbill-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.6875rem;
    color: var(--ink-3);
    font-family: var(--mono);
}
.kbill-meta .kbill-warn {
    padding: 0 0.375rem;
    border-radius: 999px;
    background: var(--chaud-bg);
    color: var(--chaud);
    font-weight: 600;
}

/* --- Quick-actions au survol d'une carte --------------------------------- */
/*
 * Petits boutons icônes en haut à droite, visibles seulement au :hover.
 * Le parent .kanban-card doit avoir position:relative (déjà le cas via le
 * code existant ; on force ici pour les nouvelles cartes du Lot 4).
 */
.kanban-card { position: relative; }
.kcard-actions {
    position: absolute;
    top: 4px;
    right: 4px;
    display: none;
    gap: 0.25rem;
    z-index: 2;
}
.kanban-card:hover .kcard-actions { display: flex; }
.kcard-action {
    width: 22px;
    height: 22px;
    border-radius: var(--radius-sm);
    background: var(--surface);
    border: 1px solid var(--rule-2);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.75rem;
    color: var(--ink-3);
    box-shadow: var(--shadow-1);
    cursor: pointer;
    transition: background-color 120ms, color 120ms;
}
.kcard-action:hover { background: var(--surface-2); color: var(--ink); }
.kcard-action.is-danger:hover { background: var(--danger-bg); color: var(--danger); }

/* --- Footer "Reste à facturer" sur la carte ------------------------------ */
.kcard-rest {
    margin-top: 0.375rem;
    padding-top: 0.375rem;
    border-top: 1px dashed var(--rule);
    display: flex;
    justify-content: space-between;
    font-size: 0.6875rem;
    color: var(--ink-3);
}
.kcard-rest strong { color: var(--ink-2); font-family: var(--mono); }

/* --- Carte Kanban désactivée (collab sans lien personnel) ---------------- */
/*
 * L'affaire reste visible (transparence partielle) mais signale clairement
 * que le collab n'a aucun lien direct dessus. Cursor not-allowed et drag
 * désactivé via opacité. Le click est intercepté côté JS (kanban.js) pour
 * afficher un toast au lieu de naviguer.
 */
.kanban-card-disabled {
    opacity: 0.55;
    filter: grayscale(40%);
    cursor: not-allowed !important;
}
.kanban-card-disabled:hover {
    border-color: var(--rule) !important;
    box-shadow: none !important;
}

/* --- Badges workflow facturation sur la carte (à valider / à facturer) --- */
.kcard-workflow-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.375rem;
}
.kcard-workflow {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
    padding: 0.0625rem 0.375rem;
    border-radius: 0.25rem;
    font-size: 0.625rem;
    font-weight: 500;
    border: 1px solid;
}
.kcard-workflow-valider {
    background: var(--chaud-bg);
    color: var(--chaud);
    border-color: var(--chaud);
}
.kcard-workflow-facturer {
    background: var(--valid-bg);
    color: var(--valid);
    border-color: var(--valid);
}
/* Refonte 2026-05-28 — pastille rouge "Signature cde urgente".
   Signale qu'au moins une prestation est validée à facturer mais que le
   devis parent n'a pas la case "Commande signée" cochée. Couleur danger
   pour attirer l'œil sans confondre avec la pastille "à valider" (orange). */
.kcard-workflow-signature {
    background: oklch(96% 0.04 22);
    color:      oklch(40% 0.16 22);
    border-color: oklch(80% 0.12 22);
    font-weight: 600;
}

/* --- Total reste-à-facturer sous l'en-tête de colonne -------------------- */
.kcol-total {
    font-size: 0.6875rem;
    color: var(--ink-3);
    font-family: var(--mono);
    margin-top: 2px;
}

/* --- Vue compacte : masque détails, réduit paddings --------------------- */
/*
 * Toggle via classe .is-compact sur le conteneur kanban (.grid).
 * Masque la mini-barre, le footer reste à facturer, les notes preview.
 */
.is-compact .kbill,
.is-compact .kcard-rest,
.is-compact .kcard-notes-preview,
.is-compact .kcard-contact { display: none !important; }

.is-compact .kanban-card {
    padding: 0.375rem 0.5rem 0.375rem 0.75rem !important;
}
.is-compact .kanban-card .kcard-title { font-size: 0.8125rem !important; }
.is-compact .kanban-card .kcard-meta  { font-size: 0.6875rem !important; }

/* --- Grid kanban 6 colonnes égales --------------------------------------- */
/*
 * Lot 6 fix — La 7ᵉ colonne pliable "Archivées" a été retirée. Les archives
 * se consultent via le bouton "🗄 Archives" du header (modale), même UX
 * que la corbeille. La classe est conservée (utilisée par le template)
 * pour éviter une cascade de renommages, mais ne définit plus que la
 * grille à 5 colonnes égales (refonte 2026-05-28 — retrait de la colonne
 * « Facture à faire »).
 */
.kanban-grid-with-archive {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.75rem;
}

/* ============================================================================
 * Cloche notifications (header) — Lot 6 fix MAJ
 * Composant autonome injecté par notif.js dans [data-notif-bell].
 * ============================================================================ */
.notif-bell {
    position: relative;
    display: inline-flex;
}
.notif-bell-btn {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius-md);
    width: 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-2);
    font-size: 1rem;
    cursor: pointer;
    transition: background 120ms, color 120ms;
    position: relative;
}
.notif-bell-btn:hover { background: var(--surface-hi); color: var(--ink); }
.notif-bell-badge {
    position: absolute;
    top: -0.25rem;
    right: -0.25rem;
    min-width: 1.125rem;
    height: 1.125rem;
    padding: 0 0.25rem;
    border-radius: 0.5625rem;
    background: var(--danger);
    color: white;
    font-size: 0.625rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.notif-bell-badge.is-hidden { display: none; }
.notif-bell-panel {
    position: absolute;
    top: calc(100% + 0.375rem);
    right: 0;
    min-width: 22rem;
    max-width: 28rem;
    max-height: 28rem;
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-2);
    z-index: var(--z-popover);
    display: none;
}
.notif-bell-panel.is-open { display: block; }
.notif-bell-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.625rem 0.875rem;
    border-bottom: 1px solid var(--rule);
    position: sticky;
    top: 0;
    background: var(--surface);
}
.notif-bell-head h3 { font-size: 0.875rem; font-weight: 600; }
.notif-bell-mark-all {
    font-size: 0.75rem;
    background: none;
    border: 0;
    color: var(--ink-3);
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
}
.notif-bell-mark-all:hover { background: var(--surface-hi); color: var(--ink); }
.notif-bell-empty {
    padding: 1.5rem 1rem;
    text-align: center;
    color: var(--ink-3);
    font-size: 0.8125rem;
}
.notif-bell-item {
    display: flex;
    gap: 0.5rem;
    padding: 0.625rem 0.875rem;
    border-bottom: 1px solid var(--rule);
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: background 120ms;
}
.notif-bell-item:last-child { border-bottom: 0; }
.notif-bell-item:hover { background: var(--surface-2); }
.notif-bell-item.is-unread { background: var(--surface-2); }
.notif-bell-item.is-unread::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--info);
    flex-shrink: 0;
    margin-top: 0.375rem;
}
.notif-bell-item.is-unread.notif-type-facturation_a_valider::before { background: var(--chaud); }
.notif-bell-item.is-unread.notif-type-facturation_prete::before     { background: var(--valid); }
.notif-bell-item.is-unread.notif-type-facturation_emise::before     { background: var(--valid); }
.notif-bell-item.is-unread.notif-type-facturation_ajustee::before   { background: var(--info); }
.notif-bell-item.is-unread.notif-type-facturation_refusee::before   { background: var(--danger); }
.notif-bell-item:not(.is-unread)::before {
    content: "";
    width: 0.5rem;
    flex-shrink: 0;
}
.notif-bell-item-body { flex: 1; min-width: 0; }
.notif-bell-item-titre { font-size: 0.8125rem; font-weight: 500; color: var(--ink); }
.notif-bell-item-corps { font-size: 0.75rem; color: var(--ink-2); margin-top: 0.125rem; }
.notif-bell-item-date  { font-size: 0.6875rem; color: var(--ink-3); margin-top: 0.25rem; }

/* ============================================================================
 * Recherche globale (Lot 8) — composant autonome injecté par search.js
 * dans [data-search-global]. Pattern jumeau de notif.js.
 * ============================================================================ */
.search-global { position: relative; }

.search-global-btn {
    width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--surface);
    border: 1px solid var(--rule);
    color: var(--ink-2);
    border-radius: var(--radius-md);
    font-size: 1.125rem;
    line-height: 1;
    cursor: pointer;
    transition: background 120ms, color 120ms, border-color 120ms;
}
.search-global-btn:hover {
    background: var(--surface-hi);
    color: var(--ink);
    border-color: var(--rule-2);
}

.search-global-panel {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    width: min(32rem, calc(100vw - 2rem));
    max-height: 70vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-3);
    z-index: 60;
}
.search-global-input {
    width: 100%;
    padding: 0.625rem 0.875rem;
    border: none;
    border-bottom: 1px solid var(--rule);
    font: inherit;
    font-size: 0.9375rem;
    color: var(--ink);
    background: var(--surface);
}
.search-global-input:focus {
    outline: none;
    background: var(--surface);
}
.search-global-hint {
    padding: 0.375rem 0.875rem;
    font-size: 0.75rem;
    color: var(--ink-3);
    border-bottom: 1px solid var(--rule);
    background: var(--surface-2);
}
.search-global-results {
    overflow-y: auto;
    flex: 1;
    padding: 0.25rem;
}
.search-global-group { padding: 0.25rem 0; }
.search-global-group-title {
    padding: 0.25rem 0.5rem;
    font-size: 0.6875rem;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.search-global-group-count {
    background: var(--surface-hi);
    color: var(--ink-3);
    padding: 0 0.375rem;
    border-radius: 999px;
    font-weight: 500;
}
.search-global-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.625rem;
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: inherit;
    transition: background 80ms;
}
.search-global-item:hover,
.search-global-item.is-active {
    background: var(--surface-hi);
}
.search-global-numero {
    flex-shrink: 0;
    width: 4rem;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--ink-2);
    text-align: right;
}
.search-global-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}
.search-global-client {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.search-global-meta {
    font-size: 0.75rem;
    color: var(--ink-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.search-global-statut {
    flex-shrink: 0;
    font-size: 0.6875rem;
    color: var(--ink-3);
    text-align: right;
    max-width: 11rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.search-global-tag-archive { margin-left: 0.25rem; }
.search-global-item mark {
    background: oklch(95% 0.12 90);
    color: inherit;
    padding: 0 1px;
    border-radius: 2px;
}

/* Lot 8 — onglets de filtre dans la cloche notifs */
.notif-bell-tabs {
    display: flex;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-bottom: 1px solid var(--rule);
    background: var(--surface-2);
    overflow-x: auto;
}
.notif-bell-tab {
    flex-shrink: 0;
    padding: 0.25rem 0.625rem;
    background: transparent;
    border: 1px solid transparent;
    color: var(--ink-3);
    border-radius: var(--radius-xs, 4px);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 80ms, color 80ms;
}
.notif-bell-tab:hover {
    background: var(--surface);
    color: var(--ink-2);
}
.notif-bell-tab.is-active {
    background: var(--surface);
    color: var(--ink);
    border-color: var(--rule);
    font-weight: 600;
}