@import '@fontsource-variable/sora';

@tailwind base;
@tailwind components;
@tailwind utilities;

/* Éléments Alpine masqués jusqu'à l'initialisation (menu mobile, boîtes de dialogue). */
[x-cloak] { display: none !important; }

/* =====================================================================
   Système de style DOUAWÊ WiFi Zone : bleu nuit + orange, titres Sora, surfaces douces.
   Tout l'habillage passe par les composants (resources/views/components/ui) : modifier ici change toute l'application.
   ===================================================================== */
@layer base {
    html { -webkit-tap-highlight-color: transparent; scroll-behavior: smooth; }
    body {
        background-color: #eef2f8;
        background-image: radial-gradient(1200px 420px at 85% -120px, rgba(26, 74, 168, .10), transparent 70%), radial-gradient(900px 380px at -10% 0, rgba(249, 115, 22, .06), transparent 70%);
        background-attachment: fixed;
    }
    ::selection { background: #fed7aa; color: #071d4a; }
    h1, h2, h3 { text-wrap: balance; }
    :focus-visible { outline: 2px solid #f97316; outline-offset: 2px; }
}

/* Tous les champs de l'application (y compris ceux écrits à la main dans les vues) : mêmes arrondis, même focus. */
body input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]):not([type=submit]):not([type=button]):not([type=range]):not([type=color]),
body select, body textarea {
    border-color: #cbd5e1; border-radius: .85rem; background-color: #fff; color: #0f172a; transition: border-color .15s ease, box-shadow .15s ease;
}
body input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]):not([type=submit]):not([type=button]):not([type=range]):not([type=color]):focus,
body select:focus, body textarea:focus {
    border-color: #1a4aa8; --tw-ring-color: rgb(26 74 168 / .16); --tw-ring-offset-width: 0px; box-shadow: 0 0 0 4px rgb(26 74 168 / .14);
}
body input[type=checkbox], body input[type=radio] { color: #0a2a66; border-color: #94a3b8; }
body input[type=checkbox]:focus, body input[type=radio]:focus { --tw-ring-color: rgb(249 115 22 / .4); }
body input::placeholder, body textarea::placeholder { color: #94a3b8; }

/* Un élément « hidden » doit TOUJOURS disparaître, même s'il porte une classe d'affichage (flex, grid…) : sinon un voile ou un menu
   « fermé » reste actif et bloque tous les clics de la page. */
[hidden] { display: none !important; }

/* Les éléments d'une grille ne peuvent pas rétrécir sous la largeur de leur contenu (tableau, champ, long texte) : sans cette règle,
   un cadre dépasse l'écran du téléphone et son bord droit est rogné. */
.grid > * { min-width: 0; }

@layer components {
    /* Surfaces */
    .wz-card { background: #fff; border: 1px solid rgb(226 232 240 / .75); border-radius: 1.25rem; box-shadow: 0 1px 2px rgb(15 23 42 / .04), 0 14px 32px -20px rgb(15 23 42 / .22); }
    .mk-card { background: #fff; border: 1px solid rgb(226 232 240 / .75); border-radius: 1.25rem; box-shadow: 0 1px 2px rgb(15 23 42 / .04), 0 14px 32px -20px rgb(15 23 42 / .22); }
    .wz-card-hover { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
    .wz-card-hover:hover { transform: translateY(-2px); border-color: rgb(26 74 168 / .35); box-shadow: 0 1px 2px rgb(15 23 42 / .05), 0 20px 36px -20px rgb(10 42 102 / .35); }

    /* Cartes de chiffres (composant ui/stat) */
    .pg-stat { position: relative; overflow: hidden; background: #fff; border: 1px solid rgb(226 232 240 / .75); border-radius: 1.25rem; padding: 1rem 1.1rem; box-shadow: 0 1px 2px rgb(15 23 42 / .04), 0 14px 32px -22px rgb(15 23 42 / .25); }
    .pg-stat::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--stat, #1a4aa8); }
    .pg-stat::after { content: ''; position: absolute; right: -28px; top: -28px; width: 96px; height: 96px; border-radius: 9999px; background: var(--stat, #1a4aa8); opacity: .06; }
    .pg-stat-blue { --stat: #1a4aa8; } .pg-stat-gold { --stat: #f97316; } .pg-stat-emerald { --stat: #059669; } .pg-stat-rose { --stat: #e11d48; }
    .pg-stat { min-width: 0; }
    .pg-stat > * { overflow-wrap: anywhere; }
    .pg-stat-label { font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #64748b; }
    .pg-stat-value { margin-top: .25rem; font-family: 'Sora Variable', ui-sans-serif, system-ui, sans-serif; font-size: clamp(.85rem, 4.3vw, 1.6rem); overflow-wrap: anywhere; line-height: 1.15; font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }

    /* Tableaux : lisibles, sobres, qui défilent dans leur cadre sur téléphone */
    .wz-table { width: 100%; font-size: .875rem; border-collapse: separate; border-spacing: 0; }
    .wz-table thead th { position: sticky; top: 0; background: #f8fafc; color: #64748b; font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; text-align: left; padding: .65rem 1rem; border-bottom: 1px solid #e2e8f0; white-space: nowrap; }
    .wz-table tbody td { padding: .8rem 1rem; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
    .wz-table tbody tr:last-child td { border-bottom: 0; }
    .wz-table tbody tr { transition: background-color .12s ease; }
    .wz-table tbody tr:hover { background: #f8fafc; }

    /* Tableaux QUADRILLÉS : chaque cellule est encadrée, l'en-tête a sa propre grille, la ligne touchée s'illumine
       et reste illuminée pour la suivre quand le tableau défile. S'applique avec la classe « wz-grid » sur le <table>
       (« wz-grid-wrap » sur son cadre quand on veut un défilement avec barre bien visible et en-tête qui reste en haut). */
    .wz-grid { --wz-grid: #b4c4e0; --wz-grid-strong: #7f9ac8; width: 100%; font-size: .8125rem; border-collapse: separate; border-spacing: 0; border: 1px solid var(--wz-grid); background: #fff; }
    .wz-grid :where(thead, tbody, tfoot, tr) { border: 0 !important; box-shadow: none; }
    .wz-grid th, .wz-grid td { border-right: 1px solid var(--wz-grid); border-bottom: 1px solid var(--wz-grid); }
    .wz-grid tr > :last-child { border-right: 0; }
    .wz-grid tbody tr:last-child > td { border-bottom: 0; }
    .wz-grid thead th { position: sticky; top: 0; z-index: 2; background: #e4ecfa; color: #0a2a66; font-size: .72rem; font-weight: 700; letter-spacing: .03em; text-align: left; white-space: nowrap; border-bottom: 2px solid var(--wz-grid-strong); }
    .wz-grid tbody td { background: #fff; }
    .wz-grid tbody tr:nth-child(even) > td { background: #f5f8fd; }
    .wz-grid tbody tr { transition: background-color .12s ease; }
    .wz-grid tbody tr:hover > td, .wz-grid tbody tr:active > td { background: #fff0dc; }
    .wz-grid tbody tr.is-hot > td { background: #ffe0b8; }
    .wz-grid tfoot td { background: #e4ecfa; color: #0a2a66; font-weight: 700; border-top: 2px solid var(--wz-grid-strong); }
    .wz-grid-wrap { overflow: auto; overscroll-behavior: contain; border-radius: .9rem; border: 1px solid #b4c4e0; background: #fff; scrollbar-width: auto; scrollbar-color: #f97316 #e4ecfa; }
    .wz-grid-wrap > .wz-grid { border: 0; }
    .wz-grid-wrap::-webkit-scrollbar { width: 13px; height: 13px; }
    .wz-grid-wrap::-webkit-scrollbar-track { background: #e4ecfa; }
    .wz-grid-wrap::-webkit-scrollbar-thumb { background: #f97316; border: 3px solid #e4ecfa; border-radius: 9999px; }
    .wz-grid-wrap::-webkit-scrollbar-corner { background: #e4ecfa; }

    /* Liste en lignes (téléphone d'abord) */
    .wz-rows > li { padding: .85rem 1rem; }
    .wz-rows { border-top: 1px solid #f1f5f9; }
    .wz-rows > li + li { border-top: 1px solid #f1f5f9; }

    /* Champs de formulaire */
    .wz-input { display: block; width: 100%; border: 1px solid #cbd5e1; border-radius: .85rem; background: #fff; padding: .6rem .85rem; font-size: .9rem; color: #0f172a; box-shadow: inset 0 1px 1px rgb(15 23 42 / .03); transition: border-color .15s ease, box-shadow .15s ease; }
    .wz-input::placeholder { color: #94a3b8; }
    .wz-input:focus { outline: none; border-color: #1a4aa8; box-shadow: 0 0 0 4px rgb(26 74 168 / .14); }
    .wz-input.is-invalid { border-color: #f87171; }

    /* Fond sombre en filigrane d'ondes WiFi (bandeaux d'en-tête) */
    .wz-hero { position: relative; isolation: isolate; overflow: hidden; background: radial-gradient(900px 300px at 100% 0, rgb(56 189 248 / .18), transparent 60%), linear-gradient(135deg, #0a2a66 0%, #071d4a 55%, #041233 100%); color: #fff; }
    .wz-hero::after { content: ''; position: absolute; z-index: -1; right: -90px; top: -110px; width: 380px; height: 380px; border-radius: 9999px; background: repeating-radial-gradient(circle, rgb(255 255 255 / .07) 0 14px, transparent 14px 44px); }

    /* Apparition douce du contenu d'une page */
    .wz-rise > * { animation: wz-rise .42s cubic-bezier(.2, .7, .2, 1) both; }
    .wz-rise > *:nth-child(2) { animation-delay: .04s; } .wz-rise > *:nth-child(3) { animation-delay: .08s; } .wz-rise > *:nth-child(4) { animation-delay: .12s; } .wz-rise > *:nth-child(n+5) { animation-delay: .16s; }
}
@keyframes wz-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .wz-rise > * { animation: none !important; } .wz-card-hover:hover { transform: none; } html { scroll-behavior: auto; } }

/* ---------- Tableau de bord ---------- */

.font-display { font-feature-settings: 'tnum' 1, 'ss01' 1; }

/* Point « en direct » : la seule animation permanente de l'écran. */
.live-dot { position: relative; display: inline-flex; height: .625rem; width: .625rem; }
.live-dot::before, .live-dot::after { content: ''; position: absolute; inset: 0; border-radius: 9999px; background: #38bdf8; }
.live-dot::before { animation: live-ripple 2.4s cubic-bezier(.2, .6, .3, 1) infinite; }
@keyframes live-ripple { from { transform: scale(1); opacity: .7; } to { transform: scale(3.2); opacity: 0; } }

/* Tracé de la courbe à l'arrivée sur la page. */
.draw-line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw-line 1.1s .15s cubic-bezier(.3, .7, .2, 1) forwards; }
@keyframes draw-line { to { stroke-dashoffset: 0; } }

/* Nouvelle vente reçue en direct. */
.pulse-flash { animation: pulse-flash 1.2s ease-out; }
@keyframes pulse-flash { 0% { color: #fdba74; text-shadow: 0 0 24px rgba(249, 115, 22, .55); } 100% { text-shadow: none; } }

/* Carte de chaleur : 5 niveaux, deux palettes (ventes en orange, affluence WiFi en bleu ciel). */
.hm-cell { border-radius: 3px; aspect-ratio: 1 / 1; background: #eef2f7; transition: transform .12s ease; }
.hm-cell:hover, .hm-cell:focus-visible { transform: scale(1.25); outline: 2px solid #0a2a66; outline-offset: 1px; position: relative; z-index: 1; }
.hm-sales .hm-1 { background: #ffedd5; } .hm-sales .hm-2 { background: #fdba74; } .hm-sales .hm-3 { background: #f97316; } .hm-sales .hm-4 { background: #c2410c; }
.hm-traffic .hm-1 { background: #e0f2fe; } .hm-traffic .hm-2 { background: #7dd3fc; } .hm-traffic .hm-3 { background: #0ea5e9; } .hm-traffic .hm-4 { background: #075985; }

/* Infobulle des graphiques. */
.chart-tip { position: fixed; z-index: 60; pointer-events: none; max-width: 16rem; border-radius: .5rem; background: #041233; color: #fff; padding: .4rem .6rem; font-size: .75rem; line-height: 1.35; box-shadow: 0 8px 24px rgba(4, 18, 51, .25); }

/* Mode écran (TV du bureau) : menu et barre du haut masqués, tableau de bord plein écran. */
body.tv-mode aside, body.tv-mode > div > div > header { display: none !important; }
body.tv-mode main { max-width: none; padding: 1.5rem 2rem; }
body.tv-mode [data-hide-on-tv] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
    .live-dot::before, .draw-line, .pulse-flash { animation: none !important; }
    .draw-line { stroke-dashoffset: 0; }
    .hm-cell { transition: none; }
}