/* =========================================================================
   Fondations : variables, typographie, fond
   ========================================================================= */
:root {
    --site-sidebar: #1f2d3d;
    --site-primary: #2f6fed;

    /* Rayons et ombres : coins doux, ombres diffuses (sobre et premium) */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 22px;
    --shadow-xs: 0 1px 2px rgba(15, 23, 42, .04);
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 6px 16px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
    --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12);
    --border-soft: #eaecf1;

    /* Fond de page et surfaces */
    --page-bg: #f6f5f3;
    --surface: #ffffff;
    --sidebar-active-bg: #f1ece1;
    --sidebar-active-text: #201f1d;
    --text-muted-2: #8a8f98;
    --ease-soft: cubic-bezier(0.16, 1, 0.3, 1);

    /* Couleurs d'accent pour les pastilles d'icône (badges colorés, un peu partout) */
    --accent-amber: #d97b3f;
    --accent-green: #2f9e6a;
    --accent-red: #d64545;
    --accent-blue: #2f6fed;
    --accent-violet: #7c5cd6;
    --accent-teal: #2596a1;

    color-scheme: light;
}

body {
    background-color: var(--page-bg);
    font-family: 'Inter', 'Segoe UI', Roboto, Arial, sans-serif;
    color: #1f2733;
    -webkit-font-smoothing: antialiased;
}

/* Anneau de focus visible sur tous les éléments interactifs (accessibilité :
   navigation clavier). Bootstrap gère déjà les boutons/champs ; ce filet de
   sécurité couvre les liens et éléments custom qui n'ont pas de style de
   focus dédié. On ne le retire nulle part ailleurs dans ce fichier. */
:focus-visible {
    outline: 2px solid var(--site-primary);
    outline-offset: 2px;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #16202e;
}

a {
    color: var(--site-primary);
    text-decoration: none;
}

/* Scrollbar plus discrète (navigateurs à base WebKit) */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #d7dbe3;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #c3c8d1;
}

/* =========================================================================
   Structure générale (sidebar / contenu)
   ========================================================================= */
.app-layout {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: 250px;
    flex-shrink: 0;
    background-color: var(--site-sidebar);
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 200px);
    color: #fff;
    display: flex;
    flex-direction: column;
    padding: 1.25rem 0.75rem;
    position: sticky;
    top: 0;
    height: 100vh;
    box-shadow: 3px 0 20px rgba(0, 0, 0, 0.12);
    /* Bug critique : sans ça, sur les écrans courts / tablette, le bas du
       menu (utilisateur, déconnexion) est simplement coupé et inaccessible,
       sans aucun moyen de défiler pour l'atteindre. */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.sidebar-brand {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    padding: 0 0.5rem 1.5rem 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 1rem;
}

.sidebar-nav {
    flex-grow: 1;
}

.sidebar-nav .nav-link {
    color: #c9d3dd;
    padding: 0.65rem 0.75rem;
    border-radius: var(--radius-sm);
    margin-bottom: 0.2rem;
    font-size: 0.93rem;
    font-weight: 500;
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.sidebar-nav .nav-link i {
    width: 22px;
    display: inline-block;
}

.sidebar-nav .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.sidebar-nav .nav-link.active {
    background-color: var(--sidebar-active-bg);
    color: var(--sidebar-active-text);
    box-shadow: none;
    font-weight: 600;
}

.sidebar-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 1rem;
    font-size: 0.85rem;
}

.sidebar-footer .btn-logout {
    display: block;
    width: 100%;
    margin-top: 0.5rem;
    padding: 0.375rem 0.75rem;
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.6);
    color: #fff;
    border-radius: var(--radius-sm);
    text-align: center;
    text-decoration: none;
    font-size: 0.875rem;
    transition: background-color 0.15s ease;
}

.sidebar-footer .btn-logout:hover {
    background-color: rgba(255, 255, 255, 0.15);
    color: #fff;
}

.main-content {
    flex-grow: 1;
    padding: 2rem;
    min-width: 0; /* évite que le contenu (tableaux larges) ne pousse le layout */
}

/* --- Barre mobile (visible seulement sous le breakpoint lg, 992px) --- */
.mobile-topbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background-color: var(--site-sidebar);
    color: #fff;
    padding: 0.75rem 1rem;
    position: sticky;
    top: 0;
    z-index: 1050;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

.mobile-topbar-toggle {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.4rem;
    line-height: 1;
    padding: 0.25rem 0.5rem;
}

.mobile-topbar-title {
    font-weight: 700;
    font-size: 1.05rem;
}

.sidebar-overlay {
    display: none;
}

/* --- En dessous de 992px : le menu devient un panneau hors-écran --- */
@media (max-width: 991.98px) {
    .app-layout {
        display: block;
    }

    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 82vw;
        max-width: 300px;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        z-index: 1060;
    }

    .sidebar.sidebar-open {
        transform: translateX(0);
    }

    .sidebar-overlay {
        display: block;
        position: fixed;
        inset: 0;
        background-color: rgba(15, 23, 42, 0.45);
        backdrop-filter: blur(1px);
        z-index: 1055;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s ease;
    }

    .sidebar-overlay.sidebar-overlay-visible {
        opacity: 1;
        pointer-events: auto;
    }

    body.sidebar-locked {
        overflow: hidden;
    }

    .main-content {
        padding: 1.25rem;
    }
}

/* =========================================================================
   Composants Bootstrap modernisés (cartes, boutons, tableaux, formulaires...)
   ========================================================================= */
.card {
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.card-header {
    background-color: #fff;
    border-bottom: 1px solid var(--border-soft);
    font-weight: 600;
    border-top-left-radius: var(--radius-md) !important;
    border-top-right-radius: var(--radius-md) !important;
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.card-footer {
    background-color: #fff;
    border-top: 1px solid var(--border-soft);
}

/* Cartes cliquables (liens du tableau de bord, Gestion, Réglages...) : léger effet au survol */
a:hover > .card,
a:hover .card {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.card {
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.btn {
    border-radius: var(--radius-sm);
    font-weight: 500;
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
    transition: filter 0.12s ease, transform 0.08s ease, box-shadow 0.12s ease;
}

.btn:active {
    transform: scale(0.98);
}

.btn-sm {
    border-radius: 7px;
}

.btn-lg {
    border-radius: 10px;
}

.table {
    --bs-table-border-color: var(--border-soft);
    margin-bottom: 0;
}

.table thead th {
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    color: #8992a3;
    font-weight: 700;
    background-color: #fafbfd;
    border-bottom: 1px solid var(--border-soft);
    white-space: nowrap;
}

.table td,
.table th {
    padding: 0.7rem 1rem;
    vertical-align: middle;
}

.table-sm td,
.table-sm th {
    padding: 0.5rem 0.75rem;
}

.table tbody tr {
    transition: background-color 0.1s ease;
}

.table tbody tr:hover {
    background-color: #f8f9fc;
}

.form-control,
.form-select {
    border-radius: var(--radius-sm);
    border-color: #dfe2e8;
    padding: 0.5rem 0.85rem;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--site-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--site-primary) 15%, transparent);
}

.form-control-sm,
.form-select-sm {
    border-radius: 7px;
}

.badge {
    font-weight: 600;
    padding: 0.42em 0.75em;
    border-radius: 20px;
    letter-spacing: 0.01em;
}

.alert {
    border: none;
    border-radius: var(--radius-md);
    border-left: 4px solid transparent;
}

.alert-warning {
    border-left-color: #f5b23c;
}

.alert-danger {
    border-left-color: #e5534b;
}

.alert-success {
    border-left-color: #2ecc71;
}

.alert-info {
    border-left-color: #3498db;
}

.list-group-item {
    border-color: var(--border-soft);
}

.list-group-item-action:hover {
    background-color: #f8f9fc;
}

.nav-tabs .nav-link.active {
    border-bottom-color: var(--site-primary) !important;
    color: var(--site-primary) !important;
    font-weight: 600;
}

.page-link {
    border-radius: var(--radius-sm);
    margin: 0 2px;
    border-color: var(--border-soft);
    color: #495363;
}

.page-item.active .page-link {
    background-color: var(--site-primary) !important;
    border-color: var(--site-primary) !important;
}

/* --- Couleur principale appliquée sur les éléments Bootstrap utilisés dans l'app --- */
.btn-primary {
    background-color: var(--site-primary) !important;
    border-color: var(--site-primary) !important;
    box-shadow: 0 3px 10px color-mix(in srgb, var(--site-primary) 35%, transparent);
}

.btn-primary:hover {
    filter: brightness(0.93);
}

.btn-outline-primary {
    color: var(--site-primary) !important;
    border-color: var(--site-primary) !important;
}

.btn-outline-primary:hover {
    background-color: var(--site-primary) !important;
    color: #fff !important;
}

.text-primary {
    color: var(--site-primary) !important;
}

.bg-primary {
    background-color: var(--site-primary) !important;
}

.border-primary {
    border-color: var(--site-primary) !important;
}

/* =========================================================================
   Composants spécifiques à l'application
   ========================================================================= */
/* Bandeau de statut : border-left plutôt qu'un accent en position absolute
   (testé précédemment — un accent en absolute provoquait un chevauchement
   du texte avec les éléments voisins ; border-left est garanti par le
   modèle de boîte CSS standard, donc sans risque de chevauchement). */
.status-card {
    border-left: 3px solid var(--border-soft);
    border-radius: var(--radius-sm);
    background-color: var(--surface);
}

.status-ok {
    border-left-color: var(--accent-green);
    background-color: color-mix(in srgb, var(--accent-green) 7%, white);
}

.status-alert {
    border-left-color: var(--accent-red);
    background-color: color-mix(in srgb, var(--accent-red) 6%, white);
}

.status-unknown {
    border-left-color: var(--accent-amber);
    background-color: color-mix(in srgb, var(--accent-amber) 8%, white);
}

.status-card-compact .card-title {
    font-size: 0.9rem;
}

.btn-xs {
    padding: 0.1rem 0.4rem;
    font-size: 0.75rem;
    line-height: 1.4;
}

/* --- Cases de sélection "design" pour l'export (Réglages > Export) --- */
.export-section-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.export-section-card {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    border: 2px solid #e2e5e9;
    border-radius: var(--radius-md);
    padding: 0.75rem 0.9rem;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
    background-color: #fff;
    font-size: 0.9rem;
}

@media (max-width: 575.98px) {
    .export-section-card {
        padding: 0.5rem 0.6rem;
        gap: 0.4rem;
        font-size: 0.8rem;
    }

    .export-section-card i.export-section-icon {
        font-size: 1rem;
    }
}

/* --- Planning --- */
.planning-employee-col {
    min-width: 110px;
}

.planning-day-col {
    min-width: 110px;
}

.planning-shift-block {
    font-size: 0.8rem;
    border-radius: 6px;
}

@media (min-width: 768px) {
    .planning-employee-col {
        min-width: 150px;
    }

    .planning-day-col {
        min-width: 130px;
    }
}

.export-section-card:hover {
    border-color: var(--site-primary);
}

.export-section-card i.export-section-icon {
    font-size: 1.3rem;
    color: #9aa1a9;
    transition: color 0.15s ease;
}

.export-section-card .export-section-check {
    margin-left: auto;
    font-size: 1.1rem;
    display: flex;
}

.export-section-check .icon-checked {
    display: none;
    color: var(--site-primary);
}

.export-section-check .icon-unchecked {
    color: #d7dbe0;
}

.export-section-input:checked + .export-section-card .export-section-check .icon-checked {
    display: inline;
}

.export-section-input:checked + .export-section-card .export-section-check .icon-unchecked {
    display: none;
}

.export-section-input:checked + .export-section-card {
    border-color: var(--site-primary);
    background-color: color-mix(in srgb, var(--site-primary) 8%, white);
}

.export-section-input:checked + .export-section-card i.export-section-icon {
    color: var(--site-primary);
}

.export-section-input:focus-visible + .export-section-card {
    outline: 2px solid var(--site-primary);
    outline-offset: 2px;
}

/* --- Mémo d'équipe (tableau de bord) --- */
.note-color-swatch {
    display: inline-block;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
}

.note-color-swatch:has(input:checked) {
    border-color: #495057;
}

.notes-board {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.note-card {
    width: 220px;
    min-height: 140px;
    padding: 1rem;
    border-radius: 4px;
    box-shadow: 2px 3px 8px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transform: rotate(-1deg);
    transition: transform 0.15s ease;
}

.note-card:nth-child(even) {
    transform: rotate(1deg);
}

.note-card:hover {
    transform: rotate(0deg) scale(1.02);
}

.note-message {
    color: #33302b;
    white-space: pre-wrap;
    word-break: break-word;
    margin-bottom: 0.75rem;
}

.note-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    color: #6c6459;
}

/* --- Icône ronde dans les modals de confirmation de suppression --- */
.delete-modal-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 50%;
    background-color: #f8d7da;
    color: #b02a37;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.modal-content {
    border-radius: var(--radius-lg);
    border: none;
    box-shadow: var(--shadow-lg);
}

.legend-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 0.3rem;
}

/* --- Barre de recherche globale (sidebar) --- */
.sidebar-search {
    position: relative;
}

.sidebar-search input {
    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    color: #fff;
    padding: 0.4rem 0.75rem 0.4rem 2.1rem;
    font-size: 0.85rem;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.sidebar-search input::placeholder {
    color: rgba(255, 255, 255, 0.55);
}

.sidebar-search input:focus {
    background-color: rgba(255, 255, 255, 0.14);
    border-color: var(--site-primary);
    color: #fff;
    box-shadow: none;
}

.sidebar-search .bi-search {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.85rem;
    pointer-events: none;
}

/* --- Planning : un seul jour visible à la fois sur mobile --- */
@media (max-width: 767.98px) {
    .planning-day-col.day-hidden-mobile {
        display: none !important;
    }
}

/* --- Case "Rester connecté" sur la page de connexion --- */
.remember-me-toggle {
    background-color: #f8f9fc;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    padding: 0.65rem 0.9rem;
}

.remember-me-toggle .form-check-input {
    cursor: pointer;
}

.remember-me-toggle .form-switch .form-check-input {
    width: 2.6em;
    height: 1.4em;
    margin-top: 0;
}

.remember-me-toggle .form-check-input:checked {
    background-color: var(--site-primary);
    border-color: var(--site-primary);
}

.remember-me-toggle .form-check-input:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--site-primary) 20%, transparent);
    border-color: var(--site-primary);
}

/* --- Étapes de fabrication (Formation) : en ligne sur ordinateur, empilées sur mobile --- */
.training-steps {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
}

.training-step {
    flex: 0 0 auto;
    min-width: 220px;
    max-width: 260px;
    padding: 1rem;
    border-right: 1px solid var(--border-soft);
}

.training-step:last-child {
    border-right: none;
}

@media (max-width: 767.98px) {
    .training-steps {
        flex-direction: column;
        overflow-x: visible;
    }

    .training-step {
        min-width: 0;
        max-width: none;
        border-right: none;
        border-bottom: 1px solid var(--border-soft);
    }

    .training-step:last-child {
        border-bottom: none;
    }
}

/* --- Numéro de version, sous le bouton de déconnexion --- */
.sidebar-version {
    text-align: center;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.72rem;
    margin-top: 0.6rem;
}

/* =========================================================================
   Titre de page cohérent sur tout le site
   ========================================================================= */
main.main-content > h1.h3:first-child {
    font-size: 1.55rem;
    margin-bottom: 1.75rem !important;
    letter-spacing: -0.02em;
}

/* =========================================================================
   Pastilles d'icône colorées dans les en-têtes de carte
   (display: flex du .card-header est déjà défini plus haut, avec les
   fondations de la carte, pour éviter toute règle dupliquée)
   ========================================================================= */
.card-header > i.bi:first-child {
    width: 34px;
    height: 34px;
    min-width: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1rem;
    background-color: color-mix(in srgb, var(--site-primary) 14%, white);
    color: var(--site-primary);
}

/* Couleurs spécifiques par module, pour que chaque section reste
   identifiable d'un coup d'œil (sobre ≠ monochrome : les pastilles restent
   colorées, le reste du design reste restreint). */
.card-header > i.bi-calendar-check:first-child,
.card-header > i.bi-truck:first-child,
.card-header > i.bi-brush:first-child,
.card-header > i.bi-envelope:first-child,
.card-header > i.bi-graph-up-arrow:first-child {
    background-color: color-mix(in srgb, var(--accent-blue) 15%, white);
    color: var(--accent-blue);
}

.card-header > i.bi-clock-history:first-child,
.card-header > i.bi-clipboard-check:first-child {
    background-color: color-mix(in srgb, var(--accent-teal) 15%, white);
    color: var(--accent-teal);
}

.card-header > i.bi-airplane:first-child,
.card-header > i.bi-clipboard-data:first-child,
.card-header > i.bi-mortarboard:first-child {
    background-color: color-mix(in srgb, var(--accent-violet) 15%, white);
    color: var(--accent-violet);
}

.card-header > i.bi-box-seam:first-child,
.card-header > i.bi-cash-coin:first-child,
.card-header > i.bi-plus-circle:first-child,
.card-header > i.bi-check-lg:first-child {
    background-color: color-mix(in srgb, var(--accent-green) 15%, white);
    color: var(--accent-green);
}

.card-header > i.bi-thermometer-half:first-child,
.card-header > i.bi-exclamation-triangle:first-child,
.card-header > i.bi-stopwatch:first-child,
.card-header > i.bi-question-circle:first-child {
    background-color: color-mix(in srgb, var(--accent-amber) 15%, white);
    color: var(--accent-amber);
}

.card-header > i.bi-heart-pulse:first-child,
.card-header > i.bi-calendar-x:first-child,
.card-header > i.bi-trash:first-child,
.card-header > i.bi-exclamation-octagon-fill:first-child {
    background-color: color-mix(in srgb, var(--accent-red) 15%, white);
    color: var(--accent-red);
}

/* =========================================================================
   Cartes KPI (tableau de bord, planning)
   ========================================================================= */
.kpi-card {
    background-color: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
    padding: 1.1rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    height: 100%;
    transition: box-shadow 0.2s var(--ease-soft), transform 0.2s var(--ease-soft);
}

.kpi-card:hover {
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

.kpi-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    background-color: color-mix(in srgb, var(--site-primary) 14%, white);
    color: var(--site-primary);
}

.kpi-icon-warning {
    background-color: color-mix(in srgb, var(--accent-amber) 16%, white);
    color: var(--accent-amber);
}

.kpi-icon-danger {
    background-color: color-mix(in srgb, var(--accent-red) 14%, white);
    color: var(--accent-red);
}

.kpi-icon-teal {
    background-color: color-mix(in srgb, var(--accent-teal) 15%, white);
    color: var(--accent-teal);
}

.kpi-value {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: #16202e;
}

.kpi-label {
    font-size: 0.8rem;
    color: var(--text-muted-2);
    font-weight: 500;
    margin-bottom: 0.15rem;
}

/* =========================================================================
   Bloc d'accueil "Bonjour, ..." en haut du tableau de bord
   ========================================================================= */
.dashboard-hero {
    margin-bottom: 1.75rem;
}

.dashboard-hero h1 {
    font-size: 1.6rem;
    letter-spacing: -0.02em;
}

/* =========================================================================
   Carte utilisateur en bas de la sidebar
   ========================================================================= */
.sidebar-user {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.5rem;
    border-radius: var(--radius-sm);
    margin-bottom: 0.65rem;
}

.sidebar-avatar {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.12);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.95rem;
}

.sidebar-user-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.3;
}

.sidebar-user-name {
    font-weight: 600;
    font-size: 0.88rem;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-user-role {
    font-size: 0.74rem;
    color: rgba(255, 255, 255, 0.55);
}

/* =========================================================================
   Cartes d'information capteur (page détail température)
   ========================================================================= */
.sensor-info-card {
    background-color: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    padding: 0.9rem 1.05rem;
    margin-bottom: 0.85rem;
}

.sensor-info-card:last-child {
    margin-bottom: 0;
}

.sensor-info-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted-2);
    font-weight: 700;
    margin-bottom: 0.3rem;
}

.sensor-info-value {
    font-size: 1.45rem;
    font-weight: 700;
    color: #16202e;
    letter-spacing: -0.01em;
}

.sensor-info-value-sm {
    font-size: 0.95rem;
    font-weight: 600;
    color: #16202e;
}

/* =========================================================================
   Page de connexion
   ========================================================================= */
.login-card {
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.login-page-bg {
    min-height: 100vh;
    background:
        radial-gradient(circle at 15% 20%, color-mix(in srgb, var(--site-primary) 10%, transparent), transparent 45%),
        radial-gradient(circle at 85% 80%, color-mix(in srgb, var(--site-sidebar) 8%, transparent), transparent 50%),
        var(--page-bg);
}

/* =========================================================================
   Planning : avatars et grille
   ========================================================================= */
.planning-avatar {
    width: 30px;
    height: 30px;
    min-width: 30px;
    border-radius: 50%;
    background-color: color-mix(in srgb, var(--site-primary) 15%, white);
    color: var(--site-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.8rem;
}

.planning-table {
    border-collapse: separate;
    border-spacing: 0 4px;
}

.planning-card {
    background-color: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    padding: 0.85rem 1rem;
}

.shift-actions {
    opacity: 0.45;
    transition: opacity 0.2s var(--ease-soft);
}

.planning-day-col:hover .shift-actions,
.shift-actions:focus-within {
    opacity: 1;
}

.planning-add-link {
    color: var(--text-muted-2);
    font-size: 0.78rem;
    text-decoration: none;
}

.planning-add-link:hover {
    color: var(--site-primary);
}

/* --- Graphique de la fiche capteur (Températures) : hauteur fixe pilotée
   par CSS plutôt que par le ratio implicite des attributs canvas, pour
   éviter un graphique écrasé (et des libellés d'axe qui se chevauchent en
   diagonale) sur petit écran. */
.sensor-chart-wrap {
    position: relative;
    height: 220px;
}

@media (min-width: 768px) {
    .sensor-chart-wrap {
        height: 320px;
    }
}

/* --- Onglet Stock : grille d'articles --- */
.stock-card {
    border: 1px solid var(--border-soft);
    border-left: 3px solid var(--border-soft);
    border-radius: var(--radius-md);
    background-color: var(--surface);
    box-shadow: var(--shadow-sm);
    padding: 1rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    transition: box-shadow 0.15s var(--ease-soft), border-color 0.15s var(--ease-soft);
}

.stock-card:hover {
    box-shadow: var(--shadow-md);
}

.stock-card-low {
    border-left-color: var(--accent-red);
    background-color: color-mix(in srgb, var(--accent-red) 5%, white);
}

.stock-card-thumb {
    width: 100%;
    height: 90px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    background-color: var(--page-bg);
}

.stock-card-placeholder {
    width: 100%;
    height: 90px;
    border-radius: var(--radius-sm);
    background-color: var(--page-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted-2);
    font-size: 1.6rem;
}

.stock-card-name {
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.25;
}

.stock-qty-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.stock-qty-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--border-soft);
    background-color: var(--page-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    line-height: 1;
    flex: 0 0 auto;
    transition: background-color 0.15s ease;
}

.stock-qty-btn:hover {
    background-color: color-mix(in srgb, var(--site-primary) 12%, white);
}

.stock-qty-value {
    font-size: 1.4rem;
    font-weight: 700;
    min-width: 64px;
    text-align: center;
    transition: color 0.15s ease;
}

.stock-card-low .stock-qty-value {
    color: var(--accent-red);
}

.stock-unit {
    font-size: 0.75rem;
    color: var(--text-muted-2);
    font-weight: 500;
}

.stock-set-row {
    display: flex;
    gap: 0.4rem;
}

.stock-set-row input {
    font-size: 0.85rem;
}

.stock-low-badge {
    font-size: 0.7rem;
}