/**
 * Theme "Pilote" - direction artistique de HACCP-PILOTE.
 *
 * Version claire : fond presque blanc, cartes et boutons dans un bleu-gris
 * clair un cran plus fonce que le fond, textes bleu nuit, navbar bleu nuit
 * soulignee du degrade bleu-vert du logo. Chaque section garde sa couleur
 * (App\Enums\AppModule). Le theme redefinit les utilitaires Tailwind deja
 * employes par les vues, il n'y a donc aucune classe a ajouter dans le HTML.
 *
 * Actif quand <html data-theme="pilote"> est pose par theme.js.
 *
 * Tout le theme vit dans @media screen : a l'impression (etiquettes QR,
 * rapports, fiches de tracabilite) l'application retombe sur l'apparence
 * Tailwind d'origine, sur fond blanc.
 */

@media screen {

    html[data-theme='pilote'] {
        --p-bg: #F4F7FB;
        --p-surface: #E6EDF5;
        --p-raised: #D9E3EE;
        --p-field: #FFFFFF;
        --p-line: #CBD7E4;
        --p-line-strong: #AFC0D3;
        --p-text: #0E1F35;
        --p-text-2: #34495F;
        --p-text-3: #5A6E84;
        --p-navy: #0E1F35;
        --p-navy-2: #1F3350;
        --p-blue: #2E8BE0;
        --p-green: #3ECF5C;
        --p-shadow: 0 8px 22px -16px rgba(14, 31, 53, 0.45);
        --p-shadow-hover: 0 14px 30px -16px rgba(14, 31, 53, 0.5);

        /* Couleur de la section courante (bleu par defaut, voir plus bas). */
        --p-accent: #2E8BE0;
        --p-accent-deep: #1D6FBD;
        --p-accent-text: #1A62A8;
        --p-accent-rgb: 46, 139, 224;
        --p-accent-ink: #FFFFFF;

        color-scheme: light;
    }

    /* ------------------------------------------------ Couleurs des sections */

    /* La navbar porte data-module : chaque section reprend la couleur de sa
       tuile du tableau de bord. Les tuiles elles-memes portent module-*. */

    html[data-theme='pilote']:has(header[data-module='goods']),
    html[data-theme='pilote'] .module-goods {
        --p-accent: #2FB24C;
        --p-accent-deep: #1F8B39;
        --p-accent-text: #18752F;
        --p-accent-rgb: 47, 178, 76;
    }

    html[data-theme='pilote']:has(header[data-module='manufacturing']),
    html[data-theme='pilote'] .module-manufacturing {
        --p-accent: #EE8A2A;
        --p-accent-deep: #C96B12;
        --p-accent-text: #A9550A;
        --p-accent-rgb: 238, 138, 42;
    }

    html[data-theme='pilote']:has(header[data-module='traceability']),
    html[data-theme='pilote'] .module-traceability,
    html[data-theme='pilote'] .module-dashboard {
        --p-accent: #2E8BE0;
        --p-accent-deep: #1D6FBD;
        --p-accent-text: #1A62A8;
        --p-accent-rgb: 46, 139, 224;
    }

    html[data-theme='pilote']:has(header[data-module='cleaning']),
    html[data-theme='pilote'] .module-cleaning {
        --p-accent: #1FAFC6;
        --p-accent-deep: #138A9E;
        --p-accent-text: #0E7486;
        --p-accent-rgb: 31, 175, 198;
    }

    html[data-theme='pilote']:has(header[data-module='deliveries']),
    html[data-theme='pilote'] .module-deliveries {
        --p-accent: #D4A017;
        --p-accent-deep: #A87C0C;
        --p-accent-text: #87620A;
        --p-accent-rgb: 212, 160, 23;
    }

    html[data-theme='pilote']:has(header[data-module='reports']),
    html[data-theme='pilote'] .module-reports {
        --p-accent: #DE5C95;
        --p-accent-deep: #BC3F76;
        --p-accent-text: #A8356A;
        --p-accent-rgb: 222, 92, 149;
    }

    html[data-theme='pilote']:has(header[data-module='configuration']),
    html[data-theme='pilote'] .module-configuration {
        --p-accent: #8466EA;
        --p-accent-deep: #6547CF;
        --p-accent-text: #5A3DC0;
        --p-accent-rgb: 132, 102, 234;
    }

    html[data-theme='pilote']:has(header[data-module='settings']),
    html[data-theme='pilote'] .module-settings {
        --p-accent: #6F84A0;
        --p-accent-deep: #53677F;
        --p-accent-text: #4A5C74;
        --p-accent-rgb: 111, 132, 160;
    }

    /* ---------------------------------------------------------------- Fonds */

    /* Le fond est porte par <html>, qui couvre toute la page : les vues
       donnent a <body> une hauteur fixe (h-full) que le contenu depasse sur
       telephone. Sur <html> un fond se repete a chaque hauteur d'ecran : les
       halos ne sont dessines qu'une fois, la couleur unie couvre le reste. */
    html[data-theme='pilote'],
    html[data-theme='pilote'].bg-slate-50 {
        background-color: var(--p-bg);
        background-image:
            radial-gradient(1200px 520px at 10% -14%, rgba(46, 139, 224, 0.09), transparent 62%),
            radial-gradient(1000px 480px at 94% 0%, rgba(62, 207, 92, 0.07), transparent 60%);
        background-repeat: no-repeat;
    }

    html[data-theme='pilote'] body,
    html[data-theme='pilote'] body.bg-slate-50,
    html[data-theme='pilote'] body.bg-slate-100 {
        background: transparent;
        color: var(--p-text);
        overflow-x: hidden;
    }

    /* Cartes, panneaux et boutons secondaires : un cran plus fonces que le
       fond de page. */
    html[data-theme='pilote'] .bg-white {
        background-color: var(--p-surface);
    }

    html[data-theme='pilote'] .bg-slate-50,
    html[data-theme='pilote'] .bg-slate-50\/50,
    html[data-theme='pilote'] .bg-slate-100 {
        background-color: var(--p-raised);
    }

    html[data-theme='pilote'] .bg-slate-200\/80,
    html[data-theme='pilote'] .hover\:bg-slate-200:hover {
        background-color: #CFDAE6;
    }

    html[data-theme='pilote'] .hover\:bg-slate-300\/80:hover,
    html[data-theme='pilote'] .active\:bg-slate-300:active {
        background-color: #C2D0DF;
    }

    html[data-theme='pilote'] .hover\:bg-slate-50:hover,
    html[data-theme='pilote'] .hover\:bg-slate-50\/80:hover,
    html[data-theme='pilote'] .hover\:bg-slate-100:hover,
    html[data-theme='pilote'] .hover\:bg-white:hover {
        background-color: #D6E0EB;
    }

    /* ---------------------------------------------------------------- Textes */

    html[data-theme='pilote'] .text-slate-900,
    html[data-theme='pilote'] .text-slate-800,
    html[data-theme='pilote'] .hover\:text-slate-900:hover,
    html[data-theme='pilote'] .text-gray-800 {
        color: var(--p-text);
    }

    html[data-theme='pilote'] .text-slate-700,
    html[data-theme='pilote'] .text-slate-600,
    html[data-theme='pilote'] .text-gray-600 {
        color: var(--p-text-2);
    }

    html[data-theme='pilote'] .text-slate-500 {
        color: var(--p-text-3);
    }

    html[data-theme='pilote'] h1,
    html[data-theme='pilote'] h2 {
        letter-spacing: -0.02em;
    }

    /* ---------------------------------------------------------------- Bordures */

    html[data-theme='pilote'] .border-slate-100,
    html[data-theme='pilote'] .border-slate-200,
    html[data-theme='pilote'] .border-slate-200\/60,
    html[data-theme='pilote'] .border-slate-200\/80,
    html[data-theme='pilote'] .border-gray-300,
    html[data-theme='pilote'] .divide-slate-100 > :not([hidden]) ~ :not([hidden]),
    html[data-theme='pilote'] .divide-slate-200 > :not([hidden]) ~ :not([hidden]) {
        border-color: var(--p-line);
    }

    html[data-theme='pilote'] .border-slate-300,
    html[data-theme='pilote'] .hover\:border-slate-300:hover {
        border-color: var(--p-line-strong);
    }

    html[data-theme='pilote'] .hover\:border-blue-300:hover,
    html[data-theme='pilote'] .group:hover .group-hover\:border-blue-300 {
        border-color: rgba(var(--p-accent-rgb), 0.7);
    }

    /* ------------------------------------- Accent de section (classes bleues) */

    html[data-theme='pilote'] .text-blue-600,
    html[data-theme='pilote'] .text-blue-700,
    html[data-theme='pilote'] .text-blue-800,
    html[data-theme='pilote'] .text-blue-900,
    html[data-theme='pilote'] .text-blue-950,
    html[data-theme='pilote'] .hover\:text-blue-700:hover,
    html[data-theme='pilote'] .group:hover .group-hover\:text-blue-600,
    html[data-theme='pilote'] .group:hover .group-hover\:text-blue-700 {
        color: var(--p-accent-text);
    }

    html[data-theme='pilote'] .bg-blue-50,
    html[data-theme='pilote'] .bg-blue-50\/50,
    html[data-theme='pilote'] .bg-blue-50\/60,
    html[data-theme='pilote'] .bg-blue-50\/80,
    html[data-theme='pilote'] .bg-blue-100,
    html[data-theme='pilote'] .bg-blue-100\/80,
    html[data-theme='pilote'] .bg-blue-200\/80 {
        background-color: rgba(var(--p-accent-rgb), 0.16);
    }

    html[data-theme='pilote'] .hover\:bg-blue-50\/30:hover,
    html[data-theme='pilote'] .hover\:bg-blue-100:hover,
    html[data-theme='pilote'] .hover\:bg-blue-100\/50:hover,
    html[data-theme='pilote'] .hover\:bg-blue-100\/70:hover {
        background-color: rgba(var(--p-accent-rgb), 0.26);
    }

    html[data-theme='pilote'] .border-blue-100,
    html[data-theme='pilote'] .border-blue-200,
    html[data-theme='pilote'] .border-blue-300,
    html[data-theme='pilote'] .border-blue-400 {
        border-color: rgba(var(--p-accent-rgb), 0.5);
    }

    html[data-theme='pilote'] .focus\:ring-blue-500:focus,
    html[data-theme='pilote'] .focus\:ring-blue-600:focus {
        --tw-ring-color: rgba(var(--p-accent-rgb), 0.85);
    }

    html[data-theme='pilote'] .focus\:border-blue-500:focus,
    html[data-theme='pilote'] .focus\:border-blue-600:focus {
        border-color: var(--p-accent);
    }

    /* -------------------------------------------------------------- Boutons */

    html[data-theme='pilote'] .bg-blue-600 {
        background-image: linear-gradient(135deg, var(--p-accent) 0%, var(--p-accent-deep) 100%);
        background-color: transparent;
        color: var(--p-accent-ink);
        box-shadow: 0 8px 18px -10px rgba(var(--p-accent-rgb), 0.8);
    }

    html[data-theme='pilote'] .hover\:bg-blue-700:hover,
    html[data-theme='pilote'] .active\:bg-blue-800:active {
        background-image: linear-gradient(135deg, var(--p-accent-deep) 0%, var(--p-accent-deep) 100%);
        background-color: transparent;
    }

    html[data-theme='pilote'] .group:hover .group-hover\:bg-blue-600 {
        background-image: linear-gradient(135deg, var(--p-accent) 0%, var(--p-accent-deep) 100%);
        color: var(--p-accent-ink);
    }

    html[data-theme='pilote'] .bg-emerald-600 {
        background-image: linear-gradient(135deg, #34C052 0%, #23A845 100%);
        background-color: transparent;
        box-shadow: 0 8px 18px -10px rgba(35, 168, 69, 0.75);
    }

    html[data-theme='pilote'] .hover\:bg-emerald-700:hover {
        background-image: linear-gradient(135deg, #23A845 0%, #1B8F3A 100%);
        background-color: transparent;
    }

    html[data-theme='pilote'] .bg-red-600 {
        background-image: linear-gradient(135deg, #EF5B5B 0%, #C93B3B 100%);
        background-color: transparent;
    }

    html[data-theme='pilote'] .hover\:bg-red-700:hover {
        background-image: linear-gradient(135deg, #D94848 0%, #B32F2F 100%);
        background-color: transparent;
    }

    /* Boutons sombres (Rechercher) : bleu nuit de la navbar. */
    html[data-theme='pilote'] .bg-slate-800 {
        background-color: var(--p-navy-2);
    }

    html[data-theme='pilote'] .hover\:bg-slate-900:hover {
        background-color: var(--p-navy);
    }

    /* -------------------------------------------------- Formes et reliefs */

    html[data-theme='pilote'] .rounded-lg {
        border-radius: 0.75rem;
    }

    html[data-theme='pilote'] .rounded-xl {
        border-radius: 1.15rem;
    }

    html[data-theme='pilote'] .rounded-2xl {
        border-radius: 1.5rem;
    }

    html[data-theme='pilote'] .shadow-sm,
    html[data-theme='pilote'] .shadow-md {
        box-shadow: var(--p-shadow);
    }

    html[data-theme='pilote'] .hover\:shadow-md:hover {
        box-shadow: var(--p-shadow-hover);
    }

    /* --------------------------------------------------------------- Navbar */

    html[data-theme='pilote'] header.bg-white {
        background: linear-gradient(180deg, var(--p-navy-2) 0%, var(--p-navy) 100%);
        border-bottom: 3px solid transparent;
        border-image: linear-gradient(90deg, var(--p-blue), var(--p-green)) 1;
        box-shadow: 0 8px 24px -16px rgba(14, 31, 53, 0.6);
    }

    /* Le logo et le badge Admin gardent les couleurs de la marque, quelle que
       soit la section. */
    html[data-theme='pilote'] header.bg-white .text-blue-700 {
        color: #7CBDF6;
    }

    html[data-theme='pilote'] header.bg-white .group:hover .group-hover\:text-blue-600 {
        color: #A6D2FA;
    }

    html[data-theme='pilote'] header.bg-white .text-emerald-600 {
        color: #7BE393;
    }

    html[data-theme='pilote'] header.bg-white .group:hover .group-hover\:text-emerald-500 {
        color: #A3EDB3;
    }

    html[data-theme='pilote'] header.bg-white .text-slate-400,
    html[data-theme='pilote'] header.bg-white .text-slate-500 {
        color: #9FB4CA;
    }

    html[data-theme='pilote'] header.bg-white .hover\:text-slate-900:hover {
        color: #FFFFFF;
    }

    html[data-theme='pilote'] header.bg-white .text-slate-700 {
        color: #E9F1F9;
    }

    html[data-theme='pilote'] header.bg-white .bg-slate-100 {
        background-color: rgba(255, 255, 255, 0.08);
        border-color: rgba(255, 255, 255, 0.16);
    }

    html[data-theme='pilote'] header.bg-white .bg-blue-100 {
        background-color: rgba(124, 189, 246, 0.2);
    }

    html[data-theme='pilote'] header.bg-white .bg-blue-100.text-blue-700,
    html[data-theme='pilote'] header.bg-white .text-blue-600 {
        color: #A6D2FA;
    }

    /* ------------------------------------------------- Barres de defilement */

    html[data-theme='pilote'] * {
        scrollbar-width: thin;
        scrollbar-color: #B3C3D5 transparent;
    }

    html[data-theme='pilote'] ::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }

    html[data-theme='pilote'] ::-webkit-scrollbar-track {
        background: transparent;
    }

    html[data-theme='pilote'] ::-webkit-scrollbar-thumb {
        background: #B3C3D5;
        border-radius: 999px;
        border: 2px solid transparent;
        background-clip: content-box;
    }

    html[data-theme='pilote'] ::-webkit-scrollbar-thumb:hover {
        background: #8FA5BD;
        background-clip: content-box;
    }

    html[data-theme='pilote'] ::-webkit-scrollbar-corner {
        background: transparent;
    }

    /* ------------------------------------------------------------ Tableaux */

    html[data-theme='pilote'] thead.bg-slate-50 {
        background: var(--p-raised);
        color: var(--p-text-2);
    }

    html[data-theme='pilote'] tbody tr:hover {
        background-color: rgba(var(--p-accent-rgb), 0.08);
    }

    /* ------------------------------------------------------------- Champs */

    html[data-theme='pilote'] input[type='text'],
    html[data-theme='pilote'] input[type='password'],
    html[data-theme='pilote'] input[type='number'],
    html[data-theme='pilote'] input[type='date'],
    html[data-theme='pilote'] input[type='time'],
    html[data-theme='pilote'] input[type='datetime-local'],
    html[data-theme='pilote'] input[type='search'],
    html[data-theme='pilote'] input[type='file'],
    html[data-theme='pilote'] select,
    html[data-theme='pilote'] textarea {
        background-color: var(--p-field);
        border-color: var(--p-line-strong);
        color: var(--p-text);
    }

    /* ------------------------------------------------------------ Fenetres */

    /* Un nom tres long sans espace (marchandise, materiel...) repris dans une
       fenetre doit passer a la ligne plutot que deborder du cadre. */
    html[data-theme='pilote'] :is([id^='modal-'], #qr-modal) :is(h2, h3, p, strong, label, li) {
        overflow-wrap: anywhere;
    }

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

    html[data-theme='pilote'] .welcome-banner {
        position: relative;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1.5rem;
        padding: 1.75rem 2rem;
        border-radius: 1.5rem;
        border: 1px solid var(--p-line);
        background:
            radial-gradient(420px 220px at 88% 50%, rgba(62, 207, 92, 0.14), transparent 70%),
            linear-gradient(120deg, #D6E6F7 0%, var(--p-surface) 70%);
        box-shadow: var(--p-shadow);
    }

    html[data-theme='pilote'] .welcome-banner__title {
        font-size: 1.6rem;
        line-height: 1.15;
        font-weight: 800;
        color: var(--p-navy);
    }

    html[data-theme='pilote'] .welcome-banner__login {
        margin-top: 0.5rem;
        font-size: 0.95rem;
        color: var(--p-text-2);
    }

    html[data-theme='pilote'] .welcome-banner__login strong {
        color: var(--p-text);
    }

    html[data-theme='pilote'] .welcome-banner__motto {
        position: relative;
        display: flex;
        align-items: center;
        gap: 0.75rem;
        flex-shrink: 0;
        font-family: 'Caveat', 'Segoe Script', cursive;
        font-size: 1.45rem;
        line-height: 1.05;
        color: #1D7A36;
        transform: rotate(-6deg);
    }

    html[data-theme='pilote'] .welcome-banner__check {
        font-size: 3.4rem;
        color: #34C052;
        filter: drop-shadow(0 8px 16px rgba(52, 192, 82, 0.35));
    }

    html[data-theme='pilote'] .module-card {
        display: flex;
        align-items: center;
        gap: 1.1rem;
        padding: 1rem 1.25rem 1rem 1rem;
        border-radius: 1.25rem;
        border: 1px solid var(--p-line);
        background: var(--p-surface);
        box-shadow: var(--p-shadow);
        transition: transform 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
    }

    html[data-theme='pilote'] .module-card:hover,
    html[data-theme='pilote'] .module-card:focus-visible {
        transform: translateY(-2px);
        border-color: rgba(var(--p-accent-rgb), 0.7);
        background: linear-gradient(90deg, rgba(var(--p-accent-rgb), 0.12) 0%, var(--p-surface) 55%);
        box-shadow: var(--p-shadow-hover);
        outline: none;
    }

    html[data-theme='pilote'] .module-card__tile {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 4rem;
        height: 4rem;
        border-radius: 1rem;
        border: 1px solid rgba(var(--p-accent-rgb), 0.35);
        background: linear-gradient(145deg, rgba(var(--p-accent-rgb), 0.26) 0%, rgba(var(--p-accent-rgb), 0.12) 100%);
        color: var(--p-accent-text);
        font-size: 1.65rem;
    }

    html[data-theme='pilote'] .module-card__body {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-width: 0;
    }

    html[data-theme='pilote'] .module-card__title {
        font-size: 1.1rem;
        font-weight: 700;
        color: var(--p-navy);
    }

    html[data-theme='pilote'] .module-card__subtitle {
        margin-top: 0.15rem;
        font-size: 0.875rem;
        color: var(--p-text-3);
    }

    html[data-theme='pilote'] .module-card__chevron {
        color: var(--p-accent-text);
        transition: transform 0.18s ease;
    }

    html[data-theme='pilote'] .module-card:hover .module-card__chevron {
        transform: translateX(3px);
    }

    @media (max-width: 640px) {
        html[data-theme='pilote'] .welcome-banner {
            padding: 1.25rem;
        }

        html[data-theme='pilote'] .welcome-banner__title {
            font-size: 1.3rem;
        }

        html[data-theme='pilote'] .welcome-banner__motto {
            font-size: 1.1rem;
        }

        html[data-theme='pilote'] .welcome-banner__check {
            display: none;
        }

        html[data-theme='pilote'] .module-card__tile {
            width: 3.4rem;
            height: 3.4rem;
            font-size: 1.4rem;
        }
    }
}