/* =====================================================================================
   Apparence du bureau SSA SAV (17/10/2026)
   - « Vert atelier » #0b6e4f (même vert que le pavé Interventions et l'écran téléphone)
     pour tout ce qui agit : boutons, onglet ouvert, tuiles, liens.
   - Fond gris très légèrement vert, rubriques en panneaux blancs arrondis.
   - Bandeau du haut blanc avec une fine bande verte (signature visuelle).
   - Police IBM Plex Sans (lisible, « bureau d'études ») ; à défaut, la police du système.
   Pour changer une couleur : modifier la valeur ici, rien d'autre.
   ===================================================================================== */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&display=swap");

/* --- Couleurs : mode clair ------------------------------------------------------------ */
:root, html[data-theme="light"] {
  --vert: #0b6e4f;               /* vert atelier : actions */
  --vert-fonce: #08553d;         /* survol */
  --vert-pale: #e6f2ec;          /* sélection, fonds d'accent */
  --fond-page: #f2f4f3;
  --panneau: #ffffff;
  --encre: #1c2622;
  --encre-douce: #5e6a65;
  --trait: #dbe1de;

  --font-family-primary: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --body-bg: var(--fond-page);
  --body-fg: var(--encre);
  --body-quiet-color: var(--encre-douce);
  --body-loud-color: #000;
  --darkened-bg: #f5f7f6;
  --hairline-color: var(--trait);
  --border-color: #c9d1cd;
  --selected-bg: var(--vert-pale);
  --selected-row: var(--vert-pale);

  --header-bg: #ffffff;
  --header-color: var(--encre-douce);
  --header-branding-color: var(--encre);
  --header-link-color: var(--encre);
  --breadcrumbs-bg: transparent;
  --breadcrumbs-fg: var(--encre-douce);
  --breadcrumbs-link-fg: var(--vert);

  --primary: #edf1ef;            /* fond des titres de rubriques */
  --primary-fg: var(--encre);
  --secondary: var(--vert);
  --accent: var(--vert);

  --link-fg: var(--vert);
  --link-hover-color: var(--vert-fonce);
  --link-selected-fg: var(--vert-fonce);

  --button-fg: #ffffff;
  --button-bg: var(--vert);
  --button-hover-bg: var(--vert-fonce);
  --default-button-bg: var(--vert);
  --default-button-hover-bg: var(--vert-fonce);
  --object-tools-fg: #ffffff;
  --object-tools-bg: var(--vert);
  --object-tools-hover-bg: var(--vert-fonce);
}

/* --- Couleurs : mode sombre ----------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    --vert: #1f9a74; --vert-fonce: #18805f; --vert-pale: #183229;
    --fond-page: #111614; --panneau: #1a201d; --encre: #e4ebe8; --encre-douce: #9aa8a2; --trait: #2c3531;
    --body-bg: var(--fond-page); --body-fg: var(--encre); --body-quiet-color: var(--encre-douce); --body-loud-color: #fff;
    --darkened-bg: #161c19; --hairline-color: var(--trait); --border-color: #3a4540;
    --selected-bg: var(--vert-pale); --selected-row: var(--vert-pale);
    --header-bg: #1a201d; --header-color: var(--encre-douce); --header-branding-color: var(--encre); --header-link-color: var(--encre);
    --breadcrumbs-bg: transparent; --breadcrumbs-fg: var(--encre-douce); --breadcrumbs-link-fg: #7fd3b6;
    --primary: #222a26; --primary-fg: var(--encre); --secondary: var(--vert); --accent: var(--vert);
    --link-fg: #7fd3b6; --link-hover-color: #a8e4cf; --link-selected-fg: #a8e4cf;
    --button-bg: var(--vert); --button-hover-bg: var(--vert-fonce); --default-button-bg: var(--vert);
    --default-button-hover-bg: var(--vert-fonce); --object-tools-bg: var(--vert); --object-tools-hover-bg: var(--vert-fonce);
  }
}
html[data-theme="dark"] {
  --vert: #1f9a74; --vert-fonce: #18805f; --vert-pale: #183229;
  --fond-page: #111614; --panneau: #1a201d; --encre: #e4ebe8; --encre-douce: #9aa8a2; --trait: #2c3531;
  --body-bg: var(--fond-page); --body-fg: var(--encre); --body-quiet-color: var(--encre-douce); --body-loud-color: #fff;
  --darkened-bg: #161c19; --hairline-color: var(--trait); --border-color: #3a4540;
  --selected-bg: var(--vert-pale); --selected-row: var(--vert-pale);
  --header-bg: #1a201d; --header-color: var(--encre-douce); --header-branding-color: var(--encre); --header-link-color: var(--encre);
  --breadcrumbs-bg: transparent; --breadcrumbs-fg: var(--encre-douce); --breadcrumbs-link-fg: #7fd3b6;
  --primary: #222a26; --primary-fg: var(--encre); --secondary: var(--vert); --accent: var(--vert);
  --link-fg: #7fd3b6; --link-hover-color: #a8e4cf; --link-selected-fg: #a8e4cf;
  --button-bg: var(--vert); --button-hover-bg: var(--vert-fonce); --default-button-bg: var(--vert);
  --default-button-hover-bg: var(--vert-fonce); --object-tools-bg: var(--vert); --object-tools-hover-bg: var(--vert-fonce);
}

/* --- Ensemble -------------------------------------------------------------------------- */
body { background: var(--body-bg); font-size: 14px; }
#content { padding: 20px 32px 40px; }
h1 { font-weight: 600; color: var(--encre); letter-spacing: -0.01em; }
table { font-variant-numeric: tabular-nums; }

/* Bandeau du haut : blanc, fine bande verte au-dessus */
#header { border-top: 4px solid var(--vert); border-bottom: 1px solid var(--trait); padding: 12px 32px; }
#branding h1, #branding h1 a, #site-name, #site-name a { color: var(--encre) !important; font-weight: 600; font-size: 20px; }
#user-tools { text-transform: none; letter-spacing: 0; font-size: 13px; }
#user-tools a { border-bottom: none; color: var(--encre) !important; }
#user-tools a:hover { color: var(--vert) !important; }

/* Fil d'Ariane : sur le fond, discret */
div.breadcrumbs { padding: 12px 32px 0; font-size: 13px; border: none; }
div.breadcrumbs a { font-weight: 500; }

/* Rubriques (fiches, listes, menu de gauche) : panneaux blancs arrondis */
fieldset.module, .module, .inline-group, #changelist .changelist-form-container, #nav-sidebar .module {
  background: var(--panneau); border: 1px solid var(--trait); border-radius: 10px; overflow: hidden; }
fieldset.module { padding: 0 0 4px; margin-bottom: 16px; }
.inline-group .module { border: none; border-radius: 0; }
.module h2, .module caption, .inline-group h2, fieldset .fieldset-heading, #nav-sidebar .module caption {
  background: var(--primary); color: var(--encre); font-size: 14px; font-weight: 600;
  text-transform: none; letter-spacing: 0 !important; padding: 10px 14px; border-bottom: 1px solid var(--trait); margin: 0; }
.module caption a, .module h2 a { color: var(--encre); letter-spacing: 0 !important; text-transform: none; }
/* Fiche en onglets : le titre de la rubrique est déjà sur l'onglet */
fieldset.en-onglet > .fieldset-heading { display: none; }
fieldset.en-onglet > .description { padding-top: 12px !important; }
.description { color: var(--encre-douce); padding: 8px 14px 0 !important; }
.form-row { border-bottom: 1px solid var(--trait); padding: 10px 14px; }
.aligned label { color: var(--encre); font-weight: 500; }
.help, .helptext, p.help { color: var(--encre-douce) !important; }

/* Tableaux : en-têtes calmes, sans majuscules */
thead th, tfoot td, .inline-group thead th { background: var(--darkened-bg); color: var(--encre-douce); text-transform: none;
  font-size: 12.5px; font-weight: 600; letter-spacing: 0; }
#changelist table thead th { background: var(--darkened-bg); }
tbody tr:hover td, tbody tr:hover th { background: var(--darkened-bg); }
#result_list tbody tr.selected td { background: var(--selected-row); }

/* Champs de saisie : arrondis, focus vert visible */
input[type=text], input[type=password], input[type=email], input[type=url], input[type=number], input[type=tel],
textarea, select, .vTextField {
  border: 1px solid var(--border-color); border-radius: 6px; padding: 6px 8px; background: var(--panneau); color: var(--encre); }
input:focus, textarea:focus, select:focus {
  outline: 2px solid color-mix(in srgb, var(--vert) 35%, transparent); outline-offset: 0; border-color: var(--vert); }

/* --- Boutons : tout en vert ---------------------------------------------------------- */
/* Action principale (Enregistrer) : vert plein ; les autres : contour vert. */
.button, input[type=submit], input[type=button], .submit-row input, a.button {
  background: var(--vert); color: #fff; border: 1px solid var(--vert); border-radius: 8px;
  padding: 9px 16px; font-weight: 600; font-size: 13.5px; text-transform: none; letter-spacing: 0; height: auto; }
.button:hover, input[type=submit]:hover, input[type=button]:hover, a.button:hover {
  background: var(--vert-fonce); border-color: var(--vert-fonce); color: #fff; }
.submit-row input:not(.default) { background: var(--panneau); color: var(--vert); }
.submit-row input:not(.default):hover { background: var(--vert-pale); color: var(--vert-fonce); }
.submit-row input.default { padding: 10px 26px; }
.submit-row { background: var(--panneau); border: 1px solid var(--trait); border-radius: 10px; padding: 12px 14px; }
.submit-row a.deletelink { border-radius: 8px; padding: 9px 14px; height: auto; }
.button:focus-visible, input[type=submit]:focus-visible, a:focus-visible {
  outline: 2px solid var(--vert); outline-offset: 2px; }

/* Boutons du haut des fiches (Historique, Ajouter…) */
.object-tools a:link, .object-tools a:visited { border-radius: 8px; text-transform: none; letter-spacing: 0;
  font-size: 13px; font-weight: 600; padding: 7px 14px; }
.object-tools a.addlink { padding-right: 32px; background-position: right 12px center; }

/* Liens « Ajouter » du menu et des tableaux */
a.addlink, .addlink { color: var(--vert) !important; font-weight: 500; }
.object-tools a.addlink, .object-tools a { color: #fff !important; }

/* Listes : garder sur une ligne le n° d'OR, la machine, le statut */
#result_list .field-numero, #result_list .field-machine_courte, #result_list .field-statut_colore,
#result_list .field-priorite_coloree, #result_list .field-date_prevue, #result_list th a { white-space: nowrap; }

/* Page de connexion */
body.login { background: var(--fond-page); }
.login #container { border: 1px solid var(--trait); border-radius: 12px; overflow: hidden; margin-top: 90px; }
.login #header { border-top: 4px solid var(--vert); }
.login #content { padding: 20px 24px 24px; background: var(--panneau); }
.login .submit-row { border: none; padding: 8px 0 0; background: transparent; }
.login .submit-row input, .login .submit-row input:not(.default) { background: var(--vert); color: #fff; width: 100%; padding: 11px; }
.login .submit-row input:hover { background: var(--vert-fonce); color: #fff; }

/* Menu de gauche */
#nav-sidebar { background: transparent; border-right: none; padding: 16px 0 16px 16px; }
#nav-sidebar .module { margin-bottom: 14px; }
#nav-sidebar .module th, #nav-sidebar .module td { padding: 9px 12px; }
#nav-sidebar .current-model { background: var(--vert-pale); box-shadow: inset 3px 0 0 var(--vert); }
#nav-sidebar .current-model a { color: var(--vert-fonce); font-weight: 600; }
#nav-filter { border-radius: 8px; margin: 0 0 12px; }
.toggle-nav-sidebar { background: transparent; border-right: none; color: var(--vert); }

/* Listes : barre de recherche et filtres */
#toolbar { background: var(--panneau); border: none; border-bottom: 1px solid var(--trait); }
#changelist-filter { background: var(--panneau); border: 1px solid var(--trait); border-radius: 10px; overflow: hidden; }
#changelist-filter h2 { background: var(--primary); color: var(--encre); text-transform: none; letter-spacing: 0; }
#changelist-filter h3 { font-weight: 600; }
#changelist-filter li.selected a { color: var(--vert) !important; font-weight: 600; }
#changelist-filter li.selected { border-left-color: var(--vert); }

/* Messages */
ul.messagelist li { border-radius: 8px; margin: 0 0 8px; font-size: 13.5px; }

/* --- Onglets des fiches longues (onglets.js) ------------------------------------------ */
.onglets { display: flex; flex-wrap: wrap; gap: 2px; margin: 6px 0 16px; border-bottom: 2px solid var(--vert); }
.onglets button { background: transparent; color: var(--encre-douce); border: 1px solid transparent; border-bottom: none;
                  border-radius: 8px 8px 0 0; padding: 9px 16px; font: inherit; font-size: 13.5px; font-weight: 500; cursor: pointer; }
.onglets button:hover { background: var(--vert-pale); color: var(--vert-fonce); }
.onglets button.actif { background: var(--vert); color: #fff; font-weight: 600; }
.onglets button.erreur { color: #ba2121; border-color: #ba2121; }
.onglets button.erreur.actif { background: #ba2121; color: #fff; }
@media (max-width: 767px) {
  #content { padding: 14px 16px 30px; }
  #header { padding: 10px 16px; }
  div.breadcrumbs { padding: 10px 16px 0; }
  .onglets { flex-wrap: nowrap; overflow-x: auto; }
  .onglets button { white-space: nowrap; flex: none; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Chiffres alignés seulement dans les cellules (pas dans les titres : le tiret serait élargi) */
caption, caption a, h2 { font-variant-numeric: normal; }
/* Boutons en minuscules (Django met « ENREGISTRER » en capitales) */
.submit-row input, input[type=submit].default, .button.default { text-transform: none !important; letter-spacing: 0 !important; }
/* Rangée de boutons dans une fiche (ex. onglet « Accords du client ») */
.ssa-boutons { display: flex; flex-wrap: wrap; gap: 8px; }
.ssa-boutons a.button, .readonly a.button { display: inline-block; white-space: nowrap; line-height: 1.3; }