/*
 * Thème de l'application, inspiré du panneau d'administration Filament (Laravel).
 * Il habille les composants Bootstrap 5 déjà utilisés par les vues (boutons, cartes, formulaires, tableaux
 * DataTables, Tom Select) : aucune classe n'est à changer dans les vues pour en profiter.
 *
 * Structure de la mise en page (layouts/app.blade.php) :
 *   .fi-layout > .fi-sidebar (menu) + .fi-main-ctn > .fi-topbar + .fi-main > .fi-header + contenu
 */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url('../vendor/inter/inter-latin-ext-wght-normal.woff2') format('woff2-variations');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url('../vendor/inter/inter-latin-wght-normal.woff2') format('woff2-variations');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------------------------------------------------------------- Palette */

:root {
    /* Gris (zinc) */
    --gris-50: #fafafa;
    --gris-100: #f4f4f5;
    --gris-200: #e4e4e7;
    --gris-300: #d4d4d8;
    --gris-400: #a1a1aa;
    --gris-500: #71717a;
    --gris-600: #52525b;
    --gris-700: #3f3f46;
    --gris-800: #27272a;
    --gris-950: #09090b;

    /* Couleur principale : vert Harmonie (600 et plus : texte blanc lisible) */
    --primaire-50: #f3f8ec;
    --primaire-100: #e4efd5;
    --primaire-200: #cbe0ae;
    --primaire-400: #87b352;
    --primaire-500: #5a8f29;
    --primaire-600: #4f8024;
    --primaire-700: #47711f;
    --primaire-800: #3a5a1c;

    --danger-50: #fef2f2;
    --danger-600: #dc2626;
    --danger-700: #b91c1c;
    --avert-50: #fffbeb;
    --avert-500: #f59e0b;
    --avert-600: #d97706;
    --avert-800: #92400e;
    --info-50: #eff6ff;
    --info-600: #2563eb;
    --info-800: #1e40af;

    --danger-100: #fee2e2;
    --avert-200: #fde68a;

    /* Rôles (redéfinis en mode sombre) */
    --fond-page: var(--gris-50);
    --surface: #fff;
    --trait: rgb(9 9 11 / .1);
    --trait-fort: rgb(9 9 11 / .2);
    --survol: rgb(9 9 11 / .03);
    --primaire-texte: var(--primaire-600);
    --primaire-texte-fort: var(--primaire-700);
    --primaire-texte-fonce: var(--primaire-800);
    --danger-texte: var(--danger-700);

    --anneau: 0 0 0 1px rgb(9 9 11 / .05);
    --ombre: 0 1px 2px 0 rgb(0 0 0 / .05);
    --fi-sidebar-largeur: 17rem;
    --fi-topbar-hauteur: 4rem;

    /* Variables Bootstrap */
    --bs-font-sans-serif: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --bs-body-font-size: .875rem;
    --bs-body-color: var(--gris-950);
    --bs-body-color-rgb: 9, 9, 11;
    --bs-body-bg: var(--surface); /* fond des champs, menus déroulants… ; le fond de page est fixé sur body */
    --bs-secondary-color: var(--gris-500);
    --bs-secondary-color-rgb: 113, 113, 122;
    --bs-tertiary-bg: var(--gris-50);
    --bs-border-color: var(--gris-200);
    --bs-border-radius: .5rem;
    --bs-border-radius-sm: .375rem;
    --bs-border-radius-lg: .75rem;
    --bs-primary: var(--primaire-600);
    --bs-primary-rgb: 79, 128, 36;
    --bs-success: var(--primaire-600);
    --bs-success-rgb: 79, 128, 36;
    --bs-danger: var(--danger-600);
    --bs-danger-rgb: 220, 38, 38;
    --bs-warning: var(--avert-500);
    --bs-warning-rgb: 245, 158, 11;
    --bs-info: var(--info-600);
    --bs-info-rgb: 37, 99, 235;
    --bs-link-color: var(--primaire-texte);
    --bs-link-color-rgb: 79, 128, 36;
    --bs-link-hover-color: var(--primaire-texte-fort);
    --bs-link-hover-color-rgb: 71, 113, 31;
    --bs-focus-ring-color: rgb(79 128 36 / .25);
    --bs-warning-bg-subtle: var(--avert-50);
    --bs-warning-border-subtle: var(--avert-200);
    --bs-warning-text-emphasis: var(--avert-800);
}

/* ---------------------------------------------------------------- Mode sombre
 * data-bs-theme="dark" sur <html> (partials/theme.blade.php). Les gris sont inversés : un même nom garde
 * son rôle (50 : fond discret, 200 : bordure, 500 : texte secondaire, 950 : texte principal).
 */

[data-bs-theme="dark"] {
    color-scheme: dark;

    --gris-50: #1f1f23;
    --gris-100: #27272a;
    --gris-200: #313136;
    --gris-300: #3f3f46;
    --gris-400: #71717a;
    --gris-500: #a1a1aa;
    --gris-600: #d4d4d8;
    --gris-700: #e4e4e7;
    --gris-800: #f4f4f5;
    --gris-950: #fafafa;

    --primaire-50: rgb(135 179 82 / .12);
    --primaire-100: rgb(135 179 82 / .2);
    --danger-50: rgb(248 113 113 / .12);
    --danger-100: rgb(248 113 113 / .2);
    --danger-600: #f87171;
    --avert-50: rgb(251 191 36 / .1);
    --avert-200: rgb(251 191 36 / .3);
    --avert-600: #fbbf24;
    --avert-800: #fcd34d;
    --info-50: rgb(96 165 250 / .12);
    --info-600: #60a5fa;
    --info-800: #93c5fd;

    --fond-page: #09090b;
    --surface: #18181b;
    --trait: rgb(255 255 255 / .1);
    --trait-fort: rgb(255 255 255 / .2);
    --survol: rgb(255 255 255 / .04);
    --primaire-texte: #9ccb67;
    --primaire-texte-fort: #b5da8c;
    --primaire-texte-fonce: #b5da8c;
    --danger-texte: #fca5a5;

    --anneau: 0 0 0 1px rgb(255 255 255 / .1);
    --ombre: 0 1px 2px 0 rgb(0 0 0 / .3);

    --bs-body-color: var(--gris-950);
    --bs-body-color-rgb: 250, 250, 250;
    --bs-emphasis-color: #fff;
    --bs-emphasis-color-rgb: 255, 255, 255;
    --bs-secondary-color: var(--gris-500);
    --bs-secondary-color-rgb: 161, 161, 170;
    --bs-secondary-bg: var(--gris-100);
    --bs-tertiary-bg: var(--gris-50);
    --bs-border-color: var(--gris-200);
    --bs-danger: var(--danger-600);
    --bs-danger-rgb: 248, 113, 113;
    --bs-warning-rgb: 251, 191, 36;
    --bs-info-rgb: 96, 165, 250;
    --bs-success-rgb: 156, 203, 103;
    --bs-link-color-rgb: 156, 203, 103;
    --bs-link-hover-color-rgb: 181, 218, 140;
    --bs-form-invalid-color: var(--danger-600);
    --bs-form-invalid-border-color: var(--danger-600);
    --bs-heading-color: var(--gris-950);
}

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] .ts-wrapper .ts-control {
    --bs-border-color: var(--trait);
    background-color: rgb(255 255 255 / .04);
    color: var(--gris-950);
}

[data-bs-theme="dark"] .form-control::placeholder,
[data-bs-theme="dark"] .ts-control input::placeholder {
    color: var(--gris-400);
}

[data-bs-theme="dark"] .form-check-input:not(:checked) {
    background-color: rgb(255 255 255 / .05);
}

[data-bs-theme="dark"] .ts-control input,
[data-bs-theme="dark"] .ts-wrapper.single .ts-control {
    color: var(--gris-950);
}

[data-bs-theme="dark"] .ts-dropdown {
    background: var(--surface);
    color: var(--gris-950);
}

[data-bs-theme="dark"] .ts-dropdown .no-results,
[data-bs-theme="dark"] .ts-dropdown .optgroup-header {
    background: var(--surface);
    color: var(--gris-500);
}

/* Couleurs de ports (grille) : fonds clairs saisis par les utilisateurs, texte sombre conservé */
[data-bs-theme="dark"] .grille-transports > tbody > tr > * {
    --bs-table-color: #09090b;
    color: #09090b;
}

[data-bs-theme="dark"] .grille-transports > tbody > tr .btn-link.p-0:not(.text-danger) {
    --bs-btn-color: #52525b;
}

[data-bs-theme="dark"] .grille-transports > tbody > tr .text-danger {
    color: #b91c1c !important;
}

/* Tableau de contrôle de la fiche de suivi : couleurs de groupe un peu plus présentes sur fond sombre */
[data-bs-theme="dark"] .tableau-controle > tbody > tr > * {
    box-shadow: inset 0 0 0 9999px rgb(0 0 0 / .45);
}

[data-bs-theme="dark"] .fi-simple-logo,
[data-bs-theme="dark"] .fi-marque img {
    padding: .25rem .5rem;
    background: #fff;
    border-radius: .5rem;
    box-sizing: content-box;
}

[data-bs-theme="dark"] .fi-marque img {
    height: 1.75rem;
}

/* Sélecteur de thème (menu utilisateur) */
.fi-theme-choix {
    display: flex;
    gap: .25rem;
    padding: .25rem;
}

.fi-theme-choix button {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .5rem;
    border: 0;
    border-radius: .375rem;
    background: none;
    color: var(--gris-400);
    font-size: 1rem;
    line-height: 1;
}

.fi-theme-choix button:hover {
    background: var(--gris-50);
    color: var(--gris-600);
}

.fi-theme-choix button[aria-pressed="true"] {
    background: var(--gris-100);
    color: var(--primaire-texte);
}

body {
    background-color: var(--fond-page);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'cv11';
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--gris-950);
    font-weight: 600;
    letter-spacing: -.01em;
}

h2.h5, .h5 {
    font-size: 1rem;
}

h2.h6, .h6 {
    font-size: .875rem;
}

.small, small {
    font-size: .8125rem;
}

.text-muted, .text-body-secondary {
    color: var(--gris-500) !important;
}

/* ---------------------------------------------------------------- Mise en page */

.fi-layout {
    min-height: 100vh;
}

.fi-sidebar {
    --bs-offcanvas-width: var(--fi-sidebar-largeur);
    --bs-offcanvas-bg: var(--surface);
}

.fi-sidebar-entete {
    display: flex;
    align-items: center;
    gap: .75rem;
    height: var(--fi-topbar-hauteur);
    padding: 0 1.25rem;
    background: var(--surface);
    box-shadow: var(--anneau), var(--ombre);
    flex-shrink: 0;
}

.fi-marque {
    display: flex;
    align-items: center;
    gap: .625rem;
    color: var(--gris-950);
    font-weight: 700;
    font-size: 1.0625rem;
    letter-spacing: -.02em;
}

.fi-marque:hover {
    text-decoration: none;
    color: var(--gris-950);
}

.fi-marque img {
    height: 2.25rem;
    width: auto;
}

.fi-sidebar .offcanvas-body {
    flex-direction: column;
    padding: 1.25rem 1rem;
}

@media (min-width: 992px) {
    .fi-sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 1030;
        width: var(--fi-sidebar-largeur);
        display: flex;
        flex-direction: column;
    }

    .fi-sidebar .offcanvas-body {
        overflow-y: auto;
        flex-grow: 1;
        padding: 1.5rem 1rem;
    }

    .fi-main-ctn {
        margin-left: var(--fi-sidebar-largeur);
    }
}

.fi-main-ctn {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-width: 0;
}

.fi-topbar {
    position: sticky;
    top: 0;
    z-index: 1020;
    display: flex;
    align-items: center;
    gap: 1rem;
    height: var(--fi-topbar-hauteur);
    padding: 0 1rem;
    background: var(--surface);
    box-shadow: var(--anneau), var(--ombre);
}

@media (min-width: 768px) {
    .fi-topbar {
        padding: 0 1.5rem;
    }
}

@media (min-width: 992px) {
    .fi-topbar {
        padding: 0 2rem;
    }
}

.fi-topbar .form-select {
    min-width: 12rem;
}

.fi-bandeau-archive {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .625rem 1rem;
    background: var(--avert-50);
    color: var(--avert-800);
    border-bottom: 1px solid var(--avert-200);
}

@media (min-width: 992px) {
    .fi-bandeau-archive {
        padding: .625rem 2rem;
    }
}

.fi-main {
    flex-grow: 1;
    width: 100%;
    padding: 2rem 1rem;
}

@media (min-width: 768px) {
    .fi-main {
        padding: 2rem 1.5rem;
    }
}

@media (min-width: 992px) {
    .fi-main {
        padding: 2rem 2rem;
    }
}

/* En-tête de page : fil d'Ariane, titre et actions */
.fi-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.fi-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-bottom: .5rem;
    font-size: .875rem;
    font-weight: 500;
    color: var(--gris-500);
}

.fi-breadcrumbs .bi {
    font-size: .75rem;
    color: var(--gris-400);
}

.fi-header-titre {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.025em;
}

@media (min-width: 576px) {
    .fi-header-titre {
        font-size: 1.875rem;
    }
}

.fi-header-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
}

.fi-header-actions form {
    margin: 0;
}

/* Avatar et menu utilisateur */
.fi-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--primaire-600);
    color: #fff;
    font-size: .8125rem;
    font-weight: 600;
    flex-shrink: 0;
}

.fi-menu-utilisateur {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .25rem;
    border: 0;
    border-radius: 999px;
    background: none;
    color: var(--gris-700);
    font-weight: 500;
}

.fi-menu-utilisateur:hover,
.fi-menu-utilisateur[aria-expanded="true"] {
    background: var(--gris-100);
}

.dropdown-menu {
    --bs-dropdown-border-color: transparent;
    --bs-dropdown-border-radius: .75rem;
    --bs-dropdown-font-size: .875rem;
    --bs-dropdown-link-active-bg: var(--gris-100);
    --bs-dropdown-link-active-color: var(--gris-950);
    --bs-dropdown-link-hover-bg: var(--gris-50);
    --bs-dropdown-item-padding-x: .75rem;
    --bs-dropdown-padding-x: .25rem;
    min-width: 14rem;
    box-shadow: var(--anneau), 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    border-radius: .375rem;
}

.dropdown-item .bi {
    color: var(--gris-400);
}

.dropdown-item.text-danger .bi {
    color: inherit;
}

/* ---------------------------------------------------------------- Menu latéral */

.fi-nav {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.fi-nav-groupe {
    margin-top: 1rem;
}

.fi-nav-lien,
.fi-nav-groupe-titre {
    display: flex;
    align-items: center;
    gap: .75rem;
    width: 100%;
    padding: .5rem .5rem;
    border: 0;
    border-radius: .5rem;
    background: none;
    color: var(--gris-700);
    font-size: .875rem;
    font-weight: 500;
    text-align: left;
}

.fi-nav-lien > .bi,
.fi-nav-groupe-titre > .bi:first-child {
    font-size: 1.125rem;
    line-height: 1;
    color: var(--gris-400);
}

.fi-nav-lien:hover {
    background: var(--gris-100);
    color: var(--gris-950);
    text-decoration: none;
}

.fi-nav-lien.active {
    background: var(--gris-100);
    color: var(--primaire-texte);
    font-weight: 600;
}

.fi-nav-lien.active > .bi {
    color: var(--primaire-texte);
}

.fi-nav-lien.disabled {
    color: var(--gris-400);
    pointer-events: none;
}

.fi-nav-groupe-titre {
    color: var(--gris-500);
}

.fi-nav-groupe-titre:hover {
    color: var(--gris-950);
}

.fi-nav-groupe-titre .chevron {
    margin-left: auto;
    font-size: .75rem;
    color: var(--gris-400);
    transition: transform .15s ease;
}

.fi-nav-groupe-titre.collapsed .chevron {
    transform: rotate(-90deg);
}

/* Entrées d'un groupe : trait vertical et puce, comme les groupes de navigation Filament */
.fi-nav-sous-menu {
    list-style: none;
    margin: .25rem 0 0;
    padding: 0;
}

.fi-nav-sous-menu .fi-nav-lien {
    position: relative;
    padding-left: 2.25rem;
}

.fi-nav-sous-menu .fi-nav-lien::before {
    content: '';
    position: absolute;
    left: 1.0625rem;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--gris-300);
}

.fi-nav-sous-menu li:first-child .fi-nav-lien::before {
    top: 50%;
}

.fi-nav-sous-menu li:last-child .fi-nav-lien::before {
    bottom: 50%;
}

.fi-nav-sous-menu .fi-nav-lien::after {
    content: '';
    position: absolute;
    left: calc(1.0625rem - 3px);
    top: calc(50% - 3.5px);
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gris-400);
}

.fi-nav-sous-menu .fi-nav-lien.active::after {
    background: var(--primaire-600);
}

.fi-nav-sous-menu li:only-child .fi-nav-lien::before {
    display: none;
}

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

.btn {
    --bs-btn-padding-x: .75rem;
    --bs-btn-padding-y: .5rem;
    --bs-btn-font-size: .875rem;
    --bs-btn-font-weight: 600;
    --bs-btn-line-height: 1.25rem;
    --bs-btn-border-radius: .5rem;
    --bs-btn-focus-box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px rgb(79 128 36 / .5);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .375rem;
    transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.btn .bi {
    font-size: 1rem;
    line-height: 1;
}

.btn .bi.me-1 {
    margin-right: 0 !important;
}

.btn-sm {
    --bs-btn-padding-x: .625rem;
    --bs-btn-padding-y: .375rem;
    --bs-btn-font-size: .875rem;
    --bs-btn-border-radius: .5rem;
}

.btn:hover {
    text-decoration: none;
}

.btn-primary,
.btn-success {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--primaire-600);
    --bs-btn-border-color: var(--primaire-600);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--primaire-700);
    --bs-btn-hover-border-color: var(--primaire-700);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--primaire-800);
    --bs-btn-active-border-color: var(--primaire-800);
    --bs-btn-disabled-bg: var(--primaire-600);
    --bs-btn-disabled-border-color: var(--primaire-600);
    box-shadow: var(--ombre);
}

.btn-danger {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--danger-600);
    --bs-btn-border-color: var(--danger-600);
    --bs-btn-hover-bg: var(--danger-700);
    --bs-btn-hover-border-color: var(--danger-700);
    --bs-btn-active-bg: var(--danger-700);
    --bs-btn-active-border-color: var(--danger-700);
}

/* Boutons secondaires : fond blanc et anneau gris (bouton « gray » de Filament) */
.btn-outline-secondary,
.btn-outline-success,
.btn-outline-danger {
    --bs-btn-bg: var(--surface);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-bg: var(--surface);
    --bs-btn-disabled-border-color: transparent;
    box-shadow: inset 0 0 0 1px var(--trait), var(--ombre);
}

.btn-outline-secondary {
    --bs-btn-color: var(--gris-950);
    --bs-btn-hover-color: var(--gris-950);
    --bs-btn-hover-bg: var(--gris-50);
    --bs-btn-active-color: var(--gris-950);
    --bs-btn-active-bg: var(--gris-100);
    --bs-btn-disabled-color: var(--gris-500);
}

.btn-outline-secondary .bi {
    color: var(--gris-400);
}

.btn-outline-success {
    --bs-btn-color: var(--primaire-texte);
    --bs-btn-hover-color: var(--primaire-texte-fort);
    --bs-btn-hover-bg: var(--primaire-50);
    --bs-btn-active-color: var(--primaire-texte-fort);
    --bs-btn-active-bg: var(--primaire-100);
    --bs-btn-disabled-color: var(--primaire-texte);
    box-shadow: inset 0 0 0 1px rgb(79 128 36 / .4), var(--ombre);
}

.btn-outline-danger {
    --bs-btn-color: var(--danger-600);
    --bs-btn-hover-color: var(--danger-texte);
    --bs-btn-hover-bg: var(--danger-50);
    --bs-btn-active-color: var(--danger-texte);
    --bs-btn-active-bg: var(--danger-100);
    --bs-btn-disabled-color: var(--danger-600);
    box-shadow: inset 0 0 0 1px rgb(220 38 38 / .35), var(--ombre);
}

.btn-outline-secondary:focus-visible,
.btn-outline-success:focus-visible,
.btn-outline-danger:focus-visible {
    box-shadow: var(--bs-btn-focus-box-shadow);
}

/* Bouton lien (« Retour à la liste ») */
.btn-link {
    --bs-btn-color: var(--gris-600);
    --bs-btn-hover-color: var(--gris-950);
    --bs-btn-active-color: var(--gris-950);
    --bs-btn-font-weight: 600;
    text-decoration: none;
}

.btn-link:hover {
    text-decoration: underline;
}

/* Boutons-icônes dans les tableaux (modifier, supprimer) */
.btn-link.p-0 {
    --bs-btn-color: var(--gris-400);
    --bs-btn-hover-color: var(--primaire-texte);
    padding: .125rem !important;
    border-radius: .375rem;
}

.btn-link.p-0:hover {
    text-decoration: none;
}

.btn-link.p-0.text-danger:hover {
    color: var(--danger-texte) !important;
}

/* ---------------------------------------------------------------- Cartes et sections */

.card {
    --bs-card-border-width: 0;
    --bs-card-border-radius: .75rem;
    --bs-card-inner-border-radius: .75rem;
    --bs-card-spacer-x: 1.5rem;
    --bs-card-spacer-y: 1.5rem;
    --bs-card-cap-padding-x: 1.5rem;
    --bs-card-cap-padding-y: 1rem;
    --bs-card-cap-bg: var(--surface);
    --bs-card-bg: var(--surface);
    box-shadow: var(--anneau), var(--ombre);
}

.card-header {
    border-bottom: 1px solid var(--gris-200);
    font-size: .9375rem;
    font-weight: 600;
}

.card-footer {
    border-top: 1px solid var(--gris-200);
    padding: 1rem 1.5rem;
    background: var(--surface);
}

fieldset.card-body {
    min-width: 0;
}

/* Formulaires de filtres au-dessus des listes */
form.card.card-body {
    padding: 1rem 1.5rem;
}

/* Blocs répétés dans un formulaire (commandes fournisseurs, décisions) */
.commande,
.decision {
    background: var(--gris-50) !important;
    border: 0 !important;
    border-radius: .75rem !important;
    box-shadow: var(--anneau);
}

.titre-commande {
    font-size: .875rem;
}

/* Listes de définitions (fiche de suivi) */
dl.row dt {
    font-weight: 500;
    color: var(--gris-500);
}

dl.row dd {
    color: var(--gris-950);
}

/* ---------------------------------------------------------------- Formulaires */

.form-label {
    margin-bottom: .375rem;
    font-size: .875rem;
    font-weight: 500;
    color: var(--gris-950);
}

.form-label.small {
    font-size: .8125rem;
}

.form-text {
    color: var(--gris-500);
    font-size: .8125rem;
}

.form-control,
.form-select {
    --bs-border-color: var(--trait);
    padding: .5rem .75rem;
    font-size: .875rem;
    line-height: 1.25rem;
    border-radius: .5rem;
    box-shadow: var(--ombre);
}

.form-select {
    padding-right: 2.25rem;
}

.form-control-sm,
.form-select-sm {
    padding-top: .375rem;
    padding-bottom: .375rem;
    font-size: .8125rem;
    border-radius: .5rem;
}

.form-select-sm {
    padding-left: .625rem;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--primaire-600);
    box-shadow: 0 0 0 1px var(--primaire-600);
}

.form-control:disabled,
.form-select:disabled,
fieldset:disabled .form-control,
fieldset:disabled .form-select {
    background-color: var(--gris-50);
    color: var(--gris-500);
    box-shadow: none;
}

.form-control.is-invalid,
.form-select.is-invalid {
    border-color: var(--danger-600);
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
    box-shadow: 0 0 0 1px var(--danger-600);
}

.invalid-feedback {
    color: var(--danger-600);
    font-size: .8125rem;
}

.form-control-color {
    width: 3rem;
    padding: .25rem;
}

.form-check-input {
    border-color: var(--trait-fort);
    box-shadow: var(--ombre);
}

.form-check-input[type="checkbox"]:not([role="switch"]) {
    border-radius: .25rem;
}

.form-check-input:checked {
    background-color: var(--primaire-600);
    border-color: var(--primaire-600);
}

.form-check-input:focus {
    border-color: var(--primaire-600);
    box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px rgb(79 128 36 / .4);
}

.form-switch .form-check-input:focus:not(:checked) {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");
}

.form-check-label {
    font-weight: 500;
}

.input-group > .form-control-color {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* Tom Select (thème Bootstrap 5) */
.ts-wrapper .ts-control,
.ts-wrapper.single .ts-control {
    min-height: calc(2.25rem + 2px);
    padding: .375rem .75rem;
    border-color: var(--trait);
    border-radius: .5rem;
    font-size: .875rem;
    box-shadow: var(--ombre);
}

.ts-wrapper.multi.has-items .ts-control {
    padding: .3125rem .5rem .125rem;
}

.ts-wrapper.focus .ts-control {
    border-color: var(--primaire-600);
    box-shadow: 0 0 0 1px var(--primaire-600);
}

.ts-wrapper.multi .ts-control > div {
    background: var(--primaire-50);
    color: var(--primaire-texte-fonce);
    border: 0;
    border-radius: .375rem;
    box-shadow: inset 0 0 0 1px rgb(79 128 36 / .2);
    font-weight: 500;
}

.ts-wrapper.multi .ts-control > div.active {
    background: var(--primaire-600);
    color: #fff;
}

.ts-wrapper.plugin-remove_button .item .remove {
    border-left-color: rgb(79 128 36 / .2) !important;
}

.ts-dropdown {
    border: 0;
    border-radius: .5rem;
    font-size: .875rem;
    box-shadow: var(--anneau), 0 10px 15px -3px rgb(0 0 0 / .1);
    overflow: hidden;
}

.ts-dropdown .active {
    background: var(--gris-100);
    color: var(--gris-950);
}

.ts-wrapper.is-invalid .ts-control,
.is-invalid + .ts-wrapper .ts-control {
    border-color: var(--danger-600);
}

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

/* Conteneur de tableau : carte blanche aux coins arrondis */
.table-responsive {
    background: var(--surface);
    border-radius: .75rem;
    box-shadow: var(--anneau), var(--ombre);
}

.card .table-responsive {
    border-radius: 0;
    box-shadow: none;
}

.table {
    --bs-table-color: var(--gris-950);
    --bs-table-border-color: var(--gris-200);
    --bs-table-striped-bg: var(--gris-50);
    --bs-table-hover-bg: var(--gris-100);
    --bs-table-active-bg: var(--gris-100);
    margin-bottom: 0;
    font-size: .875rem;
}

.table.small {
    font-size: .8125rem;
}

.table > :not(caption) > * > * {
    padding: .625rem .75rem;
}

.table > :not(caption) > * > :first-child {
    padding-left: 1.25rem;
}

.table > :not(caption) > * > :last-child {
    padding-right: 1.25rem;
}

.table-sm > :not(caption) > * > * {
    padding-top: .5rem;
    padding-bottom: .5rem;
}

.table > thead > tr > th {
    background-color: var(--gris-50);
    color: var(--gris-950);
    font-weight: 600;
    white-space: nowrap;
    border-bottom-color: var(--gris-200);
}

.table > tbody > tr:last-child > * {
    border-bottom: 0;
}

.table-bordered > :not(caption) > * > * {
    border-color: var(--gris-200);
}

.table-bordered > :not(caption) > * {
    border-width: 0;
}

/* Ligne des champs de filtre par colonne (listes.js) */
.table > thead > tr.filtres > th {
    padding-top: 0;
    padding-bottom: .625rem;
    font-weight: 400;
}

.table > thead > tr:has(+ tr.filtres) > th {
    border-bottom: 0;
}

.table > thead > tr.filtres .form-control {
    min-width: 7rem;
    padding: .25rem .5rem;
    font-size: .75rem;
    font-weight: 400;
    box-shadow: none;
    background-color: var(--surface);
}

/* DataTables : pied de tableau (informations, pagination) */
.table-responsive > .dt-container > .row {
    margin: 0;
}

.table-responsive > .dt-container > .row > * {
    padding: 0;
}

.table-responsive > .dt-container > .row.dt-layout-table {
    margin-top: 0 !important;
}

.table-responsive > .dt-container > .row:not(.dt-layout-table) {
    align-items: center;
    margin-top: 0 !important;
    padding: .75rem 1.25rem;
    border-top: 1px solid var(--gris-200);
    row-gap: .5rem;
}

.dt-container .dt-info {
    color: var(--gris-500);
    font-size: .8125rem;
    padding-top: 0 !important;
}

.dt-container .dt-length {
    color: var(--gris-500);
    font-size: .8125rem;
}

.dt-container .dt-length select {
    width: auto;
    display: inline-block;
}

div.dt-container .dt-paging .pagination {
    margin: 0;
}

/* Alternance des lignes : celle de Bootstrap seule (DataTables en ajoute une seconde, trop marquée) */
table.table.dataTable.table-striped > tbody > tr:nth-of-type(2n+1) > * {
    box-shadow: none;
}

table.table.dataTable.table-striped.table-hover > tbody > tr:hover > *,
table.table.dataTable.table-hover > tbody > tr:hover > * {
    box-shadow: inset 0 0 0 9999px var(--survol);
}

table.dataTable thead > tr > th.dt-orderable-asc:hover,
table.dataTable thead > tr > th.dt-orderable-desc:hover {
    outline: 0;
    color: var(--primaire-texte);
}

/* Pagination (DataTables et Laravel) */
.pagination {
    --bs-pagination-padding-x: .75rem;
    --bs-pagination-padding-y: .375rem;
    --bs-pagination-font-size: .8125rem;
    --bs-pagination-color: var(--gris-700);
    --bs-pagination-bg: var(--surface);
    --bs-pagination-border-color: var(--gris-200);
    --bs-pagination-border-radius: .5rem;
    --bs-pagination-hover-color: var(--gris-950);
    --bs-pagination-hover-bg: var(--gris-50);
    --bs-pagination-hover-border-color: var(--gris-200);
    --bs-pagination-focus-color: var(--gris-950);
    --bs-pagination-focus-bg: var(--gris-50);
    --bs-pagination-focus-box-shadow: 0 0 0 2px rgb(79 128 36 / .4);
    --bs-pagination-active-color: var(--primaire-texte);
    --bs-pagination-active-bg: var(--primaire-50);
    --bs-pagination-active-border-color: var(--gris-200);
    --bs-pagination-disabled-color: var(--gris-400);
    --bs-pagination-disabled-border-color: var(--gris-200);
    font-weight: 500;
}

.pagination .page-item.active .page-link {
    font-weight: 600;
}

nav > .d-flex > .d-sm-flex p.small {
    color: var(--gris-500);
}

/* ---------------------------------------------------------------- Badges et alertes */

.badge {
    padding: .25rem .5rem;
    border-radius: .375rem;
    font-size: .75rem;
    font-weight: 500;
    line-height: 1rem;
}

.badge.text-bg-success {
    background: var(--primaire-50) !important;
    color: var(--primaire-texte-fort) !important;
    box-shadow: inset 0 0 0 1px rgb(79 128 36 / .2);
}

.badge.text-bg-danger {
    background: var(--danger-50) !important;
    color: var(--danger-texte) !important;
    box-shadow: inset 0 0 0 1px rgb(220 38 38 / .2);
}

.badge.text-bg-warning {
    background: var(--avert-50) !important;
    color: var(--avert-800) !important;
    box-shadow: inset 0 0 0 1px rgb(217 119 6 / .25);
}

.badge.text-bg-secondary,
.badge.text-bg-light {
    background: var(--gris-50) !important;
    color: var(--gris-600) !important;
    border: 0 !important;
    box-shadow: inset 0 0 0 1px var(--trait);
}

.alert {
    --bs-alert-border-radius: .75rem;
    --bs-alert-padding-x: 1rem;
    --bs-alert-padding-y: .875rem;
    border: 0;
    font-size: .875rem;
}

.alert-success {
    --bs-alert-bg: var(--primaire-50);
    --bs-alert-color: var(--primaire-texte-fonce);
    box-shadow: inset 0 0 0 1px rgb(79 128 36 / .2);
}

.alert-danger {
    --bs-alert-bg: var(--danger-50);
    --bs-alert-color: var(--danger-texte);
    box-shadow: inset 0 0 0 1px rgb(220 38 38 / .2);
}

.alert-warning {
    --bs-alert-bg: var(--avert-50);
    --bs-alert-color: var(--avert-800);
    box-shadow: inset 0 0 0 1px rgb(217 119 6 / .25);
}

.alert-info {
    --bs-alert-bg: var(--info-50);
    --bs-alert-color: var(--info-800);
    box-shadow: inset 0 0 0 1px rgb(37 99 235 / .2);
}

/* Notifications (messages flash) en haut à droite, comme celles de Filament */
.fi-notifications {
    position: fixed;
    top: calc(var(--fi-topbar-hauteur) + .75rem);
    right: 1rem;
    z-index: 1090;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    width: min(24rem, calc(100vw - 2rem));
}

.fi-notification {
    --bs-toast-border-width: 0;
    --bs-toast-border-radius: .75rem;
    --bs-toast-bg: var(--surface);
    --bs-toast-max-width: 100%;
    --bs-toast-font-size: .875rem;
    width: 100%;
    box-shadow: var(--anneau), 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
}

.fi-notification .toast-body {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: 1rem;
}

.fi-notification .toast-body > .bi {
    font-size: 1.25rem;
    line-height: 1.25rem;
}

.fi-notification-texte {
    flex-grow: 1;
    padding-top: .0625rem;
    font-weight: 500;
    color: var(--gris-950);
}

.fi-notification .btn-close {
    font-size: .625rem;
    margin-top: .25rem;
}

/* ---------------------------------------------------------------- Tableau de bord (statistiques) */

.fi-stat {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    height: 100%;
    padding: 1.5rem;
    background: var(--surface);
    border-radius: .75rem;
    box-shadow: var(--anneau), var(--ombre);
}

.fi-stat-libelle {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .875rem;
    font-weight: 500;
    color: var(--gris-500);
}

.fi-stat-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: .5rem;
    font-size: 1rem;
}

.fi-stat-valeur {
    font-size: 1.875rem;
    font-weight: 600;
    line-height: 2.25rem;
    letter-spacing: -.025em;
    color: var(--gris-950);
}

.fi-stat-lien {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .875rem;
    font-weight: 500;
}

.fi-stat-lien::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: .75rem;
}

.fi-stat:has(.fi-stat-lien:hover) {
    box-shadow: var(--anneau), 0 4px 6px -1px rgb(0 0 0 / .08);
}

.fi-stat-icone.primary { background: var(--info-50); color: var(--info-600); }
.fi-stat-icone.success { background: var(--primaire-50); color: var(--primaire-texte); }
.fi-stat-icone.warning { background: var(--avert-50); color: var(--avert-600); }
.fi-stat-icone.danger { background: var(--danger-50); color: var(--danger-600); }

.fi-section-titre {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .5rem;
    margin-bottom: 1rem;
    font-size: 1rem;
    font-weight: 600;
}

.fi-section-titre small {
    font-weight: 400;
    color: var(--gris-500);
}

/* ---------------------------------------------------------------- Page de connexion */

.fi-simple {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 3rem 1rem;
}

.fi-simple-carte {
    width: 100%;
    max-width: 28rem;
    padding: 3rem 2rem;
    background: var(--surface);
    border-radius: .75rem;
    box-shadow: var(--anneau), var(--ombre);
}

@media (min-width: 576px) {
    .fi-simple-carte {
        padding: 3rem;
    }
}

.fi-simple-logo {
    display: block;
    max-height: 4.5rem;
    max-width: 100%;
    margin: 0 auto 1.5rem;
}

.fi-simple-titre {
    margin-bottom: .25rem;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -.025em;
    text-align: center;
}

.fi-simple-sous-titre {
    margin-bottom: 2rem;
    color: var(--gris-500);
    text-align: center;
}

.fi-simple-pied {
    margin-top: 1.5rem;
    color: var(--gris-500);
    font-size: .8125rem;
    text-align: center;
}

/* ---------------------------------------------------------------- Écrans particuliers */

/* Fiche de suivi : tableau de contrôle et photos */
.tableau-controle .pastille {
    display: inline-block;
    width: .7em;
    height: .7em;
    border-radius: 50%;
    margin-right: .4em;
}

.photo-controle {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    width: 100%;
}

.figure-img.photo-controle {
    border: 0 !important;
    border-radius: .75rem !important;
    box-shadow: var(--anneau), var(--ombre);
}

.figure-caption {
    color: var(--gris-500);
}

/* Fiche de suivi : décisions */
.fi-decision {
    padding: .625rem .875rem;
    margin-bottom: .5rem;
    border-radius: .5rem;
    background: var(--gris-50);
    box-shadow: inset 3px 0 0 var(--primaire-500);
}