/* ── Tokens ───────────────────────────────────────────────────────────────── */
:root {
  --red:        #a90034;
  --red-dark:   #8a0029;
  --red-light:  #fff0f4;
  --gray:       #4f4f4f;
  --gray-light: #787878;
  --bg:         #f8f8f8;
  --surface:    #ffffff;
  --border:     #e2e2e2;
  --border2:    #cccccc;
  --text:       #1a1a1a;
  --text2:      #4f4f4f;
  --muted:      #888888;
  --r-sm: 6px; --r: 10px; --r-lg: 14px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.07);
  --shadow:    0 2px 10px rgba(0,0,0,.09);
}

/* ── Reset ────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: Ubuntu, Arial, sans-serif; font-size: 14px; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font-family: inherit; }
h2 { font-size: 20px; font-weight: 700; }
h3 { font-size: 14px; font-weight: 700; color: var(--text); }
h4 { font-size: 13px; font-weight: 700; }
a { color: var(--red); text-decoration: none; }
a:hover { text-decoration: underline; }
code { background: #f0f0f0; border-radius: 4px; padding: 2px 6px; font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: var(--text2); }
ul.links { padding-left: 18px; display: grid; gap: 8px; }

/* ── Login page ───────────────────────────────────────────────────────────── */
#login-page {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #1a1a2e 0%, #2d0a1a 40%, #a90034 100%);
  position: relative; overflow: hidden;
}
#login-page::before {
  content: '';
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}
#login-page::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 25% 55%, rgba(169,0,52,.35) 0%, transparent 55%),
              radial-gradient(ellipse at 75% 20%, rgba(255,255,255,.04) 0%, transparent 50%);
  pointer-events: none;
}
body.authenticated #login-page { display: none; }

.login-card {
  position: relative; z-index: 1;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  padding: 48px 44px;
  width: 100%; max-width: 420px;
}
.login-logo { margin-bottom: 32px; }
.login-logo h1 { font-size: 22px; font-weight: 800; color: var(--text); }
.login-logo p  { font-size: 13px; color: var(--muted); margin-top: 4px; }
.login-logo .logo-bar { width: 36px; height: 4px; background: var(--red); border-radius: 2px; margin-top: 10px; }
.app-version { font-size: 11px; color: var(--muted); margin: 10px 0 0; letter-spacing: .03em; }
.app-version:empty { display: none; }
.sidebar-brand .app-version { margin: 8px 0 0; font-size: 10px; opacity: .7; }
.login-card .field { margin-bottom: 16px; }
.login-card .field label { display: block; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 7px; }
.login-card input { width: 100%; border: 1.5px solid var(--border2); border-radius: var(--r-sm); padding: 11px 14px; font-size: 14px; background: var(--surface); color: var(--text); }
.login-card input:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(169,0,52,.10); }
.login-card input::placeholder { color: #bbb; }
.btn-login { width: 100%; padding: 12px; background: var(--red); color: #fff; border: none; border-radius: var(--r-sm); font-size: 14px; font-weight: 700; cursor: pointer; margin-top: 8px; transition: background .15s; }
.btn-login:hover { background: var(--red-dark); }
#loginError { font-size: 13px; color: var(--red); margin-top: 12px; text-align: center; min-height: 18px; }

/* ── App layout ───────────────────────────────────────────────────────────── */
.app { display: none; grid-template-columns: 240px 1fr; min-height: 100vh; }
body.authenticated .app { display: grid; }

/* ── Sidebar ──────────────────────────────────────────────────────────────── */
.sidebar {
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.sidebar-brand { padding: 24px 20px 18px; border-bottom: 1px solid var(--border); }
.sidebar-brand h1 { font-size: 17px; font-weight: 800; color: var(--text); }
.sidebar-brand p  { font-size: 11px; color: var(--muted); margin-top: 3px; }
.sidebar-brand .brand-bar { width: 28px; height: 3px; background: var(--red); border-radius: 2px; margin-top: 10px; }

.sidebar-nav { padding: 14px 10px; flex: 1; display: grid; align-content: start; gap: 2px; }
.sidebar-foot {
  margin-top: auto;
  padding: 14px 16px;
  border-top: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px;
}
.sidebar-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--red); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; flex-shrink: 0;
}
.sidebar-user-info { flex: 1; min-width: 0; }
.sidebar-user-name { font-size: 12px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user-role { font-size: 10.5px; color: var(--muted); }
.sidebar-logout {
  background: transparent; border: 1.5px solid var(--border2);
  border-radius: 6px; padding: 4px 8px;
  font-size: 14px; color: var(--muted); cursor: pointer;
  transition: color .12s, border-color .12s; flex-shrink: 0;
}
.sidebar-logout:hover { color: var(--red); border-color: var(--red); }
.nav-btn {
  width: 100%; text-align: left;
  padding: 10px 13px;
  border-radius: var(--r-sm);
  border: none; background: transparent;
  color: var(--text2);
  font-size: 13px; font-weight: 500;
  cursor: pointer;
  display: flex; align-items: center; gap: 10px;
  transition: background .12s, color .12s;
}
.nav-btn:hover { background: var(--bg); color: var(--text); }
.nav-btn.active { background: var(--red); color: #fff; font-weight: 600; }
.nav-icon { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.nav-icon svg { width: 18px; height: 18px; display: block; }

/* ── Topbar ───────────────────────────────────────────────────────────────── */
.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 16px 28px;
  display: flex; justify-content: space-between; align-items: center;
  position: sticky; top: 0; z-index: 10;
}
.topbar h2 { font-size: 18px; line-height: 1.2; }
.topbar-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.topbar-right { display: flex; align-items: center; gap: 16px; }
.topbar-user { font-size: 13px; color: var(--muted); }
.btn-logout { padding: 7px 14px; background: transparent; border: 1.5px solid var(--border2); border-radius: var(--r-sm); font-size: 13px; font-weight: 500; color: var(--text2); cursor: pointer; transition: background .12s; }
.btn-logout:hover { background: #f0f0f0; }

/* ── Content ──────────────────────────────────────────────────────────────── */
.content { display: flex; flex-direction: column; overflow: hidden; }
.view-wrap { padding: 22px 26px; display: grid; gap: 18px; align-content: start; flex: 1; }
.view { display: none; gap: 18px; }
.view.active { display: grid; }

/* ── Cards ────────────────────────────────────────────────────────────────── */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 20px; box-shadow: var(--shadow-sm); }
.card-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }

/* ── KPIs ─────────────────────────────────────────────────────────────────── */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 16px 18px; box-shadow: var(--shadow-sm); }
.kpi-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.kpi-value { font-size: 30px; font-weight: 800; color: var(--text); margin-top: 4px; line-height: 1; }

/* Multi-currency KPI value (declared value today): one line per currency,
   no FX conversion. Used when several currencies were declared on the same day. */
.kpi-value-multi { margin-top: 6px; display: flex; flex-direction: column; gap: 4px; }
.kpi-currency-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font-size: 14px;
  line-height: 1.2;
}
.kpi-currency-code {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: .05em;
}
.kpi-currency-amount {
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.kpi-accent { border-left: 3px solid var(--red); }

/* ── Grids ────────────────────────────────────────────────────────────────── */
.grid-2 { display: grid; grid-template-columns: 3fr 2fr; gap: 18px; }
.grid-half { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.grid-3  { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }

/* ── Tables ───────────────────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { padding: 9px 14px; background: var(--bg); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); border-bottom: 1.5px solid var(--border); text-align: left; white-space: nowrap; }
td { padding: 11px 14px; border-bottom: 1px solid #efefef; font-size: 13px; vertical-align: middle; color: var(--text2); }
td:first-child { color: var(--text); font-weight: 500; }
tbody tr:last-child td { border-bottom: none; }
tr[data-id] { cursor: pointer; }
tr[data-id]:hover td { background: var(--red-light); }
.empty-row td { color: var(--muted); font-style: italic; text-align: center; padding: 20px; }

/* ── Filters ──────────────────────────────────────────────────────────────── */
.filters { display: grid; grid-template-columns: 2fr 1.5fr 1fr 1fr 1fr 1fr 1fr auto; gap: 10px; align-items: end; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.filter-group { display: flex; flex-direction: column; gap: 5px; }
.filter-group label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }

/* ── Inputs ───────────────────────────────────────────────────────────────── */
input, textarea, select {
  width: 100%; border: 1.5px solid var(--border2); border-radius: var(--r-sm);
  padding: 10px 12px; background: var(--surface); font-size: 13px; color: var(--text);
  transition: border-color .12s, box-shadow .12s;
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(169,0,52,.10); }
input::placeholder { color: #bbb; }
select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23888' d='M5 6L0 0h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; cursor: pointer; }
textarea { min-height: 320px; font-family: ui-monospace, Menlo, monospace; font-size: 12px; resize: vertical; }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
button { border: 1.5px solid var(--border2); background: var(--surface); border-radius: var(--r-sm); padding: 10px 18px; cursor: pointer; font-size: 13px; font-weight: 600; transition: background .12s, border-color .12s; white-space: nowrap; color: var(--text2); }
.btn-primary { background: var(--red) !important; color: #fff !important; border-color: var(--red) !important; }
.btn-primary:hover { background: var(--red-dark) !important; border-color: var(--red-dark) !important; }
button.secondary { background: var(--surface); color: var(--text2); border-color: var(--border2); }
button.secondary:hover { background: var(--bg); }
button.small { padding: 5px 11px; font-size: 12px; }
button.btn-danger { background: #fff0f0; border-color: #fca5a5; color: #dc2626; }
button.btn-danger:hover { background: #dc2626; color: #fff; border-color: #dc2626; }

/* form submit */
#createForm button[type="submit"] { background: var(--red); color: #fff; border-color: var(--red); padding: 11px 28px; font-size: 14px; }
#createForm button[type="submit"]:hover { background: var(--red-dark); border-color: var(--red-dark); }
#applyFilters { background: var(--red); color: #fff; border-color: var(--red); }
#applyFilters:hover { background: var(--red-dark); }

/* ── Badges ───────────────────────────────────────────────────────────────── */
.badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; color: #fff; letter-spacing: .03em; }
.badge-lg { padding: 6px 16px; font-size: 13px; }
.badge-xs { padding: 1px 7px; font-size: 10px; font-weight: 600; vertical-align: middle; }
.event-arrow { color: var(--muted); font-weight: 400; margin: 0 4px; }
.event-auto-tag {
  display: inline-block;
  padding: 0 6px;
  margin-left: 4px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #4f46e5;
  background: rgba(79, 70, 229, 0.12);
  border-radius: 4px;
  vertical-align: middle;
}

/* Coloured pill for event_status (SUCCESS / ERROR / WARNING) — used in the
   dashboard "Événements récents" table and in the dossier detail event log. */
.event-status-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .03em;
  vertical-align: middle;
  white-space: nowrap;
}
.event-status-ok      { background: #e7f7ec; color: #137333; }
.event-status-error   { background: #ffe0e6; color: var(--red-dark); }
.event-status-warn    { background: #fff4d6; color: #8a6100; }
.event-status-default { background: #f0f0f0; color: var(--text2); }

/* Per-agent status breakdown pills on the "Production aujourd'hui" table.
   One pill per status the agent has produced today, coloured via STATUS_COLORS. */
.agent-status-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 3px;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  margin-right: 4px;
  margin-bottom: 3px;
  white-space: nowrap;
}
.agent-status-pill strong { font-weight: 800; margin-left: 3px; }

/* Workflow flow diagram on the dashboard — replaces the old vertical list of
   counts. Two rows: happy path on top, exception states at the bottom. Cards
   are light-tinted with a coloured top bar; the arrows are SVG chevrons. */
.status-flow {
  padding: 14px 4px 6px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  overflow-x: auto;
}
.status-flow-row {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
  min-width: max-content;
}
.status-flow-row.exceptions {
  margin-top: 4px;
  padding-top: 18px;
  border-top: 1px dashed var(--border);
  position: relative;
}
.status-flow-exception-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  margin-right: 14px;
  white-space: nowrap;
  align-self: center;
  position: relative;
}
.status-flow-exception-label::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted);
  margin-right: 7px;
  vertical-align: middle;
  opacity: .55;
}
.status-flow-node {
  --status-color: #4f4f4f;
  flex: 0 0 auto;
  min-width: 108px;
  padding: 12px 14px 14px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--status-color) 8%, #fff);
  border-top: 4px solid var(--status-color);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 0 0 1px rgba(0,0,0,0.03);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  position: relative;
}
.status-flow-node:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.10), 0 0 0 1px rgba(0,0,0,0.04);
  background: color-mix(in srgb, var(--status-color) 14%, #fff);
}
.status-flow-node.is-empty {
  opacity: 0.5;
  background: #fafafb;
  border-top-color: color-mix(in srgb, var(--status-color) 35%, #ddd);
}
.status-flow-node.is-empty:hover {
  transform: none;
  background: #fafafb;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 0 0 1px rgba(0,0,0,0.03);
}
.status-flow-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text2);
  white-space: nowrap;
}
.status-flow-count {
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  color: var(--status-color);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.status-flow-node.is-empty .status-flow-count { color: var(--muted); }
.status-flow-arrow {
  color: #c8c8cc;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  user-select: none;
}
.status-flow-arrow svg {
  width: 16px;
  height: 16px;
  display: block;
}

/* 2-col layout for status flow (left) and percentage chart (right) */
.grid-status-panels {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 18px;
}
.grid-status-panels > .card { margin-bottom: 0; }

/* Percentage distribution chart — horizontal bars sorted by count desc. */
.status-pct-chart {
  padding: 10px 4px 4px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.status-pct-row {
  --status-color: #4f4f4f;
  display: grid;
  grid-template-columns: minmax(80px, 110px) 1fr minmax(70px, max-content);
  gap: 12px;
  align-items: center;
  font-size: 12px;
}
.status-pct-label {
  color: var(--text);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.status-pct-bar-wrap {
  background: #f0f0f2;
  border-radius: 6px;
  height: 10px;
  position: relative;
  overflow: hidden;
}
.status-pct-bar {
  background: var(--status-color);
  height: 100%;
  border-radius: 6px;
  min-width: 4px;
  transition: width .35s ease;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.06);
}
.status-pct-value {
  text-align: right;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 13px;
}
.status-pct-perc {
  color: var(--muted);
  font-size: 11px;
  margin-left: 6px;
  font-weight: 600;
}
.status-pct-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  padding-top: 10px;
  margin-top: 6px;
  border-top: 1px solid var(--border);
}
.status-pct-total strong {
  color: var(--text);
  font-size: 16px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  text-transform: none;
}

@media (max-width: 1100px) {
  .grid-status-panels { grid-template-columns: 1fr; }
}

/* Incident reasons card — 3 colonnes (BLOCKED / ERROR / CANCELLED), une mini
   liste de barres par statut. Chaque barre est dimensionnée par rapport au
   max de SON groupe (pas du total global) pour rester lisible quand un statut
   est minoritaire. Les statuts sans dossier sont masqués. */
.incident-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  padding: 8px 4px 4px;
}
.incident-block {
  --status-color: #4f4f4f;
  background: color-mix(in srgb, var(--status-color) 5%, #fff);
  border: 1px solid color-mix(in srgb, var(--status-color) 18%, var(--border));
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.incident-block-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--status-color) 14%, transparent);
}
.incident-block-status {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--status-color);
}
.incident-block-total {
  font-size: 11px;
  color: var(--text2);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.incident-reason-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.incident-reason-row {
  display: grid;
  grid-template-columns: minmax(90px, 1fr) minmax(60px, 90px) 30px;
  gap: 10px;
  align-items: center;
  font-size: 12px;
}
.incident-reason-row.empty {
  color: var(--muted);
  font-style: italic;
  display: block;
  text-align: center;
  padding: 6px 0;
}
.incident-reason-label {
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.incident-reason-bar-wrap {
  background: color-mix(in srgb, var(--status-color) 8%, #f0f0f2);
  border-radius: 4px;
  height: 8px;
  overflow: hidden;
}
.incident-reason-bar {
  background: var(--status-color);
  height: 100%;
  border-radius: 4px;
  min-width: 3px;
  transition: width .35s ease;
}
.incident-reason-count {
  text-align: right;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

/* ── Detail view ──────────────────────────────────────────────────────────── */
.detail-hero { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 20px; box-shadow: var(--shadow-sm); }
.detail-hero-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.detail-meta-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--border); }
.detail-meta-item { padding: 12px 14px; border-right: 1px solid var(--border); }
.detail-meta-item:last-child { border-right: none; }
.detail-meta-item:nth-child(n+5) { border-top: 1px solid var(--border); }
.detail-meta-item .label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 4px; }
.detail-meta-item .val { font-size: 13px; font-weight: 600; color: var(--text); }

/* ── Form layout ──────────────────────────────────────────────────────────── */
.form-section { display: grid; gap: 18px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.span-2 { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.req { color: var(--red); }
.section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.section-header h3 { margin: 0; }
.actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }
.error { color: var(--red); font-size: 12px; margin-top: 6px; }
#recordsMeta { font-size: 12px; color: var(--muted); padding: 10px 0 0; }

/* ── Address cards ────────────────────────────────────────────────────────── */
.addr-card { border: 1.5px solid var(--border); border-radius: var(--r); padding: 16px; background: var(--bg); }
.addr-card-header { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.addr-role-badge { width: 30px; height: 30px; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; color: #fff; flex-shrink: 0; }
.addr-card h4 { font-size: 13px; font-weight: 700; margin: 0 0 2px; }
.addr-card .addr-subtitle { font-size: 11px; color: var(--muted); }
.addr-fields { display: grid; gap: 10px; }
.addr-fields .field label { font-size: 11px; }

/* ── Item cards (positions, colis) ────────────────────────────────────────── */
.item-card { border: 1.5px solid var(--border); border-radius: var(--r); padding: 16px; background: var(--bg); margin-bottom: 10px; }
.item-card:last-child { margin-bottom: 0; }
.item-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.item-header-left { display: flex; align-items: center; gap: 10px; }
.item-num { width: 26px; height: 26px; border-radius: var(--r-sm); background: var(--red-light); color: var(--red); font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.item-header strong { font-size: 13px; font-weight: 700; }

/* ── Pre ──────────────────────────────────────────────────────────────────── */
pre { background: #1a1a1a; color: #e8e8e8; padding: 16px; border-radius: var(--r); overflow: auto; max-height: 360px; font-size: 12px; line-height: 1.6; margin-top: 14px; }

/* ── Swagger UI overrides ─────────────────────────────────────────────────── */
#swagger-ui .swagger-ui .topbar { display: none; }
#swagger-ui .swagger-ui { font-family: inherit; }
#swagger-ui { border-radius: var(--r); overflow: hidden; border: 1px solid var(--border); background: #fff; }

/* ── Form create optimisé ─────────────────────────────────────────────────── */

/* Intern ID mis en avant */
.intern-id-field input {
  font-size: 15px; font-weight: 700; padding: 7px 10px;
  border-color: var(--gray); border-width: 2px;
}
.intern-id-field input:focus { border-color: var(--red); }
.intern-id-field label { font-size: 11px; font-weight: 700; color: var(--text2); }

/* Grilles compactes */
.form-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.form-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }
.form-grid-5 { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 12px; }
.form-grid-7 { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: 12px; }
.form-grid-8 { display: grid; grid-template-columns: repeat(8, minmax(0,1fr)); gap: 12px; }

/* ═══ Vue Création — saisie compacte ═══════════════════════════════════════ */

/* Layout général : moins d'espace, tout visible sans scroll */
#view-create { gap: 8px; }
#view-create .form-section { gap: 8px; }
.content:has(#view-create.active) .view-wrap { padding: 12px 18px; gap: 8px; }
#view-create .card { padding: 10px 14px; }


/* Inputs compacts */
#view-create input:not(.addr-prefill-search):not([type="checkbox"]),
#view-create select {
  padding: 5px 8px;
  font-size: 12px;
}
/* InternID reste plus visible */
#view-create .intern-id-field input { font-size: 14px; padding: 7px 9px; }

/* Labels plus discrets */
#view-create .field { gap: 2px; }
#view-create .field label,
#view-create .addr-fields .field label { font-size: 10px; letter-spacing: .03em; }

/* Grilles internes plus serrées */
#view-create .form-grid-4 { gap: 7px; }
#view-create .form-grid-5 { gap: 7px; }
#view-create .form-grid   { gap: 7px; }
#view-create .section-header { margin-bottom: 8px; }
#view-create .collapsible-header { padding-bottom: 7px; margin-bottom: 9px; }

/* Champs ISO à largeur fixe minimale */
#view-create input[maxlength="2"] { max-width: 50px; text-align: center; }
#view-create input[maxlength="3"] { max-width: 58px; text-align: center; }

/* Inputs numériques (qty, poids, valeur) */
#view-create input[type="number"] { max-width: 88px; }
#view-create input[type="date"]   { max-width: 136px; }

/* Config section repliée : plus de marge agent */
#view-create #configBody .form-grid-4 { margin-bottom: 8px !important; }
#view-create #configBody > div[style*="margin-top:14px"],
#view-create #configBody > div[style*="margin-top: 14px"] { margin-top: 8px !important; }

/* Adresses : cards plus denses */
#view-create .grid-3 { gap: 8px; }
#view-create .addr-card { padding: 9px 11px; }
#view-create .addr-card-header {
  margin-bottom: 7px;
  padding-bottom: 6px;
  gap: 7px;
}
#view-create .addr-role-badge { width: 24px; height: 24px; font-size: 11px; }
#view-create .addr-card h4 { font-size: 12px; }
#view-create .addr-card .addr-subtitle { font-size: 10px; }
#view-create .addr-fields { gap: 5px; }

/* Préfill search compact : hint masqué par défaut */
#view-create .addr-prefill { margin-bottom: 5px; }
#view-create .addr-prefill-search { padding: 4px 8px 4px 28px; font-size: 11px; }
#view-create .addr-prefill-hint { display: none; }

/* Grille adresse 4 colonnes : Rue | CP | Pays | Ville */
.addr-row-addr {
  display: grid;
  grid-template-columns: 2fr 72px 44px 1.4fr;
  gap: 5px;
}
/* Tel + Email */
.addr-row-contact {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 5px;
}

/* Position/colis cards dans le formulaire */
/* Listes scrollables — au-delà de ~6-8 cartes collapsed (ou 2-3 expanded), on
   scrolle à l'intérieur de la section plutôt que de pousser la page. Padding
   droit pour que la scrollbar ne masque pas le bord des cartes. */
#positionsList,
#parcelsList { max-height: 480px; overflow-y: auto; padding-right: 4px; }
#view-create .pos-card { padding: 9px 11px; margin-bottom: 6px; }
#view-create .pos-card-header { margin-bottom: 8px; }
#view-create .pos-card .form-grid-4 { gap: 7px; }
#view-create .pos-card .form-grid-7 { gap: 7px; }
#view-create .pos-card .form-grid-8 { gap: 7px; }

/* Compact (collapsed) pos-card — single-line summary */
.pos-card.collapsed { padding: 6px 10px; cursor: pointer; }
.pos-card.collapsed:hover { border-color: var(--text); }
.pos-card.collapsed .pos-card-header { margin-bottom: 0; }
.pos-card.collapsed .pos-card-body { display: none; }
/* Container takes the full row when expanded so summary slot collapses to 0. */
.pos-card:not(.collapsed) .pos-summary { display: none; }

/* Position grouped lines — replaces form-grid-N to size fields per content
   and visually cluster related fields (qty+type, weights, value+currency…). */
.pos-line { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: end; margin-top: 8px; }
.pos-line .pos-group { display: flex; gap: 5px; align-items: end; flex-wrap: nowrap; }
.pos-line .field { margin: 0; }
.pos-line .field input,
.pos-line .field select { width: 100%; }
/* Per-field widths — match the actual data length expected. */
.pos-line .f-qty       { width: 80px; }
.pos-line .f-pkg-type  { width: 80px; }
.pos-line .f-weight    { width: 110px; }
.pos-line .f-add-qty   { width: 110px; }
.pos-line .f-value     { width: 130px; }
.pos-line .f-currency  { width: 90px; }
.pos-line .f-mark      { flex: 1 1 160px; min-width: 140px; }
.pos-line .f-hs        { width: 150px; }
.pos-line .f-sku       { width: 140px; }
.pos-line .f-desc      { flex: 1 1 240px; min-width: 200px; }
.pos-line .f-coo       { width: 75px; }
.pos-line .f-pref      { width: 130px; }
.pos-line .f-proc      { width: 95px; }
.pos-line .f-voc       { width: 100px; }
.pos-line .f-parcel-id { width: 180px; }
.pos-line .f-parcel-ref{ flex: 1 1 200px; min-width: 160px; }
.pos-summary { display: flex; flex: 1; align-items: center; gap: 14px; min-width: 0; font-size: 12px; }
.pos-summary .ps-desc { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.pos-summary .ps-chip { color: var(--muted); white-space: nowrap; }
.pos-summary .ps-chip code { background: var(--bg); border: 1px solid var(--border); border-radius: 3px; padding: 1px 5px; font-size: 11px; color: inherit; }
.pos-summary .ps-chip strong { color: var(--text); font-weight: 600; }
.pos-summary .ps-empty { color: var(--muted); font-style: italic; }

/* Chevron toggle — only shown when expanded (click anywhere collapses card
   doesn't need it; click on collapsed card expands via cursor:pointer). */
.pos-toggle { background: transparent; border: 1px solid var(--border); border-radius: var(--r-sm); width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; color: var(--muted); }
.pos-toggle:hover { color: var(--text); border-color: var(--text); }
.pos-card.collapsed .pos-toggle { display: none; }

/* Totaux pied de section */
.pos-totals { display: flex; flex-wrap: wrap; gap: 18px 24px; padding: 10px 14px; margin-top: 10px; background: var(--bg); border: 1.5px solid var(--border); border-radius: var(--r); }
.pos-totals .pt-item { display: flex; flex-direction: column; gap: 2px; min-width: 110px; }
.pos-totals .pt-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); font-weight: 600; }
.pos-totals .pt-value { font-size: 15px; font-weight: 700; color: var(--text); }
.pos-totals .pt-value-multi { font-size: 13px; font-weight: 600; line-height: 1.4; }
.pos-totals .pt-value-multi .pt-line { display: block; }

/* Readonly inputs plus discrets */
#view-create .input-readonly { background: var(--bg); color: var(--muted); font-size: 11px; }

/* Section pliable */
.collapsible-header {
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; user-select: none;
  padding-bottom: 10px; border-bottom: 1px solid var(--border); margin-bottom: 14px;
}
.collapsible-header h3 { margin: 0; }
.collapse-toggle { font-size: 12px; color: var(--muted); font-weight: 500; }
.collapsible-body { transition: none; }
.collapsible-body.collapsed { display: none; }

/* Position / colis cards optimisés */
.pos-card { border: 1.5px solid var(--border); border-radius: var(--r); background: var(--bg); padding: 14px; margin-bottom: 8px; }
.pos-card:last-child { margin-bottom: 0; }
.pos-card-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.pos-card-header .item-num { background: var(--red-light); color: var(--red); }
.pos-card-actions { margin-left: auto; display: flex; gap: 6px; }

/* MasterId banner — shown above the parcels list when the operator chose
   "generate a MasterId" instead of typing parcel ids manually. The two modes
   are mutually exclusive (see generateMasterId / cancelMasterIdMode in app.js). */
.master-id-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  margin-bottom: 8px;
  background: #fff5f5;
  border: 1px solid var(--red, #a90034);
  border-radius: var(--r-sm);
}

/* Master parcel badge — surfaced on the first parcel card of the create form
   to remind that "le premier colis = MasterId du dossier". CSS `:first-child`
   does the work so adding/removing parcels just falls out naturally.
   Also hides the "*" required marker on freight cost/currency for non-master
   parcels — the `required` HTML attribute itself is toggled in JS by
   refreshParcelMasterRequiredState() so form validation lines up. */
#parcelsList .master-badge { display: none; }
#parcelsList .pos-card:not(:first-child) .parcel-master-only { display: none; }
#parcelsList .pos-card:first-child .master-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--red, #a90034);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: help;
}

/* Segmented toggle (used inside the groupage block to pick search vs create) */
.seg-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden; background: var(--bg); }
.seg-toggle .seg-btn { background: transparent; border: 0; padding: 6px 14px; font-size: 11px; font-weight: 600; color: var(--text2); cursor: pointer; transition: background 120ms, color 120ms; }
.seg-toggle .seg-btn + .seg-btn { border-left: 1px solid var(--border); }
.seg-toggle .seg-btn:hover { background: var(--surface); }
.seg-toggle .seg-btn.active { background: var(--text); color: #fff; }
.seg-toggle .seg-btn.active:hover { background: var(--text); }

/* Sticky submit */
.sticky-submit {
  position: sticky; bottom: 0; z-index: 20;
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 12px 26px;
  display: none;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 -2px 10px rgba(0,0,0,.06);
}
body.authenticated .content:has(#view-create.active) .sticky-submit { display: flex; }
.sticky-submit .shortcut-hint { font-size: 12px; color: var(--muted); }
.sticky-submit kbd { background: #f0f0f0; border: 1px solid #ccc; border-radius: 4px; padding: 2px 6px; font-size: 11px; font-family: inherit; }
.sticky-submit .submit-actions { display: flex; gap: 10px; align-items: center; }

/* Toast */
.toast {
  /* Positioned below the topbar so it never masks the right-aligned action
     buttons (Enregistrer / Envoyer / Avancer). The topbar uses 16px vertical
     padding around ~32px-tall buttons → ~64px total + small breathing room. */
  position: fixed; top: 80px; right: 24px; z-index: 1000;
  background: #1a1a1a; color: #fff;
  padding: 14px 20px; border-radius: var(--r);
  font-size: 13px; font-weight: 500;
  box-shadow: var(--shadow);
  display: flex; align-items: center; gap: 10px;
  opacity: 0; transform: translateY(-8px);
  transition: opacity .2s, transform .2s;
  pointer-events: none;
  max-width: min(480px, calc(100vw - 48px));
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; color: #aef7c8; }
.toast-icon svg { width: 16px; height: 16px; }
.toast-id { font-weight: 700; color: #aef7c8; }
.toast.toast-error { background: #7f1d1d; }
.toast.toast-error .toast-icon { color: #fecaca; }
#toastMsg { line-height: 1.35; }

/* Champ auto-uppercase visuel */
input[data-uc] { text-transform: uppercase; }

/* ── Validation temps réel ────────────────────────────────────────────────── */
input.f-invalid, select.f-invalid { border-color: var(--red) !important; box-shadow: 0 0 0 3px rgba(169,0,52,.08) !important; }
input.f-valid  { border-color: #2a8a2a !important; }
.f-msg { font-size: 11px; margin-top: 3px; min-height: 14px; line-height: 1.3; display: block; }
.f-msg.f-err   { color: var(--red); }
.f-msg.f-ok    { color: #2a8a2a; }
/* Highlight champ requis vide après tentative submit */
input.field-error { border-color: var(--red) !important; }

/* ── Modal import ─────────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 1000;
  display: flex; align-items: center; justify-content: center;
}
.modal-box {
  background: var(--surface); border-radius: var(--r-lg); box-shadow: 0 8px 40px rgba(0,0,0,.25);
  width: min(640px, 96vw); max-height: 88vh; display: flex; flex-direction: column;
}
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px 16px; border-bottom: 1px solid var(--border);
}
.modal-header h2 { font-size: 16px; }
.modal-close {
  background: none; border: none; font-size: 22px; cursor: pointer; color: var(--muted);
  line-height: 1; padding: 0 4px;
}
.modal-close:hover { color: var(--red); }
.modal-body { flex: 1; overflow-y: auto; padding: 20px 24px; display: flex; flex-direction: column; gap: 14px; }
.modal-footer {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 14px 24px; border-top: 1px solid var(--border);
}

.import-drop-zone {
  border: 2px dashed var(--border2); border-radius: var(--r);
  text-align: center; padding: 40px 24px; color: var(--text2);
  transition: border-color .15s, background .15s;
}
.import-drop-zone.drag-over { border-color: var(--red); background: var(--red-light); }
.drop-icon { font-size: 36px; margin-bottom: 12px; }
.import-samples {
  margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--border);
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 12px; color: var(--muted);
}
.import-samples-label { color: var(--muted); }
.import-sample-link {
  padding: 3px 10px; border: 1px solid var(--border2); border-radius: 12px;
  text-decoration: none; color: var(--text2); background: var(--surface);
  font-weight: 500; font-size: 11px; transition: border-color .15s, color .15s;
}
.import-sample-link:hover { border-color: var(--red); color: var(--red); }
.import-summary {
  background: var(--bg); border-radius: var(--r-sm); padding: 12px 16px;
  margin-bottom: 12px; font-size: 13px; color: var(--text2);
  display: flex; gap: 16px; flex-wrap: wrap;
}
.import-summary strong { color: var(--text); }
.import-preview-list { display: grid; gap: 6px; max-height: 240px; overflow-y: auto; }
.import-preview-item {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg); border-radius: var(--r-sm); padding: 8px 12px; font-size: 12px;
}
.import-preview-item .pi-num { width: 28px; text-align: right; color: var(--muted); }
.import-preview-item .pi-id { font-weight: 600; min-width: 80px; }
.import-preview-item .pi-agent { color: var(--muted); }
.import-results-header {
  padding: 12px 0; font-size: 13px; font-weight: 600; margin-bottom: 8px;
}
.import-result-list { display: grid; gap: 4px; max-height: 300px; overflow-y: auto; }
.import-result-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 12px; border-radius: var(--r-sm); font-size: 12px;
}
.import-result-item.ok  { background: #f0faf0; color: #1a5c1a; }
.import-result-item.err { background: #fff0f4; color: var(--red); }
.import-result-item .ri-icon { font-size: 14px; flex-shrink: 0; }
.import-result-item .ri-id   { font-weight: 600; min-width: 80px; }
.import-result-item .ri-msg  { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Nav divider ─────────────────────────────────────────────────────────── */
.nav-divider { height: 1px; background: var(--border); margin: 8px 12px; }

/* ── Records: selection bar & pagination ─────────────────────────────────── */
.col-check { width: 36px; padding: 0 !important; }
.col-check input[type=checkbox] { width: 15px; height: 15px; cursor: pointer; accent-color: var(--red); }
.row-check-area {
  display: flex; align-items: center; justify-content: center;
  padding: 14px 16px;
  cursor: pointer;
  margin: 0;
  user-select: none;
}
.row-check-area:hover { background: rgba(169, 0, 52, 0.06); }
tr.selected-row td { background: var(--red-light); }

.selection-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; background: var(--red-light);
  border: 1px solid rgba(169,0,52,.2); border-radius: var(--r-sm);
  margin-bottom: 8px; font-size: 13px; color: var(--red); font-weight: 500;
}
.selection-bar .secondary { background: #fff; }

.pagination {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 0 4px; flex-wrap: wrap;
}
.pagination button {
  min-width: 32px; height: 30px; padding: 0 10px; font-size: 12px;
  background: var(--surface); border: 1px solid var(--border2);
  border-radius: var(--r-sm); cursor: pointer; color: var(--text2);
}
.pagination button:hover { border-color: var(--red); color: var(--red); }
.pagination button.pg-active { background: var(--red); color: #fff; border-color: var(--red); font-weight: 600; }
.pagination button:disabled { opacity: .4; cursor: default; }
.pagination .pg-info { font-size: 12px; color: var(--muted); margin-left: 4px; }
.records-meta { font-size: 12px; color: var(--muted); padding-top: 6px; }
.records-toolbar {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 0; margin-top: 6px;
  border-top: 1px solid var(--border);
}
.records-last-updated { font-size: 12px; color: var(--muted); }
.records-last-updated.refreshing { color: var(--red); }

.tr-reason-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tr-reason-tags label {
  display: inline-flex; align-items: center; position: relative;
  padding: 6px 14px; border: 1px solid var(--border); border-radius: 999px;
  font-size: 12px; font-weight: 500; line-height: 1;
  cursor: pointer; user-select: none;
  background: var(--surface); color: var(--text2);
  transition: background .12s ease, color .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.tr-reason-tags label:hover {
  border-color: var(--red); color: var(--red);
  background: rgba(169, 0, 52, 0.04);
}
.tr-reason-tags input[type="checkbox"] {
  position: absolute; opacity: 0; pointer-events: none;
  width: 0; height: 0; margin: 0;
}
.tr-reason-tags label:has(input:checked) {
  background: var(--red); color: #fff; border-color: var(--red);
  box-shadow: 0 1px 2px rgba(169, 0, 52, 0.25);
}
.tr-reason-tags label:has(input:checked):hover { background: #8e002c; border-color: #8e002c; }
.tr-reason-tags label:focus-within {
  outline: 2px solid rgba(169, 0, 52, 0.35); outline-offset: 2px;
}

/* Reason banner — shown between the workflow stepper and the detail hero when
   a record is BLOCKED or ERROR. Horizontal layout with an alert icon on the
   left, title + tags + free-text stacked on the right. */
.reason-banner {
  display: flex; gap: 12px; align-items: flex-start;
  border-radius: var(--r-sm);
  padding: 12px 16px;
  margin: 0 0 12px;
  font-size: 13px;
  border: 1px solid transparent;
  border-left-width: 4px;
}
.reason-banner-blocked {
  background: #fef2f2; border-color: #fca5a5; border-left-color: #b91c1c;
}
.reason-banner-error {
  background: #faf5fb; border-color: #d8b4de; border-left-color: #6a1a6a;
}
.reason-banner-cancelled {
  background: #f5f5f4; border-color: #d6d3d1; border-left-color: #57534e;
}
.reason-banner .reason-banner-icon {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; flex: none; border-radius: 50%;
  margin-top: 1px;
}
.reason-banner-blocked   .reason-banner-icon { background: #fee2e2; color: #991b1b; }
.reason-banner-error     .reason-banner-icon { background: #f3e8f4; color: #6a1a6a; }
.reason-banner-cancelled .reason-banner-icon { background: #e7e5e4; color: #44403c; }
.reason-banner .reason-banner-body { flex: 1; min-width: 0; }
.reason-banner .reason-banner-title {
  font-weight: 700; font-size: 13px; letter-spacing: .01em;
  margin-bottom: 4px;
}
.reason-banner-blocked   .reason-banner-title { color: #991b1b; }
.reason-banner-error     .reason-banner-title { color: #6a1a6a; }
.reason-banner-cancelled .reason-banner-title { color: #44403c; }
.reason-banner .reason-banner-tags {
  display: flex; flex-wrap: wrap; gap: 4px 6px;
  margin-top: 2px;
}
.reason-banner .reason-tag {
  display: inline-block;
  background: var(--surface, #fff); border: 1px solid var(--border, #e5e7eb);
  border-radius: 999px; padding: 2px 10px;
  font-size: 11px; font-weight: 500;
  color: var(--text2, #374151);
}
.reason-banner-blocked   .reason-tag { border-color: #fca5a5; color: #991b1b; }
.reason-banner-error     .reason-tag { border-color: #d8b4de; color: #6a1a6a; }
.reason-banner-cancelled .reason-tag { border-color: #d6d3d1; color: #44403c; }
.reason-banner .reason-banner-text {
  margin-top: 6px;
  color: var(--text2, #374151);
  white-space: pre-wrap;
  font-size: 12.5px;
  line-height: 1.45;
}

.lang-switcher {
  display: inline-flex; align-items: center;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  overflow: hidden; background: var(--surface); margin-right: 4px;
}
.lang-switcher .lang-btn {
  background: transparent; border: 0; padding: 4px 10px;
  font-size: 12px; font-weight: 600; color: var(--muted);
  cursor: pointer; letter-spacing: .3px;
}
.lang-switcher .lang-btn + .lang-btn { border-left: 1px solid var(--border); }
.lang-switcher .lang-btn:hover { color: var(--text); }
.lang-switcher .lang-btn.active { background: var(--red); color: #fff; }

/* ── HS autocomplete ─────────────────────────────────────────────────────── */
.hs-ac-wrap { position: relative; }
.hs-dropdown {
  /* z-index élevé pour passer au-dessus des modales (et de tout overlay
     applicatif). min-width fixe pour que la dropdown reste lisible même
     quand l'input est étroit (HS Code, COO, devise…). max-width borne pour
     éviter qu'elle déborde le viewport sur les longs libellés. */
  position: absolute; top: 100%; left: 0; z-index: 9999;
  min-width: 360px; max-width: 600px;
  background: var(--surface); border: 1px solid var(--border2);
  border-radius: var(--r-sm); box-shadow: var(--shadow);
  max-height: 240px; overflow-y: auto; margin-top: 2px;
}
.hs-option {
  padding: 8px 10px; cursor: pointer; font-size: 12px; border-bottom: 1px solid var(--border);
  display: flex; gap: 8px; align-items: flex-start;
}
.hs-option:last-child { border-bottom: none; }
.hs-option:hover, .hs-option.active { background: var(--red-light); }
.hs-code { font-family: ui-monospace, Menlo, monospace; font-size: 11px; color: var(--red); white-space: nowrap; flex-shrink: 0; min-width: 68px; }
/* Description: wrap on multiple lines when the path is long. word-break
   handles the rare token longer than the column. flex:1 + min-width:0 lets
   the wrap actually trigger inside the flex container. line-height kept tight
   so 4-level paths don't make the row absurdly tall. */
.hs-desc { color: var(--text2); flex: 1; min-width: 0; white-space: normal; overflow-wrap: anywhere; line-height: 1.35; }

/* Group header — common path prefix factored out across the suggestions. Not
   clickable, distinct background so the grouping reads at a glance. */
.hs-group-header {
  padding: 5px 10px;
  font-size: 11px; color: var(--muted); font-weight: 500;
  background: rgba(0,0,0,.03); border-bottom: 1px solid var(--border);
  white-space: normal; overflow-wrap: anywhere; line-height: 1.35;
}
/* Leaves under a group header get a subtle indent + a tree-like prefix so
   the parent-child relationship is visible. */
.hs-option-leaf .hs-desc::before { content: '↳ '; color: var(--muted); }

/* ── Tooltip générique [data-tooltip] ────────────────────────────────────── */
#ui-tooltip {
  position: fixed; z-index: 1100;
  background: #2a2a2a; color: #f0f0f0; font-size: 11px; font-weight: 400;
  white-space: nowrap; padding: 4px 8px; border-radius: 4px;
  pointer-events: none; opacity: 0; transition: opacity .15s;
}

/* ── HS tooltip (detail view) ────────────────────────────────────────────── */
.hs-tooltip {
  position: fixed; z-index: 500; background: #2a2a2a; color: #f0f0f0;
  font-size: 11px; padding: 8px 12px; border-radius: var(--r-sm);
  max-width: 360px; line-height: 1.5; pointer-events: none;
  box-shadow: 0 4px 16px rgba(0,0,0,.3);
}
.hs-code-link { cursor: help; border-bottom: 1px dashed var(--border2); }

/* ── Session expirée ─────────────────────────────────────────────────────── */
#sessionExpiredBanner {
  position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 2000;
  display: flex; align-items: center; justify-content: center;
}
.session-expired-box {
  background: var(--surface); border-radius: var(--r-lg); padding: 40px 48px;
  text-align: center; max-width: 380px; box-shadow: 0 8px 40px rgba(0,0,0,.3);
  display: flex; flex-direction: column; gap: 12px; align-items: center;
}
.session-expired-box h3 { font-size: 20px; }
.session-expired-box p  { font-size: 13px; color: var(--text2); }

/* ── Alertes ─────────────────────────────────────────────────────────────── */
.alert-badge { padding: 2px 8px; border-radius: 99px; font-size: 11px; font-weight: 600; background: #fff0f4; color: var(--red); }

/* ── Utilisateurs ────────────────────────────────────────────────────────── */
.user-active   { color: #2a7a2a; font-weight: 600; }
.user-inactive { color: var(--muted); }

/* ── Référentiels ────────────────────────────────────────────────────────── */
.ref-layout { display: grid; grid-template-columns: 200px 1fr; gap: 16px; align-items: start; }
.ref-sidebar {
  background: var(--surface); border-radius: var(--r); border: 1px solid var(--border);
  padding: 10px; position: sticky; top: 16px;
}
.ref-sidebar-title { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; padding: 4px 8px 8px; }
.ref-nav-btn {
  display: block; width: 100%; text-align: left; padding: 7px 10px;
  background: none; border: none; border-radius: var(--r-sm); cursor: pointer;
  font-size: 12px; color: var(--text2); transition: background .12s, color .12s;
}
.ref-nav-btn:hover { background: var(--bg); color: var(--text); }
.ref-nav-btn.active { background: var(--red-light); color: var(--red); font-weight: 600; }
.ref-content { min-width: 0; }
.ref-edit-form { display: flex; gap: 6px; flex-wrap: wrap; align-items: flex-end; padding: 10px 12px; background: var(--bg); border-radius: var(--r-sm); margin-bottom: 8px; }
.ref-edit-form input, .ref-edit-form select { flex: 1; min-width: 100px; }
.ref-actions { display: flex; gap: 6px; white-space: nowrap; }
.card-action-link { font-size: 12px; font-weight: 500; color: var(--red); cursor: pointer; margin-left: auto; padding: 0 4px; }
.card-action-link:hover { text-decoration: underline; }
.card-title { display: flex; align-items: center; gap: 6px; }
.btn-row-action { background: none; border: none; cursor: pointer; font-size: 13px; padding: 2px 5px; border-radius: 4px; color: var(--muted); line-height: 1; }
.btn-row-action:hover { background: var(--bg); color: var(--text); }
.btn-row-action.danger:hover { color: #b91c1c; }

/* ── Workflow stepper ─────────────────────────────────────────────────────── */
.workflow-stepper {
  padding: 18px 0 4px; overflow-x: auto;
}


/* Track */
.wf-track { display: flex; align-items: center; gap: 0; }
.wf-step { display: flex; flex-direction: column; align-items: center; flex: 1; min-width: 52px; }
.wf-dot {
  width: 30px; height: 30px; border-radius: 50%;
  background: #e8e8e8; border: 2px solid #d4d4d4;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; color: #999; position: relative; z-index: 1;
  transition: background .2s, border-color .2s, box-shadow .2s;
  flex-shrink: 0;
}
/* Done: green with checkmark */
.wf-step.done .wf-dot {
  background: #2a7a2a; border-color: #2a7a2a; color: #fff;
  font-size: 0; /* hide number, show pseudo-element */
}
.wf-step.done .wf-dot::after {
  content: '';
  display: block;
  width: 6px; height: 11px;
  border: 2.5px solid #fff; border-top: none; border-left: none;
  transform: rotate(40deg) translate(0px, -2px);
}
/* Active: red with ring */
.wf-step.active .wf-dot {
  width: 34px; height: 34px; font-size: 13px;
  background: var(--red); border-color: var(--red); color: #fff;
  box-shadow: 0 0 0 4px rgba(169,0,52,.18), 0 2px 8px rgba(169,0,52,.25);
}
/* Side states */
.wf-step.wf-side-blocked   .wf-dot { background: #b91c1c; border-color: #b91c1c; color: #fff; box-shadow: 0 0 0 4px rgba(185,28,28,.16); }
.wf-step.wf-side-error     .wf-dot { background: #6a1a6a; border-color: #6a1a6a; color: #fff; box-shadow: 0 0 0 4px rgba(106,26,106,.16); }
.wf-step.wf-side-cancelled .wf-dot { background: #57534e; border-color: #57534e; color: #fff; box-shadow: 0 0 0 4px rgba(87,83,78,.16); }

/* Labels */
.wf-label { font-size: 10px; color: #aaa; margin-top: 6px; text-align: center; white-space: nowrap; font-weight: 500; }
.wf-step.done   .wf-label { color: #2a7a2a; }
.wf-step.active .wf-label { color: var(--red); font-weight: 700; font-size: 11px; }
.wf-step.wf-side-blocked   .wf-label { color: #b91c1c; font-weight: 700; font-size: 11px; }
.wf-step.wf-side-error     .wf-label { color: #6a1a6a; font-weight: 700; font-size: 11px; }
.wf-step.wf-side-cancelled .wf-label { color: #57534e; font-weight: 700; font-size: 11px; }

/* Author + date shown under each done/active step — "who / when this transition happened". */
.wf-step .wf-author {
  margin-top: 2px;
  font-size: 9.5px; color: var(--muted); font-weight: 500;
  text-align: center;
  max-width: 88px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wf-step .wf-date {
  font-size: 9px; color: var(--muted); font-weight: 400;
  text-align: center;
  max-width: 88px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: .75;
}

/* Connectors */
.wf-line { flex: 1; height: 2px; background: #d4d4d4; margin: 0 1px; position: relative; top: -8px; z-index: 0; }
.wf-line.done { background: #2a7a2a; }
.wf-line.wf-branch { background: #d4d4d4; }

/* Actions zone */
.workflow-actions {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
}
.wf-actions-group { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.wf-actions-group-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); margin-right: 2px; white-space: nowrap;
}
.wf-actions-sep { width: 1px; height: 20px; background: var(--border2); margin: 0 4px; }
.workflow-actions .btn-transition {
  padding: 7px 15px; border-radius: var(--r-sm); border: 1.5px solid transparent;
  font-size: 13px; font-weight: 600; cursor: pointer; transition: opacity .15s, box-shadow .15s;
  white-space: nowrap;
}
.workflow-actions .btn-transition:hover { opacity: .87; }
.workflow-actions .btn-transition.primary   { background: var(--red); color: #fff; border-color: var(--red); box-shadow: 0 1px 4px rgba(169,0,52,.25); }
.workflow-actions .btn-transition.secondary { background: var(--surface); color: var(--text); border-color: var(--border2); }
.workflow-actions .btn-transition.danger    { background: #fef2f2; color: #b91c1c; border-color: #fca5a5; }
.workflow-actions .btn-transition.muted     { background: #fdf4ff; color: #6a1a6a; border-color: #d8b4fe; }
.workflow-actions .admin-override { display: flex; align-items: center; gap: 6px; margin-left: auto; padding-left: 8px; border-left: 1px solid var(--border2); }
.workflow-actions .admin-override select { font-size: 12px; padding: 4px 8px; border-radius: var(--r-sm); border: 1px solid var(--border2); }
.workflow-actions .admin-override .wf-actions-group-label { color: var(--red); }

/* Topbar variant — reuses .workflow-actions children (groups, buttons, admin
   override) but keeps them on one line alongside the Export dropdown. The
   "Avancer / Alerter" label pills stay muted so the colored transition buttons
   carry the visual weight. */
.topbar-workflow-actions {
  display: flex; gap: 8px; align-items: center; flex-wrap: nowrap;
}
.topbar-workflow-actions .wf-actions-group { gap: 6px; flex-wrap: nowrap; }
.topbar-workflow-actions .wf-actions-group-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); white-space: nowrap;
}
.topbar-workflow-actions .wf-actions-sep { width: 1px; height: 22px; background: var(--border2); margin: 0 6px; }
.topbar-workflow-actions .btn-transition {
  padding: 6px 13px; border-radius: var(--r-sm); border: 1.5px solid transparent;
  font-size: 12.5px; font-weight: 600; cursor: pointer; transition: opacity .15s, box-shadow .15s;
  white-space: nowrap;
}
.topbar-workflow-actions .btn-transition:hover { opacity: .87; }
.topbar-workflow-actions .btn-transition.primary   { background: var(--red); color: #fff; border-color: var(--red); box-shadow: 0 1px 4px rgba(169,0,52,.25); }
.topbar-workflow-actions .btn-transition.secondary { background: var(--surface); color: var(--text); border-color: var(--border2); }
.topbar-workflow-actions .btn-transition.danger    { background: #fef2f2; color: #b91c1c; border-color: #fca5a5; }
.topbar-workflow-actions .btn-transition.muted     { background: #fdf4ff; color: #6a1a6a; border-color: #d8b4fe; }
.topbar-workflow-actions .admin-override { display: flex; align-items: center; gap: 6px; padding-left: 8px; border-left: 1px solid var(--border2); }
.topbar-workflow-actions .admin-override select { font-size: 12px; padding: 4px 8px; border-radius: var(--r-sm); border: 1px solid var(--border2); }
.topbar-workflow-actions .admin-override .wf-actions-group-label { color: var(--red); }
.topbar-workflow-actions .wf-user-info { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }

/* "AVANCER" pill label shown next to the create-form submit button when
   editing a draft / in-progress record. Visually matches the workflow
   transition group labels so the user reads the button as a status advance,
   not a plain "save". */
.submit-advance-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); white-space: nowrap;
  padding-left: 4px;
}

/* Submit button variant — applied via JS in openRecordForEdit() so the
   create-form submit looks identical to the "Avancer" transition buttons
   in the detail view's topbar. Standalone (doesn't rely on a parent class)
   so it works from both the topbar and the sticky submit bar. */
.btn-submit-advance {
  padding: 7px 15px;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--red);
  background: var(--red);
  color: #fff;
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: opacity .15s, box-shadow .15s;
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
  box-shadow: 0 1px 4px rgba(169,0,52,.25);
}
.btn-submit-advance:hover { opacity: .87; }
.btn-submit-advance:disabled { opacity: .6; cursor: not-allowed; box-shadow: none; }
.btn-submit-advance .submit-advance-icon {
  font-size: 13px; line-height: 1;
}

/* Export dropdown — single button in the topbar that opens a small floating
   menu with the export formats. Replaces the previous horizontal strip of
   4 CSV / JSON / XML / PDF buttons. */
.export-dropdown {
  position: relative;
  display: inline-block;
}
.export-dropdown .export-dropdown-btn {
  display: inline-flex; align-items: center; gap: 6px;
}
.export-dropdown .export-dropdown-btn .chev {
  transition: transform .15s;
}
.export-dropdown.open .export-dropdown-btn .chev {
  transform: rotate(180deg);
}
.export-dropdown-menu {
  position: absolute; top: calc(100% + 4px); right: 0;
  min-width: 160px;
  background: #fff;
  border: 1px solid var(--border2);
  border-radius: var(--r-sm);
  box-shadow: 0 6px 20px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.05);
  padding: 4px;
  z-index: 60;
  display: flex; flex-direction: column; gap: 2px;
}
.export-dropdown-menu[hidden] { display: none; }
.export-dropdown-menu button {
  display: block; width: 100%; text-align: left;
  background: transparent; border: none; color: var(--text);
  padding: 7px 12px; border-radius: var(--r-sm);
  font-size: 13px; font-weight: 500; cursor: pointer;
}
.export-dropdown-menu button:hover {
  background: var(--surface); color: var(--text);
}

/* ── Queue error cell ──────────────────────────────────────────────────────── */
.queue-error-cell {
  font-size: 11px; color: #b91c1c; font-family: monospace;
  max-width: 320px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  cursor: help;
}

/* ── Export destination picker ─────────────────────────────────────────────── */
.export-dest-list { display: flex; flex-direction: column; gap: 16px; }
.export-dest-category { display: flex; flex-direction: column; gap: 8px; }
.export-dest-category-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); padding: 0 2px;
}
.export-dest-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
}
.export-dest-card {
  display: flex; flex-direction: column; gap: 6px;
  padding: 12px 14px; border: 1.5px solid var(--border); border-radius: var(--r);
  cursor: pointer; transition: border-color .15s, background .15s;
}
.export-dest-card:has(input:checked) {
  border-color: var(--red); background: rgba(224,30,20,.05);
}
.export-dest-card input[type="checkbox"] { accent-color: var(--red); width: 15px; height: 15px; cursor: pointer; }
.export-dest-name { font-size: 13px; font-weight: 500; color: var(--dark); line-height: 1.3; }
.export-dest-type {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  padding: 2px 7px; border-radius: 20px; background: var(--bg); color: var(--text2);
  align-self: flex-start;
}

/* ── Address consolidation ──────────────────────────────────────────────────── */
.dup-mode-tabs { display: flex; gap: 4px; margin-bottom: 12px; }
.dup-mode-btn { padding: 6px 14px; border: 1.5px solid var(--border); border-radius: var(--r); background: #fff; font-size: 12px; font-weight: 500; cursor: pointer; color: var(--text2); transition: all .15s; }
.dup-mode-btn.active { background: var(--red); color: #fff; border-color: var(--red); }
.dup-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.dup-toolbar input[type="search"] { flex: 1; max-width: 320px; padding: 7px 10px; border: 1.5px solid var(--border); border-radius: var(--r); font-size: 13px; background: #fff; }
.dup-pagination { display: flex; gap: 4px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--border); margin-top: 12px; }
.dup-page-btn { padding: 4px 10px; border: 1.5px solid var(--border); border-radius: var(--r); background: #fff; font-size: 12px; cursor: pointer; }
.dup-page-btn.active { background: var(--red); color: #fff; border-color: var(--red); }
.dup-group { margin-bottom: 20px; border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
.dup-group-title { padding: 10px 16px; background: var(--bg); font-size: 12px; font-weight: 700; color: var(--text2); border-bottom: 1px solid var(--border); }
.dup-cards-row { display: flex; gap: 0; flex-wrap: wrap; }
.dup-card { flex: 1; min-width: 200px; padding: 12px 14px; border-right: 1px solid var(--border); font-size: 13px; display: flex; flex-direction: column; gap: 3px; }
.dup-card:last-child { border-right: none; }
.dup-card-name { font-weight: 600; color: var(--dark); margin-bottom: 4px; line-height: 1.4; }
.dup-card-line { color: var(--text2); font-size: 12px; }
.dup-card-line code { font-size: 11px; background: var(--bg); padding: 1px 4px; border-radius: 3px; }
.dup-card-usage { margin-top: 6px; font-size: 11px; color: var(--muted); }
.dup-card-actions { margin-top: 10px; display: flex; flex-direction: column; gap: 5px; }
.btn-merge { font-size: 11px; padding: 5px 10px; border: 1.5px solid var(--red); border-radius: var(--r); background: transparent; color: var(--red); cursor: pointer; text-align: left; transition: background .15s, color .15s; }
.btn-merge:hover { background: var(--red); color: #fff; }

/* ── Create form — address prefill search ───────────────────────────────────── */
.addr-prefill { position: relative; margin-bottom: 10px; }
.addr-prefill-search { width: 100%; padding: 7px 10px 7px 28px; border: 1.5px solid var(--border); border-radius: var(--r); font-size: 12px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23aaa' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat 8px center; }
.addr-prefill-search::placeholder { color: #bbb; }
.addr-prefill-search:focus { outline: none; border-color: var(--red); }
.addr-prefill-hint { font-size: 10px; color: var(--muted); margin-top: 3px; display: none; }
.addr-prefill-search:focus ~ .addr-prefill-hint { display: block; }
.addr-prefill-results { display: none; position: absolute; top: 100%; left: 0; z-index: 9999; min-width: 360px; max-width: 600px; background: #fff; border: 1.5px solid var(--border); border-top: none; border-radius: 0 0 var(--r) var(--r); box-shadow: 0 4px 12px rgba(0,0,0,.08); max-height: 220px; overflow-y: auto; }
.addr-prefill-row { padding: 8px 12px; cursor: pointer; border-bottom: 1px solid var(--border); font-size: 12px; }
.addr-prefill-row:last-child { border-bottom: none; }
.addr-prefill-row:hover,
.addr-prefill-row.is-highlighted { background: var(--bg); }
.addr-prefill-row.is-highlighted { box-shadow: inset 3px 0 0 var(--red, #a90034); }
.addr-prefill-row strong { display: block; color: var(--dark); font-size: 13px; }
.addr-prefill-row span { color: var(--muted); }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 1280px) { .detail-meta-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1100px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { position: relative; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .sidebar-brand { border-bottom: none; padding: 14px 18px; }
  .sidebar-nav { flex-direction: row; flex: 1; padding: 10px; }
  .kpis { grid-template-columns: repeat(4, 1fr); }
  .grid-2 { grid-template-columns: 1fr; }
  .grid-half { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .filters { grid-template-columns: 1fr 1fr 1fr 1fr; }
  .detail-meta-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .grid-3, .form-grid { grid-template-columns: 1fr; }
  .filters { grid-template-columns: 1fr 1fr; }
  .detail-meta-grid { grid-template-columns: repeat(2, 1fr); }
}
/* Champs issus du profil utilisateur — lecture seule */
input.input-readonly,
input[readonly] {
  background: var(--bg, #f5f5f5);
  color: var(--muted, #888);
  cursor: not-allowed;
  border-color: var(--border, #ddd);
}

/* Bandeau édition brouillon */
.edit-draft-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  margin-bottom: 16px;
  background: #fff7ed;
  border: 1px solid #fdba74;
  border-left: 4px solid #f59e0b;
  border-radius: var(--r);
  color: #7c2d12;
  font-size: 13px;
  line-height: 1.4;
}
.edit-draft-banner svg { flex: 0 0 auto; color: #c2410c; }
.edit-draft-banner-body { flex: 1; }
.edit-draft-banner strong { font-weight: 600; }

/* Link-style button */
button.link {
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--red, #a90034);
  text-decoration: underline;
  cursor: pointer;
}
button.link:hover { opacity: .8; }

/* Lock badge on detail */
.lock-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .03em;
}
.lock-badge.lock-locked { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
.lock-badge.lock-supervised { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }
.lock-badge.lock-assigned { background: #ffedd5; color: #9a3412; border: 1px solid #fdba74; }

/* Customs identifiers sub-block inside each address card on the create form.
   Collapsible by default so the main address fields stay front-and-centre. */
.customs-block {
  margin-top: 10px;
  border-top: 1px dashed var(--border, #e5e7eb);
  padding-top: 8px;
}
.customs-block > summary {
  cursor: pointer;
  font-size: 11px; font-weight: 600; letter-spacing: .03em;
  color: var(--muted); text-transform: uppercase;
  padding: 4px 0;
}
.customs-block > summary::marker { color: var(--muted); }
.customs-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px 10px;
  margin-top: 6px;
}
.customs-advanced {
  margin-top: 8px;
  background: #fafafa;
  border: 1px dashed var(--border, #e5e7eb);
  border-radius: var(--r-sm);
  padding: 8px 10px;
}
.customs-advanced > summary {
  cursor: pointer;
  font-size: 10.5px; font-weight: 600;
  color: var(--muted); text-transform: uppercase; letter-spacing: .03em;
}

/* Position documents zone — nested inside each position card on the create
   form. Readonly table + hidden add-form (shown when user clicks "Ajouter"). */
.pos-docs-zone {
  margin-top: 10px;
  padding: 8px 10px;
  border: 1px dashed var(--border, #e5e7eb);
  border-radius: var(--r-sm);
  background: #fafafa;
}
.pos-docs-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px;
}
.pos-docs-title {
  font-size: 11px; font-weight: 600; letter-spacing: .03em;
  color: var(--muted); text-transform: uppercase;
}
.pos-docs-count { font-weight: 400; text-transform: none; }
.pos-docs-table th { font-size: 10px; }
.pos-docs-table td { padding: 4px 8px; font-size: 12px; }

/* Inline chip used in the detail view's "Docs" sub-row of positions. */
.pos-docs-subrow td { padding: 4px 10px 8px !important; border-top: 0; }
.pos-docs-label { font-size: 10px; color: var(--muted); font-weight: 600; margin-right: 6px; text-transform: uppercase; letter-spacing: .03em; }
.pos-doc-chip {
  display: inline-block; margin-right: 6px;
  padding: 1px 8px; border-radius: 999px;
  background: #eef2f5; color: #374151;
  font-size: 11px;
}

/* Read-only variant of the edit-address modal (used by the "view" button on
   each address row). Greys the input chrome so it visually reads "display
   only" without breaking layout. */
.ea-readonly {
  background: #f8fafc !important;
  color: #4b5563 !important;
  cursor: default !important;
  border-color: #e5e7eb !important;
}
.ea-readonly:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* Customs identifiers sub-row on the detail view's address table — mirrors
   the position-documents sub-row: one chip per populated EORI / VAT / AEO /
   … value. Only rendered when the address actually carries any identifier. */
.addr-customs-subrow td { padding: 4px 10px 8px !important; border-top: 0; }
.addr-customs-label {
  font-size: 10px; color: var(--muted); font-weight: 600;
  margin-right: 8px; text-transform: uppercase; letter-spacing: .03em;
}
.addr-customs-chip {
  display: inline-block; margin: 2px 6px 2px 0;
  padding: 2px 8px; border-radius: 999px;
  background: #eef2f5; color: #374151;
  font-size: 11px; line-height: 1.5;
}
.addr-customs-chip-label {
  font-weight: 600; color: #6b7280;
  margin-right: 6px;
  text-transform: uppercase; letter-spacing: .02em; font-size: 10px;
}

/* Operator assignee chip — shown in the "Pris en charge par" column.
   Small pill with a user icon so the reader instantly gets "this is an operator". */
.assignee-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 7px 1px 5px;
  border-radius: 999px;
  background: #fff5e6; color: #9a3412; border: 1px solid #fdba74;
  font-size: 10.5px; font-weight: 600;
  line-height: 1.4;
  max-width: 160px;
}
.assignee-chip svg { flex: none; opacity: .85; }
.assignee-chip-name {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Info block — workflow hint when USER can't transition */
.wf-user-info {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: var(--r-sm);
  color: #1e40af;
  font-size: 12px;
}
.wf-user-info svg { flex: 0 0 auto; color: #1d4ed8; }

/* Active filters indicator */
.filters-active-pill {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: 10px;
  padding: 2px 10px;
  background: #e0e7ff; color: #3730a3;
  border: 1px solid #c7d2fe;
  border-radius: 999px;
  font-size: 12px; font-weight: 600;
}
.filters-active-pill a {
  color: #3730a3; text-decoration: underline;
  cursor: pointer;
}

/* KPI skeletons */
.kpi-skeleton {
  background: var(--card, #fff);
  border: 1px solid var(--border, #eee);
  border-radius: var(--r);
  padding: 16px;
  min-height: 82px;
}
.kpi-skel-bar {
  background: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 50%, #f1f5f9 100%);
  background-size: 200% 100%;
  animation: kpi-shimmer 1.4s ease-in-out infinite;
  border-radius: 4px;
}
.kpi-skel-bar.l1 { width: 60%; height: 10px; margin-bottom: 12px; }
.kpi-skel-bar.l2 { width: 40%; height: 24px; margin-bottom: 8px; }
.kpi-skel-bar.l3 { width: 70%; height: 10px; }
@keyframes kpi-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Confirmation modal */
.confirm-modal .modal {
  max-width: 460px;
}
.confirm-modal .modal-body {
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-line;
}
.confirm-modal .modal-body strong { color: var(--text, #111); }
.btn-danger {
  background: var(--red, #a90034) !important;
  color: #fff !important;
  border-color: var(--red, #a90034) !important;
}
.btn-danger:hover { background: #8a002b !important; }

/* Inline icon — SVG outline */
.inline-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em; height: 1em;
  vertical-align: -2px;
  color: currentColor;
}
.inline-icon svg { width: 100%; height: 100%; }

/* Security modal tabs */
.sec-tabs { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 1px solid var(--border, #e5e7eb); }
.sec-tab {
  background: none; border: 0;
  padding: 10px 14px; cursor: pointer;
  font-size: 13px; font-weight: 500;
  color: var(--muted, #666);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.sec-tab.active {
  color: var(--red, #a90034);
  border-bottom-color: var(--red, #a90034);
}
.sec-tab:hover:not(.active) { color: var(--text, #111); }
.sec-tab-panel { display: none; }
.sec-tab-panel.active { display: block; }

/* ── Risk scoring (PR2) ─────────────────────────────────────────────────────
   Visual language:
     LOW      → green (system-positive)
     MEDIUM   → amber (caution, no friction expected)
     HIGH     → orange (real friction, operator should take a second look)
     CRITICAL → red (matches the existing red token, signals a hard stop)
   The pill is a compact inline chip used in the records list and modals; the
   risk-card variant is the bigger block on the detail view. */
.risk-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 20px;
  font-size: 11px; font-weight: 700; letter-spacing: .03em;
  border: 1px solid transparent; white-space: nowrap;
}
.risk-pill-large { padding: 4px 12px; font-size: 13px; }
.risk-low      { background: #e8f5ec; color: #157f3a; border-color: #b9dfc4; }
.risk-medium   { background: #fff5db; color: #8a5a00; border-color: #f3d98a; }
.risk-high     { background: #ffe6d2; color: #a04a00; border-color: #f4b277; }
.risk-critical { background: var(--red-light, #fff0f4); color: var(--red, #a90034); border-color: #e9b1c1; }
.risk-pill-empty {
  background: var(--bg); color: var(--muted); border-color: var(--border);
}

/* Detail-page card. Sits between the workflow stepper and the metadata grid.
   Header contains the level pill and a "Recompute" button; body lists each
   triggered factor with its weight on the right. */
.risk-card {
  border: 1.5px solid var(--border); border-radius: var(--r);
  background: var(--surface); padding: 16px 18px; margin-bottom: 16px;
}
.risk-card-header {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; margin-bottom: 10px;
}
.risk-card-title { font-size: 14px; font-weight: 700; color: var(--text); }
.risk-card-subtitle { font-size: 11px; color: var(--muted); margin-top: 2px; }
.risk-card-actions { display: flex; gap: 8px; align-items: center; }
.risk-card-actions button {
  background: transparent; border: 1px solid var(--border);
  color: var(--text2); font-size: 11px; padding: 4px 10px; border-radius: var(--r-sm);
  cursor: pointer;
}
.risk-card-actions button:hover { background: var(--bg); }
.risk-factors { display: flex; flex-direction: column; gap: 6px; }
.risk-factor {
  display: grid; grid-template-columns: 160px 1fr auto; gap: 10px;
  align-items: center; padding: 6px 10px;
  background: var(--bg); border-radius: var(--r-sm);
  font-size: 12px;
}
.risk-factor .factor-code {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px; font-weight: 700; color: var(--text2);
}
.risk-factor .factor-desc { color: var(--text); }
.risk-factor .factor-weight {
  font-weight: 700; color: var(--gray); font-variant-numeric: tabular-nums;
}
.risk-card-empty {
  padding: 14px; background: var(--bg); border-radius: var(--r-sm);
  color: var(--muted); font-size: 12px; text-align: center;
}
.risk-card-warnings {
  margin-top: 10px; padding: 10px 12px;
  background: var(--red-light, #fff0f4); border-radius: var(--r-sm);
  font-size: 12px; color: var(--red, #a90034);
  border: 1px solid #e9b1c1;
}
.risk-card-warnings strong { font-weight: 700; }
.risk-card-warnings ul { list-style: none; padding: 0; margin-top: 4px; }

/* Risk admin (PR4a) — banners, tables, lists.
   Reuses .sec-tabs / .sec-tab / .sec-tab-panel for the tab strip. */
.risk-draft-banner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  padding: 14px 18px;
  border-left: 4px solid #d99a00;
  background: #fffbe6;
}
.risk-draft-banner-info { display: flex; flex-direction: column; gap: 2px; }
.risk-draft-banner-title { font-weight: 700; font-size: 14px; color: var(--text); }
.risk-draft-banner-sub { color: var(--text2); font-size: 12px; }
.risk-draft-banner-actions { display: flex; gap: 8px; }

.risk-weights-table { width: 100%; }
.risk-weights-table td input[type="number"] {
  width: 70px; padding: 4px 8px;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  font-family: inherit; font-size: 13px; text-align: right;
}
.risk-weights-table td input[type="number"]:disabled {
  background: var(--bg); color: var(--muted);
}
.risk-weights-table td .toggle-switch { width: 38px; height: 20px; }
.risk-weights-table td .toggle-slider::before { width: 14px; height: 14px; }
.risk-weights-table td .toggle-switch input:checked + .toggle-slider::before { transform: translateX(18px); }

.risk-list-add-row {
  display: flex; gap: 8px; align-items: center;
  padding: 10px 12px; background: var(--bg);
  border-radius: var(--r-sm); margin-bottom: 12px;
}
.risk-list-add-row input {
  padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--r-sm);
  font-family: inherit; font-size: 13px;
}
.risk-list-add-row input.prefix { width: 110px; font-family: ui-monospace, Menlo, monospace; }
.risk-list-add-row input.iso2   { width: 60px;  text-transform: uppercase; }
.risk-list-add-row input.reason { flex: 1; min-width: 200px; }

/* PR6 — Address category radio (B/C) inside each address card.
   Inline layout so the choice stays compact at the top of the form fields. */
.addr-category {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 8px 10px; margin-bottom: 10px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-sm);
}
.addr-category-label {
  font-size: 11px; font-weight: 700; color: var(--text2);
  text-transform: uppercase; letter-spacing: .04em;
  margin-right: 4px;
}
.radio-inline {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; cursor: pointer; color: var(--text);
}
.radio-inline input[type="radio"] { margin: 0; cursor: pointer; }

/* Pill version for displaying the category in tables / cards. */
.addr-cat-pill {
  display: inline-flex; align-items: center;
  padding: 1px 7px; border-radius: 10px;
  font-size: 10px; font-weight: 700; letter-spacing: .03em;
}
.addr-cat-pill.cat-B { background: #e8eaef; color: #4f4f4f; border: 1px solid #d0d4dc; }
.addr-cat-pill.cat-C { background: #fff5db; color: #8a5a00; border: 1px solid #f3d98a; }

/* PR4b — thresholds form (key/value grid) and simulation diff layout. */
.risk-thresholds-form {
  display: grid; grid-template-columns: 1fr; gap: 14px;
}
.risk-thresholds-section {
  border: 1px solid var(--border); border-radius: var(--r);
  padding: 14px 16px; background: var(--surface);
}
.risk-thresholds-section h4 {
  margin: 0 0 10px 0; font-size: 13px; font-weight: 700; color: var(--text);
  text-transform: uppercase; letter-spacing: .04em;
}
.risk-thresholds-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.risk-thresholds-field {
  display: flex; flex-direction: column; gap: 4px;
}
.risk-thresholds-field label {
  font-size: 11px; font-weight: 600; color: var(--text2);
}
.risk-thresholds-field input[type="number"],
.risk-thresholds-field input[type="text"] {
  padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--r-sm);
  font-family: inherit; font-size: 13px;
}
.risk-thresholds-field input:disabled { background: var(--bg); color: var(--muted); }
.risk-thresholds-help {
  font-size: 11px; color: var(--muted); margin-top: 2px;
}

.risk-sim-input-row {
  display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap;
  padding: 12px; background: var(--bg); border-radius: var(--r-sm);
  margin-bottom: 14px;
}
.risk-sim-input-row label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 11px; font-weight: 600; color: var(--text2);
}
.risk-sim-input-row input,
.risk-sim-input-row select {
  padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--r-sm);
  font-family: inherit; font-size: 13px;
}
.risk-sim-input-row input { width: 140px; }
.risk-sim-input-row select { min-width: 180px; }

.risk-sim-result {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px;
  align-items: center;
}
.risk-sim-card {
  border: 1px solid var(--border); border-radius: var(--r);
  padding: 16px; background: var(--surface);
}
.risk-sim-card h4 {
  margin: 0 0 8px 0; font-size: 13px; font-weight: 700; color: var(--text);
}
.risk-sim-card .risk-sim-meta {
  font-size: 11px; color: var(--muted); margin-bottom: 8px;
}
.risk-sim-arrow {
  font-size: 24px; color: var(--muted); text-align: center;
}
.risk-sim-factor-list {
  display: flex; flex-direction: column; gap: 4px; margin-top: 10px;
}
.risk-sim-factor {
  display: grid; grid-template-columns: 130px 1fr auto;
  gap: 8px; align-items: center;
  padding: 4px 8px; border-radius: var(--r-sm);
  font-size: 11px;
}
.risk-sim-factor-added   { background: #e8f5ec; color: #157f3a; }
.risk-sim-factor-removed { background: var(--red-light, #fff0f4); color: var(--red, #a90034); text-decoration: line-through; }
.risk-sim-factor-same    { background: var(--bg); color: var(--text2); }
.risk-sim-factor-changed { background: #fff5db; color: #8a5a00; }
.risk-sim-factor code   { font-family: ui-monospace, Menlo, monospace; font-size: 10px; font-weight: 700; }

@media (max-width: 700px) {
  .risk-sim-result { grid-template-columns: 1fr; }
  .risk-sim-arrow { transform: rotate(90deg); }
}

.risk-history-table .status-pill {
  display: inline-block; padding: 2px 8px; border-radius: 12px;
  font-size: 11px; font-weight: 700; letter-spacing: .03em;
}
.risk-history-table .status-pill-active   { background: #e8f5ec; color: #157f3a; }
.risk-history-table .status-pill-draft    { background: #fff5db; color: #8a5a00; }
.risk-history-table .status-pill-archived { background: var(--bg); color: var(--muted); }

/* Eligibility chip shown beneath the level pill on the detail card.
   Surfaces "auto-val candidate" vs "blocked by plafond §3.5" so the operator
   doesn't have to wonder why a LOW record didn't auto-validate. */
.risk-eligibility {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600;
  padding: 2px 8px; border-radius: 12px;
  border: 1px solid transparent;
  max-width: 280px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.risk-eligibility-yes {
  background: #e8f5ec; color: #157f3a; border-color: #b9dfc4;
}
.risk-eligibility-no {
  background: #fff5db; color: #8a5a00; border-color: #f3d98a;
}

/* Submission modal (IN_PROGRESS → REVIEW). Reuses the project's overlay
   conventions (#securityOverlay-style fixed full-screen wrapper). */
.risk-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.45);
  display: flex; align-items: center; justify-content: center;
  z-index: 9000;
}
.risk-modal {
  background: var(--surface); border-radius: var(--r-lg); padding: 22px 24px;
  width: min(520px, 90vw); box-shadow: var(--shadow);
  border-top: 4px solid var(--border);
}
.risk-modal.medium    { border-top-color: #d99a00; }
.risk-modal.high      { border-top-color: #a04a00; }
.risk-modal.critical  { border-top-color: var(--red, #a90034); }
.risk-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 6px;
}
.risk-modal-title { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.risk-modal-body { font-size: 13px; color: var(--text2); line-height: 1.5; }
.risk-modal-body ul {
  margin: 10px 0 4px 0; padding-left: 18px; color: var(--text);
}
.risk-modal-body li { margin-bottom: 4px; }
.risk-modal-checkbox {
  display: flex; align-items: center; gap: 8px;
  margin: 14px 0 4px 0; font-size: 12px; color: var(--text2);
}
.risk-modal-reason {
  margin-top: 12px; display: flex; flex-direction: column; gap: 4px;
  font-size: 12px; color: var(--text2);
}
.risk-modal-reason textarea {
  width: 100%; min-height: 60px; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: var(--r-sm); font-family: inherit;
}
.risk-modal-actions {
  margin-top: 18px; display: flex; gap: 8px; justify-content: flex-end;
}
.risk-modal-actions button {
  font-family: inherit; font-size: 13px; padding: 8px 16px;
  border-radius: var(--r-sm); cursor: pointer; border: none; font-weight: 600;
}
.risk-modal-actions .btn-secondary {
  background: var(--bg); color: var(--text); border: 1px solid var(--border);
}
.risk-modal-actions .btn-secondary:hover { background: var(--border); }
.risk-modal-actions .btn-primary {
  background: var(--red, #a90034); color: #fff;
}
.risk-modal-actions .btn-primary:hover:not([disabled]) { background: var(--red-dark, #8a0029); }
.risk-modal-actions .btn-primary[disabled] {
  background: var(--border2); color: var(--muted); cursor: not-allowed;
}

/* Dashboard queues card — webhook / export / ftp inbox health. Tabular,
   click-row → /alerts. Colors are applied to the count cell so the eye lands
   on the number, not the label. */
.queues-table { width: 100%; }
.queues-table th { text-align: right; }
.queues-table th:first-child { text-align: left; }
.queues-table td { padding: 10px 14px; vertical-align: middle; }
.queues-table td:first-child { text-align: left; }
.queues-table td:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.queues-row { cursor: pointer; transition: background .15s; }
.queues-row:hover { background: var(--bg); }
.queue-label { font-weight: 600; color: var(--text); }
.queue-sub   { font-size: 11px; color: var(--muted); margin-top: 2px; }
.queue-count {
  display: inline-block; min-width: 28px; padding: 2px 10px;
  border-radius: 14px; font-weight: 700; font-size: 13px;
  background: var(--bg); color: var(--text);
}
.queue-count-zero    { background: transparent; color: var(--muted); font-weight: 400; }
.queue-count-warn    { background: #fff5db; color: #8a5a00; border: 1px solid #f3d98a; }
.queue-count-failed  { background: var(--red-light, #fff0f4); color: var(--red, #a90034); border: 1px solid #e9b1c1; }

/* Dashboard band: chips for each risk level + a highlighted counter
   showing "candidats à l'auto-validation". */
.risk-breakdown {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch;
}
.risk-breakdown-chip {
  flex: 1 1 0; min-width: 120px;
  border: 1px solid var(--border); border-radius: var(--r);
  padding: 12px; background: var(--bg);
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
}
.risk-breakdown-chip strong {
  font-size: 22px; font-weight: 800; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.risk-breakdown-eligible {
  background: linear-gradient(135deg, #e8f5ec 0%, #d3ebd7 100%);
  border-color: #b9dfc4;
}
.risk-breakdown-eligible strong { color: #157f3a; }
.risk-breakdown-eligible-label {
  font-size: 11px; font-weight: 700; color: #157f3a;
  text-transform: uppercase; letter-spacing: .04em;
}

/* iOS-style switch — used so far only on the auto-validation toggle but
   intentionally generic so future admin toggles can share it. */
.toggle-switch {
  position: relative; display: inline-block; width: 46px; height: 24px;
  flex-shrink: 0;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute; cursor: pointer; inset: 0;
  background: var(--border2); border-radius: 24px;
  transition: background .2s ease;
}
.toggle-slider::before {
  content: ""; position: absolute;
  height: 18px; width: 18px; left: 3px; top: 3px;
  background: #fff; border-radius: 50%;
  transition: transform .2s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,.15);
}
.toggle-switch input:checked + .toggle-slider { background: #2a7a2a; }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(22px); }
.toggle-switch input:disabled + .toggle-slider {
  opacity: .5; cursor: not-allowed;
}