:root {
    /* Couleurs principales */
    --color-primary: #27ae60;    /* Vert maraîchage */
    --color-primary-dark: #219150;
    --color-background: #f8f9f9; /* Gris très clair/Blanc cassé */
    --color-surface: #ffffff;    /* Blanc pur pour les cartes/formulaires */
    
    /* Texte */
    --color-text-main: #2c3e50;
    --color-text-muted: #7f8c8d;
    --color-text-light: #ffffff;
    
    /* États (Erreur, Succès, etc.) */
    --color-error: #e74c3c;
    --color-success: #2ecc71;
    --primary-color-blue: #2980b9;
    
    /* Tailles et espacements */
    --border-radius: 8px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
}

/* --- Logo BioPonix (bandeau supérieur, toutes les pages) ---
   Taille de base 40px ; modificateurs --lg (x2, Dashboard/Config/Admin) et
   --xl (x3, page de Login — affichage central et imposant). */
.app-logo {
    display: block;
    height: auto;
    max-height: 40px;
    width: auto;
}

.app-logo--lg {
    max-height: 80px;
}

.app-logo--xl {
    max-height: 120px;
}

/* Bandeau compact réservé aux pages "centrées" (mot de passe oublié,
   changement de mot de passe, à propos...), qui n'ont pas de
   <header class="dashboard-header"> propre : le logo y reste visible en
   haut à gauche, au-dessus de la carte centrale. */
.auth-header {
    align-items: center;
    background-color: var(--color-surface);
    border-bottom: 2px solid var(--color-primary);
    display: flex;
    justify-content: space-between;
    padding: 6px var(--spacing-lg);
}

.auth-header .app-logo {
    max-height: 80px;
}

/* Page de Login : logo central et imposant (x3), affiché directement dans
   la carte de connexion plutôt que dans un bandeau. */
.login-logo {
    display: block;
    margin: 0 auto var(--spacing-lg);
}

body {
    background-color: var(--color-background);
    color: var(--color-text-main);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
}

/* Exemple de style pour les boutons (adapté au tactile) */
.btn {
    background-color: var(--color-primary);
    color: var(--color-text-light);
    border: none;
    border-radius: var(--border-radius);
    padding: 12px 24px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.btn:hover {
    background-color: var(--color-primary-dark);
}

.login-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Zone centrée sous le bandeau .auth-header : reprend l'ancien centrage de
   .login-page (flex + justify/align center) sur l'espace restant. */
.login-page__content {
    align-items: center;
    display: flex;
    flex: 1;
    justify-content: center;
    padding: var(--spacing-md);
}

.login-box {
    background-color: var(--color-surface);
    border-radius: var(--border-radius);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    padding: var(--spacing-lg);
    width: 100%;
    max-width: 360px;
}

.login-box h1 {
    color: var(--color-primary);
    font-size: 1.5rem;
    margin: 0 0 var(--spacing-lg);
    text-align: center;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.form-group label {
    color: var(--color-text-main);
    font-size: 0.95rem;
}

.form-input {
    border: 1px solid #dfe6e9;
    border-radius: var(--border-radius);
    box-sizing: border-box;
    font-size: 16px;
    padding: 12px;
    width: 100%;
}

.form-input:focus {
    border-color: var(--color-primary);
    outline: none;
}

.login-form .btn {
    margin-top: var(--spacing-sm);
    width: 100%;
}

.error-message {
    background-color: rgba(231, 76, 60, 0.1);
    border-radius: var(--border-radius);
    color: var(--color-error);
    font-size: 0.9rem;
    margin: 0 0 var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    text-align: center;
}

.login-links {
    margin: var(--spacing-md) 0 0;
    text-align: center;
}

.login-links a {
    color: var(--color-primary);
    font-size: 0.9rem;
    text-decoration: none;
}

.login-links a:hover {
    text-decoration: underline;
}

/* --- Dashboard --- */
.dashboard-page {
    min-height: 100vh;
}

/* ---- Bandeau supérieur (B20) ----
   Structure imposée : le logo occupe EXCLUSIVEMENT la zone de gauche : la
   zone de droite (nom du système, variables globales V/KHcible/PHcible/
   ECcible, navigation) reste TOUJOURS sur la même ligne horizontale — elle
   ne doit plus jamais être rejetée dans un bloc en dessous. On utilise donc
   une seule ligne flex (nowrap) ; en cas de manque de place extrême
   (mobile très étroit), un défilement horizontal prend le relais plutôt
   qu'un retour à la ligne. */
.dashboard-header {
    background-color: var(--color-surface);
    border-bottom: 2px solid var(--color-primary);
    overflow: visible;
    padding: 6px var(--spacing-lg);
    position: relative;
    z-index: 1000;
}

.dashboard-header__row {
    align-items: center;
    display: flex;
    flex-wrap: nowrap;
    gap: var(--spacing-lg);
    justify-content: space-between;
    overflow: visible;
    position: relative;
}

.dashboard-header__start {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    gap: var(--spacing-lg);
    min-width: 0;
    z-index: 1;
}

.dashboard-header__brand {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    gap: var(--spacing-sm);
}

.dashboard-header__info {
    align-items: center;
    display: flex;
    flex: 1 1 auto;
    flex-wrap: nowrap;
    gap: var(--spacing-lg);
    justify-content: space-between;
}

.dashboard-header__title {
    align-items: center;
    display: flex;
    flex-wrap: nowrap;
    gap: var(--spacing-lg);
}

/* B38 : même style de titre (vert, compact) pour "Configuration" et pour
   "Opérations" (Dashboard) — les deux pages doivent être visuellement
   cohérentes. */
.dashboard-header__title h1,
.dashboard-header__title-text {
    color: var(--color-primary);
    font-size: 1.1rem;
    margin: 0;
    white-space: nowrap;
}

/* Bloc central (nom du système + variables) : centré horizontalement sur
   la page, pivot entre le logo/titre à gauche et la navigation à droite. */
.dashboard-header__metrics {
    align-items: center;
    display: flex;
    flex-wrap: nowrap;
    gap: var(--spacing-md);
    justify-content: center;
    left: 50%;
    max-width: min(72vw, 760px);
    pointer-events: none;
    position: absolute;
    transform: translateX(-50%);
    z-index: 0;
}

.dashboard-header__metrics > * {
    pointer-events: auto;
}

.dashboard-header__system-name {
    color: var(--primary-color-blue, #2980b9);
    font-family: "Nunito", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.2;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-header__nav {
    display: flex;
    flex: 0 0 auto;
    gap: var(--spacing-md);
    margin-left: auto;
    position: relative;
    z-index: 10001;
}

.app-nav-cluster {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    gap: 6px;
}

.app-version {
    color: var(--color-text-muted);
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    white-space: nowrap;
}

.app-version-footer {
    margin: var(--spacing-md) 0 0;
    text-align: center;
}

/* --- Menu hamburger global (navigation unifiée) --- */
.app-nav {
    position: relative;
    z-index: 10001;
}

.app-nav__toggle {
    align-items: center;
    background: transparent;
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    min-height: 48px;
    min-width: 48px;
    padding: 8px 12px;
    transition: background-color 0.2s ease;
}

.app-nav__toggle:hover {
    background-color: rgba(39, 174, 96, 0.08);
}

.app-nav__bars {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.app-nav__bars span {
    background-color: #27ae60;
    border-radius: 2px;
    display: block;
    height: 3px;
    transition: background-color 0.25s ease, transform 0.25s ease, opacity 0.25s ease;
    width: 26px;
}

.app-nav.is-open .app-nav__bars span {
    background-color: #ffffff;
}

.app-nav__panel {
    background-color: #27ae60;
    border-radius: var(--border-radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    margin-top: 6px;
    min-width: min(320px, calc(100vw - 2 * var(--spacing-lg)));
    opacity: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 100%;
    transform: translateY(-8px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    z-index: 9999;
}

.app-nav.is-open .app-nav__panel {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.app-nav__list {
    list-style: none;
    margin: 0;
    padding: var(--spacing-sm) 0;
}

.app-nav__item {
    margin: 0;
}

.app-nav__link {
    align-items: center;
    color: #ffffff;
    display: flex;
    font-size: 0.95rem;
    gap: var(--spacing-sm);
    padding: 12px var(--spacing-md);
    text-decoration: none;
    transition: background-color 0.2s ease, opacity 0.2s ease;
}

.app-nav__link:hover {
    background-color: rgba(255, 255, 255, 0.12);
}

.app-nav__link--current {
    cursor: default;
    opacity: 0.55;
    pointer-events: none;
}

.app-nav__icon {
    flex: 0 0 auto;
    height: 22px;
    object-fit: contain;
    width: 22px;
}

.app-nav__label {
    line-height: 1.3;
}

.dashboard-welcome {
    color: #2980b9;
    font-size: 0.85rem;
    margin: 0;
    padding: 2px var(--spacing-lg) 8px;
    text-align: right;
}

/* Variables système (V, KHcible, PHcible, ECcible) : présentées en
   "puces" compactes et alignées à droite du logo, jamais en dessous. */
.dashboard-banner {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--spacing-sm);
}

.banner-item {
    background-color: var(--color-background);
    border-radius: var(--border-radius);
    padding: 4px var(--spacing-sm);
    white-space: nowrap;
}

.banner-label {
    color: var(--color-text-muted);
    font-size: 0.7rem;
}

.banner-value {
    color: var(--color-text-main);
    font-size: 0.95rem;
    font-weight: 600;
    margin-left: 4px;
}

.dashboard-main {
    margin: 0 auto;
    max-width: 1200px;
    padding: var(--spacing-lg);
}

.dashboard-main h2 {
    color: var(--color-text-main);
    font-size: 1.2rem;
    margin: 0 0 var(--spacing-md);
}

.intervention-section,
.projection-section,
.history-section,
.config-section {
    background-color: var(--color-surface);
    border-radius: var(--border-radius);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-md);
}

/* Règle de densité d'information (spécifications) : on réduit les grands
   espacements verticaux entre sections pour privilégier la consultation
   rapide des données, tout en gardant une lisibilité correcte. */
.intervention-grid {
    display: grid;
    gap: var(--spacing-md);
}

/* Gros bouton tactile de masquage — masque/affiche à la fois la grille de
   saisie et la projection théorique pour libérer de l'espace pour
   l'historique. Doit être large, contrasté et bien visible (spécifications). */
.btn--block {
    display: block;
    width: 100%;
}

.btn--toggle {
    align-items: center;
    display: flex;
    font-size: 1rem;
    font-weight: 600;
    gap: var(--spacing-sm);
    justify-content: center;
    margin-bottom: var(--spacing-md);
    padding: 16px 24px;
}

.btn--toggle__icon {
    font-size: 1.1rem;
}

.grid-section h3 {
    border-bottom: 1px solid #ecf0f1;
    color: var(--color-primary);
    font-size: 1rem;
    margin: 0 0 var(--spacing-md);
    padding-bottom: var(--spacing-sm);
}

.grid-fields {
    display: grid;
    gap: var(--spacing-md);
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    margin-bottom: var(--spacing-md);
}

.field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: relative;
}

.field span:first-child {
    font-size: 0.9rem;
}

/* Unité affichée "en filigrane" DANS le fond du champ (B9.1) : à droite de
   la valeur saisie, mais à gauche des flèches natives d'incrément/
   décrément (l'"ascenseur") des <input type="number">, qui restent tout à
   droite, à l'intérieur du champ. On superpose l'unité en position
   absolue à l'intérieur du conteneur, et on réserve la place nécessaire
   via le padding-right du champ pour qu'elle ne chevauche jamais ni la
   valeur tapée ni les flèches. */
.field-unit-wrap {
    position: relative;
}

.field-unit-wrap .form-input {
    padding-right: 46px;
}

.field-unit {
    color: #b6c0c4;
    font-size: 0.85rem;
    pointer-events: none;
    position: absolute;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
}

.field--checkbox {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.field--checkbox input[type="checkbox"] {
    margin: 4px 0 0;
    transform: scale(1.3);
    transform-origin: left center;
}

.grid-fields--readonly .form-input {
    background-color: var(--color-background);
    color: var(--color-text-main);
}

/* ---- Étape A / B : une ligne horizontale sur desktop ---- */
.grid-fields--oneline {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--spacing-sm);
    grid-template-columns: unset;
    margin-bottom: var(--spacing-md);
}

.grid-fields--oneline .field {
    flex: 1 1 0;
    min-width: 0;
}

.grid-fields--oneline .field--datetime {
    flex: 1.7 1 0;
}

.grid-fields--oneline .field--checkbox {
    flex: 0.7 1 0;
}

.grid-fields--oneline .field span:first-child {
    font-size: 0.72rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.grid-fields--oneline .form-input {
    font-size: 13px;
    padding: 8px 6px;
}

.grid-fields--oneline .field--datetime .form-input {
    font-variant-numeric: tabular-nums;
    padding-left: 6px;
    padding-right: 6px;
}

.grid-fields--oneline .field-unit-wrap .form-input {
    padding-right: 34px;
}

.grid-fields--oneline .field-unit {
    font-size: 0.62rem;
    right: 16px;
}

@media (max-width: 900px) {
    .grid-fields--oneline {
        flex-wrap: wrap;
    }

    .grid-fields--oneline .field,
    .grid-fields--oneline .field--datetime,
    .grid-fields--oneline .field--checkbox {
        flex: 1 1 140px;
    }
}

@media (max-width: 640px) {
    .grid-fields--oneline {
        flex-direction: column;
        flex-wrap: nowrap;
    }

    .grid-fields--oneline .field,
    .grid-fields--oneline .field--datetime,
    .grid-fields--oneline .field--checkbox {
        flex: 0 0 auto;
        width: 100%;
    }
}

.guardian-messages {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.guardian-messages:empty {
    display: none;
}

.guardian-message {
    background-color: rgba(243, 156, 18, 0.12);
    border-left: 4px solid #f39c12;
    border-radius: var(--border-radius);
    font-size: 0.9rem;
    padding: var(--spacing-sm) var(--spacing-md);
}

.guardian-message--error {
    background-color: rgba(231, 76, 60, 0.1);
    border-left-color: var(--color-error);
}

.field--blocked .form-input {
    background-color: #fdecea;
    color: var(--color-text-muted);
    text-decoration: line-through;
}

/* Étape B — met en évidence les champs qui viennent de recevoir une valeur
   calculée/prescrite strictement positive (fond vert clair), pour les
   repérer d'un coup d'œil parmi les champs restés vides. Réinitialisé au
   clic sur "Ajouts OK" (le formulaire est de toute façon rechargé juste
   après). */
.field--prescribed .form-input {
    background-color: rgba(39, 174, 96, 0.12);
    border-color: var(--color-primary);
}

/* Historique (B12) : contrairement au fond vert transitoire du formulaire
   ci-dessus, cette classe est posée côté serveur (dashboard.php) à partir
   des valeurs RÉELLEMENT enregistrées en base — elle persiste donc dans le
   temps, ligne après ligne, pour repérer immédiatement quels ajouts ont
   effectivement été prescrits (valeur > 0) lors de chaque intervention
   passée. */
.cell-prescribed {
    background-color: rgba(39, 174, 96, 0.12);
}

.history-table td.cell-prescribed {
    background-color: rgba(39, 174, 96, 0.12);
}

/* Cellules « Mesures » (KH, pH, EC, stade, canicule) — bleu clair pour les
   distinguer des « Ajouts réalisés » à droite. */
.history-table td.cell-measured {
    background-color: rgba(41, 128, 185, 0.14);
}

.history-section__header {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    justify-content: space-between;
    margin-bottom: var(--spacing-md);
}

.history-section__header h2 {
    margin: 0;
}

.history-chart-panel {
    background-color: var(--color-surface);
    border: 1px solid #e5ebea;
    border-radius: var(--border-radius);
    margin-bottom: var(--spacing-lg);
    padding: var(--spacing-md);
}

.history-chart-panel__title {
    color: var(--color-text-main);
    font-size: 1rem;
    margin: 0 0 var(--spacing-md);
}

.history-chart-panel__canvas-wrap {
    height: 380px;
    position: relative;
    width: 100%;
}

/* --- Tests métier (admin) --- */
.business-tests-main {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.business-tests-summary {
    display: grid;
    gap: var(--spacing-md);
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.business-tests-summary__card {
    background-color: var(--color-surface);
    border: 1px solid #e5ebea;
    border-radius: var(--border-radius);
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--spacing-md);
    text-align: center;
}

.business-tests-summary__card--pass {
    border-color: #b8e6cb;
}

.business-tests-summary__card--fail {
    border-color: #f5b7b1;
}

.business-tests-summary__value {
    color: var(--color-text-main);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
}

.business-tests-summary__card--pass .business-tests-summary__value {
    color: var(--color-primary-dark);
}

.business-tests-summary__card--fail .business-tests-summary__value {
    color: var(--color-error);
}

.business-tests-summary__label {
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

.business-tests-reference h2,
.business-tests-level h2 {
    margin-top: 0;
}

.business-tests-level--1 {
    border-left: 4px solid #2c3e50;
}

.business-tests-level--2 {
    border-left: 4px solid var(--primary-color-blue);
}

.business-tests-level--3 {
    border-left: 4px solid var(--color-primary);
}

.business-tests-level {
    background-color: var(--color-surface);
    border: 1px solid #e5ebea;
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
}

.business-tests-table th {
    background-color: #f4f6f6;
}

.business-tests-table-wrapper {
    overflow-x: auto;
}

.business-tests-case--pass td {
    background-color: #f8fcf9;
}

.business-tests-case--fail td {
    background-color: #fdf5f4;
}

.business-tests-case--detail td {
    border-top: none;
    padding-top: 0;
}

.business-tests-case__title {
    min-width: 180px;
    vertical-align: top;
}

.business-tests-case__rule {
    vertical-align: top;
    white-space: nowrap;
}

.business-tests-case__status {
    text-align: center;
    vertical-align: top;
    width: 72px;
}

.business-tests-row__id {
    color: var(--color-text-muted);
    font-size: 0.8rem;
    margin-top: 2px;
}

.business-tests-rule {
    background-color: #eef5fb;
    border-radius: 999px;
    color: var(--primary-color-blue);
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 2px 10px;
}

.business-tests-detail-grid {
    display: grid;
    gap: var(--spacing-md);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding-bottom: var(--spacing-sm);
}

.business-tests-detail-block__title {
    color: var(--color-text-muted);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    margin: 0 0 6px;
    text-transform: uppercase;
}

.business-tests-kv {
    font-size: 0.82rem;
    line-height: 1.45;
    list-style: none;
    margin: 0;
    padding: 0;
}

.business-tests-kv--empty {
    color: var(--color-text-muted);
    font-size: 0.82rem;
    margin: 0;
}

.business-tests-kv__item {
    margin: 0 0 4px;
    word-break: break-word;
}

.business-tests-kv__item:last-child {
    margin-bottom: 0;
}

.business-tests-kv__key {
    color: var(--color-text-muted);
    font-weight: 600;
}

.business-tests-kv__value {
    color: var(--color-text-main);
}

.business-tests-kv--nested {
    margin-top: 4px;
    padding-left: 12px;
}

.business-tests-kv__item--group {
    margin-bottom: 8px;
}

.business-tests-badge {
    border-radius: 999px;
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 700;
    min-width: 42px;
    padding: 4px 10px;
    text-align: center;
}

.business-tests-badge--pass {
    background-color: #d5f5e3;
    color: var(--color-primary-dark);
}

.business-tests-badge--fail {
    background-color: #fadbd8;
    color: #c0392b;
}

@media (max-width: 900px) {
    .business-tests-summary {
        grid-template-columns: 1fr;
    }

    .business-tests-detail-grid {
        grid-template-columns: 1fr;
    }
}

.btn:disabled {
    cursor: not-allowed;
    opacity: 0.7;
}

.btn--secondary:disabled {
    background-color: #bdc3c7;
}

.btn--success,
.btn--success:disabled {
    background-color: var(--color-success);
    color: var(--color-text-light);
    opacity: 1;
}

.btn--secondary {
    background-color: var(--color-text-main);
}

.btn--secondary:hover:not(:disabled) {
    background-color: #1a252f;
}

.btn--secondary:disabled {
    background-color: #bdc3c7;
    cursor: not-allowed;
}

.btn--danger {
    background-color: var(--color-error);
}

.btn--danger:hover {
    background-color: #c0392b;
}

.btn--small {
    font-size: 0.85rem;
    padding: 8px 16px;
}

.help-text {
    color: var(--color-text-muted);
    font-size: 0.85rem;
    margin-top: var(--spacing-sm);
}

.form-input--placeholder,
.form-input[readonly].form-input--placeholder {
    background-color: #ecf0f1;
    color: var(--color-text-muted);
    font-style: italic;
}

/* La projection n+1 doit visuellement se distinguer d'une vraie mesure :
   fond neutre, bordure en pointillés, titre plus discret. */
.projection-section {
    background-color: #f4f6f5;
    border: 1px dashed #cfd8d3;
    box-shadow: none;
}

.projection-section h2 {
    color: var(--color-text-muted);
    font-size: 1.05rem;
}

.projection-note {
    color: var(--color-text-muted);
    font-size: 0.85rem;
    margin: 0 0 var(--spacing-md);
}

.intervention-row--projection {
    align-items: end;
    display: grid;
    gap: var(--spacing-md);
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}

.row-label {
    color: var(--color-text-muted);
    font-size: 0.9rem;
    font-weight: 600;
}

.row-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.history-table-wrapper {
    overflow-x: auto;
}

.history-table {
    border-collapse: collapse;
    font-size: 0.8rem;
    min-width: 900px;
    width: 100%;
}

/* Contrainte forte d'affichage (spécifications) : chaque ligne doit tenir
   sur une seule ligne horizontale, sans retour à la ligne. Police réduite
   et labels abrégés (Grow -> G, Micro -> M, Bloom -> B, ...) pour une
   lecture rapide terrain ; scroll horizontal autorisé sur mobile. */
.history-table th,
.history-table td {
    border-bottom: 1px solid #ecf0f1;
    padding: 6px 10px;
    text-align: left;
    white-space: nowrap;
}

.history-table th {
    background-color: var(--color-background);
    color: var(--color-text-muted);
    font-size: 0.78rem;
    font-weight: 600;
}

/* Regroupement visuel Mesures / Ajouts (spécifications : "les colonnes
   peuvent être regroupées visuellement"). Deux teintes légèrement
   différentes permettent de distinguer d'un coup d'œil ce qui a été
   MESURÉ de ce qui a été AJOUTÉ, sur la même ligne d'intervention. */
.history-table__group {
    text-align: center;
    font-size: 0.8rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.history-table__group--measures {
    background-color: rgba(41, 128, 185, 0.18);
    color: #1f5f8b;
}

.history-table__group--additions {
    background-color: #fef6e7;
    color: #b9770e;
}

.history-table__sticky-col {
    background-color: var(--color-surface);
    left: 0;
    position: sticky;
    z-index: 1;
}

.history-table th.history-table__sticky-col {
    background-color: var(--color-background);
}

.cell-empty {
    color: #bdc3c7;
    font-style: italic;
}

.history-row--locked {
    color: var(--color-text-muted);
}

.locked-label {
    font-size: 0.85rem;
    font-style: italic;
}

.empty-state {
    color: var(--color-text-muted);
    font-style: italic;
}

@media (max-width: 640px) {
    .dashboard-header {
        padding: 6px var(--spacing-md);
    }

    .dashboard-header__row {
        align-items: center;
        flex-wrap: wrap;
        gap: var(--spacing-sm);
    }

    .dashboard-header__start {
        flex: 1 1 auto;
        min-width: 0;
        order: 1;
    }

    .dashboard-header__metrics {
        flex: 1 1 100%;
        left: auto;
        max-width: none;
        order: 3;
        pointer-events: auto;
        position: static;
        transform: none;
    }

    .dashboard-header__nav {
        flex: 0 0 auto;
        margin-left: auto;
        order: 2;
    }

    .app-nav__panel {
        left: auto;
        max-width: calc(100vw - 2 * var(--spacing-md));
        min-width: min(280px, calc(100vw - 2 * var(--spacing-md)));
        right: 0;
    }

    .dashboard-main {
        padding: var(--spacing-md);
    }

    .history-chart-panel__canvas-wrap {
        height: 300px;
    }

    .app-logo--lg {
        max-height: 56px;
    }

    .grid-fields {
        grid-template-columns: 1fr;
    }

    .btn--toggle {
        font-size: 0.95rem;
        padding: 14px 16px;
    }
}

/* --- Page de configuration (Maraîcher) --- */
.config-main {
    max-width: 900px;
}

.config-section h2 {
    color: var(--color-primary);
    font-size: 1.1rem;
    margin: 0 0 var(--spacing-md);
}

.config-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

.field--wide {
    grid-column: span 2;
}

.config-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
}

.config-form--inline {
    border-top: 1px solid #ecf0f1;
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
}

.success-message {
    background-color: rgba(46, 204, 113, 0.12);
    border-radius: var(--border-radius);
    color: var(--color-primary-dark);
    font-size: 0.9rem;
    margin: 0 0 var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
}

.error-list {
    background-color: rgba(231, 76, 60, 0.1);
    border-radius: var(--border-radius);
    color: var(--color-error);
    font-size: 0.9rem;
    margin: 0 0 var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md) var(--spacing-sm) 1.75rem;
}

.error-list li {
    margin: 2px 0;
}

.config-subtitle {
    border-top: 1px solid #ecf0f1;
    color: var(--color-primary);
    font-size: 1rem;
    margin: var(--spacing-lg) 0 var(--spacing-md);
    padding-top: var(--spacing-md);
}

.stages-table-wrapper {
    margin-bottom: var(--spacing-md);
    overflow-x: auto;
}

.stages-table {
    border-collapse: collapse;
    width: 100%;
}

.stages-table th,
.stages-table td {
    padding: 6px 10px;
    text-align: left;
}

.stages-table th {
    color: var(--color-text-muted);
    font-size: 0.85rem;
    font-weight: 600;
}

.stages-table__stage {
    color: var(--color-text-main);
    font-weight: 600;
}

.stages-table td .form-input {
    max-width: 90px;
}

@media (max-width: 640px) {
    .field--wide {
        grid-column: span 1;
    }

    .stages-table {
        min-width: 480px;
    }
}

/* --- Champ mot de passe avec bouton "œil" (afficher/masquer) --- */
.password-field {
    position: relative;
}

.password-field .form-input {
    padding-right: 44px;
}

.password-toggle {
    align-items: center;
    background: none;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    display: flex;
    line-height: 1;
    padding: 4px;
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
}

.password-toggle svg {
    display: block;
    height: 20px;
    width: 20px;
}

.password-toggle:hover {
    color: var(--color-text-main);
}

.password-live-errors:empty {
    display: none;
}

/* --- Toast temporaire de confirmation (page de login) --- */
.toast {
    background-color: var(--color-primary);
    border-radius: var(--border-radius);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    color: var(--color-text-light);
    font-size: 1.05rem;
    font-weight: 600;
    left: 50%;
    padding: var(--spacing-md) var(--spacing-lg);
    position: fixed;
    text-align: center;
    top: 20px;
    transform: translateX(-50%);
    transition: opacity 0.4s ease, transform 0.4s ease;
    z-index: 1000;
}

.toast--hide {
    opacity: 0;
    transform: translate(-50%, -12px);
}

@media (max-width: 640px) {
    .toast {
        left: var(--spacing-md);
        right: var(--spacing-md);
        transform: none;
        width: auto;
    }

    .toast--hide {
        transform: translateY(-12px);
    }
}

/* --- Console d'administration (liste des systèmes, création, valeurs par défaut) --- */
.admin-main {
    max-width: 1100px;
}

.admin-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.admin-systems-table {
    min-width: 640px;
}

.admin-systems-table__actions {
    display: flex;
    gap: var(--spacing-sm);
    white-space: nowrap;
}

.required-mark {
    color: var(--color-error);
    font-weight: 700;
}

/* Modale de confirmation de suppression : s'appuie sur l'élément HTML natif
   <dialog>, qui gère seul le centrage, le fond assombri (::backdrop) et le
   focus — aucune bibliothèque JS de modale n'est nécessaire. */
.admin-dialog {
    border: none;
    border-radius: var(--border-radius);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
    max-width: 420px;
    padding: var(--spacing-lg);
    width: calc(100% - 2 * var(--spacing-md));
}

.admin-dialog::backdrop {
    background-color: rgba(44, 62, 80, 0.5);
}

.admin-dialog h2 {
    color: var(--color-error);
    font-size: 1.1rem;
    margin: 0 0 var(--spacing-md);
}

.admin-dialog p {
    font-size: 0.9rem;
    margin: 0 0 var(--spacing-md);
}

.admin-dialog .config-actions {
    margin-top: var(--spacing-md);
}

/* --- Modales de confirmation/alerte génériques (remplacent window.confirm
   et window.alert dans toute l'application — voir public/js/modal.js).
   Réutilise l'élément natif <dialog> comme .admin-dialog : centrage, fond
   assombri (::backdrop) et focus gérés nativement par le navigateur. --- */
.brand-dialog {
    border: none;
    border-radius: var(--border-radius);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
    max-width: 420px;
    padding: var(--spacing-lg);
    width: calc(100% - 2 * var(--spacing-md));
}

.brand-dialog::backdrop {
    background-color: rgba(44, 62, 80, 0.5);
}

.brand-dialog__header {
    margin-bottom: var(--spacing-md);
    text-align: center;
}

.brand-dialog__logo {
    display: block;
    margin: 0 auto;
    max-height: 60px;
}

.brand-dialog p {
    font-size: 0.95rem;
    margin: 0 0 var(--spacing-md);
}

.brand-dialog .config-actions {
    justify-content: flex-end;
}

/* --- Page "À propos" --- */
.about-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    list-style: none;
    margin: 0;
    padding: 0;
}

.about-list dt,
.about-tagline {
    color: var(--color-text-muted);
    font-size: 0.85rem;
}

.about-tagline {
    line-height: 1.5;
    margin: 0 0 var(--spacing-md);
    text-align: center;
}

.about-list dd {
    font-size: 1.05rem;
    margin: 0 0 var(--spacing-sm);
}

.about-main {
    display: flex;
    justify-content: center;
}

.about-card {
    margin: 0 auto;
    max-width: 520px;
    width: 100%;
}

.about-card__logo {
    display: block;
    margin: 0 auto var(--spacing-lg);
}