/* ========== TRAKOUT APP — SIDEBAR SHELL ========== */
/* Transforms the existing .app-header horizontal nav into a left sidebar.  */
/* All class/id names used by app-tenant.min.js are preserved.              */

/* ============================================================
   KILL GLOBAL GLASSMORPHISM — beats :root[data-theme-resolved="dark"].card !important
   Specificity needed: > (0,3,0). Using (0,4,1) = root attr + body + app-shell + card + element
============================================================ */
:root[data-theme-resolved] body.app-shell .card,
:root[data-theme-resolved] body.app-shell .admin-dashboard-card,
:root[data-theme-resolved] body.app-shell .admin-subsection-card,
:root[data-theme-resolved] body.app-shell .stock-agency-card,
:root[data-theme-resolved] body.app-shell .employee-card,
:root[data-theme-resolved] body.app-shell .modal-content,
:root[data-theme-resolved] body.app-shell .dropdown-menu {
  background: var(--bg-2) !important;
  border: 1px solid var(--line) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: var(--text) !important;
}
/* App header (sidebar) */
:root[data-theme-resolved] body.app-shell .app-header {
  background: var(--bg-2) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ============ BODY / SHELL ============ */
body.app-shell {
  height: 100dvh;
  overflow: hidden;
  font-size: 14px;
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
}

/* ============ SIDEBAR (was app-header) ============ */
body.app-shell .app-header {
  /* Layout — écrase position:sticky + height:58px + margin-inline:0.8rem de style.min.css */
  position: fixed;
  inset: 0 auto 0 0;
  width: 240px;
  height: 100dvh;
  min-height: 0;
  /* Stack children vertically — écrase justify-content:space-between */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: 0;
  /* Visuals — écrase border-radius:18px + border:1px + margin-inline:0.8rem */
  background: var(--bg-2);
  border-top: none;
  border-right: 1px solid var(--line);
  border-bottom: none;
  border-left: none;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 200;
  padding: 0 !important;
}

/* ============ SIDEBAR BRAND ============ */
.app-shell .app-header-left {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  border-bottom: 1px solid var(--line);
  padding-bottom: 0;
}

.app-shell .app-header-left .sb-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 16px 14px;
  text-decoration: none;
  color: var(--text);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.02em;
  transition: color .15s;
}
.app-shell .app-header-left .sb-brand:hover {
  color: var(--accent);
}
.app-shell .app-header-left .sb-brand .brand-mark {
  width: 14px;
  height: 14px;
  background: var(--accent);
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
}
.app-shell .app-header-left .sb-brand .brand-mark::after {
  content: "";
  display: block;
  position: absolute;
  inset: 3px;
  background: var(--bg-2);
}
.app-shell .app-header-left .sb-brand .brand-text {
  flex: 1;
}

/* page title — appears as "section" label below brand */
.app-shell .app-header-left .header-text {
  display: none; /* moved to inline topbar in .app-main */
}

/* ============ HAMBURGER — hidden on desktop ============ */
.app-shell .nav-toggle {
  display: none;
}

/* ============ SIDEBAR NAV (was main-nav) ============ */
body.app-shell .main-nav {
  /* reset style.min.css horizontal-nav overrides */
  position: static;
  transform: none;
  width: auto;
  max-width: none;
  z-index: auto;
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  margin: 0;
  /* layout sidebar */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 8px 0;
  flex: 1;
  overflow-y: auto;
}

/* section labels */
.app-shell .main-nav .sb-section {
  padding: 8px 16px 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-3);
  margin-top: 8px;
}
.app-shell .main-nav .sb-section:first-child {
  margin-top: 0;
}

.app-shell .main-nav .nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  margin: 0 8px;
  border-radius: 4px;
  font-size: 13px;
  color: var(--text-2);
  text-decoration: none;
  transition: background .15s, color .15s;
  position: relative;
  border: 0 !important;
  box-shadow: none !important;
}

.app-shell .main-nav .nav-link:hover {
  background: var(--bg-2);
  color: var(--text);
}

.app-shell .main-nav .nav-link.active {
  background: var(--bg-3);
  color: var(--text);
  border: 0 !important;
  box-shadow: none !important;
}

.app-shell .main-nav .nav-link.active::before {
  content: "";
  position: absolute;
  left: 0;
  width: 2px;
  height: 16px;
  background: var(--accent);
  border-radius: 0 2px 2px 0;
}

/* icon container */
.app-shell .main-nav .nav-link .ic {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
}
.app-shell .main-nav .nav-link .ic svg {
  width: 14px;
  height: 14px;
  stroke-width: 1.5;
}
.app-shell .main-nav .nav-link.active .ic {
  opacity: 1;
  color: var(--accent);
}
.app-shell .main-nav .nav-link:hover .ic {
  opacity: 1;
}

/* label */
.app-shell .main-nav .nav-link .label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============ TENANT BLOCK (sb-tenant) ============ */
.app-shell .sb-tenant {
  margin: 12px 12px 8px;
  padding: 10px 12px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  text-decoration: none;
  color: var(--text);
  transition: border-color .15s;
}
.app-shell .sb-tenant:hover { border-color: var(--accent); }

.app-shell .sb-tenant .ag {
  width: 28px;
  height: 28px;
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 11px;
  flex-shrink: 0;
}
.app-shell .sb-tenant .meta { flex: 1; min-width: 0; }
.app-shell .sb-tenant .name { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-shell .sb-tenant .url { font-family: var(--font-mono); font-size: 10px; color: var(--text-3); letter-spacing: 0.04em; }
.app-shell .sb-tenant .arrow { color: var(--text-3); font-family: var(--font-mono); font-size: 12px; }

/* ============ TENANT SWITCHER POPOVER ============ */
.tenant-switch-popover {
  position: fixed;
  z-index: 1200;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
  overflow: hidden;
  min-width: 200px;
}
.tenant-switch-popover .tsp-header {
  padding: 8px 12px 6px;
  font-size: 11px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--line);
}
.tenant-switch-popover .tsp-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  cursor: pointer;
  color: var(--text);
  text-decoration: none;
  transition: background .1s;
}
.tenant-switch-popover .tsp-item:hover { background: var(--bg-2); }
.tenant-switch-popover .tsp-item.current { background: var(--bg-2); cursor: default; }
.tenant-switch-popover .tsp-ag {
  width: 26px; height: 26px;
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-weight: 600; font-size: 10px;
  flex-shrink: 0;
}
.tenant-switch-popover .tsp-item.current .tsp-ag { opacity: .5; }
.tenant-switch-popover .tsp-name { font-size: 13px; font-weight: 500; line-height: 1.2; }
.tenant-switch-popover .tsp-slug { font-family: var(--font-mono); font-size: 10px; color: var(--text-3); }
.tenant-switch-popover .tsp-check { margin-left: auto; color: var(--accent); font-size: 12px; }
.tenant-switch-popover .tsp-loading,
.tenant-switch-popover .tsp-empty { padding: 12px; font-size: 13px; color: var(--text-3); text-align: center; }

/* ============ AUTH / USER FOOTER (was app-header-right) ============ */
body.app-shell .app-header-right {
  /* reset style.min.css : align-items:center + height:100% + margin:0 */
  align-items: stretch;
  height: auto;
  width: 100%;
  margin-top: auto;
  border-top: 1px solid var(--line);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 48px;
}

/* sb-user block injected by JS inside app-header-right */
.app-shell .sb-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 4px;
}
.app-shell .sb-user .av {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg-3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent);
  flex-shrink: 0;
}
.app-shell .sb-user .meta { flex: 1; min-width: 0; }
.app-shell .sb-user .name { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-shell .sb-user .role { font-family: var(--font-mono); font-size: 10px; color: var(--text-3); letter-spacing: 0.06em; text-transform: uppercase; }

/* ============ MAIN CONTENT (was app-main) ============ */
body.app-shell .app-main {
  margin-left: 240px;
  height: 100dvh;
  overflow-y: auto !important;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  max-width: 1440px !important;  /* bat style.min.css admin-page (0,4,1) ; cap écran large */
  padding: 0 !important;         /* bat style.min.css admin-page (0,4,1) */
  width: auto;
}

/* ============ TOPBAR (référence: .topbar) ============ */
.app-topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 24px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  flex-shrink: 0;
  height: 48px;
}

/* breadcrumb area */
.app-crumbs {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 1;
}
.app-crumbs h1 {
  font-size: 13px;
  font-weight: 500;
  margin: 0;
  color: var(--text);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.app-crumb-sep {
  font-family: var(--font-mono);
  color: var(--text-3);
  font-size: 12px;
  flex-shrink: 0;
}
.app-crumb-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============ TOPBAR BREADCRUMBS & SEARCH ============ */
.app-shell .app-crumbs {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-3);
}
.app-shell .app-crumbs .sep { opacity: 0.5; }
.app-shell .app-crumbs .cur { color: var(--text); }

.app-shell .tb-search {
  margin-left: 16px;
  flex: 1;
  max-width: 360px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 13px;
  color: var(--text-3);
  cursor: text;
  font-family: var(--font-sans);
}
.app-shell .tb-search .kbd {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 1px 6px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 3px;
}

.app-shell .tb-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-left: auto;
}
.app-shell .tb-icon {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  color: var(--text-2);
  position: relative;
  background: transparent;
  transition: background .15s, color .15s;
}
.app-shell .tb-icon:hover { background: var(--bg-3); color: var(--text); }
.app-shell .tb-icon .dot {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
  display: none;
}

/* ============ SPLASH / INTRO OVERLAY ============ */
.intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #05070d;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: opacity 0.6s ease;
}
.intro-overlay[hidden] { display: none !important; }
.intro-overlay.hidden { opacity: 0; pointer-events: none; }
.splash-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}
.splash-logo-target { display: flex; align-items: center; justify-content: center; }

/* ============ NAV-LINK KBD + BADGE ============ */
.app-shell .main-nav .nav-link .kbd {
  display: none !important;
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  padding: 2px 5px;
  border: 1px solid var(--line);
  border-radius: 3px;
  color: var(--text-3);
  background: var(--bg);
  flex-shrink: 0;
  line-height: 1.4;
}
.app-shell .main-nav .nav-link .badge {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px !important;
  font-weight: 500;
  padding: 2px 6px !important;
  min-width: 0 !important;
  background: var(--accent) !important;
  color: var(--accent-ink) !important;
  border-radius: 3px !important;
  flex-shrink: 0;
  letter-spacing: 0;
  line-height: 1.4;
  box-shadow: none !important;
}

/* Connexion nav link — toujours caché sauf sur la page connexion elle-même */
.app-shell .main-nav .nav-link[href*="connexion"] {
  display: none !important;
}
body.page-connexion .app-shell .main-nav .nav-link[href*="connexion"] {
  display: flex !important;
}

/* ============ TB-SEARCH icon + placeholder ============ */
.app-shell .tb-search {
  text-decoration: none;
  transition: border-color .15s;
}
.app-shell .tb-search:hover { border-color: var(--accent); }
.app-shell .tb-search .ic-search {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--text-3);
}
.app-shell .tb-search .placeholder {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============ TB-ICON svg size + btn-sm in actions ============ */
.app-shell .tb-icon svg {
  width: 14px;
  height: 14px;
}
.app-shell .tb-icon { text-decoration: none; }
.app-shell .tb-actions .btn-primary {
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  background: var(--accent) !important;
  color: var(--accent-ink) !important;
  border: 1px solid var(--accent);
  border-radius: var(--radius-full) !important;
  text-decoration: none;
  box-shadow: none !important;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.app-shell .tb-actions .btn-primary:hover { opacity: 0.9; transform: translateY(-1px); }

/* ============ FOOTER — hidden in app shell ============ */
.app-shell .app-footer {
  display: none;
}

/* ============ STATUS PILLS (référence app.css) ============ */
.app-shell .pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border: 1px solid;
  white-space: nowrap;
}
.app-shell .pill.out   { color: var(--accent);  border-color: color-mix(in oklch, var(--accent)  40%, transparent); background: color-mix(in oklch, var(--accent)  8%, transparent); }
.app-shell .pill.in    { color: var(--ok);      border-color: color-mix(in oklch, var(--ok)      40%, transparent); background: color-mix(in oklch, var(--ok)      8%, transparent); }
.app-shell .pill.dispo { color: var(--ok);      border-color: color-mix(in oklch, var(--ok)      40%, transparent); background: color-mix(in oklch, var(--ok)      8%, transparent); }
.app-shell .pill.alert { color: var(--danger);  border-color: color-mix(in oklch, var(--danger)  40%, transparent); background: color-mix(in oklch, var(--danger)  8%, transparent); }
.app-shell .pill.repar { color: oklch(0.78 0.14 80); border-color: oklch(0.78 0.14 80 / 0.4); background: oklch(0.78 0.14 80 / 0.08); }
.app-shell .pill.ghost { color: var(--text-2);  border-color: var(--line); background: transparent; }

/* ============ ROLE TAGS ============ */
.app-shell .role-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 3px 7px;
  border-radius: 3px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid var(--line);
}
.app-shell .role-tag.admin { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.app-shell .role-tag.user  { background: var(--bg-3); color: var(--text); }
.app-shell .role-tag.viewer { color: var(--text-3); background: transparent; }

/* ============ LIVE DOT ============ */
.live-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--ok);
  border-radius: 50%;
  animation: live-pulse 1.6s ease-in-out infinite;
  vertical-align: middle;
  margin-right: 4px;
}
@keyframes live-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(0.85); }
}

/* ============ USER CHIP (inline table user display) ============ */
.user-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.user-chip .av {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--bg-3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--accent);
  flex-shrink: 0;
}

/* Neutralise les règles nav-collapsed de style.min.css (old horizontal-nav dropdown).
   La sidebar app-shell est toujours visible — nav-collapsed ne doit pas la masquer.
   style.min.css: ".nav-collapsed .main-nav { flex-direction:row !important; width:auto !important;
   margin-left:auto !important; }" (spécificité 0,3,0). Notre sélecteur 0,4,1 l'emporte. */
html.nav-collapsed .app-shell .main-nav,
html.nav-collapsed .app-shell .main-nav:not(.open) {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  max-width: none !important;
  max-height: none !important;
  order: 1 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-top: 0 !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  inset-inline-start: auto !important;
  inset-inline-end: auto !important;
  padding: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
  transform: none !important;
  z-index: auto !important;
}

@media (max-width: 768px) {
  /* Mobile bottom nav : rétablit le défilement horizontal */
  html.nav-collapsed .app-shell .main-nav,
  html.nav-collapsed .app-shell .main-nav:not(.open) {
    flex-direction: row !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }
}

/* ============ NAV DRAWER OVERLAY ============ */
.nav-drawer-overlay {
  display: none;
}

/* ============ TYPOGRAPHY TOKENS ============ */
.app-shell h1, .app-shell h2, .app-shell h3,
.app-shell h4, .app-shell h5, .app-shell h6 {
  font-family: var(--font-sans);
  letter-spacing: -0.01em;
}

/* ============ FORMS ============ */
.app-shell input, .app-shell select, .app-shell textarea {
  font-family: var(--font-sans);
  background: var(--bg-2);
  border-color: var(--line);
  color: var(--text);
}
.app-shell button {
  font-family: var(--font-sans);
}

/* ============ BTN OVERRIDES ============ */
.app-shell .btn.primary,
.app-shell button.primary {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}

/* ============ MOBILE — BOTTOM NAV ============ */
@media (max-width: 768px) {
  /* Scroll naturel sur body — le desktop overflow:hidden ne s'applique plus */
  body.app-shell {
    overflow: auto !important;
    height: auto !important;
  }

  /* Sidebar → bottom nav fixée en bas, pleine largeur */
  body.app-shell .app-header {
    position: fixed !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: auto !important;
    flex-direction: row !important;
    align-items: center !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    border-right: none !important;
    border-top: 1px solid var(--line) !important;
    background: var(--bg-2) !important;
    box-shadow: 0 -1px 0 var(--line) !important;
    padding: 4px 0 !important;
    z-index: 300 !important;
  }

  /* Masquer marque + user menu — gain de place */
  .app-shell .app-header-left,
  body.app-shell .app-header-right {
    display: none !important;
  }

  /* Nav en ligne, scrollable si trop d'items */
  body.app-shell .main-nav {
    flex-direction: row !important;
    width: 100% !important;
    padding: 0 !important;
    gap: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    justify-content: space-around;
    -webkit-overflow-scrolling: touch;
  }

  /* Sections masquées (EXPLOITATION, PILOTAGE…) */
  .app-shell .main-nav .sb-section {
    display: none !important;
  }

  /* Items : icône au-dessus, label en dessous */
  .app-shell .main-nav .nav-link {
    flex: 1 0 auto !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    padding: 8px 6px !important;
    margin: 0 !important;
    border-radius: 0 !important;
    font-size: 10px !important;
    text-align: center;
    min-width: 56px !important;
    max-width: 80px;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    position: relative;
  }

  /* Indicateur actif : trait brique 2px en haut (remplace la barre verticale gauche) */
  .app-shell .main-nav .nav-link::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    bottom: auto !important;
    width: 18px !important;
    height: 2px !important;
    border-radius: 0 0 2px 2px !important;
    background: transparent !important;
    transform: translateX(-50%) !important;
  }
  .app-shell .main-nav .nav-link.active::before {
    background: var(--accent) !important;
  }

  /* Item actif : brique, pas de fond */
  .app-shell .main-nav .nav-link.active {
    background: transparent !important;
    color: var(--accent) !important;
  }
  .app-shell .main-nav .nav-link.active .ic {
    color: var(--accent) !important;
    opacity: 1 !important;
  }

  /* Icône */
  .app-shell .main-nav .nav-link .ic {
    width: 18px !important;
    height: 18px !important;
    opacity: 1 !important;
  }
  .app-shell .main-nav .nav-link .ic svg {
    width: 18px !important;
    height: 18px !important;
  }

  /* Label sous l'icône */
  .app-shell .main-nav .nav-link .label {
    font-size: 10px !important;
    white-space: nowrap;
    line-height: 1.1;
  }

  /* Main : pleine largeur + padding-bottom pour éviter la bottom nav */
  body.app-shell .app-main {
    margin-left: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 72px !important;
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
    height: auto !important;
    min-height: 100dvh;
    overflow: visible !important;
  }

  /* Topbar compact */
  .app-shell .app-topbar {
    padding: 8px 14px !important;
    height: auto !important;
    min-height: 44px;
  }
  .app-shell .app-crumbs h1 { font-size: 13px; }
  .app-shell .app-crumb-sub { display: none; }

  /* Le burger toggle existant n'est plus nécessaire */
  .app-shell .nav-toggle {
    display: none !important;
  }

  /* Shell fidelity: masquer tenant chip + kbd/badge + search en bottom nav */
  .app-shell .sb-tenant { display: none !important; }
  .app-shell .main-nav .nav-link .kbd,
  .app-shell .main-nav .nav-link .badge { display: none !important; }
  .app-shell .tb-search { display: none !important; }
  .app-shell .tb-actions .tb-icon { width: 26px; height: 26px; }

  /* Bottom nav : seulement les 4 items principaux + labels courts */
  .app-shell .main-nav .nav-link[href="/app/synthese-employes"],
  .app-shell .main-nav .nav-link[href="/app/stock-agences"],
  .app-shell .main-nav .nav-link[href="/app/aide"],
  .app-shell .main-nav .nav-link[href="/app/admin"],
  .app-shell .main-nav .nav-link[href="/app/compte"],
  .app-shell .main-nav .nav-link[href="/app/espace-perso"],
  .app-shell .main-nav .nav-link[data-nav-key="account"],
  .app-shell .main-nav .nav-link[data-logout-link="1"],
  .app-shell .main-nav .nav-link[href*="connexion"] {
    display: none !important;
  }

  /* Forcer labels courts sur les 4 items retenus */
  .app-shell .main-nav .nav-link[href="/app"] .label { font-size: 0 !important; }
  .app-shell .main-nav .nav-link[href="/app"] .label::after { content: "Accueil"; font-size: 10px; }

  .app-shell .main-nav .nav-link[href="/app/disponibilite"] .label { font-size: 0 !important; }
  .app-shell .main-nav .nav-link[href="/app/disponibilite"] .label::after { content: "Cherche"; font-size: 10px; }

  .app-shell .main-nav .nav-link[href="/app/historique"] .label { font-size: 0 !important; }
  .app-shell .main-nav .nav-link[href="/app/historique"] .label::after { content: "Mouv."; font-size: 10px; }

  /* Nav principale : espace égal entre les 3-4 items visibles */
  body.app-shell .main-nav {
    justify-content: space-evenly !important;
  }

  /* Subtitle / description — forcer le wrap normal */
  body.app-shell .app-page-desc,
  body.app-shell .view-sub,
  body.app-shell .view-head-sub,
  body.app-shell .page-subtitle {
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }

  /* Tables — scroll horizontal dans wrapper */
  body.app-shell .tbl-wrap {
    overflow-x: auto !important;
  }
  body.app-shell .tbl-wrap table,
  body.app-shell .tbl-wrap .tbl {
    min-width: 560px !important;
  }

  /* Topbar title — pas de wrapping forcé */
  body.app-shell .app-page-title,
  body.app-shell .view-head h1 {
    font-size: 20px !important;
    white-space: normal !important;
  }

  /* nav drawer overlay (mobile) */
  .nav-drawer-overlay.open {
    display: block;
    position: fixed;
    inset: 0;
    background: oklch(0.1 0.005 90 / 0.6);
    z-index: 199;
  }
}

/* ============ BUTTON OVERRIDES ============ */
/* style.min.css définit .btn { border-radius: var(--radius-full) } et des règles
   page-specific à 999px. body.app-shell augmente la spécificité pour imposer 4px. */
body.app-shell .btn,
body.app-shell .btn.small,
body.app-shell .btn.large {
  border-radius: var(--radius) !important;
  box-shadow: none !important;
}

body.app-shell .btn.ghost,
body.app-shell .btn-ghost {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: var(--radius) !important;
  box-shadow: none !important;
}
body.app-shell .btn.ghost:hover,
body.app-shell .btn-ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
}

body.app-shell .btn.secondary {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text-2);
  border-radius: var(--radius) !important;
  box-shadow: none !important;
}
body.app-shell .btn.secondary:hover {
  border-color: var(--accent);
  color: var(--accent);
}


/* ============ KPI VALUES ============ */
/* .kpi-value est injecté par JS sur les pages mouvements/disponibilite */
body.app-shell .kpi-value,
body.page-history .kpi-value,
body.page-availability .kpi-value {
  font-family: var(--font-mono);
  font-size: 28px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.1;
}
body.app-shell .kpi-value.accent { color: var(--accent); }
body.app-shell .kpi-value.ok     { color: var(--ok); }
body.app-shell .kpi-value.warn   { color: var(--danger); }

body.app-shell .kpi-label {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-3);
}

/* ============ NOTICE BANNER DANGER ============ */
/* Écrase les variables legacy rgba(255,100,100,...) par le rouge système */
body.app-shell {
  --notice-danger-bg:     oklch(0.72 0.18 28 / 0.10);
  --notice-danger-border: oklch(0.72 0.18 28 / 0.40);
  --notice-danger-text:   var(--text);
}
body.app-shell .notice-banner.danger strong {
  color: var(--danger);
}
body.app-shell .notice-banner.danger .btn {
  border-radius: var(--radius) !important;
  box-shadow: none !important;
}

/* ============================================================
   /app — Refonte visuelle de la page d'enregistrement
   Cible la grammaire dense de references/App/App.html
   Ne touche pas le HTML — purement CSS
============================================================ */

/* Topbar : compact + mono caps */
.app-shell .app-topbar {
  height: 48px;
  padding: 0 24px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 16px;
}
.app-shell .app-crumbs {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}
.app-shell .app-crumbs > :last-child,
.app-shell .app-crumbs .current {
  color: var(--text);
  text-transform: none;
  letter-spacing: normal;
  font-family: var(--font-sans);
  font-size: 13px;
}

/* View head — titre + subtitle stylisés comme la maquette */
.app-shell .movement-card .movement-card-header {
  border-bottom: 1px solid var(--line);
  padding: 0 0 16px 0;
  margin: 0 0 24px 0;
  background: transparent;
}
.app-shell .movement-card-title {
  display: flex; align-items: flex-start; gap: 14px;
}
.app-shell .movement-card-icon {
  width: 32px; height: 32px;
  border: 1px solid var(--line);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  color: var(--accent);
  background: var(--bg-2);
  flex-shrink: 0;
}
.app-shell .movement-card-icon svg { width: 16px; height: 16px; }
.app-shell .movement-card h2 {
  font-family: var(--font-sans);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--text);
}
.app-shell .movement-card .subtitle {
  font-size: 13px;
  color: var(--text-2);
  margin: 4px 0 0 0;
}

/* Card globale : bg-2, hairline, radius 8px, pas d'ombre */
.app-shell .card.movement-card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 8px !important;
  box-shadow: none !important;
  padding: 24px 28px;
  margin: 16px 24px;
}

/* Form grid : 2 colonnes desktop, 1 colonne mobile */
.app-shell .movement-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 24px;
}
.app-shell .movement-form-grid .form-group.type-group,
.app-shell .movement-form-grid .form-group:has(#movement-date) {
  grid-column: 1 / -1;
}

/* Fallback sans :has() pour le groupe date */
.app-shell .movement-form-grid .form-group-date {
  grid-column: 1 / -1;
}

/* Form labels : mono caps */
.app-shell .form-group label {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 6px;
}
.app-shell .form-group label svg,
.app-shell .form-group label i {
  width: 12px; height: 12px;
  opacity: 0.8;
  color: inherit;
}

/* Inputs / selects : dense, hairline, radius 4px */
.app-shell .form-group input[type="text"],
.app-shell .form-group input[type="datetime-local"],
.app-shell .form-group input[type="email"],
.app-shell .form-group input[type="tel"],
.app-shell .form-group select,
.app-shell .form-group textarea {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 4px !important;
  padding: 8px 12px;
  font-size: 13px;
  font-family: var(--font-sans);
  width: 100%;
  outline: none;
  transition: border-color .15s;
  box-shadow: none !important;
}
.app-shell .form-group input::placeholder,
.app-shell .form-group textarea::placeholder {
  color: var(--text-3);
}
.app-shell .form-group input:focus,
.app-shell .form-group select:focus,
.app-shell .form-group textarea:focus {
  border-color: var(--accent);
}

/* Toggle Départ/Retour : segmented control */
.app-shell .movement-type-toggle {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--bg);
  padding: 0;
  gap: 0;
  overflow: hidden;
}
.app-shell .movement-type-btn {
  background: transparent;
  border: 0;
  padding: 8px 14px;
  font-size: 13px;
  font-family: var(--font-sans);
  color: var(--text-2);
  cursor: pointer;
  transition: background .15s, color .15s;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.app-shell .movement-type-btn:not(.active):hover {
  background: var(--bg-2);
  color: var(--text);
}
.app-shell .movement-type-btn.active {
  background: var(--accent) !important;
  color: var(--accent-ink) !important;
  font-weight: 500;
}

/* Input + bouton scanner sur la même ligne */
.app-shell .input-action-row {
  display: flex; gap: 8px;
}
.app-shell .input-action-row input { flex: 1; }
.app-shell .input-action-row .scan-btn {
  flex-shrink: 0;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 4px !important;
  padding: 8px 14px;
  font-size: 13px;
  color: var(--text);
  font-family: var(--font-sans);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: none !important;
}
.app-shell .input-action-row .scan-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Form actions : bouton primary à droite */
.app-shell .form-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}
.app-shell .btn.primary,
.app-shell .btn.primary.full {
  background: var(--accent) !important;
  color: var(--accent-ink) !important;
  border: 1px solid var(--accent) !important;
  border-radius: 4px !important;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 500;
  font-family: var(--font-sans);
  box-shadow: none !important;
  transition: transform .15s;
}
.app-shell .btn.primary:hover { transform: translateY(-1px); }
.app-shell .btn.primary.full {
  width: auto;
}

/* Help text : mono petit */
.app-shell .movement-help-text {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-3);
  margin: 16px 0 0 0;
  text-align: center;
}

/* Notice banner : reprise grammaire système */
.app-shell .notice-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 24px;
  border-bottom: 1px solid var(--line);
}
.app-shell .notice-banner.danger {
  background: oklch(0.72 0.18 28 / 0.08);
  border-color: oklch(0.72 0.18 28 / 0.4);
}
.app-shell .notice-banner-message {
  display: flex; align-items: baseline; gap: 12px;
  font-size: 13px;
  color: var(--text);
}
.app-shell .notice-banner-message strong {
  color: var(--danger);
  font-weight: 500;
}
.app-shell .notice-banner-actions .btn.small {
  padding: 6px 12px !important;
  font-size: 12px !important;
}

/* Responsive < 768px : 1 colonne */
@media (max-width: 768px) {
  .app-shell .movement-form-grid {
    grid-template-columns: 1fr;
  }
  .app-shell .card.movement-card {
    margin: 12px 16px;
    padding: 20px 16px;
  }
  .app-shell .form-actions {
    justify-content: stretch;
  }
  .app-shell .btn.primary.full {
    width: 100%;
  }
}

/* ============================================================
   /app/historique — Refonte visuelle de la liste Mouvements
   Cible la grammaire dense de references/App/App.html
   Ne touche pas le HTML — purement CSS
============================================================ */

/* Wrapper principal : panel hairline, padding interne, no shadow */
.app-shell .history-full-card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 16px 24px;
  padding: 0;
  overflow: visible;    /* pas de clip : app-main scrolle, le card grandit naturellement */
  max-height: none;
}

/* ===== 1. HEADER : eyebrow titre + segmented tabs ===== */
.app-shell .history-full-card .preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
  gap: 16px;
  flex-wrap: wrap;
  position: static !important;
}

/* Pill "Mouvements en direct" → eyebrow + live dot */
.app-shell .history-full-card .preview-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text);
  font-weight: 500;
}
.app-shell .history-full-card .preview-pill svg {
  width: 12px; height: 12px;
  color: var(--text-3);
}
.app-shell .history-full-card .preview-pill .live-dot {
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
}
.app-shell .history-full-card .preview-pill .live-dot::after {
  content: "";
  position: absolute; inset: -3px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  opacity: 0.5;
  animation: tk-livePulse 1.6s ease-out infinite;
}
@keyframes tk-livePulse {
  0%   { transform: scale(0.7); opacity: 0.5; }
  100% { transform: scale(2);   opacity: 0;   }
}

/* Filter chips → segmented tabs (le wrapper a le hairline, les boutons sont nus) */
.app-shell .history-full-card .preview-actions {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--bg);
  overflow: hidden;
  padding: 0;
  gap: 0;
  flex-shrink: 0;
}
.app-shell .history-full-card .preview-actions .chip {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 7px 14px;
  font-size: 12px;
  font-family: var(--font-sans);
  color: var(--text-2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background .15s, color .15s;
}
.app-shell .history-full-card .preview-actions .chip:not(.active):hover {
  background: var(--bg-2);
  color: var(--text);
}
.app-shell .history-full-card .preview-actions .chip.active {
  background: var(--accent) !important;
  color: var(--accent-ink) !important;
  font-weight: 500;
}
.app-shell .history-full-card .preview-actions .chip svg {
  width: 12px; height: 12px;
}
.app-shell .history-full-card .preview-actions .chip.ghost svg {
  opacity: 0.7;
}

/* ===== 2. KPI STRIP ===== */
.app-shell .history-full-card .history-stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  padding: 0;
}
.app-shell .history-full-card .history-stat {
  padding: 24px 28px;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
}
.app-shell .history-full-card .history-stat + .history-stat {
  border-left: 1px solid var(--line) !important;
}
.app-shell .history-full-card .history-stat .label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}
.app-shell .history-full-card .history-stat .value {
  font-family: var(--font-mono);
  font-size: 40px;
  font-weight: 500;
  line-height: 1;
  color: var(--text);
  letter-spacing: -0.02em;
}
.app-shell .history-full-card .history-stat .value.warn {
  color: var(--accent);
}
.app-shell .history-full-card .history-stat .value.ok {
  color: var(--ok);
}

/* ===== 3. FORMULAIRE FILTRES (dépliable) ===== */
.app-shell .history-full-card .filters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px 16px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--line);
  background: transparent;
}
.app-shell .history-full-card .filters-grid[hidden] { display: none; }
.app-shell .history-full-card .filters-grid .form-group label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 4px;
  display: block;
}
.app-shell .history-full-card .filters-grid .form-group select,
.app-shell .history-full-card .filters-grid .form-group input {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 4px !important;
  padding: 7px 10px;
  font-size: 13px;
  color: var(--text);
  font-family: var(--font-sans);
  box-shadow: none !important;
}

/* ===== 4. LIST DES ROWS — DENSE ===== */
.app-shell .history-full-card .history-full-list {
  background: transparent;
  padding: 0;
}
.app-shell .history-full-card .history-full-list::before {
  display: none;
}
/* Reset global : tous les preview-row dans l'app-shell sont des lignes plates */
body.app-shell .preview-row {
  border-radius: 0 !important;
  background: transparent !important;
  border: none !important;
  border-top: 1px solid var(--line-soft) !important;
  margin-bottom: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}
body.app-shell .preview-row:hover {
  background: var(--bg-3) !important;
  transform: none !important;
  box-shadow: none !important;
}
body.app-shell .preview-row:first-child {
  border-top: none !important;
}
/* Layout 2 colonnes par défaut (l/r) */
.app-shell .history-full-card .preview-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  padding: 14px 24px;
  align-items: center;
}

/* Left : badge label + titre + meta */
.app-shell .history-full-card .preview-left {
  display: flex;
  align-items: baseline;
  gap: 16px;
  min-width: 0;
  flex-wrap: wrap;
}
.app-shell .history-full-card .preview-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
  flex-shrink: 0;
  width: 60px;
}
.app-shell .history-full-card .preview-label.green {
  color: var(--ok);
}
.app-shell .history-full-card .preview-label.danger {
  color: var(--danger);
}
.app-shell .history-full-card .preview-title {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--text);
  font-weight: 500;
  flex: 1 1 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.app-shell .history-full-card .preview-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
  letter-spacing: 0.02em;
  flex: 1 1 100%;
}
.app-shell .history-full-card .preview-meta b {
  color: var(--text-2);
  font-weight: 500;
}

/* Right : status pill + actions */
.app-shell .history-full-card .preview-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.app-shell .history-full-card .preview-status {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 3px 10px;
  border: 1px solid var(--line);
  border-radius: 999px !important;
  color: var(--text-3);
  white-space: nowrap;
  background: transparent !important;
  box-shadow: none !important;
}
.app-shell .history-full-card .preview-status.muted {
  color: var(--text-3);
  border-color: var(--line);
}
.app-shell .history-full-card .preview-status.ok {
  color: var(--ok);
  border-color: oklch(0.78 0.14 155 / 0.4);
}
.app-shell .history-full-card .preview-status.warn {
  color: var(--accent);
  border-color: oklch(0.66 0.17 38 / 0.4);
}
.app-shell .history-full-card .preview-status.danger {
  color: var(--danger);
  border-color: oklch(0.72 0.18 28 / 0.4);
}
.app-shell .history-full-card .preview-status i,
.app-shell .history-full-card .preview-status svg {
  margin-right: 4px;
  font-size: 12px;
}

/* Boutons d'action en ligne (Supprimer) */
.app-shell .history-full-card .preview-actions-inline {
  display: inline-flex;
  gap: 6px;
}
.app-shell .history-full-card .btn.small {
  padding: 5px 10px !important;
  font-size: 11px !important;
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 4px !important;
  border: 1px solid var(--line) !important;
  background: transparent !important;
  color: var(--text-2) !important;
  box-shadow: none !important;
}
.app-shell .history-full-card .btn.small.danger {
  color: var(--danger) !important;
  border-color: oklch(0.72 0.18 28 / 0.3) !important;
}
.app-shell .history-full-card .btn.small.danger:hover {
  background: oklch(0.72 0.18 28 / 0.08) !important;
  border-color: oklch(0.72 0.18 28 / 0.5) !important;
}

/* ===== 5. FOOT (3 stats) ===== */
.app-shell .history-full-card .preview-footer.history-foot {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  background: var(--bg-2);
  padding: 0;
  /* position: sticky retiré — le footer reste en flow naturel */
}
.app-shell .history-full-card .preview-foot-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 24px;
  background: transparent;
  border: 0;
}
.app-shell .history-full-card .preview-foot-item + .preview-foot-item {
  border-left: 1px solid var(--line);
}
.app-shell .history-full-card .preview-foot-item .foot-title {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}
.app-shell .history-full-card .preview-foot-item .foot-value {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 500;
  line-height: 1;
  color: var(--text);
}
.app-shell .history-full-card .preview-foot-item .foot-value.ok    { color: var(--ok); }
.app-shell .history-full-card .preview-foot-item .foot-value.warn  { color: var(--accent); }
.app-shell .history-full-card .preview-foot-item .foot-value.danger{ color: var(--danger); }

/* ===== 6. PAGINATION ===== */
.app-shell .history-full-card .history-pagination {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 24px;
  border-top: 1px solid var(--line);
  background: transparent;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--text-3);
  flex-wrap: wrap;
}
.app-shell .history-full-card .history-pagination span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.app-shell .history-full-card .history-pagination input,
.app-shell .history-full-card .history-pagination select {
  width: 56px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 4px !important;
  padding: 4px 8px;
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--text);
  text-align: center;
  box-shadow: none !important;
}
.app-shell .history-full-card .history-pagination button {
  padding: 5px 12px;
  font-size: 11px;
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  border-radius: 4px !important;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  box-shadow: none !important;
}
.app-shell .history-full-card .history-pagination button:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.app-shell .history-full-card .history-pagination button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ===== Responsive < 768px ===== */
@media (max-width: 768px) {
  .app-shell .history-full-card {
    margin: 12px 16px;
  }
  .app-shell .history-full-card .preview-header {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 12px 16px;
  }
  .app-shell .history-full-card .preview-actions {
    overflow-x: auto;
    width: 100%;
  }
  .app-shell .history-full-card .history-stats-row,
  .app-shell .history-full-card .preview-footer.history-foot {
    grid-template-columns: 1fr;
  }
  .app-shell .history-full-card .history-stat + .history-stat,
  .app-shell .history-full-card .preview-foot-item + .preview-foot-item {
    border-left: 0 !important;
    border-top: 1px solid var(--line) !important;
  }
  .app-shell .history-full-card .preview-row {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 14px 16px;
  }
  .app-shell .history-full-card .preview-right {
    justify-content: space-between;
  }
  .app-shell .history-full-card .preview-label {
    width: auto;
  }
  .app-shell .history-full-card .preview-title {
    white-space: normal;
  }
}

/* ============================================================
   /app/disponibilite — Refonte visuelle Recherche matériel
   Purement CSS — aucun HTML ni JS modifié
============================================================ */

/* ===== 1. HEADER COLONNE + CHAMP DE RECHERCHE ===== */

/* ===== ZONE DE RECHERCHE — hero ===== */
.availability-page .history-full-card .avail-search-hero {
  padding: 28px 28px 22px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 100%);
}

.avail-search-label {
  font-size: 11px;
  font-family: var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 500;
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.avail-search-label::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  box-shadow: 0 0 7px oklch(0.66 0.17 38 / 0.65);
}

/* Wrapper flex = conteneur visuel (bordure + ombre + padding).
   L'espacement icon↔texte vient du gap et du padding du wrapper,
   pas de margin-left ni d'overflow:hidden → pas de clipping. */
.avail-search-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  background: var(--bg);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 4px 24px oklch(0 0 0 / 0.13), 0 1px 4px oklch(0 0 0 / 0.07);
  transition: border-color .2s, box-shadow .2s;
}
.avail-search-wrap:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px oklch(0.66 0.17 38 / 0.15), 0 4px 20px oklch(0 0 0 / 0.08);
}

.avail-search-icon {
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  color: var(--text-3);
  pointer-events: none;
  transition: color .2s;
}
.avail-search-wrap:focus-within .avail-search-icon {
  color: var(--accent);
}

/* Input transparent — bordure et ombre sur le wrapper */
.avail-search-input {
  flex: 1 1 auto;
  min-width: 0;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  border-radius: 0 !important;
  padding: 16px 0 !important;
  font-size: 16px !important;
  font-family: var(--font-sans) !important;
  color: var(--text) !important;
  box-sizing: border-box;
}
.avail-search-input::placeholder {
  color: var(--text-3);
}

/* Badge ⌘K — disparaît au focus */
.avail-search-kbd {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-3);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 3px 7px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity .2s;
}
.avail-search-wrap:focus-within .avail-search-kbd {
  opacity: 0;
}

.avail-search-hint {
  margin: 10px 0 0;
  font-size: 12px;
  font-family: var(--font-sans);
  color: var(--text-3);
}

/* ===== 2. ZONE DÉTAIL ===== */

/* Séparateur entre la zone détail et la liste de résultats */
.availability-page .history-full-card .history-full-list {
  border-top: 1px solid var(--line);
}

/* Texte d'aide initial dans #availability-detail */
.app-shell .history-full-card #availability-detail > p {
  padding: 14px 24px;
  font-family: var(--font-sans) !important;
  font-size: 13px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--text-3) !important;
  margin: 0 !important;
}

/* Panel détail injecté par JS — écrase le gradient + borderColor inline */
.availability-detail-panel {
  background: var(--bg-2) !important;
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  padding: 20px 24px !important;
  margin: 16px 24px !important;
  overflow: hidden;
}

/* Tête : nom + pill status */
.availability-detail-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
}
.availability-detail-name {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  margin: 0;
}
.availability-detail-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
  letter-spacing: 0.04em;
  margin: 4px 0 0;
}

/* Pill status dans le détail (override du style eyebrow hérité de .preview-pill) */
.availability-detail-panel .preview-pill {
  background: transparent !important;
  border: 1px solid var(--line) !important;
  padding: 4px 12px !important;
  border-radius: 999px !important;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-2);
}
.availability-detail-panel .preview-pill.success {
  color: var(--ok) !important;
  border-color: oklch(0.78 0.14 155 / 0.4) !important;
}
.availability-detail-panel .preview-pill.danger {
  color: var(--danger) !important;
  border-color: oklch(0.72 0.18 28 / 0.4) !important;
}

/* KPI strip — Total / En stock / En chantier */
.availability-detail-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 16px;
}
.availability-detail-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 16px;
  background: var(--bg);
}
.availability-detail-stat + .availability-detail-stat {
  border-left: 1px solid var(--line);
}
.availability-detail-stat-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}
.availability-detail-stat-value {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
  color: var(--text);
  /* le JS surcharge la couleur inline pour ok/danger — intentionnel */
}

/* Sous-sections stock + attributions (inline style="border-top:..." depuis JS) */
.availability-detail-panel > div[style*="border-top"] {
  border-top: 1px solid var(--line) !important;
  margin-top: 16px !important;
  padding-top: 16px !important;
  background: transparent;
}
.availability-detail-panel > div[style*="border-top"] > p {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-3) !important;
  margin-bottom: 10px !important;
}
.availability-detail-panel > div[style*="border-top"] ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.availability-detail-panel > div[style*="border-top"] li {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text) !important;
  display: flex;
  align-items: center;
  gap: 8px;
}
.availability-detail-panel > div[style*="border-top"] li strong {
  color: var(--text);
  font-weight: 500;
}

/* ===== 3. ROWS RÉSULTATS ===== */

/* Badges tone JS : .preview-label.success → var(--ok) */
.app-shell .history-full-card .preview-label.success {
  color: var(--ok);
}

/* .preview-label.danger déjà défini dans le bloc historique */

/* ===== 3. ROWS RÉSULTATS — tableau ===== */

/* En-tête colonnes */
.availability-page .history-full-card .availability-table-head {
  display: grid;
  grid-template-columns: 2fr 1fr 80px;
  gap: 12px;
  padding: 7px 24px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 500;
}
.availability-page .history-full-card .availability-table-head span:last-child {
  text-align: right;
}

/* Row : grille 3 colonnes — titre | meta | badge */
.availability-page .history-full-card .availability-row {
  display: grid !important;
  grid-template-columns: 2fr 1fr 80px !important;
  gap: 12px !important;
  padding: 11px 24px 11px 28px !important;
  align-items: center !important;
  position: relative !important;
}

/* Barre accent gauche au survol / sélection */
.availability-row::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 6px !important;
  bottom: 6px !important;
  width: 3px !important;
  border-radius: 0 2px 2px 0 !important;
  background: var(--accent) !important;
  opacity: 0 !important;
  transition: opacity .15s !important;
}
.availability-row:hover::before { opacity: 0.45 !important; }
.availability-row.active::before { opacity: 1 !important; }

/* Dissoudre .preview-left : ses enfants deviennent items de grille */
.availability-row .preview-left {
  display: contents !important;
}

/* Titre : 1re colonne */
.availability-row .availability-row-title {
  order: -1 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--text) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  min-width: 0 !important;
  display: block !important;
  width: auto !important;
  line-height: 1.3 !important;
}

/* Meta : 2e colonne */
.availability-row .availability-row-meta {
  order: 0 !important;
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
  width: auto !important;
  gap: 0 !important;
}
.availability-row .preview-label {
  display: none !important;
}
.availability-row .availability-row-meta .preview-meta {
  font-family: var(--font-sans) !important;
  font-size: 11px !important;
  color: var(--text-3) !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  min-width: 0 !important;
}

/* Badges : 3e colonne */
.availability-row .preview-right {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 4px !important;
}

/* Badge dot-style : point coloré + texte, sans bordure */
.availability-row .preview-status {
  border: none !important;
  background: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 11px !important;
  font-family: var(--font-sans) !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
}
.availability-row .preview-status::before {
  content: "" !important;
  display: inline-block !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
}
.availability-row .preview-status.ok {
  color: var(--ok) !important;
}
.availability-row .preview-status.ok::before {
  background: var(--ok) !important;
  box-shadow: 0 0 5px oklch(0.78 0.14 155 / 0.5) !important;
}
.availability-row .preview-status.warn {
  color: var(--accent) !important;
}
.availability-row .preview-status.warn::before {
  background: var(--accent) !important;
  box-shadow: 0 0 5px oklch(0.66 0.17 38 / 0.5) !important;
}
.availability-row .preview-status.danger {
  color: var(--danger) !important;
}
.availability-row .preview-status.danger::before {
  background: var(--danger) !important;
  box-shadow: 0 0 5px oklch(0.72 0.18 28 / 0.5) !important;
}
.availability-row .preview-status i.bx {
  display: none !important;
}

/* Row sélectionnée */
.app-shell .history-full-card .preview-row.active {
  background: oklch(0.66 0.17 38 / 0.05) !important;
}
.app-shell .history-full-card .preview-row.clickable {
  cursor: pointer;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
  .availability-detail-panel {
    margin: 12px 16px !important;
    padding: 16px !important;
  }
  .availability-detail-stats {
    grid-template-columns: 1fr 1fr;
  }
  .availability-detail-stat:last-child {
    border-left: 0;
    border-top: 1px solid var(--line);
    grid-column: 1 / -1;
  }
  .availability-detail-head {
    flex-direction: column;
    gap: 10px;
  }
  /* Search hero */
  .availability-page .history-full-card .avail-search-hero {
    padding: 16px 16px 14px;
  }
  .avail-search-wrap {
    gap: 8px;
    padding: 0 14px;
  }
  .avail-search-input {
    font-size: 14px !important;
    padding: 13px 0 !important;
  }
  .avail-search-kbd {
    display: none;
  }
  /* Rows : retour à 2 colonnes (titre+meta | badge) */
  .availability-page .history-full-card .availability-row {
    grid-template-columns: 1fr auto !important;
    padding: 9px 16px !important;
    gap: 8px !important;
  }
  .availability-row .preview-left {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    min-width: 0 !important;
  }
  .availability-row .availability-row-title {
    order: -1 !important;
    width: 100% !important;
  }
  .availability-row .availability-row-meta {
    order: 0 !important;
    width: 100% !important;
  }
  .availability-page .history-full-card .availability-table-head {
    display: none;
  }
}

/* ============================================================
   /app/historique — Layout app-shell : list scrolle en interne
   ============================================================ */

/* Le card devient un flex column qui remplit main */
.app-shell .history-full-card {
  display: flex !important;
  flex-direction: column !important;
  height: calc(100vh - 120px) !important;
  max-height: calc(100vh - 120px) !important;
  overflow: hidden !important;
}

/* La list ne scrolle plus seule — le card entier scrolle */
.app-shell .history-full-card .history-full-list,
.app-shell .history-full-card .preview-main {
  overflow-y: visible !important;
  overflow-x: visible !important;
  flex: none !important;
  min-height: 0 !important;
}

/* Le card lui-même scrolle (comme .view dans la maquette) */
.app-shell .app-main {
  overflow: hidden !important;
  height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
}
.app-shell .app-main > .notice-banner,
.app-shell .app-main > .app-topbar {
  flex: 0 0 auto;
}
.app-shell .app-main > .history-full-card,
.app-shell .app-main > .availability-page-card,
.app-shell .app-main > .card.movement-card,
.app-shell .app-main > .card.account-page-card {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
}

/* Scrollbar discrète (Webkit/Chromium) */
.app-shell .app-main > .history-full-card::-webkit-scrollbar,
.app-shell .app-main > .availability-page-card::-webkit-scrollbar,
.app-shell .app-main > .card.movement-card::-webkit-scrollbar,
.app-shell .app-main > .card.account-page-card::-webkit-scrollbar {
  width: 8px;
}
.app-shell .app-main > .history-full-card::-webkit-scrollbar-thumb,
.app-shell .app-main > .availability-page-card::-webkit-scrollbar-thumb,
.app-shell .app-main > .card.movement-card::-webkit-scrollbar-thumb,
.app-shell .app-main > .card.account-page-card::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 4px;
}
.app-shell .app-main > .history-full-card::-webkit-scrollbar-thumb:hover,
.app-shell .app-main > .availability-page-card::-webkit-scrollbar-thumb:hover,
.app-shell .app-main > .card.movement-card::-webkit-scrollbar-thumb:hover,
.app-shell .app-main > .card.account-page-card::-webkit-scrollbar-thumb:hover {
  background: var(--line-soft, var(--text-3));
}

/* Shell fidelity — très petits écrans : masquer les icônes topbar */
@media (max-width: 480px) {
  .app-shell .tb-actions .tb-icon { display: none !important; }
  .app-shell .tb-actions .tb-icon[aria-label="Aide"] { display: flex !important; }
  .app-shell .tb-actions .btn-primary { padding: 5px 10px; font-size: 12px; }
}

/* ============================================================
   BIG SHELL FIDELITY — 2026-05-15
============================================================ */

/* Cache le wordmark dupliqué dans le footer (logo-circle) */
body.app-shell .footer-container .logo-circle {
  display: none !important;
}

/* Filet de sécurité : si 2 .tb-search dans la topbar, cacher le 2e */
.app-shell .app-topbar .tb-search ~ .tb-search {
  display: none !important;
}

/* ===== VIEW HEAD : H1 + subtitle + actions ===== */
.app-shell .view-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 24px 16px 24px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  flex-shrink: 0;
}
.app-shell .view-head-left {
  flex: 1;
  min-width: 0;
}
.app-shell .view-head h1 {
  font-family: var(--font-sans);
  font-size: 32px;
  font-weight: 500;
  letter-spacing: -0.015em;
  margin: 0 0 4px 0;
  color: var(--text);
  line-height: 1.1;
}
.app-shell .view-head-sub {
  font-size: 14px;
  color: var(--text-2);
  margin: 0;
}
.app-shell .view-head-right {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  align-items: center;
}

/* ===== TABS BAR — preview-header.tabs-bar ===== */
.app-shell .history-full-card .preview-header.tabs-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 24px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
  position: static !important;
  flex-wrap: nowrap;
}
.app-shell .history-full-card .preview-tabs {
  display: flex;
  gap: 0;
  flex: 1;
  overflow: hidden;
}
.app-shell .history-full-card .preview-tabs .preview-tab {
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 14px 0;
  margin-right: 24px;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--text-2);
  cursor: pointer;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  transition: color .15s, border-color .15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.app-shell .history-full-card .preview-tabs .preview-tab:hover {
  color: var(--text);
}
.app-shell .history-full-card .preview-tabs .preview-tab.active {
  color: var(--text);
  border-bottom-color: var(--accent);
  font-weight: 500;
}
.app-shell .history-full-card .preview-filter-dropdowns {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  align-items: center;
}
.app-shell .history-full-card .preview-filter-dropdowns .btn {
  background: transparent !important;
  border: 1px solid var(--line) !important;
  color: var(--text-2) !important;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 12px !important;
  border-radius: 4px !important;
  box-shadow: none !important;
}
.app-shell .history-full-card .preview-filter-dropdowns .btn:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

/* ===== PAGE MOUVEMENTS — Table head + 5-col grid rows ===== */
/* Scopé à body.mouvements-page pour ne pas affecter disponibilite/stock-agences */

body.mouvements-page .history-full-card .preview-table-head {
  display: grid;
  grid-template-columns: 80px 1fr 2fr 140px 100px;
  gap: 12px;
  padding: 10px 24px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 500;
}

/* Rows : display:grid 5-col.
   display:contents sur .preview-left/.preview-right expose
   leurs enfants directs comme items de la grille parente. */
body.mouvements-page .history-full-card .history-full-list .preview-row {
  display: grid;
  grid-template-columns: 80px 1fr 2fr 140px 100px;
  gap: 12px;
  padding: 11px 24px;
  border-top: 1px solid var(--line-soft, var(--line));
  align-items: center;
  /* Reset card appearance → ligne tableau plate */
  border-radius: 0 !important;
  background: transparent !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: none !important;
  margin-bottom: 0 !important;
  box-shadow: none !important;
}
body.mouvements-page .history-full-card .history-full-list .preview-row:hover {
  transform: none !important;
  background: var(--bg-3) !important;
  box-shadow: none !important;
  border-color: transparent !important;
  border-top-color: var(--line-soft, var(--line)) !important;
}
body.mouvements-page .history-full-card .history-full-list .preview-left {
  display: contents;
}
body.mouvements-page .history-full-card .history-full-list .preview-right {
  display: contents;
}

/* Pill TYPE (1re colonne) */
body.mouvements-page .history-full-card .preview-label {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 10px;
  width: max-content;
  max-width: 80px;
  text-align: center;
  white-space: nowrap;
  font-size: 9px;
  letter-spacing: 0.12em;
}
body.mouvements-page .history-full-card .preview-label:not(.green):not(.danger):not(.success) {
  color: var(--accent);
  border-color: oklch(0.66 0.17 38 / 0.4);
}
body.mouvements-page .history-full-card .preview-label.green,
body.mouvements-page .history-full-card .preview-label.success {
  color: var(--ok);
  border-color: oklch(0.78 0.14 155 / 0.4);
}
body.mouvements-page .history-full-card .preview-label.danger {
  color: var(--danger);
  border-color: oklch(0.72 0.18 28 / 0.4);
}

/* Titre matériel (2e colonne) */
body.mouvements-page .history-full-card .preview-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--text) !important;
}

/* Meta : employé·chantier·date (3e colonne) */
body.mouvements-page .history-full-card .preview-meta {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: none;
  font-size: 12px !important;
  font-family: var(--font-mono) !important;
  color: var(--text-3) !important;
}

/* Statut pill (4e colonne) */
body.mouvements-page .history-full-card .preview-status {
  justify-self: start;
}

/* Actions (5e colonne) */
body.mouvements-page .history-full-card .preview-actions-inline {
  display: flex;
  gap: 6px;
  justify-self: end;
  align-self: center;
}

/* ============ SIDEBAR BRAND ORDER FIX ============ */
/* .sb-brand was rendering inside .app-header-left at ~479px instead of top */
.app-shell .app-header {
  display: flex !important;
  flex-direction: column !important;
}
.app-shell .app-header > .app-header-left {
  order: -10 !important;
}
.app-shell .app-header > .main-nav {
  order: 0 !important;
}
.app-shell .app-header > .app-header-actions {
  order: 10 !important;
}

/* ============================================================
   CORRECTIFS CONFLITS STYLE.MIN.CSS — 2026-05-17
   Règles héritées qui "fuient" dans le shell de l'app.
   Toutes scopées à body.app-shell / .app-shell.
============================================================ */

/* ── Sidebar : supprime le backdrop-filter verre de l'ancien header ── */
body.app-shell .app-header {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ── Cards : supprime le filet gradient décoratif en haut ── */
body.app-shell .card::before,
body.app-shell .movement-card::before {
  display: none !important;
}

/* ── Nav links : override JS qui injecte display:inline-flex ──
   adminLink.style.display = "inline-flex" + logout link = "inline-flex"
   → les liens ne prennent pas la pleine largeur de la sidebar.
   CSS !important bat les inline styles sans !important. */
.app-shell .main-nav .nav-link {
  display: flex !important;
}

/* ── Auth container (div.header-auth) dans le footer sidebar ──
   JS crée div avec style="display:flex; align-items:center; gap:.5rem"
   On override pour étirer verticalement dans .app-header-right. */
body.app-shell .header-auth {
  width: 100% !important;
  align-items: stretch !important;
  flex-direction: column !important;
  gap: 0 !important;
}

/* ── User menu toggle → bloc plat (pas pill button) ─────────
   style.min.css → border-radius:999px + gradient + ::after{content:"Compte"}
   Dans la sidebar, on veut une rangée plate façon .sb-user. */
body.app-shell .user-menu-toggle {
  min-height: auto !important;
  padding: 6px 4px !important;
  border-radius: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  display: flex !important;
  width: 100% !important;
  align-items: center !important;
  gap: 10px !important;
  color: var(--text) !important;
  transition: color .15s !important;
}
body.app-shell .user-menu-toggle:hover {
  background: color-mix(in oklch, var(--bg-3) 60%, transparent) !important;
  border: none !important;
  box-shadow: none !important;
  transform: none !important;
}
body.app-shell .user-menu-toggle::before {
  display: none !important;
}
/* Supprime le texte "Compte" injecté en ::after par le vieux CSS mobile */
body.app-shell .user-menu-toggle::after {
  display: none !important;
  content: "" !important;
}

/* Avatar : cercle, couleur accent */
body.app-shell .user-menu-avatar {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: var(--bg-3) !important;
  border: none !important;
  box-shadow: none !important;
  font-size: 11px !important;
  color: var(--accent) !important;
  flex-shrink: 0 !important;
}

/* Méta nom + rôle : visible (style.min.css les masque sur mobile) */
body.app-shell .user-menu-meta {
  display: flex !important;
  flex: 1 !important;
  min-width: 0 !important;
  max-width: none !important;
  flex-direction: column !important;
  line-height: 1.2 !important;
}
body.app-shell .user-menu-name {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--text) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.app-shell .user-menu-role {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  color: var(--text-3) !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Caret chevron */
body.app-shell .user-menu-caret {
  display: block !important;
  width: 8px !important;
  height: 8px !important;
  margin-left: auto !important;
  opacity: 0.4 !important;
  flex-shrink: 0;
}

/* ── Sidebar app-header-left : pas de flex-grow ─────────────
   style.min.css : .app-header-left { flex: 1 1 auto } → dans la
   colonne flex de la sidebar, le bloc logo occupe tout l'espace libre
   et crée un grand vide en dessous du logo.
   app.css ne le réinitialise pas → fix ici. */
.app-shell .app-header-left {
  flex: 0 0 auto !important;
}

/* ── Logo : wordmark SVG à la place du carré CSS 14px ───────
   Le carré orange (brand-mark) n'est pas le vrai logo produit.
   On remplace par l'image SVG wordmark via background-image. */
.app-shell .app-header-left .sb-brand .brand-mark {
  width: 90px !important;
  height: 22px !important;
  background: url('/assets/logo-wordmark-dark.svg') no-repeat left center / contain !important;
  position: static !important;
  flex-shrink: 0 !important;
}
.app-shell .app-header-left .sb-brand .brand-mark::after {
  display: none !important;
}
/* Le wordmark inclut déjà "Trakout" — on masque la duplication texte */
.app-shell .app-header-left .sb-brand .brand-text {
  display: none !important;
}

/* ── Movement card : supprime max-width:900px du vieux CSS ──
   .movement-card { max-width: 900px } hérite → card pas pleine largeur. */
body.app-shell .movement-card,
body.app-shell .card.movement-card {
  max-width: 1440px !important;
}

/* ── Form grid align-items ── */
.app-shell .movement-form-grid {
  align-items: start !important;
}

/* ── Form groups : supprime le margin-bottom hérité ─────────
   .form-group { margin-bottom: 1rem } dans style.min.css s'ajoute
   au gap de la grille → double espacement. */
.app-shell .movement-form-grid .form-group,
.app-shell .filters-grid .form-group {
  margin-bottom: 0 !important;
}

/* ── Movement form grid : reset grid-column nth-of-type hérité ─
   Old CSS (@media min-width:1024px) : span 2-3 dans une grille 6-col.
   Avec la grille 2-col de app.css, ça crée des champs involontairement
   pleine-largeur (span 2 dans une grille 2-col = 100% de la largeur). */
.app-shell .movement-form-grid .form-group {
  grid-column: auto !important;
}
.app-shell .movement-form-grid .form-group.type-group,
.app-shell .movement-form-grid .form-group:has(#movement-date),
.app-shell .movement-form-grid .form-group-date,
.app-shell .movement-form-grid .form-actions {
  grid-column: 1 / -1 !important;
}

/* ── Notice banner : barre pleine largeur propre ────────────
   style.min.css : border-radius:10px + box-shadow + margin-bottom
   → ressemble à une card flottante. On veut une barre bord-à-bord. */
body.app-shell .notice-banner {
  border-radius: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
  padding: 10px 24px !important;
}
body.app-shell .notice-banner.info,
body.app-shell .notice-banner.notice-banner--actions {
  background: color-mix(in oklch, var(--accent-2) 10%, transparent);
  border-bottom-color: color-mix(in oklch, var(--accent-2) 30%, transparent) !important;
  color: var(--text) !important;
}
body.app-shell .notice-banner.danger {
  background: oklch(0.72 0.18 28 / 0.08) !important;
  border-bottom-color: oklch(0.72 0.18 28 / 0.4) !important;
  color: var(--text) !important;
}

/* ── Sidebar : layout colonne forcé + ordre des enfants ──────────
   JS crée .app-header-actions AVANT .main-nav et y déplace
   .app-header-right + .nav-toggle. On utilise order pour remettre
   la sidebar dans l'ordre : brand (0) → nav (1) → user/auth (2). */
body.app-shell .app-header {
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;
}
body.app-shell .app-header > .app-header-left { order: 0 !important; }
body.app-shell .app-header > .main-nav        { order: 1 !important; }

/* .app-header-actions : wrapper JS — doit être en bas de sidebar */
body.app-shell .app-header-actions {
  order: 2 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-top: auto !important;
  width: 100% !important;
  height: auto !important;
  flex: 0 0 auto !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important;
}

/* .app-header-right à l'intérieur des actions */
body.app-shell .app-header .app-header-right {
  width: 100% !important;
  margin-left: 0 !important;
  margin-top: 0 !important;
  height: auto !important;
  align-items: stretch !important;
  flex-direction: column !important;
}

/* #auth-container : div JS (class header-auth) — pleine largeur sidebar */
body.app-shell #auth-container {
  width: 100% !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
}

/* ── main-nav largeur : clip horizontal pour que les onglets ne
   dépassent pas la sidebar (évite le contenu caché à droite) ────*/
body.app-shell .main-nav {
  width: 100% !important;
  overflow-x: hidden !important;
}
@media (max-width: 768px) {
  body.app-shell .main-nav {
    overflow-x: auto !important;
  }
}

/* ── Icônes pour les liens injectés par JS (Espace perso, Déconnexion)
   On utilise ::after avec order:-1 pour positionner l'icône avant le
   texte dans le flex-row, sans entrer en conflit avec le ::before
   utilisé par l'indicateur actif (barre brique à gauche). */
.app-shell .main-nav a[data-nav-key="account"]::after,
.app-shell .main-nav a[data-logout-link="1"]::after {
  content: "";
  order: -1;
  display: block;
  width: 14px;
  height: 14px;
  min-width: 14px;
  flex-shrink: 0;
  opacity: 0.7;
  background-color: currentColor;
}
.app-shell .main-nav a[data-nav-key="account"]:hover::after,
.app-shell .main-nav a[data-nav-key="account"].active::after {
  opacity: 1;
  color: var(--accent);
}
.app-shell .main-nav a[data-logout-link="1"]:hover::after {
  opacity: 1;
}
/* Icône personne – espace perso */
.app-shell .main-nav a[data-nav-key="account"]::after {
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4.4 3.6-8 8-8s8 3.6 8 8z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4.4 3.6-8 8-8s8 3.6 8 8z'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Icône déconnexion */
.app-shell .main-nav a[data-logout-link="1"]::after {
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4v2H5v14h4z'/%3E%3Cpath d='M16 17l5-5-5-5v3H9v4h7z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4v2H5v14h4z'/%3E%3Cpath d='M16 17l5-5-5-5v3H9v4h7z'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Mobile bottom nav — icônes plus grandes */
@media (max-width: 768px) {
  .app-shell .main-nav a[data-nav-key="account"]::after,
  .app-shell .main-nav a[data-logout-link="1"]::after {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   JS-INJECTED CARDS & TABLES — redesign system tokens
   Overrides dark-glass aesthetic from style.min.css for all elements
   created at runtime by app-tenant.min.js
   ═══════════════════════════════════════════════════════════════════ */

/* ── Admin cards list container — wrapper façon tbl-wrap ── */
body.app-shell .admin-cards-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  margin-top: 8px !important;
  background: var(--bg-2) !important;
  border: 1px solid var(--line) !important;
  border-radius: 6px !important;
  overflow: hidden !important;
}

/* ── Admin card item — ligne de liste plate (table row style) ── */
body.app-shell .admin-card-item {
  background: transparent !important;
  border: none !important;
  border-top: 1px solid var(--line-soft) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 11px 16px !important;
  transition: background .15s !important;
  transform: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  isolation: auto !important;
  overflow: visible !important;
}
body.app-shell .admin-card-item::before,
body.app-shell .admin-card-item::after {
  display: none !important;
}
body.app-shell .admin-card-item:first-child {
  border-top: none !important;
}
body.app-shell .admin-card-item:hover {
  background: var(--bg-3) !important;
  border-top-color: var(--line-soft) !important;
  transform: none !important;
  box-shadow: none !important;
}

/* ── Admin card layout parts ── */
body.app-shell .admin-card-item.has-aside {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 200px !important;
  gap: 12px !important;
  align-items: start !important;
}
body.app-shell .admin-card-left {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  min-width: 0 !important;
}
body.app-shell .admin-card-right {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  align-items: flex-end !important;
}
body.app-shell .admin-card-header {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}
body.app-shell .admin-card-title {
  color: var(--text) !important;
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: unset !important;
}
body.app-shell .admin-card-meta,
body.app-shell .admin-card-sub {
  color: var(--text-2) !important;
  font-size: 12px !important;
  font-family: var(--font-sans) !important;
}
body.app-shell .admin-card-status {
  color: var(--text-3) !important;
  font-size: 11px !important;
  font-family: var(--font-mono) !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
}
body.app-shell .admin-card-actions {
  display: flex !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
  margin-top: 6px !important;
}

/* ── Admin card badges ── */
body.app-shell .admin-card-badge {
  display: inline-flex !important;
  align-items: center !important;
  padding: 2px 7px !important;
  border-radius: 4px !important;
  font-size: 11px !important;
  font-family: var(--font-mono) !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  background: var(--bg-3) !important;
  color: var(--text-2) !important;
  border: 1px solid var(--line) !important;
  box-shadow: none !important;
}
body.app-shell .admin-card-badge.success,
body.app-shell .admin-card-badge.ok {
  background: color-mix(in oklch, var(--ok) 12%, transparent) !important;
  color: var(--ok) !important;
  border-color: color-mix(in oklch, var(--ok) 30%, transparent) !important;
}
body.app-shell .admin-card-badge.warning,
body.app-shell .admin-card-badge.warn {
  background: color-mix(in oklch, #f59e0b 12%, transparent) !important;
  color: #f59e0b !important;
  border-color: color-mix(in oklch, #f59e0b 30%, transparent) !important;
}
body.app-shell .admin-card-badge.danger,
body.app-shell .admin-card-badge.error {
  background: color-mix(in oklch, var(--danger) 12%, transparent) !important;
  color: var(--danger) !important;
  border-color: color-mix(in oklch, var(--danger) 30%, transparent) !important;
}
body.app-shell .admin-card-badge.info {
  background: color-mix(in oklch, var(--accent) 12%, transparent) !important;
  color: var(--accent) !important;
  border-color: color-mix(in oklch, var(--accent) 30%, transparent) !important;
}

/* ── Category cards ── */
body.app-shell .category-card {
  background: var(--bg-2) !important;
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: border-color .15s, background .15s !important;
}
body.app-shell .category-card:hover {
  background: var(--bg-3) !important;
  border-color: var(--accent) !important;
  transform: none !important;
  box-shadow: none !important;
}
body.app-shell .category-card::before,
body.app-shell .category-card::after {
  display: none !important;
}
body.app-shell .category-card-name,
body.app-shell .category-card-title {
  color: var(--text) !important;
  font-weight: 600 !important;
  background: none !important;
  -webkit-text-fill-color: unset !important;
}
body.app-shell .category-card-count,
body.app-shell .category-card-meta {
  color: var(--text-2) !important;
  font-size: 12px !important;
}
body.app-shell .category-card-icon {
  color: var(--accent) !important;
  background: color-mix(in oklch, var(--accent) 10%, transparent) !important;
  border: 1px solid color-mix(in oklch, var(--accent) 25%, transparent) !important;
  box-shadow: none !important;
}

/* ── Employee cards ── */
body.app-shell .employee-card {
  background: var(--bg-2) !important;
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: border-color .15s, background .15s !important;
}
body.app-shell .employee-card:hover {
  background: var(--bg-3) !important;
  border-color: var(--accent) !important;
  transform: none !important;
  box-shadow: none !important;
}
body.app-shell .employee-card::before,
body.app-shell .employee-card::after {
  display: none !important;
}
body.app-shell .employee-card-name {
  color: var(--text) !important;
  font-weight: 600 !important;
  background: none !important;
  -webkit-text-fill-color: unset !important;
}
body.app-shell .employee-card-role,
body.app-shell .employee-card-meta,
body.app-shell .employee-card-agency {
  color: var(--text-2) !important;
  font-size: 12px !important;
}
body.app-shell .employee-card-avatar {
  background: var(--bg-3) !important;
  border: 1px solid var(--line) !important;
  color: var(--text-2) !important;
  box-shadow: none !important;
}

/* ── Account / subscription cards ── */
body.app-shell .account-card {
  background: var(--bg-2) !important;
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body.app-shell .account-card:hover {
  background: var(--bg-3) !important;
  border-color: var(--accent) !important;
  box-shadow: none !important;
}
body.app-shell .account-metric-card {
  background: var(--bg-2) !important;
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body.app-shell .account-metric-card:hover {
  background: var(--bg-3) !important;
  border-color: var(--line) !important;
}
body.app-shell .account-metric-value {
  color: var(--text) !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  font-family: var(--font-mono) !important;
}
body.app-shell .account-metric-label {
  color: var(--text-3) !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
  font-family: var(--font-mono) !important;
}

/* ── Table wrappers ── */
body.app-shell .table-wrapper {
  background: var(--bg-2) !important;
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
}

/* ── Tables inside app-shell ── */
body.app-shell table {
  width: 100% !important;
  border-collapse: collapse !important;
  background: transparent !important;
}
body.app-shell table thead th {
  background: var(--bg-3) !important;
  color: var(--text-3) !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  padding: 8px 12px !important;
  border-bottom: 1px solid var(--line) !important;
  white-space: nowrap !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
body.app-shell table tbody tr {
  border-bottom: 1px solid var(--line-soft) !important;
  transition: background .1s !important;
}
body.app-shell table tbody tr:last-child {
  border-bottom: none !important;
}
body.app-shell table tbody tr:hover {
  background: color-mix(in oklch, var(--bg-3) 60%, transparent) !important;
}
body.app-shell table tbody td {
  color: var(--text) !important;
  font-size: 13px !important;
  padding: 9px 12px !important;
  vertical-align: middle !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* ── Mobile block-layout table rows ── */
@media (max-width: 640px) {
  body.app-shell table tbody tr {
    display: block !important;
    background: var(--bg-2) !important;
    border: 1px solid var(--line) !important;
    border-radius: 6px !important;
    margin-bottom: 6px !important;
    padding: 8px 12px !important;
  }
  body.app-shell table tbody tr:hover {
    background: var(--bg-3) !important;
    border-color: var(--accent) !important;
  }
  body.app-shell table tbody td {
    display: block !important;
    padding: 3px 0 !important;
    border: none !important;
  }
  /* table.tbl — conserve la structure tableau native sur mobile */
  body.app-shell table.tbl tbody tr {
    display: table-row !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  body.app-shell table.tbl tbody tr:hover {
    background: transparent !important;
    border-color: transparent !important;
  }
  body.app-shell table.tbl tbody td {
    display: table-cell !important;
    padding: 11px 14px !important;
    border-bottom: 1px solid var(--line-soft) !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   TBL — Table dense (design system, port de references/App)
   Conteneur : .tbl-wrap > table.tbl > thead + tbody
   ───────────────────────────────────────────────────────────── */

body.app-shell .tbl-wrap {
  background: var(--bg-2) !important;
  border: 1px solid var(--line) !important;
  border-radius: 6px !important;
  overflow: clip !important; /* clips border-radius without creating a scroll container (keeps sticky thead) */
  margin-top: 12px !important;
}
/* Tbl-wrap blended into history-full-card (no double border, separator comes from preview-header's border-bottom) */
body.app-shell .history-full-card > .tbl-wrap {
  border: none !important;
  border-radius: 0 !important;
  margin-top: 0 !important;
}

body.app-shell table.tbl {
  width: 100% !important;
  border-collapse: collapse !important;
  font-size: 13px !important;
}

body.app-shell .tbl-bar {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 14px !important;
  border-bottom: 1px solid var(--line) !important;
}

body.app-shell .tbl-search-input {
  flex: 1 !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  font-size: 13px !important;
  color: var(--text) !important;
  font-family: var(--font-body) !important;
  padding: 0 !important;
  min-width: 0 !important;
}

body.app-shell .tbl-search-input::placeholder {
  color: var(--text-3) !important;
}

body.app-shell table.tbl thead th {
  text-align: left !important;
  padding: 9px 14px !important;
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: var(--text-3) !important;
  font-weight: 500 !important;
  border-bottom: 1px solid var(--line) !important;
  background: var(--bg-2) !important;
  white-space: nowrap !important;
  position: sticky !important;
  top: 0 !important;
}

body.app-shell table.tbl tbody td {
  padding: 11px 14px !important;
  border-bottom: 1px solid var(--line-soft) !important;
  color: var(--text) !important;
  vertical-align: middle !important;
  font-size: 13px !important;
}

body.app-shell table.tbl tbody tr:last-child td {
  border-bottom: none !important;
}

body.app-shell table.tbl tbody tr:hover td {
  background: var(--bg-3) !important;
  display: table-cell !important;
}

body.app-shell table.tbl .mono {
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
}

body.app-shell table.tbl .dim {
  color: var(--text-3) !important;
}

body.app-shell .tbl-actions {
  display: flex !important;
  gap: 6px !important;
  align-items: center !important;
  flex-wrap: wrap !important;
}

/* Pill variants statut employé / utilisateur */
.app-shell .pill.active   { color: var(--ok);     border-color: color-mix(in oklch, var(--ok)     40%, transparent); background: color-mix(in oklch, var(--ok)     8%, transparent); }
.app-shell .pill.pending  { color: oklch(0.78 0.14 80); border-color: oklch(0.78 0.14 80 / 0.4); background: oklch(0.78 0.14 80 / 0.08); }
.app-shell .pill.disabled { color: var(--text-3); border-color: var(--line); background: transparent; }
.app-shell .pill.manager  { color: var(--accent-2); border-color: color-mix(in oklch, var(--accent-2) 40%, transparent); background: color-mix(in oklch, var(--accent-2) 8%, transparent); }

/* Role tag manager */
.app-shell .role-tag.manager { color: var(--accent-2); border-color: color-mix(in oklch, var(--accent-2) 40%, transparent); background: color-mix(in oklch, var(--accent-2) 8%, transparent); }

/* Mobile : table.tbl conserve le scroll horizontal */
@media (max-width: 768px) {
  body.app-shell .tbl-wrap {
    overflow-x: auto !important;
    overflow-y: clip !important;
    -webkit-overflow-scrolling: touch !important;
  }
  body.app-shell table.tbl {
    min-width: 540px !important;
  }
  body.app-shell table.tbl tbody tr:hover td {
    display: table-cell !important;
  }
}

/* Sort indicators */
body.app-shell table.tbl thead th.sortable {
  cursor: pointer !important;
  user-select: none !important;
}
body.app-shell table.tbl thead th.sortable:hover {
  color: var(--text-2) !important;
}
body.app-shell table.tbl thead th.sorted-asc::after {
  content: " ▲" !important;
  font-size: 8px !important;
  opacity: 0.8 !important;
}
body.app-shell table.tbl thead th.sorted-desc::after {
  content: " ▼" !important;
  font-size: 8px !important;
  opacity: 0.8 !important;
}

/* Alignement colonne droite (remplace les style="text-align:right;" inline) */
body.app-shell .col-r {
  text-align: right !important;
}

/* ─── TBL TABS & FILTERS (pattern reference design) ─── */
body.app-shell .tbl-tabs {
  display: flex !important;
  gap: 0 !important;
}
body.app-shell .tbl-tab {
  padding: 6px 12px !important;
  font-size: 12px !important;
  color: var(--text-2) !important;
  cursor: pointer !important;
  border-radius: 4px !important;
  background: transparent !important;
  border: none !important;
  font-family: var(--font-sans) !important;
  transition: background .12s, color .12s !important;
}
body.app-shell .tbl-tab:hover {
  color: var(--text) !important;
}
body.app-shell .tbl-tab.active {
  background: var(--bg-3) !important;
  color: var(--text) !important;
}
body.app-shell .tbl-filter {
  padding: 4px 10px !important;
  border: 1px solid var(--line) !important;
  border-radius: 4px !important;
  font-size: 12px !important;
  color: var(--text-2) !important;
  background: transparent !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-family: var(--font-sans) !important;
  transition: border-color .12s, color .12s !important;
}
body.app-shell .tbl-filter:hover {
  border-color: var(--accent) !important;
  color: var(--text) !important;
}

/* Cellule nom + badges inline (agences, etc.) */
body.app-shell table.tbl .tbl-name-cell {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
}
body.app-shell table.tbl .tbl-name {
  font-weight: 500 !important;
}

/* ============================================================
   ADMIN PAGE SHELL — 2026-05-19
   Remplace le glassmorphism (.admin-section, .admin-tabs, .admin-tab)
   par le design system plat.
============================================================ */

/* Admin section = zone de scroll (comme .view dans la maquette) */
.app-shell .app-main > .card.admin-section {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
}
.app-shell .app-main > .card.admin-section::-webkit-scrollbar { width: 8px; }
.app-shell .app-main > .card.admin-section::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
.app-shell .app-main > .card.admin-section::-webkit-scrollbar-thumb:hover { background: var(--text-3); }

/* Kill glassmorphism */
body.app-shell .card.admin-section {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important;
  margin: 0 !important;
  isolation: auto !important;
}

/* Padding autour du contenu (h2, forms, tbl-wrap, etc.) — tous les enfants directs sauf la nav.admin-tabs */
body.app-shell .card.admin-section > *:not(.admin-tabs) {
  padding-left: 24px !important;
  padding-right: 24px !important;
}
body.app-shell .card.admin-section > h2 {
  padding-top: 24px !important;
  font-size: 22px !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  margin: 0 0 6px !important;
  color: var(--text) !important;
}
body.app-shell .card.admin-section > .subtitle {
  margin: 0 0 20px !important;
  color: var(--text-2) !important;
  font-size: 13px !important;
}
body.app-shell .card.admin-section > .tbl-wrap {
  margin-bottom: 24px !important;
}

/* ===== ADMIN TABS — barre de nav horizontale plate ===== */
body.app-shell .admin-tabs {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  gap: 0 !important;
  background: var(--bg-2) !important;
  border: none !important;
  border-bottom: 1px solid var(--line) !important;
  border-radius: 0 !important;
  padding: 0 16px !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  overflow-x: auto !important;
  flex-shrink: 0 !important;
  scrollbar-width: none !important;
}
body.app-shell .admin-tabs::-webkit-scrollbar { display: none !important; }

/* ===== ADMIN TAB — lien plat avec indicateur border-bottom ===== */
body.app-shell .admin-tab {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 10px 12px !important;
  font-size: 13px !important;
  color: var(--text-3) !important;
  text-decoration: none !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  margin-bottom: -1px !important;
  transition: color .15s, border-color .15s !important;
  transform: none !important;
}
body.app-shell .admin-tab:hover {
  color: var(--text) !important;
  border-bottom-color: var(--line) !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}
body.app-shell .admin-tab.active {
  color: var(--text) !important;
  border-bottom-color: var(--accent) !important;
  background: transparent !important;
  box-shadow: none !important;
}
body.app-shell .admin-tab-icon {
  width: 14px !important;
  height: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  opacity: 0.6 !important;
}
body.app-shell .admin-tab-icon svg {
  width: 100% !important;
  height: 100% !important;
  fill: currentColor !important;
}
body.app-shell .admin-tab.active .admin-tab-icon {
  opacity: 1 !important;
  color: var(--accent) !important;
}

/* Quelques éléments admin qui héritent de vieux tokens de couleur */
body.app-shell .card.admin-section h2,
body.app-shell .card.admin-section h3 {
  color: var(--text) !important;
}
body.app-shell .card.admin-section label {
  color: var(--text-2) !important;
}
body.app-shell .card.admin-section .subtitle,
body.app-shell .card.admin-section .help-text,
body.app-shell .card.admin-section .muted {
  color: var(--text-2) !important;
}
body.app-shell .card.admin-section .eyebrow {
  color: var(--accent) !important;
}

/* ============================================================
   FORM ELEMENTS — 2026-05-19
   Remplace tous les inputs/selects/textareas glassmorphism par
   le design system plat (fond bg-3, bordure line, 4px radius).
============================================================ */

body.app-shell input[type="text"],
body.app-shell input[type="number"],
body.app-shell input[type="date"],
body.app-shell input[type="datetime-local"],
body.app-shell input[type="password"],
body.app-shell input[type="email"],
body.app-shell input[type="search"],
body.app-shell input[type="url"],
body.app-shell input[type="tel"],
body.app-shell input[type="file"],
body.app-shell select,
body.app-shell textarea {
  background: var(--bg-3) !important;
  border: 1px solid var(--line) !important;
  color: var(--text) !important;
  border-radius: var(--radius) !important;
  font-size: 13px !important;
  font-family: var(--font-sans) !important;
  box-shadow: none !important;
  padding: 8px 12px !important;
  outline: none !important;
  transition: border-color .15s !important;
}
body.app-shell input[type="text"]::placeholder,
body.app-shell input[type="search"]::placeholder,
body.app-shell input[type="email"]::placeholder,
body.app-shell textarea::placeholder {
  color: var(--text-3) !important;
}
body.app-shell input:focus,
body.app-shell select:focus,
body.app-shell textarea:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 2px color-mix(in oklch, var(--accent) 18%, transparent) !important;
}

/* Labels */
body.app-shell .form-group label,
body.app-shell .form-group > label {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--text-2) !important;
  letter-spacing: 0.01em !important;
}

/* Form group spacing */
body.app-shell .form-group {
  gap: 5px !important;
  margin-bottom: 10px !important;
}

/* Form grid — 2 cols on desktop */
body.app-shell .form-grid,
body.app-shell .admin-form-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
  gap: 10px 14px !important;
  margin-bottom: 20px !important;
  align-items: end !important;
}
body.app-shell .form-actions {
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
}

/* Helper text */
body.app-shell .form-helper,
body.app-shell .help-text {
  font-size: 11px !important;
  color: var(--text-3) !important;
  margin: 2px 0 0 !important;
}

/* ============================================================
   ADMIN PAGE SCROLL FIX — app-main doit être overflow:hidden
   pour que .card.admin-section soit le scroll container.
   Besoin d'une sélecteur plus fort que body.app-shell .app-main
   (0,2,1) => on ajoute la classe admin-page pour (0,3,1).
============================================================ */
body.app-shell.admin-page .app-main,
body.app-shell.page-history.admin-page .app-main {
  overflow: hidden !important;
}

/* Admin tabs : sticky dans son scroll container */
body.app-shell .card.admin-section > .admin-tabs {
  position: sticky !important;
  top: 0 !important;
  z-index: 10 !important;
}

/* ============================================================
   MISC — autres éléments visuellement mauvais
============================================================ */

/* Supprime le glow neon sur le focus des inputs (vieux style) */
body.app-shell input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 100px var(--bg-3) inset !important;
  -webkit-text-fill-color: var(--text) !important;
}

/* single-qty et import-row — espacement cohérent */
body.app-shell .card.admin-section > .single-qty-section,
body.app-shell .card.admin-section > .import-row {
  padding-left: 24px !important;
  padding-right: 24px !important;
  margin-bottom: 16px !important;
}
body.app-shell .single-qty-row {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}
body.app-shell .import-row {
  display: flex !important;
  align-items: flex-end !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

/* btn small dans le shell */
body.app-shell .btn.small,
body.app-shell .btn.secondary.small {
  padding: 6px 12px !important;
  font-size: 12px !important;
  border-radius: var(--radius) !important;
}

/* Kpi stats row (historique) */
body.app-shell .history-stats-row {
  display: flex !important;
  gap: 0 !important;
  background: var(--bg-2) !important;
  border-bottom: 1px solid var(--line) !important;
  padding: 0 !important;
}
body.app-shell .history-stat {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  padding: 14px 20px !important;
  border-right: 1px solid var(--line-soft) !important;
}
body.app-shell .history-stat:last-child { border-right: none !important; }
body.app-shell .history-stat .label {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: var(--text-3) !important;
}
body.app-shell .history-stat .value {
  font-family: var(--font-mono) !important;
  font-size: 22px !important;
  font-weight: 500 !important;
  color: var(--text) !important;
}
body.app-shell .history-stat .value.warn { color: var(--accent) !important; }
body.app-shell .history-stat .value.ok   { color: var(--ok) !important; }

/* ============================================================
   CHIP — fix largeur dans preview-header column/stretch
   preview-header a align-items:stretch en inline-style → les
   preview-actions s'étirent à 100%. On force align-self:start.
============================================================ */
body.app-shell .preview-header .preview-actions {
  align-self: flex-start !important;
}
body.app-shell .preview-actions .chip {
  flex: 0 0 auto !important;
  width: auto !important;
}
/* chip.ghost dans l'app shell — style plat */
body.app-shell .chip.ghost {
  background: transparent !important;
  border: 1px solid var(--line) !important;
  color: var(--text-2) !important;
  border-radius: var(--radius) !important;
  box-shadow: none !important;
  transform: none !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 6px 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: border-color .15s, color .15s !important;
}
body.app-shell .chip.ghost:hover {
  border-color: var(--accent) !important;
  color: var(--text) !important;
  background: transparent !important;
  transform: none !important;
  box-shadow: none !important;
}

/* ============================================================
   PAGE AIDE — .help-visual-frame glassmorphism → flat
============================================================ */
body.app-shell .help-visual-frame {
  background: var(--bg-2) !important;
  border: 1px solid var(--line) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  overflow: hidden !important;
  isolation: auto !important;
}
body.app-shell .help-visual-frame::before,
body.app-shell .help-visual-frame::after {
  display: none !important;
}
/* Supprime l'animation float des figures d'aide */
body.app-shell .help-figure-animated .help-visual-frame {
  animation: none !important;
}
/* Illustration pleine largeur dans le frame */
body.app-shell .help-illustration {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}
/* Callout aide — flat panel */
body.app-shell .help-callout {
  background: var(--bg-3) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  box-shadow: none !important;
  padding: 14px 16px !important;
  margin-top: 16px !important;
}
body.app-shell .help-callout h3 {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--text-2) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  margin: 0 0 10px !important;
  font-family: var(--font-mono) !important;
}
/* Sections help-reveal — visibles même sans JS scroll */
body.app-shell .help-reveal {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
/* Section cards aide — flat
   Spécificité (0,4,1) = :root[data-theme-resolved] body.app-shell .card.help-reveal
   pour battre la règle KILL GLASSMORPHISM qui a aussi (0,4,1) mais est en ligne 9.
   Règle plus tardive dans le fichier → gagne à iso-spécificité. */
:root[data-theme-resolved] body.app-shell .card.help-reveal {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--line-soft) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 32px 32px !important;
  backdrop-filter: none !important;
}
:root[data-theme-resolved] body.app-shell .card.help-reveal:last-child {
  border-bottom: none !important;
}
/* Tue les animations fade-in (helpFadeUp) sur les enfants des sections :
   ces éléments démarrent à opacity:0 (fill-mode:both) et ne sont pas .help-reveal
   → ils restent invisibles sans IntersectionObserver en contexte app-shell. */
body.app-shell .help-page .help-hero-content,
body.app-shell .help-page .help-hero .help-figure,
body.app-shell .help-reveal > * {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* Page d'aide — le layout flex+height:100vh du shell compresse les .card.help-reveal
   via flex-shrink : leur contenu dépasse la hauteur réduite et se fait clipper par
   overflow:hidden sur .card → sections invisibles. display:block rétablit le flux naturel. */
body.help-page.app-shell .app-main {
  display: block !important;
  height: 100dvh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}
/* Topbar sticky — reste visible pendant le défilement ; la bannière d'essai scroll au-dessus */
body.help-page.app-shell .app-main > .app-topbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 10;
  background: var(--bg-2) !important;
}

/* ============================================================
   NOTICE BANNER — style cohérent avec le design system
============================================================ */
body.app-shell .notice-banner {
  border-radius: 0 !important;
  border: none !important;
  border-bottom: 1px solid var(--line-soft) !important;
  box-shadow: none !important;
  font-size: 12px !important;
  padding: 8px 24px !important;
  margin-bottom: 0 !important;
}
body.app-shell .notice-banner.notice-banner--danger,
body.app-shell .notice-banner[class*="danger"] {
  background: color-mix(in oklch, var(--danger) 8%, transparent) !important;
  color: var(--danger) !important;
  border-bottom-color: color-mix(in oklch, var(--danger) 30%, transparent) !important;
}
body.app-shell .notice-banner.notice-banner--info,
body.app-shell .notice-banner[class*="info"] {
  background: color-mix(in oklch, var(--accent-2) 8%, transparent) !important;
  color: var(--text-2) !important;
}
/* Notice générique (mode démo, etc.) */
body.app-shell .notice-banner:not([class*="danger"]):not([class*="info"]) {
  background: var(--bg-2) !important;
  color: var(--text-2) !important;
}

/* ============================================================
   COMPTE / ESPACE PERSO — supprime la carte glassmorphism
============================================================ */
body.app-shell .card.account-page-card {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
body.app-shell .card.account-page-card .card-header {
  padding: 24px 24px 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
body.app-shell .card.account-page-card #account-page-root {
  padding: 0 24px 24px !important;
}

/* Profil — masquer la section Notifications (elle a sa propre page) */
body.page-profil [data-account-notifs],
body.page-profil [data-account-push-settings],
body.page-profil [data-account-notif-mark-all],
body.page-profil [data-account-queue-sync] {
  display: none !important;
}
body.page-profil .account-section:has([data-account-notifs]) {
  display: none !important;
}

/* Notifications — afficher uniquement la section notifications, masquer sidebar + reste */
body.page-notifications .account-sidebar,
body.page-notifications .account-modal-header,
body.page-notifications .account-actions,
body.page-notifications .account-section:not(:has([data-account-notifs])):not(:has([data-account-push-settings])) {
  display: none !important;
}
body.page-notifications .account-layout {
  display: block !important;
}
body.page-notifications .account-main {
  padding: 0 !important;
}
body.page-notifications [data-account-user-sections] {
  display: block !important;
}

/* ============================================================
   EXPLOITATION FORM — supprime glow, aplatit le toggle
============================================================ */
/* Supprime le glow rouge */
body.app-shell .movement-card::before,
body.app-shell .movement-card::after {
  display: none !important;
}
/* Card exploitation — fond légèrement distinct, pas de glassmorphism */
body.app-shell .card.movement-card {
  background: var(--bg-2) !important;
  border: 1px solid var(--line) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
/* Toggle départ/retour — flat segmented control */
body.app-shell .movement-type-toggle {
  background: var(--bg-3) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  padding: 3px !important;
  gap: 2px !important;
}
body.app-shell .movement-type-btn {
  border-radius: calc(var(--radius) - 1px) !important;
  border: none !important;
  background: transparent !important;
  color: var(--text-3) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  min-height: 34px !important;
  padding: 0 16px !important;
  box-shadow: none !important;
}
body.app-shell .movement-type-btn.active {
  background: var(--accent) !important;
  color: #fff !important;
  box-shadow: none !important;
  border: none !important;
}
/* Labels dans le form — supprimer les icônes inline si trop chargé */
body.app-shell .movement-form-grid label {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--text-3) !important;
}
/* En-tête de la card exploitation */
body.app-shell .movement-card-header {
  border-bottom: 1px solid var(--line) !important;
  margin-bottom: 20px !important;
  padding-bottom: 16px !important;
}
body.app-shell .movement-card-title h2 {
  font-size: 18px !important;
  font-weight: 500 !important;
  color: var(--text) !important;
}

/* ============ GLOBAL SEARCH MODAL (gs-*) ============ */
.gs-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 80px;
}
.gs-overlay[hidden] { display: none !important; }

.gs-modal {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  width: calc(100% - 32px);
  max-width: 560px;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.gs-input-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}

.gs-icon-search {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--text-3);
}

#global-search-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  font-size: 15px;
  color: var(--text);
  font-family: var(--font-sans);
}
#global-search-input::placeholder { color: var(--text-3); }

.gs-kbd {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 2px 6px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 3px;
  color: var(--text-3);
  flex-shrink: 0;
}

.gs-results {
  overflow-y: auto;
  flex: 1;
  padding: 6px 0;
}

.gs-group-header {
  padding: 6px 14px 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
}

.gs-result {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  cursor: pointer;
  transition: background 0.1s;
}
.gs-result:hover,
.gs-result--active {
  background: var(--bg-3);
}

.gs-result-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--text-3);
}
.gs-result--active .gs-result-icon,
.gs-result:hover .gs-result-icon {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.gs-result-icon svg {
  width: 13px;
  height: 13px;
}

.gs-result-body {
  flex: 1;
  min-width: 0;
}

.gs-result-name {
  font-size: 13px;
  color: var(--text);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gs-result-sub {
  font-size: 11px;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}

.gs-empty {
  padding: 24px 14px;
  text-align: center;
  color: var(--text-3);
  font-size: 13px;
}

@media (max-width: 600px) {
  .gs-overlay { padding-top: 0; align-items: flex-end; }
  .gs-modal {
    max-width: 100%;
    width: 100%;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    max-height: 75vh;
  }
}