/* ==========================================================================
   AUTOM'MATH — thème admin (back-office)
   Charte : navy #12223c (unifié) + cyan #1f9fd8 + doré #b7791f (CTA). Typo Inter / JetBrains Mono (chiffres).
   Style « data-dense dashboard » : tables lisibles, formulaires soignés,
   états hover/focus nets, contraste AA, motion réduit respecté.
   Surcharge des variables de l'admin Django 5 + quelques réglages ciblés.
   ========================================================================== */

:root {
  --am-navy:#12223c; --am-navy-2:#1d3452; --am-cyan:#1f9fd8;
  --am-gold:#b7791f; --am-gold-d:#8a6a1e;
  --am-cyan-d:#1577a8; --am-green:#0a7a4a; --am-red:#c0392b;

  /* Variables natives de l'admin Django → recolorées à la charte */
  --primary:#12223c;
  --secondary:#12223c;
  --accent:#1f9fd8;
  --primary-fg:#ffffff;

  --body-fg:#0f172a;
  --body-bg:#f4f7fb;
  --body-quiet-color:#5b7391;
  --body-loud-color:#12223c;

  --header-color:#ffffff;
  --header-branding-color:#1f9fd8;
  --header-bg:#12223c;
  --header-link-color:#ffffff;

  --breadcrumbs-fg:#41648a;
  --breadcrumbs-link-fg:#12223c;
  --breadcrumbs-bg:#e9f1f8;

  --link-fg:#1577a8;
  --link-hover-color:#12223c;
  --link-selected-fg:#12223c;

  --hairline-color:#e4ecfc;
  --border-color:#dbe6f2;

  --error-fg:#c0392b;
  --message-success-bg:#e7f6ee;
  --message-warning-bg:#fdf0e6;
  --message-error-bg:#fbecea;

  --darkened-bg:#eef4fb;
  --selected-bg:#eaf6fc;
  --selected-row:#e3f2fb;

  --button-fg:#ffffff;
  --button-bg:#12223c;
  --button-hover-bg:#1d3452;
  --default-button-bg:#1577a8;      /* SAVE : cyan foncé (contraste AA sur blanc) */
  --default-button-hover-bg:#12223c;
  --close-button-bg:#7c93ab;
  --close-button-hover-bg:#5b7391;
  --delete-button-bg:#c0392b;
  --delete-button-hover-bg:#a5301f;

  --object-tools-fg:#ffffff;
  --object-tools-bg:#12223c;
  --object-tools-hover-bg:#1577a8;

  --font-family-primary:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
  --font-family-monospace:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* ------- Base ------- */
body, input, select, textarea, button, .button {
  font-family:var(--font-family-primary);
}
body { background:var(--body-bg); color:var(--body-fg); }
a:link, a:visited { color:var(--link-fg); }
a:hover { color:var(--link-hover-color); }
a:focus-visible { outline:3px solid rgba(31,159,216,.45); outline-offset:2px; border-radius:3px; }

/* ------- En-tête / marque ------- */
#header {
  background:var(--am-navy);
  color:#fff;
  box-shadow:0 2px 10px rgba(15,44,73,.18);
  padding:14px 40px;
}
#branding #am-brand { display:flex; flex-direction:column; line-height:1.15; }
#am-brand .am-mark {
  font-size:22px; font-weight:800; letter-spacing:1.5px; color:#fff;
}
#am-brand .am-mark .am-dot { color:var(--am-cyan); }
#am-brand .am-sub { font-size:11px; font-weight:500; color:#9fc4dd; letter-spacing:.4px; margin-top:2px; }
#user-tools { font-size:12px; color:#c7d9e8; }
#user-tools a { border-bottom-color:rgba(255,255,255,.35); color:#fff; }
#user-tools a:hover { color:var(--am-cyan); border-bottom-color:var(--am-cyan); }

/* ------- Fil d'Ariane ------- */
div.breadcrumbs {
  background:var(--breadcrumbs-bg); color:var(--breadcrumbs-fg);
  border-bottom:1px solid var(--border-color); padding:11px 40px; font-size:13px;
}
div.breadcrumbs a { color:var(--breadcrumbs-link-fg); font-weight:600; text-decoration:none;
  border-radius:4px; padding:2px 4px; margin:-2px -4px; transition:background .15s ease; }
div.breadcrumbs a:hover { background:#fff; text-decoration:underline; }
div.breadcrumbs a:focus-visible { outline:3px solid rgba(31,159,216,.45); outline-offset:1px; }

/* ------- Modules / cartes ------- */
.module {
  background:#fff; border:1px solid var(--border-color);
  border-radius:12px; box-shadow:0 1px 3px rgba(15,44,73,.06); overflow:hidden;
}
.module caption, .module h2, .inline-group h2, fieldset.module > h2 {
  background:var(--am-navy); color:#fff; font-size:12.5px; font-weight:600;
  letter-spacing:.6px; text-transform:uppercase; padding:11px 16px;
}
fieldset.module { padding:0; }
fieldset.module .form-row { padding:12px 16px; border-bottom:1px solid var(--hairline-color); }
fieldset .help, .help { color:var(--body-quiet-color); font-size:12px; }

/* Fieldset « Commercial » : accent cyan pour repérer la zone tarifaire */
fieldset.module h2:is([id*="commercial" i]) { background:var(--am-cyan-d); }

/* ------- Tables (changelist) : denses et lisibles ------- */
#changelist .results { border-radius:12px; overflow-x:auto; border:1px solid var(--border-color); box-shadow:0 1px 3px rgba(15,44,73,.06); }
/* Panneau de filtres un peu plus étroit pour laisser la place au tableau. */
#changelist-filter { width:190px; }
#result_list { border:0; }
#result_list thead th {
  background:var(--am-navy); color:#fff; font-weight:600; font-size:11.5px;
  letter-spacing:.4px; text-transform:uppercase; padding:11px 12px; border:0;
  position:sticky; top:0; z-index:2;   /* en-tête visible sur longue liste */
}
#result_list thead th a, #result_list thead th a:link { color:#fff; }
#result_list tbody td, #result_list tbody th { padding:9px 12px; border-bottom:1px solid var(--hairline-color); font-size:13px; vertical-align:middle; }
#result_list tbody tr:nth-child(even) { background:#f8fbfe; }
#result_list tbody tr:hover, #result_list tbody tr:focus-within { background:var(--selected-row); }
#result_list tbody tr.selected { background:var(--selected-bg); }
/* Chiffres (prix, poids…) en JetBrains Mono tabulaire → colonnes bien alignées */
#result_list td.field-prix_achat_ht, #result_list td.field-prix_vente_ht,
#result_list td.field-coefficient_marge, #result_list td.field-remise_fournisseur_pct,
#result_list td.field-marge_affichee, #result_list td.field-poids_max_kg,
#result_list input[type="number"], #result_list input[name*="prix"], #result_list input[name*="marge"], #result_list input[name*="remise"] {
  font-family:var(--font-family-monospace); font-feature-settings:"tnum" 1; font-size:12.5px;
}

/* ------- Champs de formulaire ------- */
input[type=text], input[type=number], input[type=email], input[type=url],
input[type=password], textarea, select, .vTextField {
  border:1px solid var(--border-color); border-radius:7px; padding:7px 9px;
  background:#fff; transition:border-color .15s ease, box-shadow .15s ease;
}
input:focus, textarea:focus, select:focus, .vTextField:focus {
  border-color:var(--am-cyan); box-shadow:0 0 0 3px rgba(31,159,216,.22); outline:0;
}
.form-row { line-height:1.5; }
label { color:var(--am-navy); font-weight:600; }

/* ------- Boutons ------- */
.button, input[type=submit], input[type=button], .submit-row input, a.button {
  border-radius:7px; padding:9px 16px; font-weight:600; font-size:13px;
  transition:background .15s ease, transform .05s ease, box-shadow .15s ease;
  cursor:pointer; border:0;
}
.button:hover, input[type=submit]:hover, .submit-row input:hover, a.button:hover { box-shadow:0 2px 8px rgba(15,44,73,.18); }
.button:active, input[type=submit]:active { transform:translateY(1px); }
.button:focus-visible, input[type=submit]:focus-visible, a.button:focus-visible {
  outline:3px solid rgba(31,159,216,.45); outline-offset:1px;
}
.submit-row { background:#fff; border:1px solid var(--border-color); border-radius:12px; padding:14px 16px; }

/* ------- Barre d'outils objet (Ajouter…) ------- */
.object-tools a { border-radius:99px; padding:7px 15px; font-weight:600; text-transform:none; letter-spacing:.2px; }

/* ------- Filtres latéraux (changelist) ------- */
#changelist-filter { background:#fff; border:1px solid var(--border-color); border-radius:12px; }
#changelist-filter h2 { background:var(--am-navy); color:#fff; border-radius:12px 12px 0 0; font-size:11.5px; }
#changelist-filter li.selected a { color:var(--am-navy); font-weight:700; }
#changelist-search input[type=text] { min-width:280px; }

/* ------- Messages ------- */
ul.messagelist li {
  border-radius:9px; border:1px solid var(--border-color); box-shadow:0 1px 2px rgba(15,44,73,.06);
  padding:12px 14px 12px 40px; font-size:13.5px;
}
ul.messagelist li.success { border-left:4px solid var(--am-green); }
ul.messagelist li.warning { border-left:4px solid #d98a2b; }
ul.messagelist li.error { border-left:4px solid var(--am-red); }

/* ------- Pagination ------- */
.paginator { border-top:1px solid var(--border-color); padding-top:12px; font-size:13px; }
.paginator a, .paginator .this-page { border-radius:7px; padding:4px 10px; }
.paginator .this-page { background:var(--am-navy); color:#fff; }

/* ------- Badges booléens (à vérifier / actif) : icônes déjà SVG côté Django ------- */
.field-a_verifier_badge img, td img[src*="icon-yes"], td img[src*="icon-no"] { width:16px; height:16px; }

/* ==========================================================================
   Tableau de bord (page d'accueil à tuiles)
   ========================================================================== */
.am-home { max-width:1080px; margin:6px auto 0; }
.am-home-head {
  display:flex; align-items:flex-end; justify-content:space-between; gap:16px;
  flex-wrap:wrap; margin:6px 0 22px;
}
.am-home-title { font-size:24px; font-weight:800; color:var(--am-navy); margin:0 0 4px; letter-spacing:.2px; }
.am-home-sub { margin:0; color:var(--body-quiet-color); font-size:14px; }

/* Roue crantée → administration (superadmin uniquement) */
.am-gear {
  display:inline-flex; align-items:center; gap:9px; text-decoration:none;
  background:#fff; color:var(--am-navy); border:1px solid var(--border-color);
  border-radius:99px; padding:9px 16px 9px 13px; font-weight:600; font-size:13.5px;
  box-shadow:0 1px 3px rgba(15,44,73,.06); transition:background .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.am-gear svg { width:19px; height:19px; color:var(--am-cyan); transition:transform .4s ease; }
.am-gear:hover { background:var(--am-navy); color:#fff; border-color:var(--am-navy); box-shadow:0 4px 14px rgba(15,44,73,.22); }
.am-gear:hover svg { color:#fff; transform:rotate(90deg); }
.am-gear:focus-visible { outline:3px solid rgba(31,159,216,.45); outline-offset:2px; }

/* Grille de tuiles */
.am-tiles {
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px;
}
@media (max-width:1000px){ .am-tiles { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:560px){ .am-tiles { grid-template-columns:1fr; } }

.am-tile {
  position:relative; display:flex; flex-direction:column; gap:14px;
  min-height:172px; padding:20px 18px; text-decoration:none;
  background:#fff; border:1px solid var(--border-color); border-radius:16px;
  box-shadow:0 1px 3px rgba(15,44,73,.06);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  overflow:hidden;
}
.am-tile::before {
  content:""; position:absolute; inset:0 auto 0 0; width:4px;
  background:var(--am-cyan); opacity:0; transition:opacity .15s ease;
}
.am-tile:hover { transform:translateY(-3px); box-shadow:0 10px 26px rgba(15,44,73,.16); border-color:var(--am-cyan); }
.am-tile:hover::before { opacity:1; }
.am-tile:focus-visible { outline:3px solid rgba(31,159,216,.45); outline-offset:2px; }

.am-tile-ic {
  display:inline-grid; place-items:center; width:52px; height:52px; border-radius:14px;
  background:color-mix(in srgb, var(--am-cyan) 12%, #fff); color:var(--am-cyan-d);
}
.am-tile-ic svg { width:27px; height:27px; }
.am-tile--catalogue .am-tile-ic { background:color-mix(in srgb,#1f9fd8 12%,#fff); color:#1577a8; }
.am-tile--clients   .am-tile-ic { background:color-mix(in srgb,#0a7a4a 12%,#fff); color:#0a7a4a; }
.am-tile--devis     .am-tile-ic { background:color-mix(in srgb,#12223c 12%,#fff); color:#12223c; }
.am-tile--documents .am-tile-ic { background:color-mix(in srgb,#d98a2b 14%,#fff); color:#b46a12; }

.am-tile-body { display:flex; flex-direction:column; gap:4px; flex:1; }
.am-tile-name { font-size:17px; font-weight:700; color:var(--am-navy); letter-spacing:.2px; }
.am-tile-desc { font-size:12.5px; color:var(--body-quiet-color); line-height:1.4; }
.am-tile-arrow { position:absolute; right:15px; bottom:16px; color:var(--border-color); transition:color .15s ease, transform .15s ease; }
.am-tile-arrow svg { width:18px; height:18px; display:block; }
.am-tile:hover .am-tile-arrow { color:var(--am-cyan); transform:translateX(3px); }

/* La page d'accueil personnalisée n'a pas besoin du bloc de contenu par défaut */
.am-dashboard #content-main > .module { display:none; }

/* ------- Accessibilité : motion réduit ------- */
@media (prefers-reduced-motion: reduce) {
  * { transition:none !important; animation:none !important; }
}

/* ------- Responsive : marges plus douces sur petit écran ------- */
@media (max-width: 767px) {
  #header, div.breadcrumbs { padding-left:18px; padding-right:18px; }
  #changelist-search input[type=text] { min-width:0; width:100%; }
}

/* ==========================================================================
   FORMULAIRES — passe de confort (création client / devis / facture)
   Objectif : saisie plus lisible, aérée et agréable au quotidien.
   ========================================================================== */

/* Zone de contenu des formulaires : un peu plus aérée, cartes espacées. */
.change-form #content-main > form > div > .module,
.change-form #content-main > form > div > .inline-group { margin-bottom:18px; }
.change-form .module + .module { margin-top:0; }

/* En-têtes de fieldset : plus doux, coins arrondis en haut de carte. */
fieldset.module > h2 { border-radius:12px 12px 0 0; }
fieldset.module .description { padding:12px 16px 0; color:var(--body-quiet-color); font-size:12.5px; }

/* Lignes de formulaire : plus d'air, séparateurs discrets. */
fieldset.module .form-row { padding:14px 18px; }
fieldset.module .form-row:last-child { border-bottom:0; }
.aligned label { min-width:200px; padding-top:8px; font-size:13px; }
.aligned .help, .aligned .helptext { margin-left:202px; padding-left:0; }
/* Astérisque « requis » bien visible. */
.required label:after, label.required:after { color:var(--am-cyan-d); }

/* Champs : tailles confortables et cohérentes. */
input[type=text], input[type=number], input[type=email], input[type=url],
input[type=tel], input[type=password], .vTextField {
  min-height:38px; font-size:13.5px;
}
.vTextField, input.vTextField { width:26em; max-width:100%; }
input[type=number], .vIntegerField, .vDecimalField { width:9em; }
textarea, .vLargeTextField, .vXMLLargeTextField {
  width:40em; max-width:100%; min-height:90px; line-height:1.5; font-size:13.5px;
}
select, .vSelect { min-height:38px; font-size:13.5px; }

/* Champs monétaires en chiffres tabulaires (alignement des décimales). */
input[name*="prix"], input[name*="marge"], input[name*="remise"],
input[name*="montant"], input[name*="tva"], input[name*="acompte"], input[name*="quantite"] {
  font-family:var(--font-family-monospace); font-feature-settings:"tnum" 1;
}

/* ------- Listes déroulantes de recherche (autocomplete / select2) ------- */
.select2-container--admin-autocomplete .select2-selection--single,
.select2-container .select2-selection--single {
  height:38px; border:1px solid var(--border-color); border-radius:7px;
  display:flex; align-items:center; background:#fff;
}
.select2-container--admin-autocomplete .select2-selection__rendered { line-height:36px; padding-left:10px; color:var(--body-fg); }
.select2-container--admin-autocomplete .select2-selection__arrow { height:36px; }
.select2-container--admin-autocomplete.select2-container--focus .select2-selection,
.select2-container--admin-autocomplete.select2-container--open .select2-selection {
  border-color:var(--am-cyan); box-shadow:0 0 0 3px rgba(31,159,216,.22);
}
.select2-dropdown { border:1px solid var(--am-cyan); border-radius:9px; box-shadow:0 8px 24px rgba(15,44,73,.16); overflow:hidden; }
.select2-container--admin-autocomplete .select2-results__option--highlighted[aria-selected] { background:var(--am-cyan); }
.select2-search--dropdown .select2-search__field { border-radius:6px; border:1px solid var(--border-color); padding:7px 9px; }

/* ------- Tableaux de lignes (inlines tabular : devis / factures) ------- */
.inline-group { border:1px solid var(--border-color); border-radius:12px; overflow:hidden; box-shadow:0 1px 3px rgba(15,44,73,.06); }
.inline-group h2 { border-radius:0; }
.inline-related .tabular { margin:0; }
.inline-group table { border-collapse:collapse; }
.inline-group .tabular thead th {
  background:var(--darkened-bg); color:var(--am-navy); font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:.4px; padding:10px 10px; border-bottom:1px solid var(--border-color);
}
.inline-group .tabular tbody td, .inline-group .tabular tbody th { padding:9px 10px; vertical-align:top; border-bottom:1px solid var(--hairline-color); }
.inline-group .tabular tbody tr.row1 { background:#fff; }
.inline-group .tabular tbody tr.row2 { background:#fbfdff; }
.inline-group .tabular tbody tr:hover { background:var(--selected-row); }
/* Les champs dans un tableau de lignes ne débordent pas de leur cellule. */
.inline-group .tabular td input[type=text], .inline-group .tabular td textarea { width:100%; min-width:120px; }
.inline-group .tabular td input[type=number] { width:7em; }
.inline-group .tabular td textarea { min-height:52px; }
/* Colonne « Supprimer » discrète et centrée. */
.inline-group .tabular td.delete, .inline-group .tabular th.delete { text-align:center; }
/* Bouton « Ajouter une ligne » : pilule cyan, cohérent avec le reste. */
.add-row a, .inline-group .add-row a {
  display:inline-flex; align-items:center; gap:7px; background:color-mix(in srgb,var(--am-cyan) 12%,#fff);
  color:var(--am-cyan-d); border:1px solid color-mix(in srgb,var(--am-cyan) 40%,#fff);
  border-radius:99px; padding:8px 16px; font-weight:600; font-size:13px; margin:12px;
}
.add-row a:hover { background:var(--am-cyan); color:#fff; border-color:var(--am-cyan); }

/* ------- Barre d'enregistrement : reste accessible (collante) ------- */
.submit-row {
  position:sticky; bottom:14px; z-index:20; display:flex; gap:10px; align-items:center;
  box-shadow:0 6px 20px rgba(15,44,73,.14); margin-top:18px;
}
.submit-row input[type=submit] { order:2; }
.submit-row .deletelink-box { margin-left:auto; order:9; }
.submit-row p.deletelink-box { margin:0 0 0 auto; }

/* ------- Erreurs : plus lisibles ------- */
.errornote { background:var(--message-error-bg); border:1px solid #e6b3ab; border-left:4px solid var(--am-red); border-radius:9px; color:var(--am-red); padding:12px 14px; font-size:13.5px; }
ul.errorlist { color:var(--am-red); font-size:12.5px; }
ul.errorlist li { background:var(--message-error-bg); border-radius:6px; border-left:3px solid var(--am-red); padding:5px 9px; }

/* Champs en lecture seule (numéro, empreinte, totaux figés) : bien identifiés. */
.form-row .readonly { color:var(--am-navy); background:var(--darkened-bg); border-radius:6px; padding:6px 10px; display:inline-block; font-size:13px; }


/* ==========================================================================
   CONFORT TACTILE — tablette en clientèle : cibles >= 44 px, plus d'air
   ========================================================================== */
@media (pointer: coarse) {
  .button, input[type=submit], input[type=button], a.button,
  .object-tools a, .submit-row input, .add-row a { min-height:44px; padding-top:11px; padding-bottom:11px; }
  input[type=text], input[type=number], input[type=email], input[type=url],
  input[type=tel], input[type=password], select, .vTextField { min-height:44px; }
  #result_list tbody td, #result_list tbody th { padding-top:12px; padding-bottom:12px; }
  div.breadcrumbs { padding-top:14px; padding-bottom:14px; }
  #changelist-filter li a { display:block; padding:9px 12px; }
}

/* Sélection d'action (changelist) : alignée sur le style des champs */
.actions select { border:1px solid var(--border-color); border-radius:7px; min-height:36px; padding:5px 9px; }
.actions .button { min-height:34px; }

/* Compteur de résultats plus lisible */
.paginator { color:var(--body-quiet-color); }