/* ============================================================================
   LegiTag Battery Passport — Design System (shadcn-inspired)
   Single source of truth for all UI primitives. No inline styles.
   Build: align-fix-4 (cache-bust)
============================================================================ */

/* ============ TOKENS ============ */
:root {
  /* Neutral scale (slate) */
  --c-bg:        #f8fafc;
  --c-bg-2:      #f1f5f9;
  --c-surface:   #ffffff;
  --c-border:    #e2e8f0;
  --c-border-2:  #cbd5e1;
  --c-text:      #0f172a;
  --c-text-2:    #334155;
  --c-text-3:    #64748b;
  --c-text-4:    #94a3b8;

  /* Brand */
  --c-primary:        #2563eb;
  --c-primary-hover:  #1d4ed8;
  --c-primary-soft:   #eff6ff;
  --c-primary-ring:   rgba(37, 99, 235, 0.18);

  /* Status — palette officielle modifclaude.pdf
     Verts:    text/progress #3d7c51, border #bcf7d0, fond #f2fff4
     Jaunes:   text #a35d35, border/progress #fee68a, fond #fffbeb
     Rouges:   text/progress #ba1c1d, border #ffa59b, fond #ffe1db
     Violets:  text #712aac, border #cbacf1, fond #f1e7fe
     Bleus:    text #1a3f9c, border/fond #8ebce8
     Gris:     text #354255, border #d3d5de, fond #f4f5f7 */
  --c-success:        #3d7c51;            /* dark green — text + progress + diagrams */
  --c-success-soft:   #f2fff4;            /* light green — badge background */
  --c-success-text:   #3d7c51;
  --c-success-border: #bcf7d0;            /* medium green — badge border */
  --c-warn:           #fee68a;            /* medium yellow — borders / progress / diagrams */
  --c-warn-soft:      #fffbeb;            /* light yellow — badge background */
  --c-warn-text:      #a35d35;            /* dark yellow — text only */
  --c-warn-border:    #fee68a;
  --c-danger:         #ba1c1d;            /* dark red — text + progress + diagrams */
  --c-danger-soft:    #ffe1db;            /* light red — badge background */
  --c-danger-text:    #ba1c1d;
  --c-danger-border:  #ffa59b;            /* medium red — badge border */
  --c-archive-text:   #712aac;            /* violet — archive pastilles only */
  --c-archive-soft:   #f1e7fe;
  --c-archive-border: #cbacf1;
  /* Bleu (CLAUDE.md): foncé #1a3f9c (text), medium #8ebce8 (border).
     Le fond doit être un bleu CLAIR pour le badge ; on dérive un ton
     pastel cohérent avec les autres palettes (jaune clair = #fffbeb,
     vert clair = #f2fff4, rouge clair = #ffe1db, violet clair = #f1e7fe,
     gris clair = #f4f5f7). Bleu clair = #eaf2fa, qui garde le caractère
     bleu sans saturer la pastille. */
  --c-info-soft:      #eaf2fa;            /* badge background blue clair */
  --c-info-text:      #1a3f9c;            /* dark blue — text */
  --c-info-border:    #8ebce8;            /* medium blue — border */
  --c-draft-text:     #354255;            /* dark grey — Draft + battery category */
  --c-draft-border:   #d3d5de;            /* medium grey — badge border */
  --c-draft-soft:     #f4f5f7;            /* light grey — badge background */

  /* Radius */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-full: 9999px;

  /* Shadows */
  --sh-xs: 0 1px 2px rgba(15, 23, 42, .05);
  --sh-sm: 0 1px 3px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04);
  --sh-md: 0 4px 12px rgba(15, 23, 42, .08), 0 2px 4px rgba(15, 23, 42, .04);
  --sh-lg: 0 12px 32px rgba(15, 23, 42, .10), 0 4px 8px rgba(15, 23, 42, .04);

  /* Sizes */
  --h-input: 38px;
  --h-input-sm: 32px;
  --sb-w-open: 260px;
  --sb-w-closed: 64px;

  /* Backwards-compat aliases (legacy class names elsewhere reference these) */
  --txt: var(--c-text);
  --muted: var(--c-text-3);
  --br: var(--c-border-2);
  --br-light: var(--c-border);
  --hover: var(--c-bg-2);
  --bg: var(--c-bg);
  --blue: var(--c-primary);
  --blue-dark: var(--c-primary-hover);
  --green: var(--c-success);
  --red: var(--c-danger);
  --orange: var(--c-warn);
  --shadow-sm: var(--sh-sm);
  --shadow: var(--sh-md);
  --radius: var(--r-lg);
  --radius-sm: var(--r-md);
  --radius-lg: var(--r-xl);
  --sb-open-w: var(--sb-w-open);
  --sb-closed-w: var(--sb-w-closed);
}

/* ============ RESET ============ */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  overflow-x: hidden;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--c-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--c-border-2); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--c-text-4); }

/* ============ TYPOGRAPHY ============ */
h1 { margin: 0 0 16px; font-size: 28px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; color: var(--c-text); }
h2 { margin: 24px 0 12px; font-size: 20px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; color: var(--c-text); }
h3 { margin: 16px 0 8px; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.4; color: var(--c-text); }
p  { margin: 0 0 12px; }
.muted, .text-muted { color: var(--c-text-3); }
.text-strong { color: var(--c-text); }
.text-xs   { font-size: 11px; line-height: 1.4; }
.text-sm   { font-size: 12px; line-height: 1.4; }
.text-base { font-size: 13px; line-height: 1.45; }
.text-md   { font-size: 14px; line-height: 1.5; }
.text-lg   { font-size: 16px; line-height: 1.45; }
.text-xl   { font-size: 20px; line-height: 1.3; }
.fw-400 { font-weight: 400; } .fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; } .fw-700 { font-weight: 700; }
.fw-800 { font-weight: 800; }
.caps { text-transform: uppercase; letter-spacing: .5px; font-weight: 600; font-size: 11px; color: var(--c-text-3); }

/* ============ LAYOUT ============ */
.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 28px 24px 80px calc(var(--sb-w-closed) + 24px);
  transition: padding-left .2s ease;
  min-width: 0;
  box-sizing: border-box;
}
body.sb-open .container { padding-left: calc(var(--sb-w-open) + 24px); }

.breadcrumb {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--c-text-3);
  margin-bottom: 6px;
}
.breadcrumb a { color: var(--c-text-3); text-decoration: none; }
.breadcrumb a:hover { color: var(--c-text); }
.breadcrumb .sep { color: var(--c-border-2); }

/* ============ SIDEBAR ============ */
.sb {
  position: fixed; inset: 0 auto 0 0;
  width: var(--sb-w-closed);
  background: var(--c-surface);
  border-right: 1px solid var(--c-border);
  z-index: 50;
  display: flex; flex-direction: column;
  transition: width .2s ease;
  overflow: hidden;
}
body.sb-open .sb { width: var(--sb-w-open); }

.sb-header {
  height: 56px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 0 12px;
  border-bottom: 1px solid var(--c-border);
}
.sb-logo {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-width: 0;
  text-decoration: none;
}
.sb-logo img {
  display: block;
  max-width: 100%; max-height: 36px;
  width: auto; height: auto;
  object-fit: contain;
}
.sb-logo-closed { width: 28px !important; height: 28px !important; flex-shrink: 0; }
.sb-logo-open   { display: none !important; height: 28px !important; max-width: 160px !important; }
body.sb-open .sb-logo-closed { display: none !important; }
body.sb-open .sb-logo-open   { display: block !important; }

.sb-inner {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  padding: 12px 8px;
}
.sb-inner::-webkit-scrollbar { display: none; }

.sb-group { margin-bottom: 2px; }
.sb-group-btn {
  width: 100%;
  display: flex; align-items: center; gap: 12px;
  padding: 8px 12px;
  border-radius: var(--r-md);
  background: transparent; border: 0;
  cursor: pointer;
  color: var(--c-text-2);
  text-decoration: none;
  font-size: 14px; font-weight: 500;
  transition: background .15s ease, color .15s ease;
  white-space: nowrap;
}
.sb-group-btn:hover { background: var(--c-bg-2); color: var(--c-text); text-decoration: none; }
.sb-group.active .sb-group-btn {
  background: var(--c-primary-soft);
  color: var(--c-primary);
  font-weight: 600;
}
.sb-ico {
  width: 20px; height: 20px; flex: 0 0 20px;
  display: grid; place-items: center;
}
.sb-ico svg, .sb-ico i { width: 18px; height: 18px; }
.sb-label {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis;
  text-align: left;
}
body:not(.sb-open) .sb-label { display: none; }

.sb-user-section {
  flex-shrink: 0;
  border-top: 1px solid var(--c-border);
  padding: 10px 8px;
  position: relative;
}
.sb-user-btn {
  width: 100%;
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px;
  background: transparent; border: 0;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background .15s ease;
}
.sb-user-btn:hover { background: var(--c-bg-2); }
.user-badge {
  width: 32px; height: 32px; flex-shrink: 0;
  border-radius: var(--r-full);
  background: var(--c-primary); color: #fff;
  display: grid; place-items: center;
  font-size: 13px; font-weight: 600;
}
.sb-user-name {
  font-size: 13px; font-weight: 500; color: var(--c-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-align: left;
}
body:not(.sb-open) .sb-user-name { display: none; }
/* Use position:fixed so the dropdown escapes the .sb container's overflow:hidden
   clip (which would cut it to ~64px wide when the sidebar is collapsed). */
.sb-user-dropdown {
  position: fixed;
  bottom: 60px;
  left: 8px;
  width: 240px;
  display: none;
  z-index: 1100;
}
body.sb-open .sb-user-dropdown { width: 224px; left: 8px; }
.sb-user-dropdown.show { display: block; }

/* ============ MENU (popover) ============ */
.ui-menu {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  box-shadow: var(--sh-lg);
  padding: 4px;
  min-width: 200px;
  z-index: 1000;
  animation: menu-in .12s ease-out;
}
@keyframes menu-in {
  from { opacity: 0; transform: translateY(-4px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
.ui-menu-label {
  padding: 8px 10px 4px;
  border-bottom: 1px solid var(--c-border);
  margin-bottom: 4px;
}
.ui-menu-label-name { font-size: 13px; font-weight: 600; color: var(--c-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-menu-label-sub  { font-size: 12px; color: var(--c-text-3); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-menu-separator  { height: 1px; background: var(--c-border); margin: 4px -2px; }
.ui-menu-item {
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  padding: 7px 10px;
  border-radius: var(--r-sm);
  font-size: 13px;
  color: var(--c-text-2);
  background: transparent; border: 0;
  cursor: pointer;
  text-decoration: none;
  text-align: left;
  user-select: none;
  transition: background .1s ease, color .1s ease;
}
.ui-menu-item:hover, .ui-menu-item:focus-visible {
  background: var(--c-bg-2);
  color: var(--c-text);
  text-decoration: none;
  outline: none;
}
.ui-menu-item i, .ui-menu-item svg {
  width: 15px; height: 15px; flex-shrink: 0;
  color: var(--c-text-3);
}
.ui-menu-item-danger { color: var(--c-danger); }
.ui-menu-item-danger:hover { background: var(--c-danger-soft); color: var(--c-danger); }
.ui-menu-item-danger i, .ui-menu-item-danger svg { color: var(--c-danger); }
.ui-menu-shortcut {
  margin-left: auto;
  font-size: 11px;
  color: var(--c-text-4);
  font-weight: 500;
  letter-spacing: .3px;
}
.ui-menu-item.is-active {
  background: var(--c-primary-soft);
  color: var(--c-primary);
}
.ui-menu-item.is-active i, .ui-menu-item.is-active svg { color: var(--c-primary); }

/* ============ BUTTONS ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--h-input);
  padding: 0 16px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  background: transparent;
  color: var(--c-text);
  font-size: 14px; font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.btn:focus-visible { outline: 2px solid var(--c-primary-ring); outline-offset: 2px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn i, .btn svg { width: 16px; height: 16px; }
.btn-primary   { background: var(--c-primary); color: #fff; border-color: var(--c-primary); box-shadow: var(--sh-xs); }
.btn-primary:hover { background: var(--c-primary-hover); border-color: var(--c-primary-hover); text-decoration: none; }
.btn-secondary { background: var(--c-surface); color: var(--c-text); border-color: var(--c-border-2); box-shadow: var(--sh-xs); }
.btn-secondary:hover { background: var(--c-bg-2); }
.btn-ghost     { color: var(--c-text-2); }
.btn-ghost:hover { background: var(--c-bg-2); color: var(--c-text); text-decoration: none; }
.btn-danger    { background: var(--c-danger); color: #fff; border-color: var(--c-danger); }
.btn-danger:hover { background: var(--c-danger-text); border-color: var(--c-danger-text); }
.btn-sm        { height: var(--h-input-sm); padding: 0 12px; font-size: 13px; }
.btn-icon-only { width: var(--h-input); padding: 0; }
.btn-icon-only.btn-sm { width: var(--h-input-sm); }
.w-full { width: 100%; }

/* ============ CARDS ============ */
.card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xs);
  padding: 24px;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}
/* Adjacent cards stack vertically by default — but inside a grid/flex
   container, the gap handles spacing, so we cancel the margin there. */
.card + .card { margin-top: 16px; }
:where(.grid, [style*="display:grid"], [style*="display: grid"], .flex, [style*="display:flex"], [style*="display: flex"]) > .card + .card { margin-top: 0; }
.card-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 16px; gap: 12px;
}
.card-title { font-size: 16px; font-weight: 600; margin: 0; letter-spacing: -0.01em; color: var(--c-text); }
.card-desc  { font-size: 13px; color: var(--c-text-3); margin: 4px 0 0; }
.card-section-title {
  font-size: 14px; font-weight: 600; margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--c-border);
  color: var(--c-text);
  letter-spacing: -0.01em;
}

/* ============ FORMS ============ */
label {
  display: block;
  font-size: 13px; font-weight: 500;
  color: var(--c-text);
  margin: 16px 0 6px;
  letter-spacing: -0.005em;
}
label:first-child, .form-row > div > label:first-child { margin-top: 0; }
.required::after { content: " *"; color: var(--c-danger); }

input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="date"], input[type="url"],
input[type="tel"], input[type="search"], input:not([type]), textarea {
  display: block;
  width: 100%;
  height: var(--h-input);
  padding: 8px 12px;
  background: var(--c-surface);
  color: var(--c-text);
  border: 1px solid var(--c-border-2);
  border-radius: var(--r-md);
  box-shadow: var(--sh-xs);
  font-size: 14px; line-height: 1.4;
  transition: border-color .15s ease, box-shadow .15s ease;
}
textarea {
  height: auto;
  min-height: 80px;
  padding: 10px 12px;
  resize: vertical;
}
input::placeholder, input:not([type])::placeholder, textarea::placeholder { color: var(--c-text-4); }
input:hover, input:not([type]):hover, textarea:hover { border-color: var(--c-text-4); }
input:focus, input:not([type]):focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px var(--c-primary-ring);
}
input:disabled, textarea:disabled, select:disabled {
  background: var(--c-bg-2);
  color: var(--c-text-3);
  cursor: not-allowed;
}

/* Native <select>: hidden by default. The custom UISelect (see _api.js) renders
   on top. If JS is off or a select is used directly, we still style it. */
select {
  width: 100%;
  height: var(--h-input);
  padding: 8px 36px 8px 12px;
  background-color: var(--c-surface);
  color: var(--c-text);
  border: 1px solid var(--c-border-2);
  border-radius: var(--r-md);
  box-shadow: var(--sh-xs);
  font-size: 14px;
  cursor: pointer;
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' 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 12px center;
  background-size: 16px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
select:hover { border-color: var(--c-text-4); }

/* Custom Select component (vanilla JS) */
.ui-select {
  position: relative;
  width: 100%;
}
.ui-select-trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%;
  height: var(--h-input);
  padding: 8px 12px;
  background: var(--c-surface);
  color: var(--c-text);
  border: 1px solid var(--c-border-2);
  border-radius: var(--r-md);
  box-shadow: var(--sh-xs);
  font-size: 14px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ui-select-trigger:hover { border-color: var(--c-text-4); }
.ui-select-trigger:focus-visible,
.ui-select.is-open .ui-select-trigger {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px var(--c-primary-ring);
}
.ui-select-value {
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ui-select-value.is-placeholder { color: var(--c-text-4); }
.ui-select-chevron {
  width: 16px; height: 16px; flex-shrink: 0;
  color: var(--c-text-3);
  transition: transform .15s ease;
}
.ui-select.is-open .ui-select-chevron { transform: rotate(180deg); }
.ui-select-menu {
  position: absolute;
  top: calc(100% + 4px); left: 0;
  min-width: 100%;
  max-height: 280px; overflow-y: auto;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  box-shadow: var(--sh-lg);
  padding: 4px;
  z-index: 1000;
  display: none;
  animation: menu-in .12s ease-out;
}
.ui-select.is-open .ui-select-menu { display: block; }
.ui-select-option {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px;
  border-radius: var(--r-sm);
  font-size: 13px;
  color: var(--c-text-2);
  cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ui-select-option:hover, .ui-select-option.is-highlighted {
  background: var(--c-bg-2);
  color: var(--c-text);
}
.ui-select-option.is-selected {
  background: var(--c-primary-soft);
  color: var(--c-primary);
  font-weight: 500;
}
.ui-select-option-check {
  width: 14px; height: 14px; flex-shrink: 0;
  color: var(--c-primary);
  visibility: hidden;
}
.ui-select-option.is-selected .ui-select-option-check { visibility: visible; }
.ui-select-search {
  position: sticky; top: 0;
  padding: 6px;
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
}
.ui-select-search input {
  height: 30px; padding: 4px 10px;
  font-size: 13px;
  border-radius: var(--r-sm);
  box-shadow: none;
}

.form-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.form-row-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}
.form-row > *, .form-row-3 > * { min-width: 0; }
.form-help { font-size: 12px; color: var(--c-text-3); margin-top: 6px; margin-bottom: 4px; line-height: 1.4; }
/* MAJOR breathing room before a section heading inside a form/card.
   Uses !important so any inline style or utility class (.mt-24, .mt-16, …)
   the page might add can never collapse the gap. Per ticket "ULTRA
   IMPORTANT — espace entre titre de catégorie et le texte qui précède". */
form h3,
.card h3,
form .form-section-title,
.card .form-section-title {
  margin-top: 48px !important;
  margin-bottom: 16px !important;
}
form h3:first-child,
.card h3:first-child,
form > h3:first-of-type,
.card > h3:first-of-type {
  margin-top: 8px !important;
}
/* H3 placed right after a card-title or another heading: trim the extra. */
.card-title + h3,
h2 + h3 { margin-top: 24px !important; }
/* Vertical rhythm between consecutive form rows + first label/row that
   follows a free-standing input. Without this, an input sitting alone
   touches the next .form-row that comes after it (e.g. Model name →
   Model code/Category line). 20-24px between rows reads far better. */
.form-row + .form-row,
.form-row-3 + .form-row,
.form-row + .form-row-3,
.form-row-3 + .form-row-3,
.form-row + label,
.form-row-3 + label,
.form-row + .form-help,
.form-row-3 + .form-help,
input + .form-row,
input + .form-row-3,
select + .form-row,
select + .form-row-3,
textarea + .form-row,
textarea + .form-row-3,
input + label,
select + label,
textarea + label { margin-top: 20px; }
fieldset { border: 0; padding: 0; margin: 0; }

@media (max-width: 720px) {
  .form-row, .form-row-3 { grid-template-columns: 1fr; }
}

/* ============ TABLES ============ */
.table-wrap {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-xs);
}
table { width: 100%; border-collapse: collapse; font-size: 14px; }
thead th {
  text-align: left;
  padding: 10px 16px;
  background: var(--c-bg);
  color: var(--c-text-3);
  font-size: 12px; font-weight: 600;
  letter-spacing: .3px;
  text-transform: uppercase;
  border-bottom: 1px solid var(--c-border);
}
tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--c-border);
  color: var(--c-text-2);
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--c-bg); }
tbody tr.clickable { cursor: pointer; }

/* SmartTable (inline editing) */
.smart-table-wrap { background: var(--c-surface); }
.smart-table {
  width: 100%;
  border-collapse: separate; border-spacing: 0;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  overflow: hidden;
  font-size: 13px;
}
.smart-table thead th {
  text-align: left; padding: 10px 12px;
  background: var(--c-bg);
  color: var(--c-text-3);
  font-size: 11px; font-weight: 600;
  letter-spacing: .4px; text-transform: uppercase;
  border-bottom: 1px solid var(--c-border);
}
.smart-table tbody td {
  padding: 6px;
  border-bottom: 1px solid var(--c-border);
  vertical-align: middle;
}
.smart-table tbody tr:last-child td { border-bottom: 0; }
.smart-table input,
.smart-table textarea,
.smart-table .ui-select-trigger {
  height: 32px; padding: 4px 10px;
  font-size: 13px;
  border-radius: var(--r-sm);
  box-shadow: none;
}
.smart-table .btn-icon-only { width: 28px; height: 28px; padding: 0; color: var(--c-danger); }
.smart-table .btn-icon-only:hover { background: var(--c-danger-soft); }

/* ============ BADGES ============ */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 10px;
  border-radius: var(--r-full);
  font-size: 12px; font-weight: 600;
  letter-spacing: .1px;
  white-space: nowrap;
  border: 1px solid transparent;
}
/* Draft / produced / planned / etc — palette CLAUDE.md
   Stage palette (batch + passport):
     draft     -> gris      (text #354255, border #d3d5de, fond #f4f5f7)
     planned   -> jaune     (text #a35d35, border #fee68a, fond #fffbeb)
     produced  -> bleu      (text #1a3f9c, border #8ebce8, fond #eaf2fa)
     active    -> vert      (text #3d7c51, border #bcf7d0, fond #f2fff4)
     completed -> vert
     archived  -> violet    (text #712aac, border #cbacf1, fond #f1e7fe) */
.badge-draft, .badge-stage-draft
  { background: var(--c-draft-soft);   color: var(--c-draft-text);   border-color: var(--c-draft-border); }
.badge-scheduled, .badge-planned, .badge-stage-planned
  { background: var(--c-warn-soft);    color: var(--c-warn-text);    border-color: var(--c-warn-border); }
.badge-in_production, .badge-produced, .badge-stage-produced
  { background: var(--c-info-soft);    color: var(--c-info-text);    border-color: var(--c-info-border); }
.badge-completed, .badge-stage-completed
  { background: var(--c-success-soft); color: var(--c-success-text); border-color: var(--c-success-border); }
.badge-active, .badge-stage-active
  { background: var(--c-success-soft); color: var(--c-success-text); border-color: var(--c-success-border); }
.badge-inactive
  { background: var(--c-warn-soft);    color: var(--c-warn-text);    border-color: var(--c-warn-border); }
.badge-archived, .badge-stage-archived
  { background: var(--c-archive-soft); color: var(--c-archive-text); border-color: var(--c-archive-border); }
/* Battery category — gris */
.badge-ev, .badge-lmt, .badge-industrial, .badge-stationary
  { background: var(--c-draft-soft);   color: var(--c-draft-text);   border-color: var(--c-draft-border); }
/* Risk / compliance pastilles */
.badge-high
  { background: var(--c-danger-soft);  color: var(--c-danger-text);  border-color: var(--c-danger-border); }
.badge-medium
  { background: var(--c-warn-soft);    color: var(--c-warn-text);    border-color: var(--c-warn-border); }
.badge-low
  { background: var(--c-success-soft); color: var(--c-success-text); border-color: var(--c-success-border); }
.badge-compliant
  { background: var(--c-success-soft); color: var(--c-success-text); border-color: var(--c-success-border); }
.badge-non_compliant, .badge-non-compliant
  { background: var(--c-danger-soft);  color: var(--c-danger-text);  border-color: var(--c-danger-border); }

/* Carbon footprint class badges — official Class palette (edit.pdf):
   A=#018241  B=#85bc2f  C=#fecb03  D=#ee8100  E=#e63e11.
   These colours apply ONLY to .class-A..E; the rest of the UI keeps the
   modifclaude.pdf palette. */
.class-A, .class-B, .class-C, .class-D, .class-E {
  padding: 4px 12px; border-radius: var(--r-sm); font-weight: 700;
  color: #fff;
  border: 1px solid transparent;
}
.class-A { background: #018241; }
.class-B { background: #85bc2f; }
.class-C { background: #fecb03; color: #1a1a1a; }
.class-D { background: #ee8100; }
.class-E { background: #e63e11; }

/* ============ ALERTS / TOAST ============ */
.alert {
  padding: 12px 16px;
  border-radius: var(--r-md);
  font-size: 14px;
  margin: 12px 0;
  border: 1px solid transparent;
}
/* Align inline icons inside alerts cleanly with their text — no flex wrap
   so multi-line bodies (lists, multi-paragraph alerts) keep flowing as a
   block. The inline-flex on the icon vertically centers it on the cap height. */
.alert > i[data-lucide],
.alert > svg.lucide,
.alert > svg[data-lucide] {
  display: inline-flex;
  width: 18px; height: 18px;
  vertical-align: -4px;
  margin-right: 8px;
}
.alert-error   { background: var(--c-danger-soft);  color: var(--c-danger-text);  border-color: var(--c-danger-border); }
.alert-success { background: var(--c-success-soft); color: var(--c-success-text); border-color: var(--c-success-border); }
.alert-info    { background: var(--c-info-soft);    color: var(--c-info-text);    border-color: var(--c-info-border); }
.alert-warn    { background: var(--c-warn-soft);    color: var(--c-warn-text);    border-color: var(--c-warn-border); }

#toast {
  position: fixed; bottom: 24px; right: 24px;
  background: var(--c-text);
  color: #fff;
  padding: 10px 18px;
  border-radius: var(--r-md);
  box-shadow: var(--sh-lg);
  font-size: 14px;
  z-index: 10000;
  max-width: 400px;
  opacity: 0; transform: translateY(8px);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
#toast.show { opacity: 1; transform: none; }
#toast.error   { background: var(--c-danger); }
#toast.success { background: var(--c-success); }

/* ============ KPIs ============ */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.kpi-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 20px;
  box-shadow: var(--sh-xs);
}
.kpi-label { font-size: 12px; font-weight: 600; color: var(--c-text-3); letter-spacing: .3px; text-transform: uppercase; }
.kpi-value { font-size: 28px; font-weight: 700; margin: 8px 0 0; color: var(--c-text); letter-spacing: -0.01em; }
.kpi-sub   { font-size: 12px; color: var(--c-text-3); margin-top: 4px; }

/* ============ LOADING ============
   Big circular spinner — same look as shadcn ClassicLoader: 40×40, 4px border,
   solid primary colour with a transparent top, smooth rotate. Used in
   .loading-center blocks (passport detail, public DPP, etc.). The smaller
   inline-button variant uses .loader-inline. */
.loader {
  display: inline-block;
  width: 40px; height: 40px;
  border: 4px solid var(--c-primary);
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin .9s linear infinite;
}
.loader-inline {
  display: inline-block;
  width: 16px; height: 16px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin .8s linear infinite;
  vertical-align: -3px;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-center { text-align: center; padding: 40px; color: var(--c-text-3); }
.loading-center .loader { margin: 0 auto; }
/* swapLoadingPlaceholders() injects a wrapper span; we use a self-contained
   inline-flex block so the placeholder is centered within itself without
   forcing the host element into flex mode (which would break grid/table
   layouts when the JS later replaces the inner HTML). */
.loader-placeholder-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 60px;
  padding: 16px 0;
}

/* ============ TABS ============ */
.tabs {
  display: flex; gap: 0;
  border-bottom: 1px solid var(--c-border);
  margin-bottom: 24px;
  overflow-x: auto;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  padding: 10px 16px;
  background: transparent; border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-size: 14px; font-weight: 500;
  color: var(--c-text-3);
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s ease, border-color .15s ease;
}
.tab:hover { color: var(--c-text); }
.tab.active { color: var(--c-primary); border-bottom-color: var(--c-primary); font-weight: 600; }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ============ TOP BAR / SEARCH ============ */
.top-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 24px;
  flex-wrap: wrap;
}
.search-box {
  display: flex; align-items: center;
  height: var(--h-input);
  padding: 0 12px;
  background: var(--c-surface);
  border: 1px solid var(--c-border-2);
  border-radius: var(--r-md);
  box-shadow: var(--sh-xs);
}
.search-box:focus-within {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px var(--c-primary-ring);
}
.search-box input {
  border: 0; outline: 0; box-shadow: none;
  height: 100%; padding: 0;
  background: transparent;
  width: 220px;
  font-size: 14px;
}
.search-box svg, .search-box i {
  width: 16px; height: 16px;
  color: var(--c-text-3); margin-right: 8px;
}

/* ============ MODAL ============ */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, .55);
  display: none;
  align-items: center; justify-content: center;
  z-index: 9999;
  padding: 16px;
  animation: fade-in .15s ease;
}
.modal-overlay.show { display: flex; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.modal {
  background: var(--c-surface);
  border-radius: var(--r-xl);
  padding: 24px;
  max-width: 560px; width: 100%;
  max-height: 90vh; overflow-y: auto;
  box-shadow: var(--sh-lg);
  animation: modal-in .18s cubic-bezier(.16,1,.3,1);
}
.modal-wide   { max-width: 700px !important; }
.modal-narrow { max-width: 480px !important; }

/* Monospace textarea (serial number lists, etc.) */
.textarea-mono {
  min-height: 120px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
}
.textarea-lg { min-height: 140px; }
.text-uppercase { text-transform: uppercase; }

/* ============ CALLOUTS ============ */
.callout {
  padding: 12px 14px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  font-size: 13px;
  line-height: 1.5;
}
.callout-info    { background: var(--c-info-soft);    color: var(--c-info-text);    border-color: #bfdbfe; }
.callout-warn    { background: var(--c-warn-soft);    color: var(--c-warn-text);    border-color: #fde68a; }
.callout-danger  { background: var(--c-danger-soft);  color: var(--c-danger-text);  border-color: #fecaca; }
.callout-success { background: var(--c-success-soft); color: var(--c-success-text); border-color: #bbf7d0; }

/* Checkbox row (clickable label + checkbox) */
.checkbox-row {
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer;
  font-size: 13px;
  color: var(--c-text-2);
}
.checkbox-row input[type="checkbox"] {
  width: auto; height: auto; margin: 0;
}

/* Generic info box (light grey background) */
.info-box {
  margin: 12px 0;
  padding: 12px 14px;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  font-size: 13px;
  color: var(--c-text-2);
}

/* Bar fill helper (used in tables for performance/risk indicators) */
.bar-track {
  width: 100%; height: 8px;
  background: var(--c-bg-2);
  border-radius: var(--r-full);
  overflow: hidden;
}
.bar-fill {
  height: 100%;
  border-radius: var(--r-full);
  transition: width .3s ease;
  background: var(--c-primary);
}
.bar-fill.is-ok     { background: var(--c-success); }
.bar-fill.is-warn   { background: var(--c-warn); }
.bar-fill.is-danger { background: var(--c-danger); }

.mr-auto { margin-right: auto; }

/* Extended typography helpers */
.text-1 { color: var(--c-text); }
.text-2 { color: var(--c-text-2); }
.text-3 { color: var(--c-text-3); }
.text-4 { color: var(--c-text-4); }
.leading-relaxed { line-height: 1.6; }
.leading-snug    { line-height: 1.35; }
.min-w-240 { min-width: 240px; }
.multi-line { white-space: pre-line; }
.info-chip {
  margin: 6px 0;
  padding: 4px 10px;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  font-size: 12px;
  color: var(--c-text-2);
}

/* Auto-fit grids */
.grid-260 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 720px) { .grid-3 { grid-template-columns: 1fr; } }

/* Subtle bordered card (smaller than .card) */
.mini-card {
  padding: 10px 12px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface);
}

/* BOM modal sectioned groups (identity, flags, hazardous, recycled, renewable…) */
.bom-modal-group {
  margin-top: 16px;
  padding: 16px 18px;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
}
.bom-modal-group:first-of-type { margin-top: 0; }
.bom-modal-group + .bom-modal-group { margin-top: 14px; }
.bom-modal-group .form-row { margin-top: 12px; }
.bom-modal-group .form-row:first-of-type { margin-top: 0; }
.bom-modal-group label { margin-top: 0; }
.bom-modal-section-h {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600; color: var(--c-text);
  margin: 0 0 6px;
  letter-spacing: -.01em;
}
.bom-modal-section-h i, .bom-modal-section-h svg {
  width: 16px; height: 16px;
  color: var(--c-primary);
}
.bom-modal-section-hint {
  margin-left: 6px;
  font-size: 12px; font-weight: 400;
  color: var(--c-text-3);
}

/* Flag list in the BOM modal — clear visual cards for each flag */
.bom-flag-list { display: flex; flex-direction: column; gap: 8px; }
.bom-flag-item {
  display: flex; align-items: flex-start; gap: 12px;
  margin: 0;
  padding: 10px 12px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.bom-flag-item:hover { border-color: var(--c-primary); }
.bom-flag-item:has(input:checked) {
  border-color: var(--c-primary);
  background: var(--c-primary-soft);
}
.bom-flag-item input[type="checkbox"] {
  margin: 2px 0 0;
  width: 16px; height: 16px;
  flex-shrink: 0;
  accent-color: var(--c-primary);
  cursor: pointer;
}
.bom-flag-item > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bom-flag-item strong { font-size: 13px; font-weight: 600; color: var(--c-text); }
.bom-flag-item small { font-size: 12px; color: var(--c-text-3); line-height: 1.4; }

/* ============ COMPLIANCE SCORECARD (model Identity tab) ============ */
.compliance-overall {
  display: flex; align-items: center; gap: 20px;
  padding: 16px 18px;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
}
.compliance-pct {
  font-size: 44px; font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1;
  min-width: 110px;
}
.compliance-pct small { font-size: 20px; font-weight: 600; margin-left: 2px; }
/* Identity compliance number: keep neutral text (ticket "Identity mettre le chiffre en noir") */
.compliance-pct-ok,
.compliance-pct-warn,
.compliance-pct-danger { color: var(--c-text); }
.compliance-overall-meta { flex: 1; }

.compliance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.compliance-cell {
  padding: 12px 14px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
}
.compliance-pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--r-full);
  font-size: 12px; font-weight: 600;
}
.compliance-pill-ok     { background: var(--c-success-soft); color: var(--c-success-text); }
.compliance-pill-warn   { background: var(--c-warn-soft);    color: var(--c-warn-text); }
.compliance-pill-danger { background: var(--c-danger-soft);  color: var(--c-danger-text); }

.compliance-missing-list {
  margin: 8px 0 0; padding: 0 0 0 18px;
  font-size: 12px; color: var(--c-text-2);
}
.compliance-missing-list li { margin: 3px 0; }
.compliance-missing-list code {
  background: var(--c-bg-2); padding: 1px 6px;
  border-radius: 3px; font-size: 11px;
}

/* Model picker (top-bar select on detail-by-model pages) */
.model-picker { max-width: 360px; width: 100%; }

/* Light table inside a card (no full table-wrap chrome) */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.data-table thead th {
  text-align: left;
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 600;
  color: var(--c-text-3);
  letter-spacing: .4px;
  text-transform: uppercase;
  border-bottom: 1px solid var(--c-border);
  background: var(--c-bg);
}
.data-table tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--c-border);
  color: var(--c-text-2);
}
.data-table tbody tr:last-child td { border-bottom: 0; }
@keyframes modal-in {
  from { opacity: 0; transform: translateY(8px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
.modal-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.modal-title { font-size: 18px; font-weight: 600; margin: 0; letter-spacing: -0.01em; }
.modal-desc { font-size: 13px; color: var(--c-text-3); margin: 4px 0 0; }
.modal-close {
  width: 28px; height: 28px;
  border-radius: var(--r-sm);
  background: transparent; border: 0;
  color: var(--c-text-3);
  cursor: pointer;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.modal-close:hover { background: var(--c-bg-2); color: var(--c-text); }
.modal-footer {
  display: flex; gap: 8px; justify-content: flex-end;
  margin-top: 20px; padding-top: 16px;
  border-top: 1px solid var(--c-border);
}
.inline-create-modal { z-index: 10001 !important; }

/* ============ PROGRESS ============ */
.progress {
  width: 100%; height: 8px;
  background: var(--c-border);
  border-radius: var(--r-full);
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: var(--c-primary);
  transition: width .3s ease;
}
.progress-fill.ok     { background: var(--c-success); }
.progress-fill.warn   { background: var(--c-warn); }
.progress-fill.danger { background: var(--c-danger); }
.gauge {
  display: flex; align-items: center; gap: 12px;
  margin: 6px 0;
}
.gauge-label { font-size: 13px; color: var(--c-text-3); flex: 0 0 130px; }
.gauge-bar { flex: 1; }
.gauge-value { flex: 0 0 80px; text-align: right; font-size: 13px; font-weight: 600; }

/* ============ KEY-VALUE GRID (read-only detail pages) ============ */
.kv-grid {
  display: grid;
  grid-template-columns: minmax(180px, 240px) 1fr;
  gap: 8px 20px;
  align-items: baseline;
}
.kv-k { font-size: 13px; color: var(--c-text-3); }
.kv-v { font-size: 14px; color: var(--c-text); word-break: break-word; min-width: 0; }
.kv-v code { font-size: 11px; word-break: break-all; background: var(--c-bg-2); padding: 1px 6px; border-radius: 3px; }
@media (max-width: 720px) {
  .kv-grid { grid-template-columns: 1fr; gap: 2px 0; }
  .kv-k { margin-top: 10px; }
}

/* ============ GAUGE / DEADLINE MARKERS ============ */
.gauge-mark {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: var(--r-full);
  font-size: 12px; font-weight: 600;
}
.gauge-mark.deadline-2031 { background: var(--c-warn-soft);   color: var(--c-warn-text); }
.gauge-mark.deadline-2036 { background: var(--c-danger-soft); color: var(--c-danger-text); }
.gauge-mark.ok            { background: var(--c-success-soft); color: var(--c-success-text); }

/* ============ STATUS DOT ============ */
.status-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: var(--r-full);
  margin-right: 6px;
  vertical-align: middle;
}
.status-dot.ok    { background: var(--c-success); }
.status-dot.warn  { background: var(--c-warn); }
.status-dot.high  { background: var(--c-danger); }
.status-dot.low   { background: var(--c-text-4); }

/* ============ EMPTY STATE ============ */
.empty-state {
  text-align: center;
  padding: 48px 24px;
  color: var(--c-text-3);
}
.empty-state i, .empty-state svg {
  width: 40px; height: 40px;
  margin-bottom: 12px;
  color: var(--c-text-4);
}
.empty-state h3 { color: var(--c-text); margin: 0 0 4px; }
.empty-state p  { font-size: 13px; margin: 0; }

/* ============ HERO (login / public pages) ============ */
.hero, .hero-card {
  background: var(--c-surface);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-sm);
  overflow: hidden;
  margin-bottom: 16px;
}
.hero-image-wrap {
  background: var(--c-bg);
  padding: 28px;
  display: grid; place-items: center;
}
.hero-image-wrap img { max-width: 100%; max-height: 280px; border-radius: var(--r-md); }
.hero-body { padding: 22px 28px; }
.hero-cat  { font-size: 11px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: var(--c-text-3); }
.hero-name { font-size: 28px; font-weight: 700; margin: 6px 0 14px; line-height: 1.2; color: var(--c-text); letter-spacing: -.01em; }
.hero-ids  { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13px; color: var(--c-text-3); }
.hero-ids strong { color: var(--c-text); font-weight: 600; }

/* ============ ACCORDION (public passport page) ============ */
.accordion {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  margin-bottom: 10px;
  overflow: hidden;
  box-shadow: var(--sh-xs);
}
.accordion-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  cursor: pointer; user-select: none;
  gap: 12px;
}
.accordion-head:hover { background: var(--c-bg); }
.accordion-head h2 {
  margin: 0; font-size: 16px; font-weight: 600;
  color: var(--c-primary);
  display: flex; align-items: center; gap: 10px;
  letter-spacing: -.01em;
}
.accordion-chevron {
  width: 18px; height: 18px;
  color: var(--c-primary);
  transition: transform .2s ease;
}
.accordion.open .accordion-chevron { transform: rotate(180deg); }
.accordion-body { padding: 0 20px 20px; display: none; }
.accordion.open .accordion-body { display: block; }

/* ============ AUTH PAGES (split screen) ============ */
.auth-page { min-height: 100vh; display: grid; grid-template-columns: 1fr; }
@media (min-width: 1024px) { .auth-page { grid-template-columns: 1fr 1fr; } }
.auth-page-left {
  background: var(--c-surface);
  border-right: 1px solid var(--c-border);
  display: flex; flex-direction: column; justify-content: center;
  padding: 60px;
}
.auth-page-right {
  background: var(--c-primary-soft);
  display: flex; align-items: center; justify-content: center;
  padding: 40px 24px;
}
@media (max-width: 1023px) { .auth-page-left { display: none; } }
.auth-card {
  background: var(--c-surface);
  border-radius: var(--r-xl);
  padding: 40px;
  box-shadow: var(--sh-md);
  max-width: 440px; width: 100%;
}
.auth-tabs {
  display: flex; gap: 4px;
  background: var(--c-bg-2);
  padding: 4px;
  border-radius: var(--r-md);
  margin-bottom: 24px;
}
.auth-tab {
  flex: 1; padding: 8px 12px;
  background: transparent; border: 0;
  cursor: pointer;
  font-size: 14px; font-weight: 500;
  color: var(--c-text-3);
  border-radius: var(--r-sm);
  transition: background .15s ease, color .15s ease;
}
.auth-tab.active {
  background: var(--c-surface);
  color: var(--c-primary);
  box-shadow: var(--sh-xs);
  font-weight: 600;
}
.welcome-icon-img {
  height: 56px; max-width: 240px;
  object-fit: contain;
  margin-bottom: 28px;
}
.welcome-title { font-size: 36px; font-weight: 700; line-height: 1.15; letter-spacing: -.02em; margin: 0 0 12px; color: var(--c-text); }
.welcome-sub   { font-size: 16px; color: var(--c-text-3); margin: 0; line-height: 1.5; max-width: 440px; }
.welcome-features { margin-top: 32px; display: flex; flex-direction: column; gap: 14px; max-width: 440px; }
.welcome-feature { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; }
.welcome-feature i { color: var(--c-primary); flex-shrink: 0; margin-top: 2px; width: 18px; height: 18px; }
.welcome-feature strong { display: block; color: var(--c-text); margin-bottom: 2px; font-weight: 600; }
.auth-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 60px 24px 80px;
}
.auth-page-logo { height: 44px; max-width: 200px; object-fit: contain; }

/* ============ PUBLIC PASSPORT FOOTER ============ */
.public-footer {
  margin-top: 28px;
  padding: 20px 24px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  font-size: 13px;
  color: var(--c-text-3);
  box-shadow: var(--sh-xs);
}
.public-footer h4 { margin: 0 0 6px; font-size: 14px; color: var(--c-text); font-weight: 600; }
.public-footer a { color: var(--c-primary); }
.footer-links { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 10px; font-size: 12px; }

/* ============ COMPLIANCE PILLS ============ */
.compliance-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px;
  border-radius: var(--r-full);
  font-size: 12px; font-weight: 600;
}
.compliance-ok { background: var(--c-success-soft); color: var(--c-success-text); }
.compliance-ko { background: var(--c-danger-soft);  color: var(--c-danger-text); }
.compliance-na { background: var(--c-bg-2);         color: var(--c-text-3); }

/* ============ PAGE TITLE BAR ============ */
.page-title-row {
  display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.page-title-row h1 { margin: 0; }

/* ============ UTILITIES ============ */
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.gap-4  { gap: 4px; }
.gap-8  { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.gap-24 { gap: 24px; }
.items-center { align-items: center; }
.items-start  { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-end     { justify-content: flex-end; }
.justify-center  { justify-content: center; }
.m-0   { margin: 0 !important; }
.mt-0  { margin-top: 0 !important; }
.mt-8  { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mb-8  { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.mb-0  { margin-bottom: 0 !important; }
.mt-2  { margin-top: 2px; }
.mt-4  { margin-top: 4px; }
.mt-12 { margin-top: 12px; }
.gap-6 { gap: 6px; }
.fs-11 { font-size: 11px; }
.fs-12 { font-size: 12px; }
.fs-13 { font-size: 13px; }
.fs-14 { font-size: 14px; }
.fs-20 { font-size: 20px; }
.flex-1 { flex: 1 1 0%; min-width: 0; }
.flex-wrap { flex-wrap: wrap; }
.text-danger  { color: var(--c-danger); }
.text-success { color: var(--c-success-text); }
.text-warn    { color: var(--c-warn-text); }
.text-primary { color: var(--c-primary); }
.text-right  { text-align: right; }
.text-center { text-align: center; }
.text-uppercase { text-transform: uppercase; letter-spacing: 0.5px; }
.hidden { display: none !important; }
.mb-12 { margin-bottom: 12px; }
.fs-10 { font-size: 10px; }
.fs-15 { font-size: 15px; }
.text-danger  { color: var(--c-danger); }
.text-warn    { color: var(--c-warn-text); }
.text-success { color: var(--c-success); }
.text-primary { color: var(--c-primary); }
.fw-normal { font-weight: 400; }
.p-12 { padding: 12px; }
.py-8 { padding-top: 8px; padding-bottom: 8px; }

/* LinkedSelect (legacy markup) — keep selector but route style through ui-select */
.linked-select { /* native fallback only */ }

/* ============================================================================
   BOM Network View
============================================================================ */
.bom-network-container {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 32px 28px;
  min-height: 500px;
  overflow: auto;
  background-image: radial-gradient(circle, #d1d5db 0.8px, transparent 0.8px);
  background-size: 22px 22px;
}
.bom-network-canvas { position: relative; min-width: fit-content; }
.bom-network-svg {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 1;
}
.bom-network-columns { position: relative; z-index: 2; }
.bom-network-column {
  position: absolute; top: 0;
  width: 240px;
}
.bom-network-column-header {
  display: inline-block;
  padding: 4px 10px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  font-size: 11px; font-weight: 600;
  color: var(--c-text-3);
  letter-spacing: .5px;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.bom-network-card {
  position: absolute;
  left: 18px; right: 18px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 12px 14px;
  box-shadow: var(--sh-xs);
  cursor: pointer;
  display: flex; flex-direction: column; gap: 4px;
  overflow: visible;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.bom-network-card:hover {
  border-color: var(--c-primary);
  box-shadow: var(--sh-md);
  transform: translateY(-1px);
}
.bom-network-card.root      { border-left: 3px solid var(--c-success); cursor: default; }
.bom-network-card.root:hover { border-color: var(--c-border); border-left-color: var(--c-success); box-shadow: var(--sh-xs); transform: none; }
.bom-network-card.assembly  { border-left: 3px solid var(--c-primary); }
.bom-network-card.material  { border-left: 3px solid var(--c-warn-text); }
.bom-network-card.crm       { border-left: 3px solid var(--c-danger); }
.bom-network-card.haz       { border-left: 3px solid var(--c-danger-text); }
.bom-network-card.reclaim   { border-left: 3px solid var(--c-success-text); }
.bom-network-card.other     { border-left: 3px solid var(--c-text-4); }
.bom-network-card.mining    { border-left: 3px solid var(--c-warn-text); }
.bom-network-card.processing { border-left: 3px solid var(--c-warn-text); }
.bom-network-card.refined   { border-left: 3px solid var(--c-info-text); }

.bom-network-card-name {
  font-size: 13px; font-weight: 600;
  color: var(--c-text);
  line-height: 1.3;
  padding-right: 26px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bom-network-card-role {
  display: inline-block;
  align-self: flex-start;
  max-width: 100%;
  padding: 1px 7px;
  background: var(--c-bg-2);
  color: var(--c-text-2);
  border-radius: var(--r-sm);
  font-size: 10px; font-weight: 600;
  letter-spacing: .4px;
  text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bom-network-card > div:not(.bom-network-card-name):not(.bom-network-card-role):not(.bom-network-card-meta) {
  font-size: 12px;
  color: var(--c-text-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
}
.bom-network-card-meta {
  font-size: 11px;
  color: var(--c-text-3);
  margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bom-network-card-meta code {
  background: var(--c-bg-2);
  color: var(--c-text-2);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.bom-network-card-add {
  position: absolute;
  right: -13px; top: 50%;
  transform: translateY(-50%);
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--c-primary);
  color: #fff !important;
  border: 2px solid var(--c-surface);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700;
  font-family: ui-sans-serif, system-ui, sans-serif;
  cursor: pointer;
  opacity: 0;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(37, 99, 235, .35);
  line-height: 22px;     /* matches inner height after 2px border on each side */
  text-align: center;
  padding: 0; margin: 0;
  user-select: none;
  transition: opacity .15s ease, transform .15s ease, background .15s ease;
}
.bom-network-card-add::before {
  /* Use a real plus sign glyph so vertical centering is consistent across fonts */
  content: "";
  display: block;
  width: 10px; height: 2px;
  background: currentColor;
  position: absolute;
}
.bom-network-card-add::after {
  content: "";
  display: block;
  width: 2px; height: 10px;
  background: currentColor;
  position: absolute;
}
/* Hide the text "+" inside the div so only the ::before/::after cross is shown.
   This way the visual is geometrically perfect regardless of font metrics. */
.bom-network-card-add { font-size: 0 !important; }
.bom-network-card:hover .bom-network-card-add { opacity: 1; }
.bom-network-card-add:hover {
  background: var(--c-primary-hover);
  transform: translateY(-50%) scale(1.08);
}
.bom-network-card-menu {
  position: absolute;
  right: 6px; top: 6px;
  width: 22px; height: 22px;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--c-text-3);
  display: grid; place-items: center;
  font-size: 14px;
  cursor: pointer;
}
.bom-network-card-menu:hover { background: var(--c-bg-2); color: var(--c-text); }

/* Transport icons on connectors */
.bom-transport-icon-group { position: absolute; z-index: 5; cursor: pointer; }
/* When a picker is open inside a group, lift the WHOLE group above every
   other transport icon on the canvas so the dropdown is never partially
   covered by another truck icon sitting on a neighbouring connector.
   `:has()` covers modern browsers; the `.picker-open` class is set by JS
   for older Safari / Edge. */
.bom-transport-icon-group:has(.bom-transport-picker.show),
.bom-transport-icon-group.picker-open { z-index: 1500; }
.bom-transport-icon-btn {
  position: relative;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--c-surface);
  border: 1px solid var(--c-border-2);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: var(--sh-xs);
  color: var(--c-text-2);
  transition: border-color .15s ease, box-shadow .15s ease;
  font-size: 0;  /* hide the text "+" so we can render a perfect glyph below */
}
/* When no transport is set the inner content is the literal "+". We replace it
   with a perfect cross drawn via two ::before/::after rects so it is always
   geometrically centered. The has-transport state shows a lucide icon and we
   restore font-size for the icon container only. */
.bom-transport-icon-btn:not(.has-transport)::before {
  content: ""; position: absolute;
  width: 10px; height: 2px; background: currentColor;
}
.bom-transport-icon-btn:not(.has-transport)::after {
  content: ""; position: absolute;
  width: 2px; height: 10px; background: currentColor;
}
.bom-transport-icon-btn.has-transport { font-size: 14px; }
.bom-transport-icon-btn:hover {
  border-color: var(--c-primary);
  box-shadow: var(--sh-sm);
}
.bom-transport-icon-btn.has-transport {
  background: var(--c-primary-soft);
  border-color: var(--c-primary);
  color: var(--c-primary);
}
/* User ticket: transport icons too small — bump from 14 to 18 px. */
.bom-transport-icon-btn i { width: 18px; height: 18px; }
.bom-transport-icon-btn i svg { width: 18px; height: 18px; }
.bom-transport-picker {
  display: none;
  position: absolute;
  top: 34px; left: 50%;
  transform: translateX(-50%);
  /* Solid white card so the BOM tree (paths + truck icons) below the dropdown
     doesn't bleed through. The previous version relied on var(--c-surface)
     but the items had per-item `background: var(--c-bg)` with no fill on the
     gaps, so the SVG underneath was visible between rows. */
  background: #ffffff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  box-shadow: var(--sh-lg);
  padding: 6px;
  z-index: 1000;
  white-space: nowrap;
  min-width: 200px;
}
.bom-transport-picker.show {
  /* Stack the 6 modes vertically — much easier to read than a wrap row, and
     guarantees the white card background covers every gap. */
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.bom-transport-picker-item {
  height: 36px;
  padding: 0 10px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  /* Items inherit the white card background. We only paint a fill on hover
     / selected so the closed-state items blend with the card. */
  background: transparent;
  display: flex; align-items: center; gap: 8px;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
  font-size: 13px; color: var(--c-text-2);
  white-space: nowrap;
  width: 100%;
  box-sizing: border-box;
}
.bom-transport-picker-item:hover { background: var(--c-primary-soft); border-color: var(--c-primary); }
.bom-transport-picker-item.selected { background: var(--c-primary-soft); border-color: var(--c-primary); color: var(--c-primary); }
.bom-transport-picker-item i { width: 16px; height: 16px; flex-shrink: 0; }
.bom-transport-picker-item.clear {
  color: var(--c-danger-text);
  border-top: 1px solid var(--c-border);
  margin-top: 4px;
  padding-top: 4px;
  justify-content: center;
}
.bom-transport-picker-label { display: inline; }

/* ============ LABELS GRID ============ */
.bom-labels-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.lbl-card {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface);
  box-shadow: var(--sh-xs);
}
.lbl-icon {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 4px;
}
.lbl-svg { width: 56px; height: 56px; object-fit: contain; }
.lbl-icon:has(.lbl-svg + .lbl-svg) .lbl-svg { width: 28px; height: 28px; }
.lbl-svg-placeholder {
  width: 56px; height: 56px;
  background: var(--c-bg-2);
  border-radius: var(--r-md);
  display: grid; place-items: center;
  color: var(--c-text-4);
}
.lbl-body { display: flex; flex-direction: column; gap: 4px; }
.lbl-title { font-size: 13px; font-weight: 600; color: var(--c-text); }
.lbl-chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--r-full);
  font-size: 11px; font-weight: 600;
  align-self: flex-start;
}

/* ============ DROP ZONES ============ */
.drop-zone {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 28px;
  background: var(--c-bg);
  border: 2px solid var(--c-border-2);
  border-radius: var(--r-md);
  text-align: center;
  cursor: pointer;
  color: var(--c-text-2);
  transition: border-color .15s ease, background .15s ease;
}
.drop-zone:hover { border-color: var(--c-primary); background: var(--c-primary-soft); color: var(--c-primary); }
.drop-zone.drag-over {
  border-color: var(--c-primary);
  background: var(--c-primary-soft);
  color: var(--c-primary);
}
.drop-zone i { width: 32px; height: 32px; }

.lbl-validate-zone {
  margin-top: 8px;
  padding: 10px;
  border: 1px solid var(--c-border-2);
  border-radius: var(--r-sm);
  background: var(--c-bg);
  display: flex; flex-direction: column; gap: 8px;
}
.lbl-validate-hint { font-size: 11px; color: var(--c-text-3); }
.lbl-drop-zone {
  padding: 10px;
  border: 1px solid var(--c-primary);
  border-radius: var(--r-sm);
  background: var(--c-primary-soft);
  text-align: center;
  cursor: pointer;
  font-size: 12px;
  color: var(--c-info-text);
}
.lbl-drop-zone:hover, .lbl-drop-zone.drag-over { background: var(--c-info-soft); }
.lbl-drop-zone i { width: 14px; height: 14px; vertical-align: middle; }
.lbl-url-row { display: flex; gap: 6px; align-items: center; }
.lbl-url-input { flex: 1; height: 30px; font-size: 12px; padding: 4px 10px; }
.lbl-url-row .btn-sm { padding: 0 10px; font-size: 12px; height: 30px; }
.lbl-status { font-size: 11px; }
.lbl-validated {
  margin-top: 8px;
  display: flex; align-items: center; gap: 6px;
  font-size: 12px;
  color: var(--c-text);
  padding: 6px 10px;
  background: var(--c-bg-2);
  border-radius: var(--r-sm);
}
.lbl-validated i { width: 14px; height: 14px; }
.lbl-unvalidate {
  margin-left: auto;
  background: none; border: none;
  cursor: pointer;
  color: var(--c-text-3);
  font-size: 11px;
  display: inline-flex; align-items: center; gap: 2px;
  white-space: nowrap;          /* Ticket "Label - retours à la ligne": Undo sur une seule ligne */
  flex-shrink: 0;
}
.lbl-unvalidate:hover { color: var(--c-danger); }
.lbl-unvalidate i { width: 12px; height: 12px; }

/* ============ DOC FIELD ============ */
.doc-field {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 12px;
  padding: 12px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
}
.doc-field-drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  padding: 12px;
  background: var(--c-bg);
  border: 2px solid var(--c-border-2);
  border-radius: var(--r-sm);
  text-align: center;
  color: var(--c-text-3);
  font-size: 12px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.doc-field-drop:hover { border-color: var(--c-primary); background: var(--c-primary-soft); color: var(--c-primary); }
.doc-field-drop.drag-over { border-color: var(--c-primary); background: var(--c-primary-soft); color: var(--c-primary); }
.doc-field-drop i { width: 20px; height: 20px; }
.doc-field-drop strong { font-size: 12px; font-weight: 600; }
.doc-field-drop small  { font-size: 11px; color: var(--c-text-4); }
.doc-field-right {
  display: flex; flex-direction: column; gap: 6px; justify-content: center;
}
/* "OR PASTE A URL" divider — flex with two flanking lines, no overlap. */
.doc-field-or {
  display: flex; align-items: center; gap: 10px;
  font-size: 10px;
  color: var(--c-text-4);
  text-transform: uppercase; letter-spacing: .6px;
  font-weight: 600;
  padding: 2px 0;
  white-space: nowrap;
}
.doc-field-or::before, .doc-field-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--c-border);
}
.doc-field-url { display: flex; gap: 6px; }
.doc-field-url input {
  flex: 1; height: 32px; padding: 4px 10px; font-size: 12px;
}
.doc-field-url button {
  height: 32px; padding: 0 12px;
  background: var(--c-primary); color: #fff;
  border: 0; border-radius: var(--r-sm);
  font-size: 12px; font-weight: 500;
  cursor: pointer;
}
.doc-field-url button:hover { background: var(--c-primary-hover); }
.doc-field-status {
  grid-column: 1 / -1;
  font-size: 12px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
}
.doc-field-status.has-doc {
  background: var(--c-success-soft);
  color: var(--c-success-text);
  display: flex; align-items: center; gap: 8px;
}
.doc-field-status.has-doc a { color: var(--c-success-text); font-weight: 500; }
.doc-field-status.has-doc .clear-btn {
  margin-left: auto;
  background: none; border: 0;
  color: var(--c-text-3); cursor: pointer;
  display: inline-flex; align-items: center; gap: 2px;
  font-size: 11px;
}
.doc-field-status.has-doc .clear-btn:hover { color: var(--c-danger); }
.doc-field-status.has-doc .clear-btn i { width: 12px; height: 12px; }
.doc-field-status.uploading { background: var(--c-info-soft); color: var(--c-info-text); }
.doc-field-status.error     { background: var(--c-danger-soft); color: var(--c-danger-text); }

@media (max-width: 640px) {
  .doc-field { grid-template-columns: 1fr; }
}

/* =========================================================================
   21ST.DEV-INSPIRED COMPONENTS — VANILLA CSS PORT
   Tickets: UX général, Compliance pastille, Liens URL, Progress steps batch
   ========================================================================= */

/* --- Badge-2 outline (status & category) ----------------------------- */
.badge2 {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px;
  padding: 2px 8px; min-height: 20px;
  border-radius: 6px;
  border: 1px solid transparent;
  font-size: 11px; font-weight: 500; line-height: 1.2;
  white-space: nowrap;
}
.badge2.size-md { padding: 3px 10px; min-height: 22px; font-size: 12px; }
.badge2.size-lg { padding: 4px 12px; min-height: 26px; font-size: 13px; }

/* outline appearance — palette modifclaude.pdf */
.badge2.outline { background: transparent; border-color: currentColor; }
.badge2.outline.success    { color: var(--c-success-text); border-color: var(--c-success-border); background: var(--c-success-soft); }
.badge2.outline.warning    { color: var(--c-warn-text);    border-color: var(--c-warn-border);    background: var(--c-warn-soft); }
.badge2.outline.destructive{ color: var(--c-danger-text);  border-color: var(--c-danger-border);  background: var(--c-danger-soft); }
.badge2.outline.info       { color: var(--c-info-text);    border-color: var(--c-info-border);    background: var(--c-info-soft); }
.badge2.outline.primary    { color: var(--c-info-text);    border-color: var(--c-info-border);    background: var(--c-info-soft); }
.badge2.outline.neutral,
.badge2.outline.secondary  { color: var(--c-draft-text);   border-color: var(--c-draft-border);   background: var(--c-draft-soft); }

/* category outline = gris (Draft + Battery category badges) */
.badge2.cat { color: var(--c-draft-text); border: 1px solid var(--c-draft-border); background: var(--c-draft-soft); }

/* Batch stage badges */
.badge2.stage-draft     { color: var(--c-draft-text);   background: var(--c-draft-soft);   border-color: var(--c-draft-border); }
.badge2.stage-planned   { color: var(--c-warn-text);    background: var(--c-warn-soft);    border-color: var(--c-warn-border); }
.badge2.stage-produced  { color: var(--c-info-text);    background: var(--c-info-soft);    border-color: var(--c-info-border); }
.badge2.stage-active    { color: var(--c-success-text); background: var(--c-success-soft); border-color: var(--c-success-border); }
.badge2.stage-completed { color: var(--c-success-text); background: var(--c-success-soft); border-color: var(--c-success-border); }
.badge2.stage-archived  { color: var(--c-archive-text); background: var(--c-archive-soft); border-color: var(--c-archive-border); }

/* Model status badges */
.badge2.modelstatus-draft     { color: var(--c-draft-text);   background: var(--c-draft-soft);   border-color: var(--c-draft-border); }
.badge2.modelstatus-completed { color: var(--c-success-text); background: var(--c-success-soft); border-color: var(--c-success-border); }
.badge2.modelstatus-archived  { color: var(--c-archive-text); background: var(--c-archive-soft); border-color: var(--c-archive-border); }

/* --- Badge dot (risk indicator) -------------------------------------- */
.badge-dot {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px;
  border: 1px solid currentColor;
  font-size: 11px; font-weight: 500; line-height: 1.2;
  background: transparent;
  white-space: nowrap;
}
.badge-dot::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; opacity: 0.85;
}
.badge-dot.low      { color: var(--c-success-text); border-color: var(--c-success-border); background: var(--c-success-soft); }
.badge-dot.medium   { color: var(--c-warn-text);    border-color: var(--c-warn-border);    background: var(--c-warn-soft); }
.badge-dot.high     { color: var(--c-danger-text);  border-color: var(--c-danger-border);  background: var(--c-danger-soft); }
.badge-dot.unknown  { color: var(--c-text-3);       border-color: var(--c-border-2);       background: var(--c-surface); }

/* --- Compliance circle badge (ticket #36 + #40) ---------------------- */
.compl-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  padding: 4px;
  font-size: 12px; font-weight: 700; line-height: 1;
  color: #fff;
  flex-shrink: 0;
  box-sizing: border-box;
}
.compl-badge.size-sm { width: 32px; height: 32px; font-size: 10px; padding: 3px; }
.compl-badge.size-lg { width: 52px; height: 52px; font-size: 14px; padding: 5px; }
.compl-badge.green   { background: var(--c-success); color: #fff; }
.compl-badge.orange  { background: var(--c-warn);    color: var(--c-warn-text); }
.compl-badge.red     { background: var(--c-danger);  color: #fff; }
.compl-badge.gray    { background: var(--c-draft-soft); color: var(--c-draft-text); }

/* --- Progress steps (Batch status: Draft → Planned → Produced → Active) */
.progress-steps {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 0; padding: 8px 16px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  position: relative;
}
.progress-steps .step {
  display: flex; flex-direction: column; align-items: center;
  gap: 6px; flex: 1; min-width: 0; position: relative;
  text-align: center;
}
.progress-steps .step-circle {
  width: 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-bg-2); color: var(--c-text-3);
  font-size: 13px; font-weight: 600;
  border: 2px solid var(--c-border-2);
  z-index: 1;
}
.progress-steps .step-circle i { width: 14px; height: 14px; }
.progress-steps .step-label {
  font-size: 11px; color: var(--c-text-3); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.progress-steps .step.done .step-circle {
  background: var(--c-success); color: #fff; border-color: var(--c-success);
}
.progress-steps .step.done .step-label { color: var(--c-success-text); }
.progress-steps .step.current .step-circle {
  background: var(--c-primary); color: #fff; border-color: var(--c-primary);
  box-shadow: 0 0 0 3px var(--c-primary-ring);
}
.progress-steps .step.current .step-label { color: var(--c-primary); font-weight: 600; }
.progress-steps .step.todo .step-circle {
  background: var(--c-bg-2); color: var(--c-text-4); border-color: var(--c-border-2);
}
/* connector line */
.progress-steps .step + .step::before {
  content: ""; position: absolute;
  top: 16px; left: -50%; right: 50%; height: 2px;
  background: var(--c-border-2);
  z-index: 0;
}
.progress-steps .step.done + .step::before,
.progress-steps .step.done + .step.done::before { background: var(--c-success); }
.progress-steps .step.done + .step.current::before { background: var(--c-success); }

/* Once the batch is active, the entire progress bar is green (no blue).
   Mark the host with data-stage="active" or data-stage="completed". */
.progress-steps[data-stage="active"] .step.current .step-circle,
.progress-steps[data-stage="completed"] .step.current .step-circle {
  background: var(--c-success); color: #fff; border-color: var(--c-success);
  box-shadow: 0 0 0 3px rgba(61, 124, 81, .18);
}
.progress-steps[data-stage="active"] .step.current .step-label,
.progress-steps[data-stage="completed"] .step.current .step-label {
  color: var(--c-success-text);
}
.progress-steps[data-stage="active"] .step.done + .step.current::before,
.progress-steps[data-stage="completed"] .step.done + .step.current::before {
  background: var(--c-success);
}

/* --- URL link styling (Liens URL ticket: tous les liens URL en bleu) -- */
.url-link, a.url-link, .field-value a, td a.url-cell,
a[target="_blank"]:not(.btn):not(.no-link-style) {
  color: var(--c-primary);
  text-decoration: underline;
  text-decoration-color: rgba(37, 99, 235, 0.3);
  text-underline-offset: 2px;
}
.url-link:hover,
a[target="_blank"]:not(.btn):not(.no-link-style):hover {
  color: var(--c-primary-hover);
  text-decoration-color: var(--c-primary-hover);
}

/* --- Dropdown searchable (Menus déroulants ticket) ------------------- */
.dropdown-search {
  position: relative; display: inline-block; width: 100%;
}
.dropdown-search input {
  width: 100%; padding: 8px 32px 8px 12px;
  border: 1px solid var(--c-border-2);
  border-radius: var(--r-md);
  font-size: 13px; background: #fff;
}
.dropdown-search input:focus { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-primary-ring); }
.dropdown-search-list {
  position: absolute; top: 100%; left: 0; right: 0;
  max-height: 240px; overflow-y: auto;
  background: #fff;
  border: 1px solid var(--c-border-2);
  border-radius: var(--r-md);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  z-index: 1000; margin-top: 4px;
  display: none;
}
.dropdown-search.open .dropdown-search-list { display: block; }
.dropdown-search-list .opt {
  padding: 8px 12px; cursor: pointer; font-size: 13px;
}
.dropdown-search-list .opt:hover,
.dropdown-search-list .opt.active { background: var(--c-bg-2); }
.dropdown-search-list .opt.selected { background: var(--c-primary-soft); color: var(--c-primary); }
.dropdown-search-list .empty { padding: 12px; color: var(--c-text-3); text-align: center; font-size: 12px; }

/* --- Unified Drag & drop zone (ticket B7) ---------------------------- */
.dropzone {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  border: 2px solid var(--c-border-2);
  border-radius: var(--r-md);
  padding: 36px 24px;
  text-align: center;
  background: var(--c-bg);
  transition: all 0.15s ease;
  cursor: pointer;
  color: var(--c-text-2);
}
.dropzone:hover, .dropzone.dragover, .dropzone.drag, .dropzone.drag-over {
  border-color: var(--c-primary);
  background: var(--c-primary-soft);
}
.dropzone .dropzone-icon {
  display: inline-grid; place-items: center;
  width: 48px; height: 48px;
  border-radius: 999px;
  background: var(--c-bg-2);
  color: var(--c-text-3);
  margin-bottom: 4px;
}
.dropzone .dropzone-icon i { width: 22px; height: 22px; }
.dropzone .dropzone-title {
  font-size: 14px; font-weight: 600; color: var(--c-text);
}
.dropzone .dropzone-hint { font-size: 12px; color: var(--c-text-3); }
.dropzone .dropzone-types { font-size: 11px; color: var(--c-text-4); }
.dropzone input[type=file] { display: none; }
/* Legacy single-icon fallback so existing dropzones that don't yet use the
   wrapper classes still render OK. */
.dropzone > i { width: 28px; height: 28px; color: var(--c-text-3); margin-bottom: 4px; }
.dropzone .hint { font-size: 12px; color: var(--c-text-3); }

/* --- Confirm dialog (ticket B8) -------------------------------------- */
.confirm-dialog-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.20);
  display: flex; align-items: center; justify-content: center;
  z-index: 10000;
  padding: 16px;
  animation: fade-in .12s ease;
}
.confirm-dialog-popup {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  max-width: 420px; width: 100%;
  padding: 24px;
  animation: modal-in .15s cubic-bezier(.16,1,.3,1);
}
.confirm-dialog-title {
  font-size: 18px; font-weight: 700;
  color: var(--c-text);
  margin-bottom: 8px;
}
.confirm-dialog-message {
  font-size: 14px; color: var(--c-text-3);
  margin-bottom: 20px;
  line-height: 1.45;
}
.confirm-dialog-actions {
  display: flex; justify-content: flex-end; gap: 8px;
}

/* --- Identity compliance number en noir (ticket #21) ---------------- */
.kpi-tile .kpi-value.identity-compliance,
.compl-summary .compl-value-num {
  color: var(--c-text);
}

/* --- Filter row (Choix des filtres côte à côte ticket) ---------------
   Force `width:auto` on selects/inputs to defeat the global `select{width:100%}`
   rule that otherwise causes them to stack vertically. */
.filter-row {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  margin-bottom: 16px;
}
.filter-row > * { flex: 0 0 auto; }
/* Push the Columns toggle to the right end of the filter-row, aligned with
   the search box (ticket Models — Columns + searchbar must be side-by-side). */
.filter-row .cols-toggle-wrap { margin-left: auto; }
.filter-row select,
.filter-row input[type="text"],
.filter-row input[type="search"] {
  width: auto !important;
  min-width: 160px;
  height: 38px;
  padding: 6px 32px 6px 12px;
  font-size: 13px;
  border: 1px solid var(--c-border-2);
  border-radius: var(--r-md);
  background-color: #fff;
}
.filter-row .search-box {
  width: auto;
  min-width: 240px;
  height: 38px;
}
.filter-row .search-box input {
  height: 100%;
  border: 0;
  background: transparent;
}
/* Counter LinkedSelect's <span class="ls-search-wrap"> wrapper which would
   otherwise inherit display:block and force the select to wrap. */
.filter-row .ls-search-wrap {
  display: inline-block;
  width: auto;
  flex: 0 0 auto;
  min-width: 200px;
  position: relative;
}
.filter-row .ls-search-wrap select { width: 100% !important; }

/* --- Pagination "voir plus" (UX tableau ticket) --------------------- */
.load-more-row {
  text-align: center; padding: 16px 0;
}
.load-more-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px;
  border: 1px solid var(--c-border-2); background: #fff;
  border-radius: var(--r-md);
  font-size: 13px; cursor: pointer;
  color: var(--c-text-2);
}
.load-more-btn:hover { background: var(--c-bg-2); border-color: var(--c-text-4); }

/* --- Table header gris + texte gris foncé (Yacine ticket) ----------- */
table.tbl-styled thead th,
.table-wrap table thead th {
  background: var(--c-bg-2);
  color: var(--c-text-2);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Excel-style per-column filter (ticket "pour filtrage mettre directement
   dans texte du tableau avec flèche qui va vers le bas comme sur Excel") */
table.tbl-styled thead th .th-filter-arrow {
  display: inline-block; margin-left: 4px;
  font-size: 9px; cursor: pointer; opacity: 0.4;
  user-select: none;
}
table.tbl-styled thead th .th-filter-arrow:hover { opacity: 1; color: var(--c-primary); }
table.tbl-styled thead th.has-filter .th-filter-arrow { opacity: 1; color: var(--c-primary); font-weight: bold; }
.th-filter-popup {
  position: absolute; z-index: 1000;
  background: #fff; border: 1px solid var(--c-border-2);
  border-radius: var(--r-md); box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  min-width: 220px; max-width: 320px;
  padding: 8px;
}
.th-filter-search { padding-bottom: 6px; border-bottom: 1px solid var(--c-border); margin-bottom: 6px; }
.th-filter-search input {
  width: 100%; padding: 6px 8px;
  border: 1px solid var(--c-border-2); border-radius: var(--r-sm);
  font-size: 12px;
}
.th-filter-list {
  max-height: 240px; overflow-y: auto;
  font-size: 13px;
}
.th-filter-item {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 6px; cursor: pointer;
  text-transform: none; letter-spacing: 0;
  font-weight: normal; color: var(--c-text);
}
.th-filter-item:hover { background: var(--c-bg-2); }
.th-filter-item input { width: auto; margin: 0; }
.th-filter-actions {
  display: flex; justify-content: space-between; gap: 8px;
  padding-top: 6px; border-top: 1px solid var(--c-border); margin-top: 6px;
}
.th-filter-actions button {
  padding: 4px 10px; font-size: 12px;
  border: 1px solid var(--c-border-2); background: #fff;
  border-radius: var(--r-sm); cursor: pointer;
}
.th-filter-actions .th-filter-apply { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
.th-filter-actions .th-filter-clear:hover { background: var(--c-bg-2); }

/* Sortable column headers (ticket — UNE seule flèche de tri).
   The arrow is now an explicit <span class="th-sort-arrow"> with a Lucide icon,
   added by makeTableSortable; no more ::after pseudo-element. */
table.tbl-styled thead th[data-sort] {
  user-select: none;
  position: relative; padding-right: 22px;
}

/* --- Export button top-left (Yacine ticket) ------------------------- */
.export-toolbar {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 12px;
}
.export-toolbar .left { display: flex; gap: 8px; align-items: center; }

/* --- Compliance summary tile (Identity) ----------------------------- */
.compl-summary {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 20px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
}
.compl-summary .compl-value {
  font-size: 36px; font-weight: 700; line-height: 1;
  color: var(--c-text);  /* noir, pas vert (ticket #21) */
}
.compl-summary .compl-value-pct { font-size: 18px; color: var(--c-text); margin-left: 2px; }
.compl-summary .compl-meta { display: flex; flex-direction: column; gap: 2px; }
.compl-summary .compl-title { font-size: 14px; font-weight: 600; color: var(--c-text); }
.compl-summary .compl-sub { font-size: 12px; color: var(--c-text-3); }

/* --- Sidebar collapsed home click fix (ticket #18) ------------------ */
.sidebar.collapsed .brand[role="button"] { cursor: pointer; }
.sidebar.collapsed .brand:focus,
.sidebar.collapsed .brand:hover { background: var(--c-bg-2); border-radius: var(--r-md); }

/* --- BOM tier color palette (Multi-tier supplier ticket) ------------ */
/* Couleurs déterministes par profondeur de tier (col index 0..4+).
   On ajoute un fond pâle progressif pour aider l'oeil à suivre la hiérarchie. */
.bom-network-card.tier-0 { background: #ffffff; }
.bom-network-card.tier-1 { background: #fafafa; }
.bom-network-card.tier-2 { background: #f5f5f5; }
.bom-network-card.tier-3 { background: #f0f0f0; }
.bom-network-card.tier-4 { background: #ebebeb; }

/* --- Trash icon: red → light gray (Test report + Label tickets) ----- */
.btn-trash, .btn-icon.trash, .icon-trash, button.delete-btn,
.btn[data-action="delete"] i {
  color: var(--c-text-4);
}
.btn-trash:hover, .btn-icon.trash:hover, .icon-trash:hover,
button.delete-btn:hover, .btn[data-action="delete"]:hover i {
  color: var(--c-danger);
}

/* Override .btn-danger when it only contains a trash icon (small icon-only buttons).
   Backgrounds become transparent gray; full-text danger buttons keep their red look. */
.btn.btn-danger.btn-sm:has(i[data-lucide="trash-2"]):not(.btn-text),
.btn-ghost.btn-sm.delBtn,
.btn-ghost.btn-icon-only.delBtn,
.btn-ghost.btn-sm.docDelBtn,
.btn-ghost.btn-sm[data-del-test],
.btn-ghost.btn-sm[data-del-mat],
table .btn.btn-danger.btn-sm,
.data-table .btn.btn-danger.btn-sm {
  background: transparent !important;
  color: var(--c-text-4) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
.btn.btn-danger.btn-sm:has(i[data-lucide="trash-2"]):hover,
.btn-ghost.btn-sm.delBtn:hover,
.btn-ghost.btn-icon-only.delBtn:hover,
.btn-ghost.btn-sm.docDelBtn:hover,
.btn-ghost.btn-sm[data-del-test]:hover,
table .btn.btn-danger.btn-sm:hover,
.data-table .btn.btn-danger.btn-sm:hover {
  color: var(--c-danger) !important;
  background: var(--c-danger-soft) !important;
}

/* =========================================================================
   ENHANCED TABLE PATTERN — 21st.dev project-data-table (vanilla port)
   Ticket Group 3
   ========================================================================= */

/* Animated row entry */
@keyframes slideUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.tbl-styled tbody tr {
  animation: slideUp 0.3s ease;
}
.tbl-styled tbody tr:hover {
  background: var(--c-bg-2);
}

/* Columns visibility toggle button (ticket — design 21st.dev avec titre "Toggle Columns") */
.cols-toggle-wrap { position: relative; display: inline-block; }
/* Popup: position:fixed positioned in JS via getBoundingClientRect() so it
   never overflows the viewport (would otherwise scroll the page). */
.cols-toggle-popup {
  position: fixed;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  box-shadow: var(--sh-md);
  z-index: 1100;
  min-width: 220px;
  padding: 4px 0;
  /* Scroll inside the popup if there are too many columns to fit. */
  max-height: calc(100vh - 100px);
  overflow-y: auto;
}
.cols-popup-title {
  font-size: 11px;
  text-transform: uppercase;
  color: var(--c-text-3);
  letter-spacing: 0.5px;
  font-weight: 600;
  padding: 8px 12px 6px;
}
.cols-popup-sep {
  height: 1px;
  background: var(--c-border);
  margin: 0 0 4px;
  border: 0;
}
.cols-toggle-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  font-size: 13px;
  cursor: pointer;
}
.cols-toggle-item:hover { background: var(--c-bg-2); }
.cols-toggle-item input { margin: 0; }

/* Compliance dot badge (pill style, like risk badge — ticket #compliance) */
.badge-dot.compl-dot.low      { color: var(--c-success-text); border-color: var(--c-success-border); background: var(--c-success-soft); }
.badge-dot.compl-dot.medium   { color: var(--c-warn-text);    border-color: var(--c-warn-border);    background: var(--c-warn-soft); }
.badge-dot.compl-dot.high     { color: var(--c-danger-text);  border-color: var(--c-danger-border);  background: var(--c-danger-soft); }
.badge-dot.compl-dot.unknown  { color: var(--c-text-3); border-color: var(--c-border-2); background: #fff; }

/* Single sort arrow on column headers (ticket — UNE seule flèche de tri) */
.th-sort-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: 6px;
  cursor: pointer;
  color: var(--c-text-3);
  vertical-align: middle;
  flex-shrink: 0;
  opacity: 0.55;
  transition: opacity .15s ease, color .15s ease;
}
.th-sort-arrow:hover { color: var(--c-primary); opacity: 1; }
.th-sort-arrow i,
.th-sort-arrow svg { width: 14px !important; height: 14px !important; stroke-width: 2; }
th.asc .th-sort-arrow,
th.desc .th-sort-arrow { color: var(--c-primary); opacity: 1; }
.th-label { user-select: none; font: inherit; color: inherit; }
.th-label:hover { color: var(--c-primary); }

/* Sort/filter-aware <th>: keep label and arrow on the SAME line, arrow at the right */
.tbl-styled th[data-sort],
.tbl-styled th[data-filter] {
  white-space: nowrap;
}
.tbl-styled th[data-sort] > .th-label,
.tbl-styled th[data-filter] > .th-label {
  display: inline;
  vertical-align: middle;
}

/* Card title margin (supplier ticket #5 — augmenter espace card-title <-> contenu)
   Only when the title is a DIRECT child of .card (not inside a .card-header,
   in which case the card-header's own margin-bottom handles spacing). */
.card > .card-title { margin-bottom: 16px; }
/* When the title sits inside a card-header AND a card-desc follows, keep the
   default tight spacing so both cards align on the same Y. */
.card-header .card-title { margin-bottom: 0; }

/* Per-column filter arrow + popup (already used by makeTableColumnFilters) */
.th-filter-arrow {
  display: inline-block;
  margin-left: 4px;
  cursor: pointer;
  font-size: 10px;
  color: var(--c-text-3);
  user-select: none;
}
.th-filter-arrow:hover { color: var(--c-primary); }
th.has-filter .th-filter-arrow { color: var(--c-primary); font-weight: 700; }
.th-filter-popup {
  position: absolute;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  box-shadow: var(--sh-md);
  z-index: 60;
  min-width: 220px;
  padding: 6px;
  max-height: 360px;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.th-filter-search { padding: 4px; }
.th-filter-search input {
  width: 100%; padding: 6px 8px; font-size: 12px;
  border: 1px solid var(--c-border); border-radius: var(--r-sm);
}
.th-filter-list {
  overflow-y: auto;
  max-height: 220px;
  padding: 4px;
}
.th-filter-item {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 6px;
  font-size: 12px;
  cursor: pointer;
  border-radius: var(--r-sm);
}
.th-filter-item:hover { background: var(--c-bg-2); }
.th-filter-actions {
  display: flex; justify-content: space-between;
  padding: 6px 4px 2px;
  border-top: 1px solid var(--c-border);
  gap: 6px;
}
.th-filter-actions button {
  padding: 4px 10px; font-size: 12px;
  border: 1px solid var(--c-border);
  background: #fff;
  border-radius: var(--r-sm);
  cursor: pointer;
}
.th-filter-actions .th-filter-apply {
  background: var(--c-primary); color: #fff; border-color: var(--c-primary);
}

/* Lock icon banner — small + aligned (ticket #23) */
.form-help.lock-banner {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px;
}
.form-help.lock-banner i {
  width: 14px; height: 14px; flex-shrink: 0;
}

/* ============================================================================
   bp_model.html — Agent 2 tickets (Model + Identity + General Info + Materials)
   ============================================================================ */

/* M4 — top-right Battery Passport compliance chip (replaces removed trash btn). */
.compl-top-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-full);
  background: #fff;
  font-size: 12px; line-height: 1; color: var(--c-text);
  white-space: nowrap;
}
.compl-top-chip.muted { color: var(--c-text-3); }
.compl-top-chip .compl-top-pct { font-weight: 700; font-size: 13px; }
.compl-top-chip .compl-top-label { color: var(--c-text-2); }
.compl-top-chip .compl-top-meta { color: var(--c-text-3); font-variant-numeric: tabular-nums; }
.compl-top-chip.compl-top-ok     { border-color: #bbf7d0; background: var(--c-success-soft); color: var(--c-success-text); }
.compl-top-chip.compl-top-warn   { border-color: #fde68a; background: var(--c-warn-soft);    color: var(--c-warn-text); }
.compl-top-chip.compl-top-danger { border-color: #fecaca; background: var(--c-danger-soft);  color: var(--c-danger-text); }

/* MI5 — clickable compliance cell hover */
.compliance-cell[data-jump-tab]:hover { background: var(--c-bg-2); }

/* MT2 — colored left border per tier; MT7 — cards always white. */
.bom-network-card { background: #fff !important; }
.bom-network-card[data-tier="0"] { border-left: 4px solid var(--c-success); }
/* Tier coloring — palette modifclaude.pdf
   Tier 1 = bleu, 2 = vert, 3 = jaune, 4 = violet, 5+ = gris. */
.bom-network-card[data-tier="1"] { border-left: 4px solid var(--c-info-text); }
.bom-network-card[data-tier="2"] { border-left: 4px solid var(--c-success-text); }
.bom-network-card[data-tier="3"] { border-left: 4px solid var(--c-warn-text); }
.bom-network-card[data-tier="4"] { border-left: 4px solid var(--c-archive-text); }
.bom-network-card[data-tier="5"] { border-left: 4px solid var(--c-draft-text); }

/* MT9 — supplier card lines: Name (top, bold) + 3 key/value rows. Each line truncates. */
.bom-card-line {
  font-size: 12px;
  color: var(--c-text-2);
  line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bom-card-line .bom-card-key {
  display: inline-block;
  width: 64px;
  color: var(--c-text-3);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .2px;
}

/* MT4 — + (add child) always visible (overrides hover-only opacity rule). */
.bom-network-card-add.always-visible { opacity: 1 !important; }

/* MT6 — three-dots menu popover anchored to the card. */
.bom-card-menu-popover {
  position: absolute;
  top: 28px; right: 6px;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  box-shadow: var(--sh-md);
  z-index: 30;
  min-width: 160px;
  padding: 4px;
}
.bom-card-menu-item {
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  padding: 8px 10px;
  background: transparent;
  border: 0;
  border-radius: var(--r-sm);
  font-size: 13px;
  color: var(--c-danger);
  cursor: pointer;
  text-align: left;
}
.bom-card-menu-item:hover { background: var(--c-danger-soft); }
.bom-card-menu-item i { width: 14px; height: 14px; }

/* MT6 — three-dots button styling: appears as a real button on the card. */
.bom-network-card-menu {
  position: absolute;
  top: 6px; right: 6px;
  width: 22px; height: 22px;
  background: transparent;
  border: 0;
  border-radius: var(--r-sm);
  color: var(--c-text-3);
  font-size: 16px; line-height: 1;
  cursor: pointer;
  display: grid; place-items: center;
}
.bom-network-card-menu:hover { background: var(--c-bg-2); color: var(--c-text); }

/* User ticket: transport icons trop petites - agrandies à 18px. */
.bom-transport-icon-btn i,
.bom-transport-icon-btn svg { width: 18px !important; height: 18px !important; }

/* MG2 — searchable country select */
.searchable-select { position: relative; }
.searchable-select input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--c-border-2);
  border-radius: var(--r-md);
  font-size: 13px;
  background: #fff;
}
.searchable-select-list li:hover { background: var(--c-bg-2); }