/* ============================================================
   MAD TRADING — Phase 8 · Composants « Finance Premium » (Ateliers 2-7)
   Chargé en dernier : surcharge les composants du <style> inline
   à spécificité égale. Aucune dépendance externe (R6), aucune
   modification de server.mjs ni des fonctionnalités (R1).
   Rollback : retirer ce <link> (voir style.legacy.css).
   ============================================================ */

/* ============================================================
   ATELIER 2 — FORMULAIRES PREMIUM (priorité absolue)
   ============================================================ */

/* 2.1 · Inputs, textareas */
select.sel, input.inp, textarea.inp {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--r-sm);
  padding-left: 12px;
  box-shadow: var(--shadow-sm);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
select.sel:hover, input.inp:hover, textarea.inp:hover { border-color: var(--color-border-strong); }
select.sel:focus, input.inp:focus, textarea.inp:focus {
  border-color: var(--color-primary);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(10, 37, 64, .10), var(--shadow-sm);
}
input.inp::placeholder, textarea.inp::placeholder {
  color: var(--color-text-muted);
  font-style: italic;
}
input.inp:disabled, select.sel:disabled, textarea.inp:disabled {
  background: var(--color-bg-subtle);
  color: var(--color-text-muted);
  cursor: not-allowed;
}

/* Valeur fixe, champ verrouillé et quantité calculée */
.field-fixed-value {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  max-width: 100%;
  padding: 7px 11px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--r-sm);
  background: var(--color-bg-subtle);
  color: var(--color-text-secondary);
  font-size: 13px;
  font-weight: 600;
}
.field-fixed-value code {
  padding: 2px 7px;
  border-radius: var(--r-xs);
  background: var(--color-bg-elevated);
  color: var(--color-primary);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-style: normal;
}
.field-readonly:has(input[readonly]),
.field-readonly:has(textarea[readonly]) { min-width: 0; }
.field-readonly:has(input[readonly]) > .label::after,
.field-readonly:has(textarea[readonly]) > .label::after {
  content: "  🔒";
  font-size: 11px;
}
.field-readonly:has(input[readonly]) input[readonly],
.field-readonly:has(textarea[readonly]) textarea[readonly] {
  background: var(--color-bg-subtle) !important;
  border: 1px dashed var(--color-border-strong) !important;
  color: var(--color-text-secondary) !important;
  cursor: not-allowed;
  box-shadow: none;
}
.field-readonly-hint { display: none; }
.field-readonly:has(input[readonly]) .field-readonly-hint,
.field-readonly:has(textarea[readonly]) .field-readonly-hint { display: block; }
.field-calculated-hint { display: none; }
.field-calculated:has(input[readonly]) .field-calculated-hint { display: block; }
.field-calculated:has(input[readonly]) {
  min-width: 0;
  padding: 8px;
  border-left: 3px solid var(--color-gold);
  border-radius: var(--r-sm);
  background: linear-gradient(90deg, var(--color-bg-subtle), var(--color-bg-elevated));
}
.field-calculated:has(input[readonly]) input[readonly] {
  border-color: var(--color-gold);
  color: var(--color-primary);
  font-weight: 600;
}

/* 2.2 · Selects : flèche dorée custom, fin des habillages navigateur */
select.sel {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 38px;
  cursor: pointer;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238b7340' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 14px;
}
select.sel:disabled { background-image: none; }
select.sel option { background: var(--color-bg-elevated); color: var(--color-text); }

/* Recherche de la topbar : même traitement */
.search input {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-sm);
}
.search input:focus {
  border-color: var(--color-primary);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(10, 37, 64, .10);
}

/* 2.3 · Checkboxes et radios custom (dimensions pilotées par les contextes existants) */
input[type="checkbox"], input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: 1.5px solid var(--color-border-strong);
  background: var(--color-bg-elevated);
  cursor: pointer;
  position: relative;
  transition: background .15s ease, border-color .15s ease;
  margin: 0;
}
input[type="checkbox"] { border-radius: 4px; }
input[type="checkbox"]:hover, input[type="radio"]:hover { border-color: var(--color-primary); }
input[type="checkbox"]:checked {
  background: var(--color-primary);
  border-color: var(--color-primary);
}
input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: calc(50% - 3px);
  top: calc(50% - 6.5px);
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
input[type="radio"] { border-radius: 50%; }
input[type="radio"]:checked { border-color: var(--color-primary); }
input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  left: calc(50% - 4px);
  top: calc(50% - 4px);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-primary);
}
input[type="checkbox"]:disabled, input[type="radio"]:disabled {
  background: var(--color-bg-subtle);
  border-color: var(--color-border);
  cursor: not-allowed;
}
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible,
select.sel:focus-visible, input.inp:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 1px;
}

/* ============================================================
   ATELIER 2bis · BOUTONS PREMIUM
   ============================================================ */
.btn { transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease; }

.btn-primary {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  box-shadow: 0 2px 10px -3px rgba(10, 37, 64, .45);
}
.btn-primary:hover {
  background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary) 100%);
  box-shadow: 0 8px 20px -6px rgba(10, 37, 64, .5);
}
.btn-primary:active { transform: translateY(0); }

.btn-ghost {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}
.btn-ghost:hover { background: var(--color-bg-subtle); border-color: var(--color-border-strong); }

/* Variante or : fond doré clair, texte marine (contraste AA ≥ 7:1) — actions clés */
.btn-gold {
  background: linear-gradient(135deg, var(--color-gold-light) 0%, var(--color-gold) 100%);
  color: var(--color-primary);
  border: 1px solid var(--color-gold-dark);
  font-weight: 650;
  box-shadow: 0 2px 10px -3px rgba(139, 115, 64, .45);
}
.btn-gold:hover {
  background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-gold-light) 100%);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -6px rgba(139, 115, 64, .5);
}
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* ============================================================
   ATELIER 3 · CARTES ET CONTAINERS
   ============================================================ */
.card {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
}
.card:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-md);
}

/* Accent or pour les cartes clés (disponible : ajouter la classe) */
.card-accent {
  border-left: 4px solid var(--color-gold);
}

/* ============================================================
   ATELIER 4 · TABLEAUX PREMIUM — hiérarchie unifiée :
   structure = FAMILLE MARINE (sidebar/boutons #0a2540, en-têtes
   secondaires #1e3a5f), or = ACCENT uniquement. Texte blanc sur
   #1e3a5f ≈ 10:1 (AA).
   ============================================================ */
thead th {
  background: var(--color-primary-light);
  color: #fff;
  letter-spacing: .6px;
  border-bottom: 2px solid var(--color-gold);
}
thead th.sortable:hover { color: var(--color-gold-dark); }
thead th .arrow { opacity: .55; }
tbody td { border-bottom-color: #eef2f6; }
tbody tr:hover { background: rgba(10, 37, 64, .04); }
.table-wrap {
  border-color: var(--color-border);
  background: var(--color-bg-elevated);
  box-shadow: var(--shadow-sm);
}

/* ============================================================
   ATELIER 5 · BADGES ET STATUTS (les classes .badge* étaient utilisées
   par la UI sans jamais avoir été définies : elles existent enfin)
   ============================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid transparent;
}
.badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 6px;
}
.badge-ok, .badge-success { background: var(--color-success-bg); color: var(--color-success); border-color: #a7e3cd; }
.badge-warn, .badge-warning { background: var(--color-warning-bg); color: #a16207; border-color: #f3d9a4; }
.badge-bad, .badge-error { background: var(--color-error-bg); color: var(--color-error); border-color: #f3b8b8; }
.badge-info { background: var(--color-info-bg); color: #1d4ed8; border-color: #bfd4fb; }
.badge-gold { background: #f8f1e1; color: var(--color-gold-dark); border-color: var(--color-gold); }
.badge-neutral { background: var(--color-bg-subtle); color: var(--color-text-secondary); border-color: var(--color-border); }

/* Les chips existantes héritent déjà des nouvelles teintes via les tokens ;
   le point doré des chips d'information signe la charte. */
.chip.c-info .dot { background: var(--color-gold-dark); }

/* ============================================================
   ATELIER 6 · NAVIGATION LATÉRALE
   ============================================================ */
.nav-item.active {
  background: rgba(201, 169, 97, .16);
  color: #fff;
}
.nav-item.active::before { background: var(--color-gold); }
.nav-item svg { opacity: .9; }
.side-foot { border-top-color: rgba(201, 169, 97, .18); }
.avatar {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  border: 2px solid var(--color-gold);
}

/* ============================================================
   ATELIER 7 · TOPBAR ET CONNEXION
   ============================================================ */
.topbar {
  background: rgba(255, 255, 255, .92);
  border-bottom-color: var(--color-border);
  box-shadow: var(--shadow-sm);
}
.page-title { color: var(--color-primary); }

.login-card {
  border-radius: var(--radius-xl);
  border-top: 3px solid var(--color-gold);
  box-shadow: var(--shadow-xl);
}
.login-brand-name { color: var(--color-primary); }
#loginSubmit {
  background: linear-gradient(135deg, var(--color-gold-light) 0%, var(--color-gold) 100%);
  color: var(--color-primary);
  border: 1px solid var(--color-gold-dark);
  font-weight: 650;
  box-shadow: 0 3px 14px -4px rgba(139, 115, 64, .55);
}
#loginSubmit:hover {
  background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-gold-light) 100%);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px -6px rgba(139, 115, 64, .55);
}

/* Le filtre devise de la vue Créances avait une largeur fixe calculée
   pour la flèche native ; la flèche custom (38px) rognait « Toutes devises »
   en « Toutes devis ». Largeur rétablie (mobile : width:auto par media query existante). */
#filterDevise { width: 150px; }

/* ============================================================
   RAFFINEMENTS · barres de défilement discrètes (webkit)
   ============================================================ */
.nav::-webkit-scrollbar, .search-select-list::-webkit-scrollbar, .brand-picker-menu::-webkit-scrollbar { width: 8px; }
.nav::-webkit-scrollbar-thumb, .search-select-list::-webkit-scrollbar-thumb, .brand-picker-menu::-webkit-scrollbar-thumb {
  background: rgba(201, 169, 97, .35);
  border-radius: 8px;
}
.nav::-webkit-scrollbar-thumb:hover, .search-select-list::-webkit-scrollbar-thumb:hover, .brand-picker-menu::-webkit-scrollbar-thumb:hover {
  background: rgba(139, 115, 64, .55);
}
.nav::-webkit-scrollbar-track, .search-select-list::-webkit-scrollbar-track, .brand-picker-menu::-webkit-scrollbar-track { background: transparent; }