/* ==========================================================================
   RavenWatch — Plateforme éditeur
   Couche de design appliquée à l'admin Django.

   Parti pris : ne pas remplacer l'admin (on perdrait listes filtrables,
   recherches, actions groupées, permissions et inlines — des années de
   fonctionnalités) mais lui donner le vocabulaire visuel d'une console SaaS
   moderne : échelle typographique nette, surfaces calmes, bordures fines,
   tableaux denses mais respirants, états en pastilles.

   Les couleurs de marque restent pilotées par « Paramètres du portail » :
   ce fichier est chargé AVANT le <style> de base_site.html, dont les
   variables --primary/--header-bg conservent donc la priorité.
   ========================================================================== */

/* ── Jetons ────────────────────────────────────────────────────────────── */
:root,
html[data-theme="light"] {
  --rw-bg: #f6f7f9;
  --rw-surface: #ffffff;
  --rw-surface-2: #fbfbfc;
  --rw-border: #e4e7ec;
  --rw-border-strong: #d0d5dd;
  --rw-text: #101828;
  --rw-text-soft: #475467;
  --rw-text-muted: #667085;
  --rw-shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
  --rw-shadow-md: 0 4px 12px -2px rgba(16, 24, 40, .08), 0 2px 4px -2px rgba(16, 24, 40, .04);
  --rw-radius: 10px;
  --rw-radius-sm: 7px;
  --rw-ok: #067647;      --rw-ok-bg: #ecfdf3;    --rw-ok-br: #abefc6;
  --rw-warn: #b54708;    --rw-warn-bg: #fffaeb;  --rw-warn-br: #fedf89;
  --rw-crit: #b42318;    --rw-crit-bg: #fef3f2;  --rw-crit-br: #fecdca;
  --rw-info: #175cd3;    --rw-info-bg: #eff8ff;  --rw-info-br: #b2ddff;
}

html[data-theme="dark"] {
  --rw-bg: #0d1117;
  --rw-surface: #151b23;
  --rw-surface-2: #1b222c;
  --rw-border: #262d38;
  --rw-border-strong: #343c48;
  --rw-text: #e6edf3;
  --rw-text-soft: #b6c2cf;
  --rw-text-muted: #8b949e;
  --rw-shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
  --rw-shadow-md: 0 6px 16px -4px rgba(0, 0, 0, .45);
  --rw-ok: #75e0a7;      --rw-ok-bg: #0d2b1d;    --rw-ok-br: #17512f;
  --rw-warn: #fec84b;    --rw-warn-bg: #2e1c05;  --rw-warn-br: #55340c;
  --rw-crit: #fda29b;    --rw-crit-bg: #2e100d;  --rw-crit-br: #5b1c17;
  --rw-info: #84caff;    --rw-info-bg: #0b2545;  --rw-info-br: #14407a;
}

/* ── Base ──────────────────────────────────────────────────────────────── */
html, body {
  background: var(--rw-bg);
  color: var(--rw-text);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#container { background: var(--rw-bg); }

/* Couleur de lien par défaut, posée avec `:where()` pour une spécificité NULLE.
   Écrite « a:link, a:visited », elle l'emportait sur toute règle de composant
   (0,0,1,1 contre 0,0,1,0) : le texte d'un bouton bleu héritait du bleu et
   devenait illisible, sauf au survol où la pseudo-classe rétablissait l'ordre.
   Ainsi, la moindre classe suffit désormais à imposer sa couleur. */
a:where(:link, :visited) { color: var(--primary); text-decoration: none; }
a:where(:hover) { text-decoration: underline; }

h1, h2, h3, h4 { color: var(--rw-text); letter-spacing: -.011em; }

/* ── En-tête ───────────────────────────────────────────────────────────── */
#header {
  position: sticky;
  top: 0;
  z-index: 40;
  padding: 12px 28px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 1px 3px rgba(16, 24, 40, .12);
}
#branding h1 { font-size: 1.02rem; }
#user-tools {
  font-size: .78rem;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 500;
}
#user-tools a {
  border-bottom: 0;
  padding: 5px 10px;
  border-radius: 6px;
  transition: background .15s;
}
#user-tools a:hover { background: rgba(255, 255, 255, .13); text-decoration: none; }

/* ── Fil d'Ariane ──────────────────────────────────────────────────────── */
div.breadcrumbs {
  background: var(--rw-surface);
  color: var(--rw-text-muted);
  border-bottom: 1px solid var(--rw-border);
  padding: 11px 28px;
  font-size: .8rem;
  font-weight: 500;
}
div.breadcrumbs a { color: var(--rw-text-muted); }
div.breadcrumbs a:hover { color: var(--primary); text-decoration: none; }

/* ── Barre latérale ────────────────────────────────────────────────────── */
#nav-sidebar {
  background: var(--rw-surface);
  border-right: 1px solid var(--rw-border);
  padding-top: 10px;
}
#nav-sidebar .module th[scope="row"] a,
#nav-sidebar .module caption a { border-radius: var(--rw-radius-sm); }
#nav-sidebar .module caption {
  background: transparent;
  color: var(--rw-text-muted);
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 14px 16px 6px;
}
#nav-sidebar .module caption a { color: var(--rw-text-muted); }
#nav-sidebar table { border-spacing: 0 1px; }
#nav-sidebar th, #nav-sidebar td { padding: 0; border: 0; }
#nav-sidebar th[scope="row"] a, #nav-sidebar td a {
  display: block;
  padding: 8px 16px;
  margin: 0 8px;
  color: var(--rw-text-soft);
  font-weight: 500;
  font-size: .855rem;
  border-radius: var(--rw-radius-sm);
  transition: background .12s, color .12s;
}
#nav-sidebar th[scope="row"] a:hover, #nav-sidebar td a:hover {
  background: var(--rw-surface-2);
  color: var(--rw-text);
  text-decoration: none;
}
#nav-sidebar .current-model > th[scope="row"] a,
#nav-sidebar tr.current-model th a {
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--primary);
  font-weight: 600;
}
#nav-filter {
  margin: 4px 12px 10px;
  width: calc(100% - 24px);
  border: 1px solid var(--rw-border);
  border-radius: var(--rw-radius-sm);
  background: var(--rw-surface-2);
  color: var(--rw-text);
  padding: 8px 11px;
  font-size: .82rem;
}
#nav-filter:focus { outline: 2px solid color-mix(in srgb, var(--primary) 35%, transparent); }

/* ── Contenu ───────────────────────────────────────────────────────────── */
#content { padding: 26px 28px 48px; }
#content > h1 { font-size: 1.55rem; font-weight: 700; margin-bottom: 18px; }

/* Les « modules » de l'admin deviennent des cartes */
.module {
  background: var(--rw-surface);
  border: 1px solid var(--rw-border);
  border-radius: var(--rw-radius);
  box-shadow: var(--rw-shadow-sm);
  margin-bottom: 20px;
  overflow: hidden;
}
.module > h2, .module caption, .inline-group h2 {
  background: var(--rw-surface-2);
  color: var(--rw-text);
  border-bottom: 1px solid var(--rw-border);
  font-size: .8rem;
  font-weight: 650;
  letter-spacing: .01em;
  text-transform: none;
  padding: 12px 16px;
}
#nav-sidebar .module { border: 0; box-shadow: none; background: transparent; }

/* ── Tableaux de listes ────────────────────────────────────────────────── */
#changelist { background: transparent; }
#changelist .results {
  background: var(--rw-surface);
  border: 1px solid var(--rw-border);
  border-radius: var(--rw-radius);
  box-shadow: var(--rw-shadow-sm);
  overflow-x: auto;
}
#changelist table { border: 0; width: 100%; }
#changelist table thead th {
  background: var(--rw-surface-2);
  border-bottom: 1px solid var(--rw-border);
  border-top: 0;
  padding: 0;
}
#changelist table thead th.sortable > .text > a,
#changelist table thead th > .text > a,
#changelist table thead th > div > a {
  display: block;
  padding: 11px 14px;
  font-size: .715rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--rw-text-muted);
}
#changelist table tbody td, #changelist table tbody th {
  padding: 13px 14px;
  border-bottom: 1px solid var(--rw-border);
  font-size: .875rem;
  color: var(--rw-text-soft);
  vertical-align: middle;
}
#changelist table tbody tr:last-child td,
#changelist table tbody tr:last-child th { border-bottom: 0; }
#changelist table tbody tr { transition: background .1s; }
#changelist table tbody tr:hover { background: var(--rw-surface-2); }
/* L'admin alterne les fonds : on neutralise au profit du survol */
#changelist table tbody tr.row1, #changelist table tbody tr.row2 { background: transparent; }
#changelist table tbody th a, #changelist table tbody td a {
  color: var(--rw-text);
  font-weight: 550;
}
#changelist table tbody th a:hover { color: var(--primary); }

/* Barre d'outils : recherche + actions */
#changelist #toolbar {
  background: transparent;
  border: 0;
  padding: 0 0 14px;
}
#changelist #toolbar form#changelist-search { display: flex; gap: 8px; align-items: center; }
#changelist #toolbar form input[type="text"] {
  flex: 1;
  max-width: 380px;
  border: 1px solid var(--rw-border);
  border-radius: var(--rw-radius-sm);
  background: var(--rw-surface);
  color: var(--rw-text);
  padding: 9px 12px;
  font-size: .875rem;
  box-shadow: var(--rw-shadow-sm);
}
#changelist #toolbar form input[type="text"]:focus {
  outline: 0;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}
#changelist-form .actions {
  background: var(--rw-surface);
  border: 1px solid var(--rw-border);
  border-radius: var(--rw-radius);
  padding: 10px 14px;
  margin-bottom: 12px;
  font-size: .84rem;
}

/* Filtres latéraux */
#changelist-filter {
  background: var(--rw-surface);
  border: 1px solid var(--rw-border);
  border-radius: var(--rw-radius);
  box-shadow: var(--rw-shadow-sm);
}
#changelist-filter h2 {
  background: var(--rw-surface-2);
  color: var(--rw-text);
  border-bottom: 1px solid var(--rw-border);
  border-radius: var(--rw-radius) var(--rw-radius) 0 0;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 11px 14px;
}
#changelist-filter h3 {
  font-size: .74rem;
  font-weight: 700;
  color: var(--rw-text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 12px 14px 4px;
}
#changelist-filter li { padding: 0; }
#changelist-filter li a {
  display: block;
  padding: 6px 14px;
  font-size: .83rem;
  color: var(--rw-text-soft);
}
#changelist-filter li.selected a { color: var(--primary); font-weight: 600; }
#changelist-filter li.selected { border-left: 2px solid var(--primary); }

/* Pagination */
.paginator {
  border-top: 0;
  padding: 14px 2px 0;
  font-size: .84rem;
  color: var(--rw-text-muted);
  background: transparent;
}
.paginator a, .paginator .this-page {
  padding: 6px 11px;
  border-radius: var(--rw-radius-sm);
  border: 1px solid var(--rw-border);
  background: var(--rw-surface);
  margin-right: 4px;
  font-weight: 550;
}
.paginator .this-page { background: var(--primary); color: #fff; border-color: var(--primary); }

/* ── Boutons ───────────────────────────────────────────────────────────── */
.button, input[type="submit"], input[type="button"], .submit-row input, a.button {
  border-radius: var(--rw-radius-sm);
  padding: 9px 15px;
  font-size: .855rem;
  font-weight: 600;
  border: 1px solid transparent;
  box-shadow: var(--rw-shadow-sm);
  transition: filter .12s, transform .06s;
}
.button:hover, input[type="submit"]:hover, .submit-row input:hover { filter: brightness(1.07); }
.button:active, input[type="submit"]:active { transform: translateY(1px); }
.button.default, input[type="submit"].default, .submit-row input.default { font-weight: 650; }
.object-tools a, .object-tools a:link, .object-tools a:visited {
  border-radius: var(--rw-radius-sm);
  padding: 8px 14px;
  font-size: .8rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
  box-shadow: var(--rw-shadow-sm);
}

/* ── Formulaires ───────────────────────────────────────────────────────── */
.form-row {
  padding: 14px 16px;
  border-bottom: 1px solid var(--rw-border);
}
.form-row:last-child { border-bottom: 0; }
.aligned label {
  color: var(--rw-text-soft);
  font-weight: 600;
  font-size: .82rem;
}
input[type="text"], input[type="password"], input[type="email"], input[type="url"],
input[type="number"], input[type="tel"], input[type="date"], textarea, select,
.vTextField, .vURLField, .vIntegerField {
  border: 1px solid var(--rw-border-strong);
  border-radius: var(--rw-radius-sm);
  background: var(--rw-surface);
  color: var(--rw-text);
  padding: 9px 11px;
  font-size: .875rem;
  transition: border-color .12s, box-shadow .12s;
}
input:focus, textarea:focus, select:focus {
  outline: 0;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}
.help, .helptext, div.help {
  color: var(--rw-text-muted);
  font-size: .785rem;
  line-height: 1.45;
}
.submit-row {
  background: var(--rw-surface);
  border: 1px solid var(--rw-border);
  border-radius: var(--rw-radius);
  box-shadow: var(--rw-shadow-sm);
  padding: 14px 16px;
  margin-top: 18px;
}

/* ── Messages ──────────────────────────────────────────────────────────── */
ul.messagelist li {
  border-radius: var(--rw-radius);
  padding: 13px 16px 13px 44px;
  font-size: .875rem;
  font-weight: 500;
  border: 1px solid transparent;
  background-position: 15px center;
}
ul.messagelist li.success {
  background-color: var(--rw-ok-bg); color: var(--rw-ok); border-color: var(--rw-ok-br);
}
ul.messagelist li.warning {
  background-color: var(--rw-warn-bg); color: var(--rw-warn); border-color: var(--rw-warn-br);
}
ul.messagelist li.error {
  background-color: var(--rw-crit-bg); color: var(--rw-crit); border-color: var(--rw-crit-br);
}
ul.messagelist li.info {
  background-color: var(--rw-info-bg); color: var(--rw-info); border-color: var(--rw-info-br);
}

/* ── Pastilles d'état ──────────────────────────────────────────────────── */
/* Les colonnes *_badge de licensing/admin.py rendent déjà du HTML coloré ;
   cette classe permet de l'uniformiser progressivement côté Python. */
.rw-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: .725rem;
  font-weight: 650;
  line-height: 1.5;
  border: 1px solid transparent;
  white-space: nowrap;
}
.rw-pill-ok   { background: var(--rw-ok-bg);   color: var(--rw-ok);   border-color: var(--rw-ok-br); }
.rw-pill-warn { background: var(--rw-warn-bg); color: var(--rw-warn); border-color: var(--rw-warn-br); }
.rw-pill-crit { background: var(--rw-crit-bg); color: var(--rw-crit); border-color: var(--rw-crit-br); }
.rw-pill-info { background: var(--rw-info-bg); color: var(--rw-info); border-color: var(--rw-info-br); }
.rw-pill-mute {
  background: var(--rw-surface-2); color: var(--rw-text-muted); border-color: var(--rw-border);
}

/* ── Page de connexion ─────────────────────────────────────────────────── */
body.login { background: var(--rw-bg); }
body.login #container {
  max-width: 400px;
  margin: 9vh auto;
  border: 1px solid var(--rw-border);
  border-radius: 14px;
  box-shadow: var(--rw-shadow-md);
  background: var(--rw-surface);
  overflow: hidden;
}
body.login #header {
  position: static;
  border-radius: 0;
  padding: 18px 22px;
  box-shadow: none;
}
body.login .form-row { padding: 12px 22px; border: 0; }
body.login .submit-row {
  border: 0; box-shadow: none; margin: 0; padding: 6px 22px 22px; background: transparent;
}
body.login .submit-row input { width: 100%; padding: 11px; }

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  #content { padding: 18px 16px 40px; }
  #header { padding: 11px 16px; }
  div.breadcrumbs { padding: 10px 16px; }
}

/* ── Allègement de la navigation ───────────────────────────────────────── */
/* Les liens « Ajouter » de la barre latérale doublaient le bouton présent en
   tête de chaque liste : deux chemins pour la même action, et une colonne de
   plus à balayer des yeux. On garde le bouton contextuel, qui est là où l'on
   regarde déjà. */
#nav-sidebar .addlink,
#nav-sidebar td:has(.addlink) { display: none !important; }
#nav-sidebar th[scope="row"] { width: 100%; }

/* ── Filtres : repliés par défaut ──────────────────────────────────────── */
/* Le panneau occupait en permanence le tiers droit de l'écran pour un usage
   ponctuel. Il reste accessible d'un clic — le supprimer priverait des filtres
   par statut ou par client, qui deviennent utiles dès que les listes s'allongent. */
#changelist-filter {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 290px;
  max-width: 86vw;
  z-index: 60;
  overflow-y: auto;
  border-radius: 0;
  border-width: 0 0 0 1px;
  box-shadow: -6px 0 20px -8px rgba(16, 24, 40, .22);
  transform: translateX(100%);
  transition: transform .18s ease;
}
#changelist-filter.rw-open { transform: translateX(0); }
#changelist-filter h2 { border-radius: 0; position: sticky; top: 0; }

/* Le contenu reprend toute la largeur puisque la colonne de droite a disparu */
#changelist .results, #changelist #toolbar, #changelist-form { width: 100%; }
#changelist { display: block; }

.rw-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border: 1px solid var(--rw-border);
  border-radius: var(--rw-radius-sm);
  background: var(--rw-surface);
  color: var(--rw-text-soft);
  font-size: .855rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--rw-shadow-sm);
  white-space: nowrap;
}
.rw-filter-btn:hover { border-color: var(--primary); color: var(--primary); }
.rw-filter-btn.rw-actif { background: var(--primary); border-color: var(--primary); color: #fff; }
.rw-filter-voile {
  position: fixed; inset: 0; z-index: 55;
  background: rgba(16, 24, 40, .28);
  opacity: 0; pointer-events: none; transition: opacity .18s;
}
.rw-filter-voile.rw-open { opacity: 1; pointer-events: auto; }

/* ── Titres de section de la barre latérale ────────────────────────────── */
/* Django colore le titre de la section courante avec --header-color (blanc dans
   notre thème) : sur le fond clair de la barre latérale, il devenait invisible.
   On reprend la main sur la couleur, la section active restant signalée par
   l'accent de marque. */
#nav-sidebar .module caption .section:link,
#nav-sidebar .module caption .section:visited {
  color: var(--rw-text-muted);
  font-weight: 700;
}
#nav-sidebar .current-app .section:link,
#nav-sidebar .current-app .section:visited {
  color: var(--primary);
  font-weight: 700;
}
#nav-sidebar .module caption .section:hover { color: var(--rw-text); }

/* ── Composants cliquables : la couleur du composant doit primer ────────── */
/* `base.css` de Django pose `a:link, a:visited { color: var(--link-fg) }` —
   spécificité (0,0,1,1), qui écrase toute règle de composant en classe simple
   (0,0,1,0). Un bouton bleu affichait donc un texte bleu, lisible seulement au
   survol. On qualifie donc explicitement les composants avec la pseudo-classe
   de lien pour repasser devant. À reproduire pour tout nouveau composant <a>. */
a.rw-btn:link, a.rw-btn:visited { color: var(--rw-text); }
a.rw-btn-primary:link, a.rw-btn-primary:visited { color: #fff; }
a.rw-btn:hover { color: var(--primary); text-decoration: none; }
a.rw-btn-primary:hover { color: #fff; text-decoration: none; }
a.rw-kpi:link, a.rw-kpi:visited { color: var(--rw-text); text-decoration: none; }
a.rw-kpi:hover { text-decoration: none; }