/* style.css — Clean Reset sans Tailwind */

:root {
  --pharma-blue: #38bdf8;     /* Bleu cyan pro */
  --pharma-green: #10b981;    /* Vert validation */
  --pharma-yellow: #facc15;   /* Jaune alerte */
  --pharma-red: #ef4444;      /* Rouge retrait */
  --pharma-bg: #0f172a;       /* Fond global */
  --pharma-surface: #1e293b;  /* Cartes / Sections */
  --pharma-text: #f1f5f9;     /* Texte principal */
  --pharma-border: #334155;   /* Bords et séparateurs */

  --radius: 10px;
  --shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  --transition: 0.2s ease;
}


* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Inter', sans-serif;
  color: var(--pharma-text);
}

/* Fond sombre par défaut (toutes les pages sauf login) */
body:not(.login-page) {
  background-color: var(--pharma-bg);
  padding-top: 56px;
}

/* Fond clair uniquement sur page login */
body.login-page {
  background: linear-gradient(135deg, #a4bcd5, #ffffff);
  color: #a4bcd5;
  padding-top: 0;
}

h2 {
  font-size: 1.2rem;
  font-weight: bold;
}

section.card {
  background-color: var(--pharma-surface);
  padding: 1.5rem;
  border-radius: 1rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  margin-bottom: 2rem;
}

.icon {
  width: 20px;
  height: 20px;
  display: inline-block;
  vertical-align: middle;
}

.icon svg {
  width: 100%;
  height: 100%;
  display: block;
  stroke: currentColor;
}

.button {
  padding: 0.5rem 1rem;
  border-radius: 8px;
  background-color: var(--pharma-blue);
  color: white;
  text-decoration: none;
  font-size: 0.9rem;
  display: inline-block;
  margin-top: 1rem;
}

input {
  width: 100%;
  padding: 0.75rem;
  border-radius: 8px;
  border: 1px solid var(--pharma-border);
  background-color: #1e293b;
  color: white;
  font-size: 0.9rem;
}

.table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
}

.table th,
.table td {
  padding: 0.5rem;
  text-align: left;
  border-bottom: 1px solid var(--pharma-border);
}

/* =========================================================
   TOPBAR — FINAL (single source)
   - La seule "barre |" = border-right du slot sidebar
   - Medistock aligné sur le texte des items sidebar
   - Rien d'autre ne doit afficher "|"
   ========================================================= */

:root{
  /* doit matcher .sidebar */
  --sidebar-w: 200px;
  --sidebar-pad-x: 0.5rem;

  /* doit matcher .nav-link (sidebar) */
  --nav-link-pad-x: 0.75rem;
  --nav-icon-w: 20px;      /* mets 18px si tes icons sidebar sont en 18 */
  --nav-icon-gap: 0.5rem;

  /* début EXACT du texte "Inventaire" */
  --sidebar-text-x: calc(
    var(--sidebar-pad-x) +
    var(--nav-link-pad-x) +
    var(--nav-icon-w) +
    var(--nav-icon-gap)
  );
}

/* === TOPBAR base === */
.topbar{
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 56px;
  background-color: #1b2430;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #2d3b4d;
  z-index: 999;

  /* on neutralise l'ancien padding global */
  padding: 0;
}

/* LEFT = 2 colonnes : [slot sidebar] [reste] */
.topbar-left{
  display: grid;
  grid-template-columns: var(--sidebar-w) auto;
  align-items: center;
  gap: 0;
}

/* Slot sidebar : copie la largeur + padding sidebar
   La "barre" = border-right (LA seule) */
.topbar-appslot{
  height: 56px;
  display: flex;
  align-items: center;
  gap: 0.75rem;

  /* On pousse visuellement la ligne à droite */
  padding-left: var(--sidebar-pad-x);
  padding-right: calc(var(--sidebar-pad-x) + 19px);

  border-right: 1px solid #2d3b4d;
  box-sizing: border-box;
}


/* Medistock aligné avec le texte des nav-links (Inventaire...) */
.topbar-appslot .app-wrapper{
  margin-left: calc(var(--sidebar-text-x) - var(--sidebar-pad-x));
}

/* Colonne 2 démarre pile après la sidebar (donc texte pharmacie commence direct) */
.topbar-left .dropdown-pharmacy{
  padding-left: 0.75rem; /* confort visuel; ne crée PAS une barre */
}

/* Pharmacy name: aucun séparateur, juste du style */
.pharmacy-name{
  color: #94a3b8;
  font-weight: 400;
  font-size: 0.95rem;
}

/* === Centre topbar (tes règles existantes peuvent rester) === */
.topbar-center{
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

/* === Mobile : on repasse en flex simple, sans slot rigide === */
@media (max-width: 768px){
  .topbar{ padding: 0 1rem; }

  .topbar-left{
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

  .topbar-appslot{
    border-right: 0; /* pas de grande barre en mobile */
    padding: 0;
  }

  .topbar-appslot .app-wrapper{
    margin-left: 0;
  }

  /* comme tu avais déjà : cacher pharmacy name en mobile */
  .pharmacy-name{ display: none; }
}



/* === DASHBOARD STRUCTURE === */
.dashboard-container {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0.5rem 2rem 2rem 2rem;
}





/* === SECTIONS === */

/* === INPUT SCAN === */
.scan-input {
  width: 100%;
  padding: 0.65rem 1rem;
  border-radius: 6px;
  border: 1px solid #3c4b5a;
  background-color: #10151b;
  color: #fff;
  font-size: 1rem;
}

.scan-input:focus {
  outline: none;
  border-color: #3fa2f7;
  background-color: #0e131a;
}

/* === BOUTONS === */
.btn {
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-size: 0.95rem;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
  transition: background-color 0.2s ease;
}

.btn-primary {
  background-color: #3fa2f7;
  color: #fff;
}

.btn-primary:hover {
  background-color: #1e85d3;
}

.btn-danger{
  background-color: var(--pharma-red);
  color:#fff;
}
.btn-danger:hover{
  background-color: #dc2626;
}

.btn-xs{
  padding: 0.35rem 0.65rem;
  font-size: 0.82rem;
  border-radius: 8px;
}



/* === TABLE === */
.table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.5rem;
  font-size: 0.95rem;
}

.table th,
.table td {
  padding: 0.5rem;
  text-align: left;
  color: #e0e0e0;
  border-bottom: 1px solid #2d3b4d;
}

.text-danger {
  color: #f87171;
}

/* =============================== */
/*  TITRES DE PAGE (globaux)      */
/* =============================== */

.page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin: 0 0 1.25rem 0;   /* espace standard sous le titre */
}
/* 🔧 En-tête : pas de marge top sur les boutons */
.page-header .ghost-btn,
.page-header button {
  margin-top: 0;     /* override du button { margin-top: 0.5rem } global */
}


.page-title {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--pharma-text);
}

/* facultatif mais propre si tu veux une légère variation quand dans un header */
.page-header .page-title {
  margin: 0;
}



/* Card principale sous le titre de page (Narco / Suggestions / Mouvements / Inventaire) */
.page-card {
  background: #141a22;                 /* même couleur que .card de réception */
  border: 1px solid #232a36;
  border-radius: 12px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .25);
  padding: 1rem 1.2rem;
  margin-bottom: 1.5rem;
  min-height: 520px;                   /* hauteur uniforme pour les pages “liste” */
  overflow: visible;
  display: flex;
  flex-direction: column;
}





/* === LAYOUT GLOBAL === */
.layout {
  display: flex;
  min-height: calc(100vh - 56px);
  background-color: #141c26;
  width: 100%;
  overflow-x: hidden;
}

.sidebar {
  width: 200px;
  background-color: #1b2430;
  border-right: 1px solid #2d3b4d;
  padding: 1rem 0.5rem;
  display: flex;
  flex-direction: column;
}

/* Desktop: sticky sidebar fonctionne seulement si les parents n'ont pas overflow hidden */
@media (min-width: 769px) {
  .layout {
    overflow: visible; /* IMPORTANT: sinon sticky peut être ignoré */
  }

  body:not(.login-page) {
    overflow-x: hidden; /* anti scroll horizontal, sans casser sticky */
  }

  .sidebar {
    position: sticky;
    top: 56px;
    height: calc(100vh - 56px);
    align-self: flex-start;
    z-index: 10;

    overflow-y: auto;
    overscroll-behavior: contain;
  }
}



.main-content {
  flex: 1;
  padding: 2rem 1.5rem;
  overflow: visible;
  min-width: 0; 
  transition: margin-left 0.3s ease;
}

/* === MENU NAVIGATION === */
.nav {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #cbd5e1;
  text-decoration: none;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  transition: background-color 0.2s ease;
}

.nav-link:hover {
  background-color: #263343;
  color: #ffffff;
}

.nav-link span {
  font-size: 0.95rem;
}

.card,
.btn,
input,
.scan-input,
.table th,
.table td {
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: all var(--transition);
}

.nav-group {
  margin-top: 1.25rem;
  padding-top: 0.25rem;
  border-top: 1px solid #2d3b4d;
}
.nav-group:first-child {
  margin-top: 0;
  border-top: none;
}

/* === AMÉLIORATIONS DASHBOARD v3.7.1 === */

.section-description {
  font-size: 0.9rem;
  color: #cbd5e1;
  margin-bottom: 0.5rem;
}

/* === AMÉLIORATIONS DASHBOARD v3.7.2 === */

/* Description sous un titre */
.section-description {
  font-size: 0.9rem;
  color: #cbd5e1;
  margin-bottom: 0.75rem;
}

/* Lignes alternées du tableau */
.table tbody tr:nth-child(even) {
  background-color: rgba(255, 255, 255, 0.03);
}

/* Suggestions */

/* === DASHBOARD PREMIUM v3.8.0 === */

/* === PANELS === */

/* === TABLE STRIPED === */

/* === RETRAIT RAPIDE INTERACTIF === */






/* === DASHBOARD RESPONSIVE SPÉCIFIQUE TABLETTE === */

/* Desktop : grille 4 colonnes = 1fr 1fr 2fr */

/* Tablette : grille 2 colonnes */

/* Mobile : tout empilé */

.burger-button {
  font-size: 24px;
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  margin-right: 1rem;
  display: flex;
  align-items: center;
}

@media (max-width: 768px) {
  .sidebar {
    position: fixed;
    top: 56px;        /* hauteur de la topbar */
    left: 0;
    width: 240px;
    height: calc(100vh - 56px);
    background-color: #1b2430;
    z-index: 100;
    transform: translateX(0);
    transition: transform 0.3s ease;
  }

  .sidebar.collapsed {
    transform: translateX(-100%);
  }

  .main-content {
    width: 100%;
    margin-left: 0 !important;
  }
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

@media (min-width: 768px) {
  .burger-button {
    display: none;
  }
}

/* Notification icon */
.topbar-center {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

.search-input {
  width: 40vw;
  max-width: 700px;
  min-width: 280px;
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid #3c4b5a;
  background-color: #10151b;
  color: #fff;
  font-size: 1rem;
  transition: width 0.2s ease;
}


.search-input::placeholder {
  color: #8899a8;
}


.notification-wrapper {
  display: flex;
  align-items: center;
  position: relative;
}

.notification-icon {
  position: relative;
  cursor: pointer;
  color: #cbd5e1;
  display: flex;
  align-items: center;
}

.notification-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 10px;
  height: 10px;
  background-color: red;
  border-radius: 50%;
}



/* Dropdown menu (user) */
.dropdown {
  position: relative;
}

.user-button {
  background: none;
  border: none;
  color: #cbd5e1;
  cursor: pointer;
  padding: 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.user-name {
  font-size: 0.9rem;
  color: #cbd5e1;
  white-space: nowrap;
}


.user-wrapper {
  position: relative;
  display: inline-block;
}

/* === DROPDOWN APPLICATIONS === */

.app-wrapper {
  position: relative;
  display: inline-block;
}

.app-button {
  background: none;
  border: none;
  color: #ffffff;
  font-size: 1.05rem;
  font-weight: bold;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.app-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #1e293b;
  border: 1px solid #2d3b4d;
  border-radius: 6px;
  box-shadow: var(--shadow);
  min-width: 220px;
  z-index: 999;
  padding: 0.5rem 0;
}

.app-menu a {
  padding: 0.6rem 1rem;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: #f1f5f9;
  font-size: 0.9rem;
}

.app-menu a:hover {
  background-color: #2d3b4d;
}

.app-menu a.disabled {
  opacity: 0.45;
  pointer-events: none;
}

.app-wrapper:hover .app-menu,
.app-wrapper:focus-within .app-menu {
  display: block;
}


.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #1e293b;
  border: 1px solid #2d3b4d;
  border-radius: 6px;
  box-shadow: var(--shadow);
  display: none;
  flex-direction: column;
  min-width: 180px;
  z-index: 999;
}

.dropdown-menu a {
  padding: 0.75rem 1rem;
  color: #f1f5f9;
  text-decoration: none;
  font-size: 0.9rem;
}

.dropdown-menu a:hover {
  background-color: #2d3b4d;
}

.user-wrapper:hover .dropdown-menu,
.user-wrapper:focus-within .dropdown-menu {
  display: flex;
}

/* Responsive navbar — hide elements on small screen */
@media (max-width: 768px) {
  
  .pharmacy-name,
  .user-name {
    display: none;
  }

  .topbar-center {
    flex: 1;
    justify-content: center;
    gap: 0.5rem;
  }

  .search-input {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .dropdown-menu {
    right: auto;
    left: 0;
    min-width: 160px;
  }
}

.fournisseur {
  color: #ccc;
  font-weight: 500;
}

.badge-narco {
  background-color: #8b0000;
  color: white;
  font-size: 0.75rem;
  font-weight: bold;
  padding: 0.2rem 0.5rem;
  border-radius: 5px;
  text-transform: uppercase;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}


/* --- Modales fermées: jamais de blocage de clics --- */
.modal.hidden {
  display: none !important;
  pointer-events: none !important;
  opacity: 0 !important;
}



.modal-content {
  background-color: #1a1a1a;
  padding: 2rem;
  border-radius: 8px;
  width: 100%;
  max-width: 500px;
  color: #eee;
  box-shadow: 0 0 20px rgba(0,0,0,0.5);
}

.modal-content label {
  display: block;
  margin-top: 1rem;
  font-weight: 500;
}

.modal-content input {
  width: 100%;
  padding: 0.5rem;
  margin-top: 0.3rem;
  border: 1px solid #333;
  background-color: #111;
  color: #eee;
  border-radius: 4px;
}

.modal-title {
  margin-bottom: 1rem;
  font-size: 1.5rem;
}

.btn-cancel {
  margin-top: 1rem;
  background-color: #2c2c2c;
  color: #fff;
  border: none;
  padding: 0.6rem 1.2rem;
  border-radius: 4px;
  cursor: pointer;
}

.success-recap {
  margin-top: 12px;
  margin-bottom: 12px;
  padding: 10px 12px;
  background-color: transparent;
  border-left: 4px solid #e6ffe9 ;
  border-radius: 6px;
  font-size: 0.9em;
  color: #e6ffe9;
}




body.login-page {
  background: #a4bcd5;
  color: #e0dbe8;
  font-family: 'Inter', sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.login-container {
  background: #ffffff;
  padding: 2.5rem 2rem;
  border-radius: 12px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.05);
  width: 100%;
  max-width: 420px;
  text-align: center;
  display: flex;
  flex-direction: column;
}
.login-container label {
  font-size: 0.95rem;
  color: #1e293b;
  font-weight: 500;
  text-align: center;
  margin-bottom: 0.2rem;
}


.login-title {
  font-size: 1.75rem;
  margin-bottom: 1.5rem;
  font-weight: 600;
  color: #111827;
}

form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.login-container input[type="email"],
.login-container input[type="password"] {
  padding: 0.7rem;
  font-size: 1rem;
  background: #f9fafb;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  transition: box-shadow 0.3s ease, border 0.3s ease;
  caret-color: #2563eb;
  color: #1e293b !important;
}

/* Focus state */
.login-container input[type="email"]:focus,
.login-container input[type="password"]:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.4);
  background-color: #ffffff;
}




/* === LOGIN ONLY (ne doit JAMAIS impacter le dark theme) === */
body.login-page input:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
  background-color: #fff;
}

body.login-page button {
  margin-top: 0;
  padding: 0.7rem;
  font-size: 1rem;
  background-color: #266fb9;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

body.login-page button:hover {
  background-color: #1e40af;
}


.powered-by {
  margin-top: 2.5rem;
  font-size: 1rem;
  color: #475569; /* gris un peu plus foncé */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-weight: 500;
}


.remedy-logo {
  height: 48px;
  width: auto;
  opacity: 1;
}

/* Formulaires dark */
input,
select,
textarea,
input[type="text"],
input[type="number"],
input[type="date"],
input[type="email"],
input[type="password"] {
  background-color: #1e1e2f;
  color: #f0f0f0;
  border: 1px solid #3c3c4f;
  border-radius: 0.375rem;
  padding: 0.5rem;
  width: 100%;
}

input::placeholder {
  color: #888;
}

select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg fill='gray' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'><path d='M7 7l3-3 3 3m0 6l-3 3-3-3'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1em;
}

.input {
  all: unset;
  background-color: #1e1e2f;
  color: #f0f0f0;
  border: 1px solid #3c3c4f;
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  width: 100%;
  box-sizing: border-box;
}

.select {
  all: unset;
  background-color: #1e1e2f;
  color: #f0f0f0;
  border: 1px solid #3c3c4f;
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  width: 100%;
  appearance: none;
}

#modal {
  transition: opacity 0.3s ease-in-out;
}
#modal.hidden {
  opacity: 0;
  pointer-events: none;
}

.hidden {
  display: none !important;
}

.breadcrumb {
  font-size: 0.9rem;
  color: #aaa;
  margin-bottom: 1rem;
}
.breadcrumb a {
  color: #61dafb;
  text-decoration: none;
}
.breadcrumb a:hover {
  text-decoration: underline;
}
.breadcrumb span {
  color: #eee;
}

.admin-title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.8rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 2rem;
}

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');

body {
  font-family: 'Inter', sans-serif;
}

.admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1.2rem;
  margin-top: 1.5rem;
}

.admin-card {
  background: #1e1e1e;
  border-radius: 8px;
  padding: 1rem;
  text-decoration: none;
  transition: all 0.2s ease;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.admin-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.2);
}

.admin-card-title {
  font-weight: 600;
  font-size: 0.92rem;
  margin-bottom: 0.3rem;
  color: #e2e2e2;
}

.admin-card-desc {
  font-size: 0.75rem;
  color: #999;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 2rem;
}

.admin-table th,
.admin-table td {
  border-bottom: 1px solid #333;
  padding: 0.8rem;
  text-align: left;
  color: #ddd;
}

.admin-table th {
  color: #aaa;
  text-transform: uppercase;
  font-size: 0.85rem;
}

.top-bar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 1rem;
}

.autocomplete-item {
  padding: 8px;
  border-bottom: 1px solid #333;
  cursor: pointer;
}
.autocomplete-item:hover {
  background-color: #2d3748;
}

/* === Aperçu produit (bloc après scan) === */
.product-preview {
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid #3b82f6;
  border-radius: 8px;
  padding: 0.75rem;
  margin-top: 0.75rem;
  color: #f1f5f9;
  font-size: 0.95rem;
}

/* === Bouton confirmation (OK → Retirer) === */

/* === Bouton Annuler (optionnel) === */
.btn-cancel {
  background-color: transparent;
  border: 1px solid #94a3b8;
  color: #94a3b8;
  font-size: 0.8rem;
  padding: 0.25rem 0.75rem;
  border-radius: 6px;
  margin-top: 0.5rem;
  cursor: pointer;
}

.btn-cancel:hover {
  color: white;
  border-color: white;
}

/* === Feedback visuel après retrait === */

@keyframes fadeOut {
  0% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-10px); }
}

@keyframes fadeOut {
  0% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-10px); }
}
.text-danger {
  color: #f44336;
  font-weight: bold;
}
.table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1em;
}
.table th, .table td {
  padding: 0.6em;
  border-bottom: 1px solid #333;
  text-align: left;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.toast {
  position: fixed;
  top: 1rem;
  right: 1rem;
  background: #4caf50;
  color: white;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 0.9rem;
  opacity: 0.95;
  z-index: 9999;
  box-shadow: 0 0 8px rgba(0,0,0,0.3);
  transition: opacity 0.3s ease;
}
.toast.hidden {
  display: none;
}
.toast.error {
  background: #f44336;
}

.modal-content form.compact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem 1rem;
  font-size: 0.85rem;
  max-height: 75vh;
  overflow-y: auto;
}

.modal-content form.compact-grid label {
  font-weight: 500;
  font-size: 0.8rem;
  margin-bottom: 0.2rem;
  color: #ccc;
}

.modal-content form.compact-grid input,
.modal-content form.compact-grid select,
.modal-content form.compact-grid textarea {
  padding: 0.3rem 0.5rem;
  font-size: 0.85rem;
  background: #222;
  border: 1px solid #444;
  border-radius: 4px;
  color: white;
  width: 100%;
  box-sizing: border-box;
}

.modal-content .modal-actions {
  grid-column: span 2;
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  padding-top: 0.5rem;
  border-top: 1px solid #333;
  margin-top: 1rem;
}

.autocomplete-list {
  position: absolute;
  background-color: #222;
  border: 1px solid #444;
  border-radius: 4px;
  max-height: 180px;
  overflow-y: auto;
  z-index: 1000;
  font-size: 0.78rem;
  color: white;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.autocomplete-list div {
  padding: 6px 8px;
  cursor: pointer;
}

.autocomplete-list div:hover {
  background-color: #333;
}

.search-products:focus {
  background-color: #10151b;
  border-color: #3fa2f7;
  box-shadow: 0 0 0 1px #3fa2f7;
  color: #f1f5f9;
}

.search-products::placeholder {
  color: #8899a8;
}

.products-table-wrapper {
  margin-top: 1.5rem;
  border: 1px solid #1f2937;
  border-radius: 0.5rem;
  overflow-x: hidden;
}

.products-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  color: white;
  table-layout: auto;
}

.products-table thead {
  background-color: #111827;
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  color: #9ca3af;
}

.products-table th,
.products-table td {
  padding: 0.6rem 0.9rem;
  text-align: left;
  border-bottom: 1px solid #2d3748;
  white-space: normal;
  word-break: break-word;
}

.products-table tbody tr:hover {
  background-color: #1f2937;
  transition: background 0.2s ease;
  cursor: pointer;
}

.details-row {
  background-color: #0f172a;
  font-size: 0.75rem;
  white-space: normal;
}

.badge {
  font-size: 0.68rem;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  font-weight: 600;
  display: inline-block;
  text-transform: uppercase;
}
.badge-narco { background: #991b1b; color: white; }
.badge-benzo { background: #7c3aed; color: white; }
.badge-controlees { background: #2563eb; color: white; }
.badge-autre { background: #6b7280; color: white; }
.badge-archive { background: #9ca3af; color: black; margin-left: 0.5rem; }

.actions-col {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}


.text-warning { color: #facc15; }
.text-danger { color: #ef4444; }

.mobile-only {
  display: none;
}
@media (max-width: 1024px) {
  .col-section,
  .col-minmax,
  .col-gtin {
    display: none;
  }
  .products-table th,
  .products-table td {
    font-size: 0.75rem;
    padding: 0.4rem;
  }
  .actions-col {
    flex-direction: column;
    gap: 0.2rem;
    align-items: flex-start;
  }
  .mobile-only {
    display: inline;
  }
}

/* Fix suggestions: ne casse pas les scrollers internes */



/* === Scan Datamatrix — carte moderne === */

/* Champ scan datamatrix version compacte */

/* Uniformiser la case "Nom" avec les autres champs */
#manual-gtin {
  height: 34px;
  padding: 0.4rem 0.5rem;
  background: #222;
  border: 1px solid #444;
  border-radius: 4px;
  color: #fff;
  font-size: 0.85rem;
  box-sizing: border-box;
  width: 100%;
}

#manual-gtin::placeholder {
  color: #999;
}

#manual-gtin-label,
#manual-subinfo {
  display: none;   /* cache les div inutiles qui créent le décalage */
}

/* Aligner parfaitement la case Nom avec les autres */
.gtin-label {
  display: block;      /* plus de flex */
  padding: 0;
  margin: 0;
}

#manual-gtin {
  height: 34px;        /* même hauteur */
  line-height: 34px;   /* force le centrage vertical du texte */
  margin: 0;
}

/* === Reception manual: force single-line alignment === */
#tab-manual .reception-line { align-items: center; }

#tab-manual .gtin-label {
  display: block !important;   /* kill the flex from the template */
  position: relative;
  padding: 0 !important;
  margin: 0 !important;
}

#tab-manual #manual-gtin-label,
#tab-manual #manual-subinfo {
  display: none !important;    /* remove extra vertical content */
}

#tab-manual #manual-gtin {
  position: relative;          /* normal input, not overlaying */
  height: 34px;
  line-height: 34px;
  padding: 0.4rem 0.5rem;
  background: #222;
  border: 1px solid #444;
  border-radius: 4px;
  color: #fff;
  font-size: 0.85rem;
  width: 100%;
  box-sizing: border-box;
}

/* --- Correction affichage Nom sélectionné --- */
#manual-gtin-label {
  display: flex !important;
  align-items: center;
  height: 34px;
  line-height: 34px;
  padding: 0 0.5rem;
  background: #222;
  border: 1px solid #444;
  border-radius: 4px;
  font-size: 0.85rem;
  color: #fff;
  box-sizing: border-box;
}

#manual-subinfo {
  display: none !important; /* tu peux mettre block si tu veux la ligne sous le nom */
}


/* Ajout manuel — Nom + détails en 1 ligne, aligné */
#tab-manual .gtin-label { display: block !important; position: relative; }

/* Reception manuel — forcer l’affichage propre sur 2 lignes dans la 1re colonne */
.reception-grid .col-gtin { min-width: 0; }   /* évite que la 1re colonne pousse la grille */

/* Quand un produit est choisi, on affiche juste le texte normal */

/* === Réception: modal DÉTAILS lisible === */

.chip {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: .75rem; font-weight: 700; letter-spacing: .2px; border: 1px solid transparent;
}

/* Badges de statut par ligne */

/* Pastille #ID dans le titre du modal */

/* --- Modal Détails: cellule produit + puces réception --- */
.product-cell .title { font-weight: 600; color: #e5e7eb; }
.product-cell .sub   { font-size: .82rem; color: #9aa3b2; margin-top: 2px; }

/* === Tableaux modernes === */
.table-modern {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  color: #e5e7eb;
  background-color: #1a1f29;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}

.table-modern thead {
  background-color: #111827;
  color: #9ca3af;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
}

.table-modern th,
.table-modern td {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid #2d3748;
}

.table-modern tbody tr:nth-child(even) {
  background-color: rgba(255,255,255,0.02);
}

.table-modern tbody tr:hover {
  background-color: rgba(59,130,246,0.08); /* bleu clair moderne au hover */
  cursor: pointer;
}

/* Table moderne compacte (modal détails réception) */
.table-modern.compact th,
.table-modern.compact td {
  padding: 0.45rem 0.7rem;   /* réduit la hauteur */
  font-size: 0.82rem;        /* texte légèrement plus petit */
  line-height: 1.2;
}

/* ===== Réception > Historique : actions (PDF / Voir / épingle) ===== */




/* ===== Réception > Historique : actions (PDF / Voir / épingle) ===== */

/* PDF / Voir — texte compact, même hauteur */

/* Épingle — carré 28x28, même hauteur visuelle */

/* Icône paperclip */


/* ===== Modal Détails Réception : header aligné (fix hauteur/marge) ===== */
#details-modal .modal-actions .btn-sm{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  padding: 0 10px;
  margin: 0;                 /* neutralise le margin-top global des <button> */
  line-height: 1;            /* évite la sur-hauteur du texte */
  box-sizing: border-box;

  border: 1px solid #666;
  background: #444;
  color: #fff;
  border-radius: 4px;
  text-decoration: none;
  font-size: .82rem;
}
#details-modal .modal-actions .btn-sm:hover{
  background:#555; color:#6cf; border-color:#6cf;
}

/* Modal Détails : titre serré + alignements fins */
#details-modal .modal-title {
  display: inline-flex;
  align-items: center;             /* centre verticalement le badge N */
  gap: 8px;
  line-height: 1.1;
}

/* Sous-header (date + actions) collé au titre */


/* ===== INVENTAIRE: table .stock-table (alignement verrouillé) ===== */
.stock-table{
  width:100%;
  border-collapse: collapse;
  table-layout: fixed;        /* ← respecte le <colgroup> généré par inventory.js */
  margin-bottom: 1.5rem;
  font-size: .95rem;
}
.stock-table th,
.stock-table td{
  padding: .6rem 1rem;
  vertical-align: middle;
  border-bottom: 1px solid #2e3a46;
}
.stock-table thead th{
  background:#1e1e1e;
  color:#c9d2dc;
  font-weight:600;
}

/* Alignements (les largeurs viennent du <colgroup>) */
/* Qté alignée à droite UNIQUEMENT si la colonne est explicitement "Qté" */
.stock-table th.col-qty,
.stock-table td.col-qty{
  text-align: right;
}

.stock-table th.actions-column,
.stock-table td.actions-cell{
  text-align: right;
  white-space: nowrap;
}

/* Cellule produit en 2 lignes compactes */
.product-cell{ display:flex; flex-direction:column; line-height:1.15; }
.product-cell .title{
  font-weight:600; font-size:.92rem; color:#e7edf5;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.product-cell .sub{
  margin-top:2px; font-size:.78rem; color:#9aa8b6;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Actions: boutons fantômes alignés à droite */
.action-ghosts{
  display: inline-flex;       /* inline => respecte text-align du TD */
  gap: .5rem;
  align-items: center;
}
.ghost-btn{
  background: transparent;
  color: #cfe2ff;
  border: 1px solid #3b4452;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: .85rem;
  line-height: 1;
  cursor: pointer;
  transition: .15s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ghost-btn:hover{ border-color:#5aa9ff; background:#223041; color:#e9f2ff; }

/* ===== INVENTAIRE — header ===== */
.inventory-header {
  display: flex;
  align-items: flex-end;          /* ⚖️ comme .page-header */
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 1.25rem 0;          /* ⚖️ même marge que .page-header */
}

.inventory-header .page-title {
  margin: 0;                      /* aucune marge spéciale */
}


#btn-expiring {
  margin-left: auto;  /* pousse le bouton complètement à droite */
}

/* états */
.expiring-soon{ color:#ffcc00; font-weight:700; }

/* titres / badges (compatibles avec ta charte) */

/* toggle pastille (inventaire / quarantaine) */
.inv-toggle{
  display:inline-flex; gap:4px; padding:4px;
  border:1px solid #2e3a46; border-radius:999px;
  background:#17212b; margin:.4rem 0 1rem 0;
}
.inv-toggle .pill{
  border:0; background:transparent; color:#a9bbcc;
  padding:8px 14px; border-radius:999px; font-size:.9rem; cursor:pointer; transition:.15s ease;
}
.inv-toggle .pill:hover{ color:#e6f1ff; }
.inv-toggle .pill.active{ background:#223041; color:#e6f1ff; box-shadow:inset 0 0 0 1px #35506a; }


/* ===== INVENTAIRE — table auto fluide sans pourcentages ===== */
.inv-scope .stock-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;        /* colonnes s’ajustent naturellement */
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
}

.inv-scope .stock-table thead th {
  background: #1e1e1e;
  color: #c9d2dc;
  font-weight: 600;
  padding: 0.6rem 1rem;
  border-bottom: 1px solid #2e3a46;
  text-align: left;          /* titres alignés à gauche par défaut */
}

/* 1) Colonnes compactes (Qté, Lot, Expiration, Actions) */
.inv-scope .stock-table th.col-qty,
.inv-scope .stock-table td:nth-child(2),
.inv-scope .stock-table th.col-lot,
.inv-scope .stock-table td:nth-child(3),
.inv-scope .stock-table th.col-exp,
.inv-scope .stock-table td:nth-child(4),
.inv-scope .stock-table th.actions-column,
.inv-scope .stock-table td.actions-cell {
  width: 1%;                 /* shrink-to-fit */
  white-space: nowrap;
}

/* 2) Alignements : tout à gauche sauf la colonne Actions */
.inv-scope .stock-table th.actions-column,
.inv-scope .stock-table td.actions-cell {
  text-align: left;
}
.inv-scope .stock-table th,
.inv-scope .stock-table td {
  text-align: left;
}

/* 3) Cellules */
.inv-scope .stock-table td {
  padding: 0.6rem 1rem;
  vertical-align: middle;
  border-bottom: 1px solid #2e3a46;
  box-sizing: border-box;
}

/* 4) Produit compact (2 lignes) */
.inv-scope .product-cell {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  min-width: 0;
}
.inv-scope .product-cell .title {
  font-weight: 600;
  font-size: 0.92rem;
  color: #e7edf5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.inv-scope .product-cell .sub {
  margin-top: 2px;
  font-size: 0.78rem;
  color: #9aa8b6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 5) Actions ghost: alignés à droite */
.inv-scope .action-ghosts {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
}
.inv-scope .ghost-btn {
  background: transparent;
  color: #cfe2ff;
  border: 1px solid #3b4452;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  transition: 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.inv-scope .ghost-btn:hover {
  border-color: #5aa9ff;
  background: #223041;
  color: #e9f2ff;
}

/* ===== INVENTAIRE — réduire la largeur de la 1re colonne (Produit) ===== */
.inv-scope .stock-table th.col-product,
.inv-scope .stock-table td:first-child{
  width: 1%;            /* shrink-to-fit (évite qu’elle prenne 50%) */
  max-width: 540px;     /* garde un haut de plafond propre ; ajuste si tu veux (ex. 480px) */
}

/* (sécurité) Actions restent à droite */
.inv-scope .stock-table th.actions-column,
.inv-scope .stock-table td.actions-cell{
  text-align: left;
  white-space: nowrap;
}

/* séparateur fin par compagnie */

/* Chips de compagnie dans l’en-tête générique */

/* (déjà ajouté précédemment pour lignes internes) */

/* Harmonisation Quarantaine = Inventaire */
.stock-table .actions-column,
.stock-table .actions-cell { text-align: right; white-space: nowrap; }

.action-ghosts .ghost-btn {
  background: transparent; border: 1px solid #2e3a46; padding: .4rem .6rem;
  border-radius: 8px; cursor: pointer; font: inherit; color: #c9d2dc;
}
.action-ghosts .ghost-btn:hover { background: #1e1e1e; }

/* ==== Export modal (radios compacts, même vibe) ==== */
#export-modal .form-row{
  display:flex;
  align-items:center;
  gap:1rem;
  margin:.6rem 0;
}
#export-modal .form-row .label{
  min-width: 9.5rem;
  color:#aeb7c2;
  font-weight:600;
}
#export-modal .radio-group{
  display:flex;
  align-items:center;
  gap:1rem;
  flex-wrap:wrap;
}
#export-modal label.radio{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  cursor:pointer;
  color:#c9d2dc;
  margin:0;
}
#export-modal input[type="radio"]{
  display:inline-block;
  width:auto;               /* override d’un éventuel input { width:100% } global */
  height:auto;
  accent-color:#4cc2ff;     /* radios natives modernisées */
  margin:0;                 /* évite les décalages */
}

.filters-card { background: var(--card-bg,#0f1318); padding:12px 14px; border-radius:10px; border:1px solid #1e2730; margin-bottom:12px; }
.chips { display:flex; flex-wrap:wrap; gap:6px; }
.chip { background:#0b1016; border:1px solid #1c2530; color:#b9c7d6; padding:6px 10px; border-radius:999px; font-size:12px; cursor:pointer; }
.chip.active { background:#1e2a38; border-color:#2f445d; color:#e8f1fb; }
.dropdown { position:relative; }
.dropdown-menu { display:none; position:absolute; right:0; top:36px; background:#0b1016; border:1px solid #1c2530; border-radius:10px; padding:10px; min-width:200px; z-index:10; }
.dropdown-menu label { display:flex; align-items:center; gap:8px; color:#c5d3e0; font-size:13px; padding:6px 4px; }
.dropdown-menu.open { display:block; }

.badge { padding:3px 8px; border-radius:999px; font-size:11px; border:1px solid #263445; background:#0c1117; color:#c9d7e3; }
.badge-green { border-color:#1d4f2a; background:#0c1711; color:#a7e3bb; }
.badge-red { border-color:#742f34; background:#180e10; color:#f2a6ad; }
.badge-amber { border-color:#6b4b1a; background:#18130a; color:#f0c27b; }
.badge-blue { border-color:#264d73; background:#0b121a; color:#9fd0ff; }
.badge-purple { border-color:#4f2a6b; background:#140f18; color:#d3a6f2; }
.badge-info { border-color:#2d3d6b; background:#0b0f18; color:#a6baf2; }

/* === PAGE MOUVEMENTS === */



.filters-card {
  background: #1e293b;
  border: 1px solid #2d3b4d;
  border-radius: 10px;
  padding: 1rem;
  margin-bottom: 1.5rem;
}

/* === Reception / Historique — Sticky table header, safe === */

/* === FIX: Réception > Ajout manuel — afficher les infos quand un produit est sélectionné === */

/* Écrase toute ancienne règle qui le cachait encore */

/* === FIX Réception > Ajout manuel : wrapper correct === */

#tab-manual .gtin-wrap:not(.has-selection) #manual-gtin-label,
#tab-manual .gtin-wrap:not(.has-selection) #manual-subinfo { /* cache les infos tant que rien choisi */
  display: none !important;
}

/* ================================
   RÉCEPTION — RESTAURATION LOOK
   (scope: .page-reception)
   ================================ */

/* Neutraliser la marge globale sur les boutons */
.page-reception button,
.page-reception .btn {
  margin-top: 0 !important;
}

/* Champ de recherche produit : on garde le style clean & sharp local */
.page-reception #manual-gtin {
  height: 36px !important;
  padding: .45rem .6rem !important;
  background: #0f141b !important;
  border: 1px solid #2b3340 !important;
  border-radius: 8px !important;
  color: #eaf0f9 !important;
  width: 100% !important;
  font-size: .87rem !important;
}

/* Affichage du libellé sélectionné (évite les règles globales qui le cachent) */
.page-reception #manual-gtin-label,
.page-reception #manual-subinfo {
  display: block !important;
}
.page-reception .gtin-label.hidden {
  display: none !important;
}

/* Suggestions : jamais coupées, passent au-dessus des cartes */
.page-reception .suggestion-box {
  display: none;            /* par défaut caché */
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 100%;
  background: #0f141b;
  border: 1px solid #2b3340;
  border-radius: 10px;
  max-height: 320px;
  overflow: auto;
  box-shadow: 0 12px 36px rgba(0,0,0,.35);
  z-index: 400;             /* au-dessus des .card */
}
.page-reception .suggestion-box.show { display: block; }

/* Cartes : skin exact des captures (si le global a divergé) */
.page-reception .card {
  background: #141a22 !important;
  border: 1px solid #232a36 !important;
  border-radius: 12px !important;
  box-shadow: 0 6px 24px rgba(0,0,0,.25) !important;
  padding: 1rem 1.2rem !important;
  overflow: visible !important;
}

/* Tabs : retour au soulignement bleu propre */
.page-reception .tabs .tab {
  color: #9db2cc !important;
  border-bottom: 3px solid transparent !important;
}
.page-reception .tabs .tab:hover { color: #e6edf6 !important; }
.page-reception .tabs .tab.active {
  color: #6cf !important;
  border-bottom-color: #6cf !important;
}

/* Boutons — Valider en BLEU (pas vert) comme avant */
.page-reception .btn-validate,
.page-reception .validate-reception-button {
  background: #2f8ad9 !important;
  border-color: #2f8ad9 !important;
  color: #eaf0f9 !important;
}
.page-reception .btn-validate:hover,
.page-reception .validate-reception-button:hover {
  filter: brightness(1.05) !important;
}

/* Historique — entête sticky et badge Narco à côté du # */
.page-reception .history-header {
  position: sticky;
  top: 0;
  background: #0f141b !important;
  border: 1px solid #233044 !important;
  border-bottom: 0 !important;
  color: #a9b8cc !important;
  border-radius: 10px 10px 0 0 !important;
  z-index: 5;
}
.page-reception .badge-narco {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ef4444;
  color: #0b1220;
  font-weight: 700;
  font-size: .72rem;
  border: 1px solid #7f1d1d;
  box-shadow: 0 0 0 1px rgba(0,0,0,.25) inset;
  vertical-align: middle;
}

/* Inputs sombres uniformes (si des règles globales dévient) */
.page-reception .input-dark,
.page-reception .reception-grid input,
.page-reception input[type="date"],
.page-reception input[type="number"],
.page-reception input[type="text"] {
  background: #0f141b !important;
  border: 1px solid #2b3340 !important;
  border-radius: 8px !important;
  color: #eaf0f9 !important;
  height: 36px !important;
}

/* Toggle Formats/Unités — pastille active sombre */
.page-reception .rx-mode-toggle { 
  display: inline-flex;
  background: #0e141c !important;
  border: 1px solid #263041 !important;
  border-radius: 999px !important;
  overflow: hidden;
}
.page-reception .rx-pill { 
  background: transparent !important;
  color: #9db2cc !important;
  padding: .32rem .7rem !important;
  font-size: .78rem !important;
  border: 0 !important;
}
.page-reception .rx-pill.is-active { 
  background: #1a2333 !important;
  color: #fff !important;
}

/* Modale — sécurité : cachée = clique-through */
.page-reception .modal.hidden {
  display: none !important;
  pointer-events: none !important;
}

/* Import — largeur maîtrisée des champs pour un alignement propre */
.page-reception #datamatrix-scan-input { width: 420px !important; max-width: 100%; }
.page-reception #invoice-file { max-width: 560px; }





.hidden { display: none !important; }

/* === Global Search Popover === */
.global-suggest {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 100%;
  background: #121923;
  border: 1px solid #2b3b4e;
  border-radius: 10px;
  box-shadow: 0 14px 40px rgba(0,0,0,.45);
  max-height: 360px;
  overflow: auto;
  z-index: 3000; /* au-dessus de la navbar et des cards */
}
.gs-section { padding: 8px 8px 10px; }
.gs-title { font-size: .75rem; color: #93a4b6; text-transform: uppercase; margin: 4px 6px 6px; letter-spacing: .06em; }
.gs-row {
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}
.gs-row:hover, .gs-row.is-active { background: #182231; }
.gs-name { font-weight: 600; color: #e8f2ff; }
.gs-meta { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.gs-chip { font-size: .72rem; padding: 2px 8px; border-radius: 999px; border:1px solid #2e3e52; color:#cfe2ff; background:#0f1620; }
.gs-chip--section { border-color:#355a86; color:#9dc8ff; background:#0c1520; }




/* === FIX: Bulle du sélecteur Inventaire / Quarantaine === */

.inv-toggle {
  display: inline-flex !important;
  width: auto !important;
  padding: 2px !important;             /* réduit le halo autour */
  margin: 0.4rem 0 1rem 0 !important;
  border-radius: 999px;
  background: #17212b;
  border: 1px solid #2e3a46;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.04);
}

.inv-toggle .pill {
  padding: 6px 12px !important;        /* bouton plus équilibré */
  border-radius: 999px;
  font-size: 0.88rem;
  border: none;
  background: transparent;
  color: #a9bbcc;
  cursor: pointer;
  transition: color 0.2s, background 0.2s;
}

.inv-toggle .pill.active {
  background: #223041;
  color: #fff;
  box-shadow: inset 0 0 0 1px #35506a;
}



.highlight-row {
  outline: 2px solid #6cf;
  box-shadow: 0 0 0 4px rgba(102,204,255,0.25);
  border-radius: 6px;
  transition: outline-color .2s ease, box-shadow .2s ease;
}

/* ===== Expiration bientôt ===== */
.expire-soon {
  color: #ffcc00;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.expire-soon svg {
  stroke-width: 1.8;
  width: 16px;
  height: 16px;
}

/* ==== Flux du jour unifié ==== */

.chip.pill {
  border: 1px solid #2d3b4d;
  background: #0b121a;
  color: #cfe2ff;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: .82rem;
  cursor: pointer;
}
.chip.pill.active {
  background: #0f1b2a;
  border-color: #3a5c80;
  color: #9bd1ff;
}
.badge-info   { border-color:#2d3d6b; background:#0b0f18; color:#a6baf2; }
.badge-blue   { border-color:#264d73; background:#0b121a; color:#9fd0ff; }
.badge-green  { border-color:#1d4f2a; background:#0c1711; color:#a7e3bb; }
.badge-amber  { border-color:#6b4b1a; background:#18130a; color:#f0c27b; }
.badge-red    { border-color:#742f34; background:#180e10; color:#f2a6ad; }
.badge-purple { border-color:#4f2a6b; background:#140f18; color:#d3a6f2; }

/* === Dashboard — peaufinage visuel clean === */

/* Carte unique plus “respirante” */

/* Titres de section: label discret + ligne */

/* Champ scan plus doux et large */

/* Table look “lite” */

/* En-têtes pastillés (plus lisibles) */

/* Boutons fantômes plus discrets */
.ghost-btn {
  border-color: #33465f;
  color: #cfe2ff;
  background: transparent;
  padding: 6px 10px;
  border-radius: 8px;
}
.ghost-btn:hover {
  background: #1b2736;
  border-color: #4a79b5;
  color: #e9f2ff;
}

/* Badge palette harmonisée */
.badge-blue   { border-color:#30527a; background:#0e1622; color:#a9cffc; }
.badge-green  { border-color:#1d4f2a; background:#0c1711; color:#a7e3bb; }
.badge-amber  { border-color:#6b4b1a; background:#18130a; color:#f0c27b; }
.badge-red    { border-color:#74333a; background:#190e10; color:#f1a4ac; }
.badge-purple { border-color:#4f2a6b; background:#140f18; color:#d3a6f2; }

/* Prévisualisation produit: carte plus clean */
.product-preview {
  background: #0f1622;
  border: 1px solid #253447;
  color: #e6edf6;
}

/* Séparateurs plus fins */

/* ===== DASHBOARD — Scan Datamatrix : input + feedback côte à côte ===== */

#scan-feedback {
  flex: 1 1 auto;
  min-width: 220px;             /* réserve visuelle pour le texte */
  white-space: nowrap;          /* reste sur une ligne */
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Empiler proprement sur mobile */
@media (max-width: 700px) {
  #scan-feedback {
    flex: 1 1 100%;
    margin-top: 0.5rem;
    white-space: normal;        /* ok d’aller à la ligne sur petit écran */
  }
}

/* Empêche toute action sensible dans une pharmacie distante */
.readonly-mode [data-quarantine],
.readonly-mode .btn-warning,
.readonly-mode .btn-danger {
    display: none !important;
}

/* Désactive édition, sections, etc. */
.readonly-mode .inv-detail-row button[data-quarantine] {
    display:none !important;
}


/* === LOGIN PAGE OVERRIDES === */

body.login-page input[type="text"],
body.login-page input[type="password"] {
    background-color: #ffffff !important;
    color: #1e293b !important;
    border: 1px solid #d1d5db !important;
    box-shadow: none !important;
}

body.login-page input[type="text"]:focus,
body.login-page input[type="password"]:focus {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.4) !important;
    background-color: #ffffff !important;
}

/* ===== QUARANTAINE — colonnes + checkboxes propres ===== */

/* Table stable */
.quarantine-table.stock-table{
  width: 100%;
  table-layout: fixed;
}

/* Plus d'air */
.quarantine-table.stock-table th,
.quarantine-table.stock-table td{
  padding: .75rem 1.1rem;
}

/* Checkbox: NE JAMAIS hériter input{width:100%} */
.quarantine-table input[type="checkbox"]{
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  border-radius: 4px;
  accent-color: #6cf;
  transform: scale(1.05); /* légèrement plus visible */
}

/* Colonne checkbox */
.quarantine-table.stock-table .col-check{
  width: 44px;
}

/* Produit: plafonné pour ne pas manger tout */
.quarantine-table.stock-table th.col-product,
.quarantine-table.stock-table td:nth-child(2){
  width: 46%;              /* ajuste: 40–55% selon ton goût */
}

/* Colonnes droites: confort */
.quarantine-table.stock-table th.col-qty,
.quarantine-table.stock-table td:nth-child(3){
  width: 160px;
  white-space: nowrap;
}
.quarantine-table.stock-table th.col-lot,
.quarantine-table.stock-table td:nth-child(4){
  width: 150px;
  white-space: nowrap;
}
.quarantine-table.stock-table th.col-exp,
.quarantine-table.stock-table td:nth-child(5){
  width: 170px;
  white-space: nowrap;
}
.quarantine-table.stock-table .col-more{
  width: 120px;
  white-space: nowrap;
}

/* Produit: ellipsis propre (sinon ça force les widths) */
.quarantine-table .product-cell{
  min-width: 0;
}
.quarantine-table .product-cell .title,
.quarantine-table .product-cell .sub{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.quarantine-table.stock-table th.col-check,
.quarantine-table.stock-table td.col-check{
  text-align: center;
}

/* ===== QUARANTAINE — responsive: garder les 4 colonnes visibles ===== */
@media (max-width: 1100px){
  /* On libère de l'espace en réduisant les colonnes droites */
  .quarantine-table.stock-table th.col-qty,
  .quarantine-table.stock-table td:nth-child(3){ width: 120px; }

  .quarantine-table.stock-table th.col-lot,
  .quarantine-table.stock-table td:nth-child(4){ width: 120px; }

  .quarantine-table.stock-table th.col-exp,
  .quarantine-table.stock-table td:nth-child(5){ width: 140px; }

  .quarantine-table.stock-table .col-more{ width: 96px; }

  /* Produit ne doit jamais tomber à 0 */
  .quarantine-table.stock-table th.col-product,
  .quarantine-table.stock-table td:nth-child(2){
    width: auto;          /* reprend l'espace restant */
    min-width: 260px;     /* garde la colonne visible */
  }
}

@media (max-width: 900px){
  /* Encore plus compact */
  .quarantine-table.stock-table th.col-qty,
  .quarantine-table.stock-table td:nth-child(3){ width: 105px; }

  .quarantine-table.stock-table th.col-lot,
  .quarantine-table.stock-table td:nth-child(4){ width: 105px; }

  .quarantine-table.stock-table th.col-exp,
  .quarantine-table.stock-table td:nth-child(5){ width: 120px; }

  .quarantine-table.stock-table .col-more{ width: 86px; }

  .quarantine-table.stock-table th,
  .quarantine-table.stock-table td{
    padding: .65rem .85rem;  /* réduit le padding */
  }

  .quarantine-table.stock-table th.col-product,
  .quarantine-table.stock-table td:nth-child(2){
    min-width: 220px;
  }
}

/* ===== QUARANTAINE — Bulkbar: compteur + boutons à droite ===== */

#q-bulkbar{
  display: flex;
  align-items: center;
  gap: .75rem;
}

/* Le compteur part à droite (avant les boutons) */
#q-bulkbar .bulkbar-left{
  margin-left: auto;             /* pousse le compteur à droite */
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

/* Boutons juste à droite du compteur */
#q-bulkbar .bulkbar-actions{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

/* Compteur style badge */
#q-bulkbar .bulkbar-count{
  font-size: .9rem;
  color: #cfe2ff;
  background: #1b2736;
  border: 1px solid #2e3a46;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}



/* =========================================================
   GLOBAL SEARCH POPOVER — layout moderne (section en haut,
   total unités en bas, badges à droite)
   Remplace tous les anciens blocs .global-suggest / .gs-*
   ========================================================= */

.global-suggest{
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 100%;
  background: #121923;
  border: 1px solid #2b3b4e;
  border-radius: 10px;
  box-shadow: 0 14px 40px rgba(0,0,0,.45);
  max-height: 360px;
  overflow: auto;
  z-index: 3000;
}

/* Group */
.gs-section{
  padding: 8px 8px 10px;
}

/* Titre de section (Inventaire / Quarantaine) */
.gs-title{
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 10px 8px 6px;
  padding-left: 2px;
  color: #6cf; /* fallback */
}

.global-suggest .gs-title--inv { color: #6cf; }
.global-suggest .gs-title--q   { color: #facc15; }


.gs-title::after{
  content: "";
  display: block;
  margin-top: 4px;
  height: 1px;
  background: linear-gradient(to right, currentColor, transparent);
  opacity: .35;
}

/* =========================================================
   ROW LAYOUT
   - Col 1: texte (nom + sub)
   - Col 2: badges (section en haut, unités en bas)
   ========================================================= */

.gs-row{
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;

  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 12px;
  row-gap: 6px;
  align-items: center;
}

.gs-row:hover,
.gs-row.is-active{
  background: #182231;
}

/* Nom (haut gauche) */
.gs-name{
  grid-column: 1;
  grid-row: 1;

  font-weight: 800;
  font-size: .95rem;
  color: #ffffff;
  line-height: 1.1;
  letter-spacing: .3px;
  text-transform: uppercase;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Dosage / forme / DIN (bas gauche) */
.gs-sub{
  grid-column: 1;
  grid-row: 2;

  font-weight: 600;
  font-size: .82rem;
  color: #9fb3c8; /* bleu-gris pharma */
  text-transform: uppercase;
  letter-spacing: .25px;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Badges TOP (ligne titre) = SECTION uniquement */
.gs-meta-top{
  grid-column: 2;
  grid-row: 1;

  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

/* Badges BOTTOM (ligne sub) = TOTAL UNITÉS */
.gs-meta-sub{
  grid-column: 2;
  grid-row: 2;

  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

/* Chips base */
.gs-chip{
  font-size: .78rem;
  padding: 4px 10px;
  border-radius: 999px;

  border: 1px solid #2e3e52;
  color: #cfe2ff;
  background: #0f1620;

  white-space: nowrap;
  font-weight: 650;
  line-height: 1.2;
}

/* Chip SECTION: reçoit la couleur inv/q via classes dédiées */
.gs-chip--section{
  /* intentionally empty */
}

/* SECTION – Inventaire */
.gs-chip--section-inv{
  background: rgba(148, 163, 184, 0.16);
  border: 1px solid rgba(148, 163, 184, 0.35);
  color: rgba(226, 232, 240, 0.95);
}

/* SECTION – Quarantaine */
.gs-chip--section-q{
  background: rgba(251, 191, 36, 0.18);
  border: 1px solid rgba(251, 191, 36, 0.45);
  color: rgba(253, 230, 138, 0.95);
}

.gs-total{
  font-size: .78rem;
  font-weight: 650;
  color: #9fb3c8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* =========================================================
   INVENTAIRE — 1 SEULE BOX SUR LA MOLÉCULE OUVERTE
   - Box portée par .inv-group (wrapper)
   - Active row = highlight léger (PAS une 2e box)
   - Détection "ouvert" via aria-expanded="true"
   ========================================================= */

/* Base: groupe sans box tant qu'il est fermé */
.inv-group{
  border: 0;
  border-radius: 12px;
}

/* Quand le groupe est ouvert => UNE SEULE BOX qui englobe TOUT */
.inv-group:has(.inv-group-head[aria-expanded="true"]){
  background: rgba(18,25,35,0.55);                 /* vibe global search */
  border: 1px solid rgba(159,179,200,0.16);
  border-radius: 12px;
  padding: 10px 10px 12px;
}

/* Head & body deviennent "transparent" pour ne pas créer une 2e box */
.inv-group:has(.inv-group-head[aria-expanded="true"]) > .inv-group-head{
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 6px 4px 10px;
}

/* Corps: pas de border/radius; juste du spacing */
.inv-group:has(.inv-group-head[aria-expanded="true"]) > .inv-group-body{
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0;
}

/* Table style "search list" */
.inv-group-body .inv-table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: transparent;
}

/* Header table */
.inv-group-body .inv-table thead th{
  background: transparent;
  color: rgba(159,179,200,0.70);
  font-weight: 700;
  font-size: .82rem;
  border-bottom: 1px solid rgba(159,179,200,0.12);
  padding: .65rem .9rem;
}

/* Cellules */
.inv-group-body .inv-table td{
  padding: .75rem .9rem;
  border-bottom: 1px solid rgba(159,179,200,0.10);
  color: rgba(232,242,255,0.92);
}

/* Hover row */
.inv-group-body .inv-table tbody tr:hover > td{
  background: rgba(24,34,49,0.55);
}

/* Lignes: arrondis doux */
.inv-group-body .inv-table tbody tr > td:first-child{
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
.inv-group-body .inv-table tbody tr > td:last-child{
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

/* =========================================================
   ACTIVE ITEM = 1 CARTE (ligne produit + détail)
   - garde la box interne .inv-detail-wrap
   - supprime les petits artefacts de coin
   ========================================================= */

/* 0) Nettoyage: pas d'arrondis "par défaut" sur les TD (évite les coins bizarres) */
.inv-group-body .inv-table tbody tr > td{
  border-radius: 0 !important;
}

/* 1) La carte = fond + bordure sur la LIGNE PRODUIT + LIGNE DÉTAIL */
.inv-row--active > td{
  background: rgba(24,34,49,0.62) !important;
  border-top: 1px solid rgba(159,179,200,0.18) !important;
  border-bottom: 0 !important; /* jointure avec le détail */
}

/* Bordures latérales sur la rangée produit */
.inv-row--active > td:first-child{
  border-left: 1px solid rgba(159,179,200,0.18) !important;
  box-shadow: inset 3px 0 0 rgba(159,179,200,0.16);
}
.inv-row--active > td:last-child{
  border-right: 1px solid rgba(159,179,200,0.18) !important;
}

/* Arrondis uniquement sur les extrémités de la rangée produit */
.inv-row--active > td:first-child{ border-top-left-radius: 12px !important; }
.inv-row--active > td:last-child{  border-top-right-radius: 12px !important; }

/* 2) Ligne détail = même carte, bordure bottom + côtés, pas de top */
.inv-row--active + .inv-detail-row > td{
  background: rgba(24,34,49,0.48) !important;
  border-top: 0 !important;
  border-bottom: 1px solid rgba(159,179,200,0.18) !important;
  border-left: 1px solid rgba(159,179,200,0.18) !important;
  border-right: 1px solid rgba(159,179,200,0.18) !important;
  border-bottom-left-radius: 12px !important;
  border-bottom-right-radius: 12px !important;
  box-shadow: inset 3px 0 0 rgba(159,179,200,0.10);
  padding-top: .45rem;
}

/* 3) IMPORTANT: retire toute "outline" résiduelle (artefact coin) */
.inv-row--active > td,
.inv-row--active + .inv-detail-row > td{
  outline: 0 !important;
}

/* 4) On garde la box interne du détail (comme tu veux) */
.inv-row--active + .inv-detail-row .inv-detail-wrap{
  background: rgba(15,22,32,0.28) !important;
  border: 1px solid rgba(159,179,200,0.14) !important;
  border-radius: 10px !important;
}

/* 5) Table interne du détail: lignes discrètes */
.inv-row--active + .inv-detail-row table,
.inv-row--active + .inv-detail-row th,
.inv-row--active + .inv-detail-row td{
  border-color: rgba(159,179,200,0.10) !important;
}
.inv-row--active + .inv-detail-row thead th{
  color: rgba(159,179,200,0.70);
  font-weight: 600;
}

/* 6) Datamatrix */
.inv-row--active + .inv-detail-row code.dm-text{
  color: rgba(232,242,255,0.86);
  background: rgba(15,22,32,0.35);
  border: 1px solid rgba(159,179,200,0.18);
  padding: 3px 8px;
  border-radius: 8px;
}

/* 7) Boutons: pas de glow */
.inv-row--active + .inv-detail-row .btn,
.inv-row--active + .inv-detail-row .ghost-btn{
  box-shadow: none !important;
}

/* =========================================================
   INVENTAIRE — Toggle Liste/Grille + Grid view
   ========================================================= */



/* Toggle Liste/Grille (premium, compact) */
.inv-view-toggle{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:3px;
  border-radius:999px;
  border:1px solid rgba(159,179,200,0.18);
  background: rgba(18,25,35,0.55);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.03);
}

.inv-view-btn{
  border:0;
  background:transparent;
  color: rgba(159,179,200,0.85);
  padding: 6px 12px;
  border-radius:999px;
  font-size:.88rem;
  font-weight:700;
  cursor:pointer;
  transition: .15s ease;
  margin-top: 0; /* sécurité vs button global */
}

.inv-view-btn:hover{
  color:#e8f2ff;
  background: rgba(24,34,49,0.40);
}

.inv-view-btn.is-active{
  background:#223041;
  color:#ffffff;
  box-shadow: inset 0 0 0 1px #35506a;
}

/* ---------------------------------------------------------
   Grid mode: sections en cartes
   Source DOM: #inventory-structure contient .inv-section
   --------------------------------------------------------- */

/* Par défaut: liste (comportement existant) */
#inventory-structure{
  display:block;
}

/* Mode grille activé via .inventory-page.view-grid */
.inventory-page.view-grid #inventory-structure{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items:start;
}

/* Tablette */
@media (max-width: 1024px){
  .inventory-page.view-grid #inventory-structure{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Mobile */
@media (max-width: 640px){
  .inventory-page.view-grid #inventory-structure{
    grid-template-columns: 1fr;
  }
}

/* En grid: chaque section devient une carte (sans margin-bottom) */
.inventory-page.view-grid .inv-section{
  margin-bottom: 0; /* annule le spacing vertical du mode liste */
}

/* Section ouverte = pleine largeur */
.inventory-page.view-grid .inv-section.is-open{
  grid-column: 1 / -1;
}


/* =========================================================
   INVENTAIRE — Ligne HEAD (tabs + metrics)
   ========================================================= */

.inv-scope { 
  display: block; 
}

.inv-scope-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:.4rem 0 1rem 0;
}

/* tabs */
.inv-scope-head .inv-toggle{
  margin:0 !important;   /* neutralise les vieux margins */
  flex-shrink:0;
}

/* metrics à droite */
.inv-scope-head .inv-global-metrics{
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-shrink:0;
  margin:0 !important;
}

/* mobile : autoriser wrap propre */
@media (max-width: 720px){
  .inv-scope-head{
    flex-wrap:wrap;
  }
  .inv-scope-head .inv-global-metrics{
    margin-left:auto !important;
  }
}

/* =========================================================
   QUARANTAINE — FINAL SINGLE SOURCE (KEEP ONLY THIS)
   ========================================================= */

:root{
  --topbar-h: 56px;
  --q-bulk-h: 44px;   /* réserve sticky */
  --q-thead-h: 44px;  /* hauteur head colonnes */
}

/* Bulkbar = mécanique, invisible mais garde la hauteur */
#q-bulkbar{
  position: sticky;
  top: calc(var(--topbar-h) + 8px);
  z-index: 80;
  height: var(--q-bulk-h);
  display: flex;
  align-items: center;
  margin: 0 0 0 0;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
#q-bulkbar.hidden{ display:flex !important; }

/* Table */
.quarantine-table.stock-table{
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

/* Thead sticky — OPAQUE + align */
.quarantine-table thead th{
  position: sticky;
  top: calc(var(--topbar-h) + 8px + var(--q-bulk-h));
  z-index: 70;
  background: #121a24;
  border-bottom: 1px solid rgba(255,255,255,0.10);

  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(180,200,220,0.78);

  /* IMPORTANT: pas de line-height fixe qui casse l’align */
  height: var(--q-thead-h);
  padding: 0 .95rem;
  vertical-align: middle;
}

/* TD */
.quarantine-table.stock-table td{
  padding: .70rem .95rem;
  vertical-align: middle;
  border-bottom: 1px solid #2e3a46;
  text-align: left;
}

/* Colonnes */
.quarantine-table.stock-table th.col-check,
.quarantine-table.stock-table td.col-check{ width: 44px; text-align:center; }
.quarantine-table.stock-table th.col-product,
.quarantine-table.stock-table td.col-product{ width: 46%; max-width:46%; }
.quarantine-table.stock-table th.col-qty,
.quarantine-table.stock-table td.col-qty{ width: 170px; white-space: nowrap; }
.quarantine-table.stock-table th.col-lot,
.quarantine-table.stock-table td.col-lot{ width: 160px; white-space: nowrap; }
.quarantine-table.stock-table th.col-exp,
.quarantine-table.stock-table td.col-exp{ width: 180px; white-space: nowrap; }
.quarantine-table.stock-table th.col-more,
.quarantine-table.stock-table td.col-more{ width: 90px; white-space: nowrap; text-align:right; }

/* Produit (2 lignes) */
.quarantine-table.stock-table .product-cell{
  display:flex;
  flex-direction:column;
  line-height:1.15;
  min-width:0;
}
.quarantine-table.stock-table .product-cell .title,
.quarantine-table.stock-table .product-cell .sub{
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Checkbox safety */
.quarantine-table.stock-table input[type="checkbox"]{
  width:auto !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  box-shadow:none !important;
  accent-color:#6cf;
}

/* Section header sticky — COLLÉ DIRECT sous le thead (no gap) */
.quarantine-table .q-section-row td{
  position: sticky;
  top: calc(var(--topbar-h) + 8px + var(--q-bulk-h) + var(--q-thead-h));
  z-index: 60;

  background: #0f1620; /* opaque */
  border-bottom: 1px solid rgba(255,255,255,0.08);

  /* tight */
  height: 36px;
  padding: 0 12px;
}

.quarantine-table .q-section-row{ cursor:pointer; }
.quarantine-table .q-section-row td:hover{ filter: brightness(1.05); }

.quarantine-table .q-section-head{
  height: 36px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.quarantine-table .q-section-left{
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.quarantine-table .q-section-title{
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .82rem;
  color: rgba(230,242,255,0.92);
}

/* ✅ badge count plus petit (ne dépasse plus) */
.quarantine-table .q-section-count{
  font-weight: 800;
  font-size: .74rem;
  line-height: 1;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: rgba(210,225,245,.90);
}

.quarantine-table .q-section-dot{ width:8px; height:8px; border-radius:999px; display:inline-block; }
.quarantine-table .q-dot-near_expiry     { background: rgba(250,204,21,.95); }
.quarantine-table .q-dot-expired_return  { background: rgba(239,68,68,.95); }
.quarantine-table .q-dot-for_sale        { background: rgba(56,189,248,.95); }
.quarantine-table .q-dot-unspecified     { background: rgba(148,163,184,.95); }

.quarantine-table .q-section-row.is-active td{
  box-shadow: inset 3px 0 0 rgba(102,204,255,0.35);
}

/* Actions à droite */
.quarantine-table .q-section-actions{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
}
.q-section-hint{ display:none !important; }

/* Détails: sous-table dans le trou (Qté + Lot) */
.quarantine-table.stock-table .q-children-cell{
  display:grid;
  grid-template-columns: 44px 46% 170px 160px 180px 90px;
  align-items:start;
  padding: .45rem .95rem;
}
.quarantine-table.stock-table .q-children-cell > .q-subtable{
  grid-column: 3 / 5;
  justify-self: end;
  width: min(520px, 100%);
  margin-left:auto;
  transform: translateX(14px);
}

.quarantine-table .q-subtable{
  width:100%;
  table-layout: fixed;
  border-collapse: collapse;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.03);
}
.quarantine-table .q-subtable th,
.quarantine-table .q-subtable td{
  padding: .40rem .65rem;
  text-align:left;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.quarantine-table .q-subtable th.col-check,
.quarantine-table .q-subtable td.col-check{ width:44px; text-align:center; }
.quarantine-table .q-subtable th.col-qty,
.quarantine-table .q-subtable td.col-qty{ width:90px; white-space:nowrap; }

/* Responsive */
@media (max-width: 1100px){
  .quarantine-table.stock-table th.col-product,
  .quarantine-table.stock-table td.col-product{ width:50%; max-width:50%; }
  .quarantine-table.stock-table th.col-qty,
  .quarantine-table.stock-table td.col-qty{ width:140px; }
  .quarantine-table.stock-table th.col-lot,
  .quarantine-table.stock-table td.col-lot{ width:130px; }
  .quarantine-table.stock-table th.col-exp,
  .quarantine-table.stock-table td.col-exp{ width:150px; }
  .quarantine-table.stock-table th.col-more,
  .quarantine-table.stock-table td.col-more{ width:86px; }
  .quarantine-table.stock-table .q-children-cell{
    grid-template-columns: 44px 50% 140px 130px 150px 86px;
  }
}

@media (max-width: 1050px){
  .quarantine-table.stock-table .q-children-cell{ display:block; }
  .quarantine-table.stock-table .q-children-cell > .q-subtable{
    width:100%;
    transform:none;
  }
}
.quarantine-table .q-section-actions .q-section-count{
  font-size:.74rem;
  padding: 2px 8px;
  opacity: .9;
}

/* =========================================================
   QUARANTAINE — ALIGN TITRES COLONNES + FIX MINI-GAP
   - Aligne Produit / Qté / Lot avec les cellules
   - Colle la ligne section directement sous le thead sticky
   ========================================================= */

/* 1) Forcer l’alignement à gauche des TH (par défaut certains navigateurs centrent) */
.quarantine-table thead th{
  text-align: left;               /* ✅ Produit / Qté / Lot alignés à gauche */
}

/* Exceptions: checkbox centrée, actions à droite */
.quarantine-table thead th.col-check{ text-align: center; }
.quarantine-table thead th.col-more{  text-align: right; }

/* 2) Uniformiser la “gouttière” horizontale entre TH et TD
      -> même padding sur TH et sur la ligne de section */
.quarantine-table thead th{
  padding-left: .95rem;
  padding-right: .95rem;
}
.quarantine-table .q-section-row td{
  padding-left: .95rem;           /* ✅ même départ que les colonnes */
  padding-right: .95rem;
}

/* 3) Fermer le mini-gap entre thead et q-section-row
      -> on “colle” la section sous le thead en compensant 1px de border */
.quarantine-table .q-section-row td{
  top: calc(var(--topbar-h) + 8px + var(--q-bulk-h) + var(--q-thead-h) - 1px);
  border-top: 0;                  /* évite une double ligne visuelle */
}

/* 4) Optionnel mais utile: même hauteur perçue entre header et section */
.quarantine-table thead th{
  line-height: 1;                 /* évite un “surplus” qui décale visuellement */
}

/* (Sécurité) Les TD restent à gauche, sauf col-more déjà à droite chez toi */
.quarantine-table.stock-table td{
  text-align: left;
}
.quarantine-table.stock-table td.col-more{
  text-align: right;
}

/* =========================================================
   QUARANTAINE — STICKY HEADERS COLLÉS À LA NAVBAR
   Objectifs:
   - Bulkbar + header colonnes collés au topbar (0 gap)
   - Background 100% opaque (rien ne “transparaît” derrière)
   - Empilement (z-index) propre
   ========================================================= */

:root{
  --topbar-h: 56px;
  --q-bulk-h: 44px;
  --q-thead-h: 44px;
}

/* 1) Bulkbar collé à la navbar (plus de +8px) */
#q-bulkbar{
  top: var(--topbar-h) !important;
  background: #0f1620 !important;                  /* opaque */
  border-bottom: 1px solid rgba(255,255,255,0.08);
  z-index: 120 !important;                         /* au-dessus du thead */
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
}

/* 2) Header colonnes collé sous le bulkbar (sans gap) */
.quarantine-table thead th{
  top: calc(var(--topbar-h) + var(--q-bulk-h)) !important;
  background: #121a24 !important;                  /* opaque */
  z-index: 110 !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}

/* 3) Header de section collé sous le thead (sans gap) */
.quarantine-table .q-section-row td{
  top: calc(var(--topbar-h) + var(--q-bulk-h) + var(--q-thead-h) - 1px) !important;
  background: #0f1620 !important;                  /* opaque */
  z-index: 100 !important;
}

/* 4) Sécurité: le thead doit “couvrir” le contenu derrière */
.quarantine-table thead{
  position: relative;
  z-index: 110;
}


/* =========================================================
   QUARANTAINE — FIX GAP + ALIGN "Qté" À GAUCHE
   - Bulkbar ne réserve PLUS de hauteur quand hidden
   - Positions sticky recalculées selon état hidden/visible
   - "Qté" (header + cellules) aligné à gauche
   ========================================================= */

:root{
  --topbar-h: 56px;
  --q-bulk-h: 44px;
  --q-thead-h: 44px;
}

/* 1) Bulkbar: quand hidden => ZERO hauteur (donc plus de gap) */
#q-bulkbar.hidden{
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Quand visible (sélection active) => redevient une vraie barre */
#q-bulkbar:not(.hidden){
  height: var(--q-bulk-h) !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;

  position: sticky;
  top: var(--topbar-h) !important;
  z-index: 120 !important;

  background: #0f1620 !important; /* opaque */
  border-bottom: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
}

/* 2) Sticky THEAD: si bulkbar hidden => collé direct sous navbar */
#q-bulkbar.hidden ~ table.quarantine-table thead th{
  top: var(--topbar-h) !important;
  z-index: 110 !important;
  background: #121a24 !important; /* opaque */
}

/* Sticky THEAD: si bulkbar visible => sous bulkbar */
#q-bulkbar:not(.hidden) ~ table.quarantine-table thead th{
  top: calc(var(--topbar-h) + var(--q-bulk-h)) !important;
  z-index: 110 !important;
  background: #121a24 !important; /* opaque */
}

/* 3) Sticky Section row: suit le thead (sans gap) */
#q-bulkbar.hidden ~ table.quarantine-table .q-section-row td{
  top: calc(var(--topbar-h) + var(--q-thead-h) - 1px) !important;
  z-index: 100 !important;
  background: #0f1620 !important; /* opaque */
}

#q-bulkbar:not(.hidden) ~ table.quarantine-table .q-section-row td{
  top: calc(var(--topbar-h) + var(--q-bulk-h) + var(--q-thead-h) - 1px) !important;
  z-index: 100 !important;
  background: #0f1620 !important; /* opaque */
}

/* 4) "Qté" DOIT être à gauche (header + cellules) */
table.quarantine-table.stock-table thead th.col-qty{
  text-align: left !important;
}
table.quarantine-table.stock-table td.col-qty{
  text-align: left !important;
}

/* ===== QUARANTAINE — désactiver bulkbar global ===== */
#q-bulkbar{ display: none !important; }

/* plus de bulkbar => recoller sticky thead + section */
.quarantine-table thead th{
  top: var(--topbar-h) !important;
}
.quarantine-table .q-section-row td{
  top: calc(var(--topbar-h) + var(--q-thead-h) - 1px) !important;
}

/* ===== QUARANTAINE — couleur expiration par item (robuste) ===== */

/* Presque expiré => jaune */
.quarantine-table tr.q-group-row[data-reason="near_expiry"] td.col-exp{
  color: #facc15;
  font-weight: 700;
}

/* Expiré => rouge */
.quarantine-table tr.q-group-row[data-reason="expired_return"] td.col-exp{
  color: #ef4444;
  font-weight: 700;
}

/* À vendre / Non spécifié => couleur normale (pas de override) */

/* =========================================================
   QUARANTAINE — THEME HEADERS (override final)
   Objectif: détacher clairement les 2 headers du background global
   ========================================================= */

/* Ajuste ici si tu veux affiner */
:root{
  --q-thead-bg-top:    #1b2740;  /* header colonnes (haut) */
  --q-thead-bg-bottom: #141f34;  /* header colonnes (bas) */
  --q-section-bg:      #0b1526;  /* header section (Presque expiré, etc.) */
  --q-head-border:     rgba(255,255,255,0.10);
  --q-head-border-2:   rgba(0,0,0,0.35);
}

/* 1) Header colonnes */
.quarantine-table thead th{
  background: linear-gradient(180deg, var(--q-thead-bg-top) 0%, var(--q-thead-bg-bottom) 100%) !important;
  border-bottom: 1px solid var(--q-head-border) !important;
  box-shadow: 0 1px 0 var(--q-head-border-2), 0 10px 24px rgba(0,0,0,.25) !important;
}

/* 2) Header section */
.quarantine-table .q-section-row td{
  background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.00) 70%), var(--q-section-bg) !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

/* Petit “lift” visuel sur la section active (optionnel, clean) */
.quarantine-table .q-section-row.is-active td{
  background: linear-gradient(180deg, rgba(102,204,255,0.10) 0%, rgba(102,204,255,0.00) 70%), var(--q-section-bg) !important;
}

/* =========================================================
   QUARANTAINE — UNIFIER BACKGROUND HEADERS
   - Header colonnes = Header sections
   - Override FINAL (gagne toujours la cascade)
   ========================================================= */

/* Couleur unique pour tous les headers quarantaine */
:root{
  --q-header-bg: #0f1620; /* même que section title */
}

/* Header des titres de colonnes */
.quarantine-table thead th{
  background: var(--q-header-bg) !important;
  border-bottom: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.25) !important;
}

/* Header de section (Presque expiré, etc.) */
.quarantine-table .q-section-row td{
  background: var(--q-header-bg) !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

/* Optionnel : section active reste lisible mais subtile */
.quarantine-table .q-section-row.is-active td{
  box-shadow: inset 3px 0 0 rgba(102,204,255,0.35);
}

/* =========================================================
   QUARANTAINE — OVERRIDE FINAL (anti-écrasement)
   - Force le même background pour:
     1) header colonnes (thead th)
     2) header sections (q-section-row td)
   ========================================================= */

:root{
  --q-header-bg: #0f1620; /* prends celle que tu veux */
}

/* Header colonnes */
#quarantine-content table.stock-table.quarantine-table thead th{
  background: var(--q-header-bg) !important;
  background-image: none !important;
  border-bottom: 1px solid rgba(255,255,255,0.10) !important;
}

/* Header sections */
#quarantine-content table.stock-table.quarantine-table tr.q-section-row > td{
  background: var(--q-header-bg) !important;
  background-image: none !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

/* =========================================================
   QUARANTAINE — ACTIONS TOUJOURS DEVANT (anti-flicker sticky)
   ========================================================= */

/* Le header de section sticky doit être au-dessus du thead */
.quarantine-table tr.q-section-row > td{
  z-index: 150 !important; /* > thead th */
}

/* Le contenu interne doit créer son propre layer au-dessus */
.quarantine-table tr.q-section-row > td .q-section-head{
  position: relative;
  z-index: 160 !important;
}

/* Les actions (boutons) encore un cran au-dessus */
.quarantine-table tr.q-section-row > td .q-section-actions{
  position: relative;
  z-index: 170 !important;
}

/* Bonus: évite certains bugs de peinture pendant scroll */
.quarantine-table tr.q-section-row > td{
  transform: translateZ(0);
  will-change: transform;
}

/* =========================================================
   MAP / CARTE LABO — MVP
   ========================================================= */

.page-wrap { padding: 1.25rem; }
.page-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-bottom: 1rem;
}
.page-actions {
  display:flex;
  gap:.6rem;
  align-items:center;
  flex-wrap: wrap;
}

.card {
  background: var(--card-bg, #141b24);
  border: 1px solid var(--border, #243140);
  border-radius: 14px;
  padding: 1rem;
}

.map-hint{
  color: var(--text-dim, #9aa7b6);
  margin-bottom: .75rem;
  font-size: .95rem;
}

.map-canvas-wrap{
  width:100%;
  overflow:auto;
  padding: .75rem;
  border-radius: 12px;
  border: 1px solid var(--border, #243140);
  background: rgba(255,255,255,0.02);
}

/* Canvas grid */
.map-canvas{
  --cell: 34px;
  position: relative;
  width: calc(var(--n) * var(--cell));
  height: calc(var(--n) * var(--cell));
  border-radius: 10px;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: var(--cell) var(--cell);
  background-position: 0 0;
}

.map-canvas.is-edit{
  outline: 2px dashed rgba(124, 165, 255, 0.35);
  outline-offset: 6px;
}

/* Lines */
.map-line{
  position:absolute;
  cursor: default;
  opacity: 0.9;
}

.map-canvas.is-edit .map-line{
  cursor: pointer;
}

.map-line.h{
  height: 3px;
  left: 0;
  right: 0;
  transform: translateY(-50%);
}
.map-line.v{
  width: 3px;
  top: 0;
  bottom: 0;
  transform: translateX(-50%);
}

/* Visual states */
.map-line.inactive{ background: rgba(255,255,255,0.22); }
.map-line.active{ background: rgba(0,0,0,0.9); }
.map-line.assigned{ background: rgba(124, 165, 255, 0.9); }

.map-line .tag{
  position:absolute;
  top: -26px;
  left: 10px;
  font-size: .75rem;
  padding: .15rem .4rem;
  border-radius: 8px;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.9);
  pointer-events: none;
  max-width: 260px;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.map-legend{
  display:flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: .8rem;
  color: var(--text-dim, #9aa7b6);
  font-size: .9rem;
}

.legend-item{ display:flex; gap:.5rem; align-items:center; }
.dot{ width:10px; height:10px; border-radius: 50%; display:inline-block; }
.dot-gray{ background: rgba(255,255,255,0.25); }
.dot-black{ background: rgba(0,0,0,0.9); border:1px solid rgba(255,255,255,0.15); }
.dot-blue{ background: rgba(124, 165, 255, 0.9); }


/* ===== MAP ASSIGN TOOL (MVP) ===== */

.map-layout{
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 14px;
  align-items: start;
}

.map-right{
  border: 1px solid var(--border, #2d3b4d);
  background: var(--card-bg, #101826);
  border-radius: 10px;
  padding: 12px;
  min-height: 320px;
}

.map-right-head{ margin-bottom: 10px; }
.map-right-title{ font-weight: 600; }
.map-right-sub{ font-size: .85rem; margin-top: 2px; }

.map-sections{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.map-sec-row{
  border: 1px solid var(--border, #2d3b4d);
  background: rgba(255,255,255,.02);
  border-radius: 10px;
  padding: 10px 10px;
  cursor: default;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.map-sec-row.is-hover{
  outline: 2px solid rgba(59,130,246,.35);
  background: rgba(59,130,246,.08);
}

.map-sec-name{ font-weight: 600; font-size: .92rem; }
.map-sec-meta{ font-size: .85rem; }

.map-toolbar .hidden{ display:none; }

/* Popup */
.map-canvas-wrap{ position: relative; }

.map-assign-pop{
  position: absolute;
  z-index: 50;
  width: 280px;
  border: 1px solid var(--border, #2d3b4d);
  background: var(--card-bg, #0f1724);
  border-radius: 12px;
  padding: 10px;
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
}

.map-assign-row{
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  align-items: center;
}

.map-assign-input{
  height: 34px;
  padding: 6px 10px;
}

.btn-xs{
  height: 34px;
  padding: 0 10px;
  border-radius: 10px;
}

.map-assign-suggest{
  margin-top: 8px;
  border: 1px solid var(--border, #2d3b4d);
  border-radius: 10px;
  overflow: hidden;
}

.map-sug-row{
  padding: 8px 10px;
  display: flex;
  justify-content: space-between;
  cursor: pointer;
  background: rgba(255,255,255,.02);
}

.map-sug-row:hover{
  background: rgba(59,130,246,.10);
}

.map-assign-hint{
  margin-top: 8px;
  font-size: .85rem;
}

/* Hover highlight on map segments (assigned + hovered) */
.map-seg.assigned.hovered{
  filter: brightness(1.15);
  outline: 2px solid rgba(59,130,246,.35);
}

/* ===== MAP: mode assign tool ===== */

/* Indicateur visuel + "lock" du dessin */
.map-canvas.is-assign{
  outline-color: rgba(168,85,247,.40) !important; /* violet */
}

/* En mode assign: les lignes actives (non assignées) changent de couleur */
.map-canvas.is-assign .map-seg.active{
  background: rgba(168,85,247,0.92) !important;   /* violet */
}

/* Assigné reste bleu */
.map-canvas.is-assign .map-seg.assigned{
  background: rgba(124,165,255,0.95) !important;  /* bleu */
}

/* Sélection reste verte (prioritaire) */
.map-canvas.is-assign .map-seg.selected{
  background: rgba(16,185,129,0.95) !important;
  box-shadow: 0 0 0 3px rgba(16,185,129,0.22);
}

/* Hover highlight section */
.map-seg.assigned.hovered{
  filter: brightness(1.12);
  outline: 2px solid rgba(59,130,246,.35);
}