/* A + C presentation layer. No state, permission or execution semantics. */
:root {
  --ui-space-1: .25rem;
  --ui-space-2: .5rem;
  --ui-space-3: .75rem;
  --ui-space-4: 1rem;
  --ui-space-6: 1.5rem;
  --ui-space-8: 2rem;
  --ui-radius: .75rem;
  --ui-radius-sm: .45rem;
  --ui-sidebar: 248px;
  --ui-sidebar-compact: 184px;
  --ui-sidebar-bg: #112746;
  --ui-sidebar-text: #eaf2ff;
  --ui-sidebar-muted: #c2d2e8;
  --ui-sidebar-strong: #fff;
  --ui-sidebar-accent: #a1c5ff;
  --ui-sidebar-line: #ffffff1c;
  --ui-sidebar-outline: #ffffff30;
  --ui-sidebar-hover: #ffffff12;
  --ui-sidebar-active: #ffffff19;
  --ui-sidebar-pressed: #ffffff20;
  --ui-row-padding: .7rem;
  --ui-detail-width: 480px;
  --ui-dialog-width: 1120px;
}
/* Keep the existing theme and branding variables used by app.js and Chart.js. */
:root[data-theme="light"] {
  --bg: #f3f6fb;
  --bg-card: #fff;
  --bg-card-hover: #edf2fb;
  --border: #d9e2ef;
  --text: #192638;
  --text-muted: #526478;
  --success: #16634b;
  --warning: #855700;
  --danger: #a52b3a;
  --info: #245d97;
  --purple: #6d42a7;
  --bs-body-color: var(--text);
  --bs-body-bg: var(--bg);
  --bs-secondary-color: var(--text-muted);
  --bs-border-color: var(--border);
  --bs-emphasis-color: var(--text);
  /* Mode jour : barre latérale claire, alignée sur le reste de la page. */
  --ui-sidebar-bg: #fff;
  --ui-sidebar-text: #192638;
  --ui-sidebar-muted: #44566c;
  --ui-sidebar-strong: #112746;
  --ui-sidebar-accent: #1d5fc4;
  --ui-sidebar-line: #d9e2ef;
  --ui-sidebar-outline: #c3cfdf;
  --ui-sidebar-hover: #edf2fb;
  --ui-sidebar-active: #e3ecfa;
  --ui-sidebar-pressed: #dbe6f7;
}
:root[data-theme="dark"] {
  --bg: #0c1521;
  --bg-card: #132032;
  --bg-card-hover: #1a2c44;
  --border: #304258;
  --text: #edf3ff;
  --text-muted: #afbed2;
  --success: #7ddcb2;
  --warning: #f3cd78;
  --danger: #ff9d9d;
  --info: #86c6f4;
  --purple: #cfb7f2;
  --bs-body-color: var(--text);
  --bs-body-bg: var(--bg);
  --bs-secondary-color: var(--text-muted);
  --bs-border-color: var(--border);
  --bs-emphasis-color: var(--text);
}
body.ui-modern {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: .9rem;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  --sidebar-w: var(--ui-sidebar);
  --topbar-h: 68px;
}
/* Barre latérale dépliée par défaut, y compris sur les espaces de travail ; masquable sur ordinateur (☰). */
@media (min-width: 769px) {
  .ui-modern #sidebarBurger { display: inline-flex; }
  .ui-modern[data-ui-sidebar="hidden"] { --sidebar-w: 0px; }
  .ui-modern[data-ui-sidebar="hidden"] #sidebar { display: none; }
}
body.ui-workspace { --topbar-h: 60px; }
.ui-skip-link { position: fixed; top: -5rem; left: 1rem; z-index: 1200; padding: .7rem 1rem; color: var(--text); background: var(--bg-card); border: 2px solid var(--accent); border-radius: var(--ui-radius-sm); }
.ui-skip-link:focus { top: .75rem; }
.ui-modern :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.ui-modern #sidebar { background: var(--ui-sidebar-bg); border-right: 1px solid var(--ui-sidebar-line); padding: .5rem; }
.ui-modern .sidebar-brand { color: var(--ui-sidebar-text); border-bottom: 1px solid var(--ui-sidebar-line); padding: 1.1rem .75rem; min-height: var(--topbar-h); font-size: 1.12rem; letter-spacing: -.025em; }
.ui-modern .sidebar-brand i { color: var(--ui-sidebar-accent); }
.ui-modern .sidebar-link { color: var(--ui-sidebar-muted); min-height: 42px; padding: .55rem .7rem; margin: .15rem .25rem; font-size: .83rem; border-radius: .5rem; }
.ui-modern .sidebar-link:hover, .ui-modern .sidebar-link:focus-visible { color: var(--ui-sidebar-strong); background: var(--ui-sidebar-hover); }
.ui-modern .sidebar-link.active { color: var(--ui-sidebar-strong); background: var(--ui-sidebar-active); box-shadow: inset 3px 0 var(--ui-sidebar-accent); }
.ui-modern .sidebar-section-label { color: var(--ui-sidebar-muted); opacity: 1; padding: 1rem .85rem .3rem; font-size: .62rem; letter-spacing: .12em; }
.ui-modern .sidebar-bottom { border-color: var(--ui-sidebar-line); }
.ui-modern .sidebar-version { color: var(--ui-sidebar-muted); opacity: 1; font-size: .68rem; }
.ui-modern #topbar { gap: .65rem; padding: 0 1.5rem; height: auto; min-height: var(--topbar-h); }
.ui-modern .topbar-search-trigger { min-height: 38px; border-radius: .5rem; min-width: 220px; background: var(--bg); }
.ui-modern .icon-btn { min-width: 38px; min-height: 38px; border-radius: .5rem; }
.ui-modern .user-avatar { border-radius: 50%; font-weight: 700; }
.ui-modern #main-wrapper { min-width: 0; }
.ui-modern #main-wrapper > main { min-width: 0; padding: 1.5rem; }
.ui-modern #main-wrapper > main > .container-fluid { padding-left: 0 !important; padding-right: 0 !important; }
.ui-modern #main-wrapper > main > .container-fluid:first-of-type:empty { display: none; }
.ui-page-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.3rem; }
.ui-page-title { font-size: clamp(1.25rem, 1.6vw, 1.8rem) !important; font-weight: 700 !important; line-height: 1.25; letter-spacing: -.035em; }
.ui-modern :is(h1, h2, h3, h4, h5, h6) { color: var(--text); }
.ui-modern :is(.card, .card-modern, .stat-card, .sidebar-card, .release-card, .login-card) { border-color: var(--border); border-radius: var(--ui-radius); background: var(--bg-card); box-shadow: 0 4px 18px #10284708; }
.ui-modern .card-header { padding: .9rem 1.1rem; color: var(--text); border-color: var(--border); background: transparent; }
.ui-modern .card-body { padding: 1.1rem; }
.ui-modern .card-modern { padding: 1.1rem; }
.ui-modern .stat-card { padding: 1.25rem; }
/* Bandeau de compteurs resserré : tous sur une ligne dès 1200 px. */
.ui-modern .ui-kpi-strip .stat-card { padding: .5rem .7rem; }
.ui-modern .ui-kpi-strip .stat-value { font-size: 1.3rem; }
.ui-modern .ui-kpi-strip .stat-label { font-size: .66rem; margin-top: .15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-modern .stat-value { font-variant-numeric: tabular-nums; letter-spacing: -.04em; }
.ui-modern .filter-label, .ui-modern .form-label { font-size: .8rem; font-weight: 600; color: var(--text-muted); }
.ui-modern :is(.form-control, .form-select) { border-radius: var(--ui-radius-sm); border-color: var(--border); background-color: var(--bg-card); color: var(--text); min-height: 38px; }
.ui-modern :is(.form-control, .form-select)::placeholder { color: var(--text-muted); opacity: .9; }
.ui-modern .btn { border-radius: var(--ui-radius-sm); font-weight: 600; }
.ui-modern :is(.btn-sm, .icon-btn) { min-height: 34px; }
.ui-modern .btn-sm { font-size: .78rem; }
.ui-modern .badge { border-radius: .35rem; font-weight: 600; line-height: 1.35; }
.ui-modern .alert { border-radius: var(--ui-radius-sm); padding: .9rem 1rem; }
.ui-modern .table { --bs-table-color: var(--text); --bs-table-bg: transparent; --bs-table-border-color: var(--border); --bs-table-hover-bg: var(--bg-card-hover); margin-bottom: 0; }
.ui-modern .table thead th { color: var(--text-muted); background: var(--bg); font-weight: 650; font-size: .76rem; vertical-align: middle; border-bottom: 1px solid var(--border); }
.ui-modern .table > :not(caption) > * > * { padding: var(--ui-row-padding) .85rem; }
.ui-modern .table tbody td { font-size: .82rem; vertical-align: middle; }
.ui-modern .table-responsive { border-radius: var(--ui-radius-sm); overscroll-behavior-inline: contain; scrollbar-width: thin; }
.ui-modern :is(.nav-tabs, .nav-pills) { gap: .25rem; }
.ui-modern .nav-link { border-radius: var(--ui-radius-sm); min-height: 38px; }
.ui-modern .nav-tabs .nav-link.active { background: var(--bg-card); color: var(--accent); border-color: var(--border); border-bottom-color: var(--bg-card); }
.ui-modern .dropdown-menu { border-radius: var(--ui-radius); border-color: var(--border); background: var(--bg-card); color: var(--text); box-shadow: 0 12px 32px #0002; max-width: min(30rem, calc(100vw - 1rem)); }
.ui-modern .dropdown-item { color: var(--text); min-height: 36px; padding: .5rem .9rem; }
.ui-modern .dropdown-item:hover, .ui-modern .dropdown-item:focus { background: var(--bg-card-hover); color: var(--text); }
.ui-modern .modal-content { border-radius: var(--ui-radius); border: 1px solid var(--border); background: var(--bg-card); color: var(--text); box-shadow: 0 20px 64px #0004; }
.ui-modern .modal-header, .ui-modern .modal-footer { border-color: var(--border); gap: .75rem; flex-wrap: wrap; }
.ui-modern .modal-header { padding: 1rem 1.25rem; }
.ui-modern .modal-body { padding: 1.25rem; }
.ui-modern .modal-title { font-weight: 700; }
.ui-modern .progress { background-color: var(--bg-card-hover); border-radius: 1rem; }
.ui-modern .text-xs { font-size: .76rem; }
.ui-modern :is(.text-dim, .text-muted) { color: var(--text-muted) !important; }
.ui-modern .search-modal { border-radius: var(--ui-radius); max-width: 640px; }
.ui-modern .search-overlay { padding: 10vh 1rem 1rem; }
.ui-modern .search-field:focus-visible { outline-offset: 5px; }
.ui-modern .qv-panel { width: min(var(--ui-detail-width), 100vw); right: calc(-1 * var(--ui-detail-width) - 24px); transition: right .2s ease; }
.ui-modern .qv-panel.open { right: 0; }
.ui-modern .qv-header { flex-wrap: wrap; gap: .75rem; }
.ui-panel-resizer { position: absolute; inset: 0 auto 0 0; width: 10px; cursor: col-resize; touch-action: none; z-index: 2; }
.ui-panel-resizer::after { content: ''; position: absolute; top: 45%; left: 3px; width: 3px; height: 44px; border-radius: 2px; background: var(--border); }
.ui-panel-resizer:focus-visible::after { background: var(--accent); }
.ui-size-control { display: inline-flex; align-items: center; gap: .35rem; margin-left: auto; font-size: .75rem; color: var(--text-muted); }
.ui-size-control button { background: var(--bg); border: 1px solid var(--border); color: var(--text); border-radius: .3rem; min-width: 30px; min-height: 30px; }
.ui-size-control input { width: 90px; accent-color: var(--accent); }
.ui-context-org { font-size: .75rem; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-workspace .table { --ui-row-padding: .5rem; }
.ui-modern[data-ui-density="compact"] .table { --ui-row-padding: .45rem; }
.ui-workspace :is(.card-modern, .card, .modal-content) { border-radius: .55rem; }
.ui-workspace .nr-kpi-card .card-body { padding: .9rem; }
.ui-workspace #nrVerdictWrap { margin-bottom: 1.25rem; }
.ui-workspace #diffModal .modal-dialog { max-width: min(var(--ui-dialog-width), calc(100vw - 2rem)); width: calc(100vw - 2rem); }
.ui-workspace #diffModal .modal-body { scrollbar-gutter: stable; }
.ui-workspace #diffModalContent :is(pre, code) { font-size: .8rem; }
.ui-workspace #diffModalContent table { font-variant-numeric: tabular-nums; }
.ui-workspace :is(#cycleProgress, #basketSelBar, #nrGlobalProgressWrap) { border-radius: var(--ui-radius-sm); }
.ui-workspace :is(#inforNotesBlock, #inforTogglesBlock) { border-radius: var(--ui-radius-sm) !important; }
.ui-modern .ui-login-shell { width: 100%; max-width: 440px; padding: 1.5rem; }
.ui-modern .login-card { padding: 1.75rem; box-shadow: 0 12px 40px #10284715; }
.ui-modern .ui-login-brand { font-size: 2.75rem; color: var(--accent); }
.ui-modern .ui-auth-title { font-size: 1.75rem; letter-spacing: -.04em; }
.ui-modern .ui-state-page { max-width: 48rem; margin: 3rem auto; padding: 3rem 2rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--ui-radius); }
.ui-modern .ui-toolbar { display: flex; align-items: center; gap: .65rem; flex-wrap: wrap; padding: .85rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--ui-radius-sm); }
.ui-modern .ui-section { border-radius: var(--ui-radius); }
@media (max-width: 1024px) {
  .ui-modern #topbar { padding: .5rem .8rem; gap: .4rem; }
  .ui-modern #main-wrapper > main { padding: 1rem; }
  .ui-context-org { max-width: 95px; }
}
@media (max-width: 768px) {
  .ui-modern #sidebar { width: 264px; }
  .ui-modern #main-wrapper { margin-left: 0; }
  .ui-modern #topbar { position: sticky; min-height: 60px; }
  .ui-modern .topbar-search-trigger { min-width: 0; }
  .ui-modern #main-wrapper > main { padding: .85rem; }
  .ui-modern .modal-dialog { margin: .5rem; max-width: calc(100vw - 1rem); }
  .ui-workspace #diffModal .modal-dialog { max-width: calc(100vw - 1rem); width: calc(100vw - 1rem); }
  /* Plein écran sur mobile : fermé, le panneau doit sortir entièrement de l'écran
     (le décalage du bureau dépend de --ui-detail-width, plus étroit que 100vw). */
  .ui-modern .qv-panel { width: 100vw; right: calc(-100vw - 24px); }
  .ui-modern .qv-panel.open { right: 0; }
  .ui-modern .ui-panel-resizer, .ui-modern .ui-size-control { display: none; }
  .ui-modern .ui-state-page { padding: 2rem 1rem; margin: 1.5rem 0; }
  .ui-modern .table-responsive { max-height: none; }
  .ui-modern .card-header { gap: .5rem; flex-wrap: wrap; }
  .ui-modern .ui-page-heading { align-items: flex-start; gap: .75rem; }
}
@media (max-width: 576px) {
  .ui-modern .ui-context-org { display: none; }
  .ui-modern #topbar > .d-flex { gap: .15rem !important; }
  .ui-modern .icon-btn { min-width: 34px; min-height: 40px; }
  .ui-modern .btn-sm { min-height: 40px; }
  .ui-modern .modal-header, .ui-modern .modal-body { padding: 1rem; }
  .ui-modern :is(.nav-tabs, .nav-pills) { flex-wrap: wrap; }
  .ui-modern .card-body { padding: .85rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ui-modern *, .ui-modern *::before, .ui-modern *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media print {
  .ui-modern { --bg: #fff; --bg-card: #fff; --text: #111827; --text-muted: #374151; --border: #d1d5db; }
  .ui-modern #main-wrapper { margin-left: 0; }
  .ui-modern #main-wrapper > main { padding: 0; }
  .ui-modern :is(.ui-skip-link, .ui-panel-resizer, .ui-size-control) { display: none !important; }
  .ui-modern :is(.card, .card-modern) { box-shadow: none; break-inside: avoid; }
}

/* Page « Toutes les releases » : pas d'ascenseur interne. Le tableau prend sa hauteur
   naturelle (la page défile) et ses textes passent à la ligne pour tenir en largeur ;
   la liste des releases suit le défilement de la page au lieu de rester collée. */
.ui-modern[data-ui-page="releases"] .sidebar-card { position: static; }
.ui-modern[data-ui-page="releases"] #tableView .table-responsive { max-height: none; overflow-y: visible; }
.ui-modern[data-ui-page="releases"] .items-table thead th { white-space: normal; position: static; }
.ui-modern[data-ui-page="releases"] .items-table :is(th, td) { padding-left: .4rem; padding-right: .4rem; }
.ui-modern[data-ui-page="releases"] .items-table thead th { font-size: .64rem; letter-spacing: .03em; }
/* « anywhere » et non « break-word » : seul le premier réduit la largeur minimale d'une colonne.
   Sans lui, un mot long sans espace (URL, nom de scénario) élargissait le tableau au-delà de
   l'écran et repoussait l'objet, la référence et les tags hors de vue. */
.ui-modern[data-ui-page="releases"] .items-table :is(.objet-cell, .ref-cell),
.ui-modern[data-ui-page="releases"] .items-table tbody td:is(:nth-child(6), :nth-child(7)) { overflow-wrap: anywhere; }
.ui-modern[data-ui-page="releases"] .items-table .objet-cell { max-width: none; min-width: 110px; }
.ui-modern[data-ui-page="releases"] .items-table .ref-cell { max-width: none; }
/* Répartition des largeurs : l'objet et la référence (textes longs) passent avant
   Configurateur / Produit, qui laissaient de grands vides. */
.ui-modern[data-ui-page="releases"] .items-table thead th:nth-child(6) { width: 13%; }
.ui-modern[data-ui-page="releases"] .items-table thead th:nth-child(7) { width: 11%; }
.ui-modern[data-ui-page="releases"] .items-table thead th:nth-child(8) { width: 32%; }
.ui-modern[data-ui-page="releases"] .items-table thead th:nth-child(9) { width: 17%; }
.ui-modern[data-ui-page="releases"] .items-table .badge-version { display: inline-block; max-width: 150px; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.ui-modern[data-ui-page="releases"] .sidebar-card .release-link { flex: 1; min-width: 0; }
.ui-modern[data-ui-page="releases"] .sidebar-card .release-version { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1500px) { .ui-modern[data-ui-page="releases"] .items-table .badge-version { max-width: 84px; } }

/* Organisation : logo (static/org_logos/<slug>.gif) ou initiales à défaut. */
.org-logo { display:inline-block; width:22px; height:22px; border-radius:5px; object-fit:contain;
  vertical-align:middle; flex:0 0 auto; background:#fff; }
.org-logo-initials { display:inline-flex; align-items:center; justify-content:center; font-size:.62rem;
  font-weight:700; letter-spacing:.02em; color:var(--accent, #4f8ef7); background:rgba(79,142,247,.14); }