/**
 * Thème global — source de vérité des tokens de marque et des composants
 * partagés par toutes les pages Tailwind (racine + apps/*).
 *
 * À charger AVANT tout `<style>` de page, juste après les Google Fonts.
 * Aucune dépendance à Tailwind : `apps/database` (PHP, thème [data-theme])
 * peut aussi le consommer via des fallbacks.
 */

:root {
    /* ——— Marque ———
       Échantillonné dans images/logo_firecheck_toolbox.png. */
    --fc-brand-start: #9c211c;
    --fc-brand-mid: #d22510;
    --fc-brand-end: #ef5b00;
    --fc-brand-gradient: linear-gradient(to right, var(--fc-brand-start), var(--fc-brand-mid), var(--fc-brand-end));

    /* ——— Surfaces & texte ——— */
    --fc-bg-page: #ffffff;
    --fc-bg-surface: #ffffff;
    --fc-bg-muted: #f9fafb;
    --fc-bg-sunken: #f1f1f1;
    --fc-border: #e5e7eb;
    --fc-text: #111827;
    --fc-text-muted: #6b7280;

    /* ——— Feedback ———
       Alignés sur la palette des toasts (modules/ui-helpers.js). */
    --fc-success: #4caf50;
    --fc-danger: #ef4444;
    --fc-info: #3b82f6;
    --fc-warning: #f97316;

    /* ——— Types d'équipement ———
       Reprend modules/equipment-type-colors.js, qui sert déjà aux boutons de
       clients_form.html, aux en-têtes PDF et à equipment-form-layout.css. */
    --fc-eq-extincteurs: #dc2626;
    --fc-eq-baes: #16a34a;
    --fc-eq-ria: #2563eb;
    --fc-eq-ssi: #eab308;
    --fc-eq-desenfumage: #9333ea;
    --fc-eq-poteaux: #ea580c;
    --fc-eq-portes: #0d9488;

    /* Variantes texte : #eab308 sur blanc ne fait que ~1.9:1, illisible pour un
       chiffre. Les aplats (badges, en-têtes PDF) gardent la teinte ci-dessus. */
    --fc-eq-ssi-text: #a16207;
    --fc-eq-poteaux-text: #c2410c;

    /* ——— Arrondis ——— */
    --fc-radius-sm: 0.375rem;  /* champs, boutons du header */
    --fc-radius-md: 0.5rem;    /* boutons primaires, toasts */
    --fc-radius-lg: 0.75rem;   /* modales */
    --fc-radius-xl: 1rem;      /* grandes cartes (applications, statistiques) */

    /* ——— Overlays (loader plein écran) ——— */
    --fc-overlay-bg: #ffffff;
    --fc-overlay-fade: 0.45s;

    /* ——— Couches d'empilement ———
       Une page qui a besoin d'un ordre différent surcharge la variable, elle ne
       recopie pas la règle. */
    --fc-z-modal: 5000;
    --fc-z-overlay: 7000;
    --fc-z-toast: 8000;
    --fc-z-blocking: 9000;
}

/* ============================================================
   BASE
   ============================================================ */

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--fc-bg-page);
}

/* ============================================================
   TOAST — piloté par showMessage() (modules/ui-helpers.js)
   ============================================================ */

.message-box {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--fc-success);
    color: #fff;
    padding: 15px 20px;
    border-radius: var(--fc-radius-md);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: var(--fc-z-toast);
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    /*
     * `#messageBox` est présent en permanence dans le DOM (balise statique des
     * formulaires), simplement rendu invisible par `opacity: 0`. Sans
     * `pointer-events: none`, cette boîte fixe (z-index 8000, centrée en haut)
     * interceptait les clics sur ce qui se trouve dessous — c'est ce qui rendait
     * inopérante la partie haute du bouton « Afficher le plan du magasin ».
     * Un toast n'est jamais cliquable : la règle reste valable à l'état `.show`.
     */
    pointer-events: none;
}

.message-box.show {
    opacity: 1;
}

/* ============================================================
   OVERLAY DE CHARGEMENT — contient .business-loader
   (voir modules/business-loader.css)
   ============================================================ */

.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--fc-overlay-bg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: var(--fc-z-overlay);
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    /*
     * Transition uniquement sur l’état de base.
     * Si .show redéfinit transition (delay visibility 0), au remove de .show
     * le navigateur applique visibility:hidden immédiatement → fade invisible.
     */
    transition:
        opacity var(--fc-overlay-fade) ease-out,
        visibility var(--fc-overlay-fade);
}

.loading-overlay.show {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

/* ============================================================
   BOUTONS & TEXTE DE MARQUE
   ============================================================ */

/* Géométrie commune aux trois variantes de bouton. */
.fc-btn-brand,
.fc-btn-outline,
.fc-btn-neutral {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    border-radius: var(--fc-radius-md);
    cursor: pointer;
    transition: opacity 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.fc-btn-brand:focus-visible,
.fc-btn-outline:focus-visible,
.fc-btn-neutral:focus-visible {
    outline: 2px solid var(--fc-brand-mid);
    outline-offset: 2px;
}

.fc-btn-brand--block,
.fc-btn-outline--block,
.fc-btn-neutral--block {
    width: 100%;
}

/* Action primaire.
   Bordure transparente et non `none` : les trois variantes doivent avoir la même
   hauteur, sans quoi un `.fc-btn-brand` posé à côté d'un `.fc-btn-neutral` dans
   un conteneur flex se fait étirer de 2px. */
.fc-btn-brand {
    color: #fff;
    background: var(--fc-brand-gradient);
    border: 1px solid transparent;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.fc-btn-brand:hover {
    opacity: 0.9;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* Action secondaire : même identité, poids visuel moindre. */
.fc-btn-outline {
    color: var(--fc-brand-mid);
    background-color: transparent;
    border: 1px solid var(--fc-brand-mid);
}

.fc-btn-outline:hover {
    color: #fff;
    background: var(--fc-brand-gradient);
    border-color: transparent;
}

/* Action neutre : annuler, fermer — jamais l'action attendue. */
.fc-btn-neutral {
    color: #374151;
    background-color: #e5e7eb;
    border: 1px solid transparent;
}

.fc-btn-neutral:hover {
    background-color: #d1d5db;
}

/* Texte au dégradé de marque. */
.fc-text-brand {
    background: var(--fc-brand-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Onglet actif : texte + soulignement au dégradé (page de connexion). */
.fc-tab-active {
    background: var(--fc-brand-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    border-bottom: 2px solid transparent;
    border-image: var(--fc-brand-gradient) 1;
}

@media (prefers-reduced-motion: reduce) {
    .message-box,
    .fc-btn-brand,
    .fc-btn-outline,
    .fc-btn-neutral {
        transition: none;
    }
    /* Loader : garder une fade courte (pas transition:none — sinon disparition brutale) */
    .loading-overlay {
        transition: opacity 0.2s ease-out, visibility 0.2s;
    }
}