:root {
  --brand-primary: #312682;
  --brand-dark: #251b6b;
  --brand-soft: #eceafb;
  --ink: #202331;
  --muted: #687080;
  --line: #dfe2e8;
  --surface: #fff;
  --background: #f5f6f9;
  --danger: #a12222;
  --success: #176b3a;
  --warning: #7a5410;
  --sidebar-width: 16rem;
  --bg: var(--background);
  --surface2: #f1f2f6;
  --border: var(--line);
  --border2: #c8cdd6;
  --text: var(--ink);
  --text2: var(--muted);
  --text3: #858c99;
  --accent: var(--brand-primary);
  --accent-light: var(--brand-soft);
  --accent-mid: #6155aa;
  --green: var(--success);
  --green-light: #e7f4ec;
  --amber: var(--warning);
  --amber-light: #fff4d9;
  --red: var(--danger);
}

html { background: var(--background); }
body {
  background: var(--background);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 0.875rem;
  line-height: 1.5;
}
button, input, select, textarea { font: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid rgba(49, 38, 130, 0.28);
  outline-offset: 2px;
}

.sidebar {
  background: var(--brand-primary);
  color: #fff;
  display: flex;
  flex-direction: column;
  height: 100vh;
  left: 0;
  overflow-y: auto;
  position: fixed;
  top: 0;
  width: var(--sidebar-width);
  z-index: 300;
}
.brand-panel {
  align-items: center;
  background: #fff;
  color: var(--brand-primary);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 9rem;
  padding: 1.25rem;
  text-align: center;
}
.brand-logo[hidden] { display: none; }
.brand-logo { display: block; height: auto; max-height: 5.5rem; max-width: 11rem; object-fit: contain; }
.brand-fallback { font-size: 1.15rem; letter-spacing: .08em; line-height: 1.15; text-transform: uppercase; }
.brand-fallback strong { font-size: 1.45rem; }
.brand-product { color: var(--muted); font-size: .7rem; font-weight: 700; letter-spacing: .14em; margin-top: .65rem; text-transform: uppercase; }
.sidebar-nav { display: block; flex: 1; max-width: none; overflow: visible; padding: 1rem .75rem; }
.nav-section + .nav-section { border-top: 1px solid rgba(255,255,255,.14); margin-top: .7rem; padding-top: .7rem; }
.nav-section-title { color: rgba(255,255,255,.62); font-size: .66rem; font-weight: 700; letter-spacing: .12em; padding: .25rem .75rem .4rem; text-transform: uppercase; }
.sidebar-nav button, .sidebar-placeholder {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: .5rem;
  color: rgba(255,255,255,.86);
  cursor: pointer;
  display: flex;
  font-size: .82rem;
  justify-content: space-between;
  margin: .12rem 0;
  min-height: 2.35rem;
  padding: .55rem .75rem;
  text-align: left;
  transition: background .15s ease, color .15s ease;
  width: 100%;
}
.sidebar-nav button:hover { background: rgba(255,255,255,.12); color: #fff; }
.sidebar-nav button.active { background: #fff; color: var(--brand-primary); font-weight: 700; }
.sidebar-nav .nbadge { background: rgba(255,255,255,.2); color: #fff; margin-left: .45rem; }
.sidebar-nav button.active .nbadge { background: var(--brand-soft); color: var(--brand-primary); }
.sidebar-footer { border-top: 1px solid rgba(255,255,255,.17); padding: .7rem .75rem 1rem; }
.sidebar-placeholder { color: rgba(255,255,255,.58); cursor: not-allowed; opacity: 1; }
.sidebar-user { align-items: center; border-top: 1px solid rgba(255,255,255,.14); display: flex; font-size: .78rem; gap: .65rem; margin-top: .45rem; padding: .8rem .6rem .35rem; }
.sidebar-user small, .logout-placeholder small { color: rgba(255,255,255,.58); display: block; font-size: .66rem; }
.sidebar-user-avatar { align-items: center; background: rgba(255,255,255,.15); border-radius: 50%; display: inline-flex; height: 2rem; justify-content: center; width: 2rem; }
.mobile-menu-button, .sidebar-overlay { display: none; }

.content-shell {
  margin: 0 0 0 var(--sidebar-width);
  max-width: none;
  min-height: 100vh;
  padding: 2.25rem clamp(1.5rem, 4vw, 4rem);
}
.page { margin: 0 auto; max-width: 86rem; }
.page-heading, .top-bar {
  align-items: flex-start;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}
.section-title { color: var(--ink); font-size: 1.05rem; font-weight: 750; margin: 0; }
.page-heading h1, .page-title { color: var(--ink); font-family: inherit; font-size: clamp(1.45rem, 2vw, 1.9rem); font-weight: 750; letter-spacing: -.025em; line-height: 1.2; }
.page-heading p, .page-sub { color: var(--muted); font-size: .875rem; margin: .35rem 0 0; }
.heading-actions, .admin-actions { align-items: center; display: flex; flex-wrap: wrap; gap: .6rem; }
.metric-grid, .stats-grid { display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 2rem; }
.metric-card, .stat-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: .8rem;
  box-shadow: 0 1px 2px rgba(32,35,49,.04);
  padding: 1.25rem;
}
.stat-label { color: var(--muted); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.stat-value { color: var(--brand-primary); font-family: inherit; font-size: 2rem; font-weight: 750; line-height: 1.25; }
.stat-value.accent { color: var(--brand-primary); }
.stat-value.green { color: var(--success); }
.stat-value.amber { color: var(--warning); }

.cmd-card, .admin-card, .generated-filters, .panel, .form-card, .refusal-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: .8rem;
  box-shadow: 0 1px 2px rgba(32,35,49,.04);
}
.cmd-card { margin-bottom: .8rem; }
.cmd-header { border-radius: .8rem; padding: 1rem 1.2rem; }
.cmd-header:hover { background: #f8f8fb; }
.admin-card { padding: 1.25rem; }
.generated-filters { padding: 1rem 1.1rem; }
.generated-filters-title { color: var(--ink); font-size: .8rem; font-weight: 700; }
.correction-panel { background: #fffaf0; border-color: #ead69b; }
.refusal-card { border-color: #e4bbbb; border-left: .3rem solid var(--danger); }
.refusal-editor { background: #fafafe; border-color: var(--line); }

.btn, .button, .refresh-btn, a.btn {
  align-items: center;
  background: var(--brand-primary);
  border: 1px solid var(--brand-primary);
  border-radius: .5rem;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  font-weight: 650;
  justify-content: center;
  min-height: 2.4rem;
  padding: .55rem .9rem;
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.btn:hover, .button:hover, .refresh-btn:hover, a.btn:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
.btn-primary { background: var(--brand-primary); border-color: var(--brand-primary); }
.btn.secondary, .button.secondary, .btn:not(.btn-primary):not(.btn-danger):not(.btn-dl) { background: #fff; border-color: #c9cdd6; color: var(--ink); }
.btn.secondary:hover, .button.secondary:hover, .btn:not(.btn-primary):not(.btn-danger):not(.btn-dl):hover { background: var(--brand-soft); border-color: #b7b1e1; color: var(--brand-dark); }
.btn-danger, .danger-button { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-danger:hover, .danger-button:hover { background: #821b1b; border-color: #821b1b; }
.btn-dl { background: var(--success); border-color: var(--success); color: #fff; }
.btn-sm { min-height: 2rem; padding: .35rem .65rem; }
.btn:disabled, .button:disabled, .refresh-btn:disabled { cursor: not-allowed; opacity: .48; }

.admin-field label { color: var(--muted); font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.ac-input, input, select, textarea {
  background: #fff;
  border: 1px solid #c9cdd6;
  border-radius: .5rem;
  color: var(--ink);
  min-height: 2.5rem;
}
.ac-input { padding: .55rem .7rem; }
.ac-input:focus, input:focus, select:focus, textarea:focus { border-color: var(--brand-primary); box-shadow: 0 0 0 3px rgba(49,38,130,.12); outline: 0; }
.generated-filters-grid { grid-template-columns: minmax(11rem, 13rem) minmax(18rem, 25rem); }
.ac-drop { border-color: var(--line); box-shadow: 0 .75rem 2rem rgba(32,35,49,.14); }
.ac-item:hover, .ac-item.active { background: var(--brand-soft); }
.ac-item mark { color: var(--brand-primary); }

.preview-table-wrap, .table-wrap, #generated-orders-list, #duplicates-history-list { overflow-x: auto; }
.preview-table { background: #fff; border-collapse: separate; border-spacing: 0; width: 100%; }
.preview-table th, .preview-table td { border-bottom: 1px solid var(--line); padding: .75rem .85rem; vertical-align: top; }
.preview-table th { background: #f4f5f8; color: #596170; font-size: .7rem; font-weight: 750; letter-spacing: .045em; position: sticky; text-transform: uppercase; top: 0; }
.preview-table tbody tr:hover td { background: #fafafe; }
.preview-table td:nth-last-child(-n+2) { white-space: nowrap; }

.badge, .status { border-radius: 999px; display: inline-flex; font-size: .7rem; font-weight: 700; padding: .25rem .55rem; }
.badge.success, .badge.auto, .status.success { background: #e4f3e9; color: var(--success); }
.badge.warning, .badge.attente, .badge.pending, .status.warning { background: #fff0c7; color: var(--warning); }
.badge.danger, .badge.refused, .status.danger { background: #f8e3e3; color: var(--danger); }
.badge.neutral, .badge.client, .status.neutral { background: #eceef2; color: #555e6d; }
.notice, .message { border: 1px solid var(--line); border-radius: .55rem; padding: .75rem .9rem; }
.notice.warning, .message.warning { background: #fff7e4; border-color: #ead69b; color: var(--warning); }
.notice.error, .message.danger { background: #faeaea; border-color: #e4bbbb; color: var(--danger); }
.empty, .empty-state { background: #fafafe; border: 1px dashed #cfd3dc; border-radius: .7rem; color: var(--muted); padding: 2.5rem 1rem; text-align: center; }
.toast { border-radius: .6rem; box-shadow: 0 .8rem 2rem rgba(32,35,49,.2); }
.toast.success { background: var(--success); }
.toast.error { background: var(--danger); }

@media (max-width: 72rem) {
  .content-shell { padding: 1.75rem 1.5rem; }
  .admin-grid { grid-template-columns: 1fr; }
  .catalogue-toolbar { align-items: stretch; flex-direction: column; }
  .catalogue-toolbar .admin-field { min-width: 0; }
}

@media (max-width: 52rem) {
  body { padding-top: 3.4rem; }
  .mobile-menu-button {
    background: var(--brand-primary);
    border: 0;
    border-radius: 0 0 .55rem 0;
    color: #fff;
    display: block;
    font-weight: 700;
    left: 0;
    min-height: 3.4rem;
    padding: .75rem 1rem;
    position: fixed;
    top: 0;
    z-index: 350;
  }
  .sidebar { box-shadow: .75rem 0 2rem rgba(32,35,49,.25); transform: translateX(-105%); transition: transform .2s ease; }
  body.menu-open { overflow: hidden; }
  body.menu-open .sidebar { transform: translateX(0); }
  body.menu-open .mobile-menu-button { border-radius: 0 0 0 .55rem; font-size: 1.5rem; left: calc(var(--sidebar-width) - 3.4rem); padding: .5rem; width: 3.4rem; }
  .sidebar-overlay { background: rgba(22,20,42,.48); border: 0; bottom: 0; left: 0; position: fixed; right: 0; top: 0; z-index: 250; }
  body.menu-open .sidebar-overlay { display: block; }
  .content-shell { margin-left: 0; padding: 1.25rem 1rem 2rem; }
  .metric-grid, .stats-grid { grid-template-columns: 1fr 1fr; }
  .generated-filters-grid { grid-template-columns: 1fr; }
  .page-heading, .top-bar { align-items: stretch; flex-direction: column; }
  .heading-actions { width: 100%; }
  .refusal-line { grid-template-columns: 1fr; }
}

@media (max-width: 34rem) {
  .content-shell { padding-left: .75rem; padding-right: .75rem; }
  .metric-grid, .stats-grid, .preview-summary, .admin-grid { grid-template-columns: 1fr; }
  .metric-card, .stat-card, .admin-card { padding: 1rem; }
  .btn, .button, .refresh-btn { white-space: normal; }
  .admin-actions { align-items: stretch; flex-direction: column; }
  .admin-actions > .btn, .admin-actions > .button { width: 100%; }
  .refusal-alert, .refusal-orders, .refusal-actions, .refusal-order-line { grid-template-columns: 1fr; }
}
.sidebar-account-link {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: .5rem;
  color: rgba(255,255,255,.86);
  display: flex;
  font-size: .82rem;
  min-height: 2.35rem;
  padding: .55rem .75rem;
  text-decoration: none;
  width: 100%;
}
.sidebar-account-link:hover { background: rgba(255,255,255,.12); color: #fff; }
.sidebar-footer form { margin: 0; }
.logout-button { cursor: pointer; text-align: left; }
.auth-body { background: var(--background); min-height: 100vh; }
.auth-shell { align-items: center; display: flex; justify-content: center; min-height: 100vh; padding: 1.25rem; }
.auth-card { background: #fff; border: 1px solid var(--line); border-radius: 1rem; box-shadow: 0 1rem 3rem rgba(32,35,49,.12); max-width: 38rem; padding: clamp(1.25rem,4vw,2.25rem); width: 100%; }
.auth-brand { align-items: center; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; margin: -0.5rem 0 1.5rem; padding: 0 0 1.25rem; text-align: center; }
.auth-card h1 { color: var(--ink); font-size: 1.65rem; letter-spacing: -.025em; }
.auth-card h2 { font-size: 1.05rem; margin: 1.5rem 0 .65rem; }
.auth-intro { color: var(--muted); margin: .35rem 0 1.25rem; }
.auth-form { display: grid; gap: .55rem; margin-top: 1rem; }
.auth-form label { color: var(--muted); font-size: .72rem; font-weight: 700; letter-spacing: .06em; margin-top: .4rem; text-transform: uppercase; }
.auth-form .button { margin-top: .75rem; }
.auth-link { color: var(--brand-primary); display: inline-block; margin-top: 1rem; }
.auth-heading { align-items: flex-start; display: flex; gap: 1rem; justify-content: space-between; }
.mfa-qr { display: block; height: 13rem; margin: 1rem auto; width: 13rem; }
.manual-secret, .activation-link { overflow-wrap: anywhere; }
.recovery-codes { display: grid; gap: .4rem; grid-template-columns: 1fr 1fr; list-style: none; margin: 1rem 0 1.5rem; }
.account-summary { display: grid; gap: .4rem; grid-template-columns: 5rem 1fr; margin: 1rem 0; }
.account-summary dt { color: var(--muted); font-weight: 700; }
@media (max-width: 34rem) { .recovery-codes { grid-template-columns: 1fr; } .auth-heading { flex-direction: column; } }