/* ===========================
   NALIE DESIGN SYSTEM
   =========================== */

:root {
  /* Couleurs principales */
  --primary:       #4f46e5;
  --primary-dark:  #3730a3;
  --primary-light: #e0e7ff;
  --success:       #059669;
  --success-light: #d1fae5;
  --warning:       #d97706;
  --warning-light: #fef3c7;
  --danger:        #dc2626;
  --danger-light:  #fee2e2;
  --info:          #0891b2;
  --info-light:    #cffafe;

  /* Neutres */
  --gray-50:  #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;

  /* Layout */
  --sidebar-width: 240px;
  --header-height: 60px;
  --border-radius: 8px;
  --border-radius-lg: 12px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --shadow:    0 4px 6px -1px rgba(0,0,0,0.08), 0 2px 4px -1px rgba(0,0,0,0.04);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -2px rgba(0,0,0,0.04);

  /* Typography */
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-size-base: 14px;
  --line-height: 1.5;

  /* ── Compatibility aliases ──────────────────────────────────────────
     Every page across the app (admin/*, services/*, auth/*, the KNX
     module) was built against these variable names in the old
     assets/css/style.css / heures.css. Keeping the names and pointing
     them at the new tokens means all existing markup re-themes for
     free, with zero markup changes. --shadow/--shadow-lg/--primary are
     already shared names above and need no alias. */
  --bg:           var(--gray-50);
  --card-bg:      #ffffff;
  --text:         var(--gray-800);
  --text-muted:   var(--gray-500);
  --border:       var(--gray-200);
  --success-bg:   var(--success-light);
  --success-text: #065f46;
  --error-bg:     var(--danger-light);
  --error-text:   #991b1b;
  --radius:       var(--border-radius-lg);
}

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

body {
  font-family: var(--font);
  font-size: var(--font-size-base);
  line-height: var(--line-height);
  color: var(--gray-800);
  background: var(--gray-50);
  min-height: 100vh;
}

/* Les liens prennent la couleur de leur texte, visités ou non.
   Sans cette règle, le navigateur applique son bleu puis son violet : dans une
   même liste, deux lignes s'affichaient de couleurs différentes selon qu'on
   avait ouvert la fiche ou non, ce qui laissait croire à une différence de
   nature entre les enregistrements.
   Le soulignement au survol conserve l'indication qu'on peut cliquer ; les
   boutons, eux, portent déjà la leur et n'en ont pas besoin. */
/* :where() ne compte pas dans le calcul de spécificité, et c'est tout l'intérêt
   ici : écrit « a:visited », le sélecteur pèse autant qu'une classe et l'emporte
   sur .btn-primary — les boutons bleus déjà cliqués perdaient leur texte blanc.
   Enveloppé, la règle ne pèse que son élément et s'efface devant n'importe quel
   habillage de composant. */
a:where(:link, :visited) { color: inherit; text-decoration: none; }
a:where(:link, :visited):where(:hover) { text-decoration: underline; }
a.btn:hover, a.sidebar-link:hover, a.filter-pill:hover, a.service-card:hover { text-decoration: none; }

/* ========== LAYOUT ========== */

.app-wrapper {
  display: flex;
  min-height: 100vh;
}

/* SIDEBAR */
.sidebar {
  width: var(--sidebar-width);
  background: var(--gray-900);
  color: #fff;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 200;
  transition: transform 0.25s ease;
  overflow-y: auto;
}

.sidebar-logo {
  padding: 18px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Le symbole seul remplace le monogramme : il peut être nettement plus grand
   qu'un logo comportant du texte, puisque rien n'y a besoin d'être lu. */
.sidebar-logo img { height: 56px; width: auto; display: block; }
.sidebar-logo-mark {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
}

.sidebar-section {
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.sidebar-section-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--gray-500);
  padding: 8px 16px 4px;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  color: var(--gray-300);
  text-decoration: none;
  font-size: 13.5px;
  border-radius: 0;
  transition: background 0.15s, color 0.15s;
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}

.sidebar-link:hover {
  background: rgba(255,255,255,0.07);
  color: #fff;
}

.sidebar-link.active {
  background: var(--primary);
  color: #fff;
}

.sidebar-link .icon {
  width: 18px;
  text-align: center;
  flex-shrink: 0;
  font-size: 15px;
}

/* Pastille de rappel dans le menu — migrations restant à appliquer. Poussée à
   droite pour rester lisible quelle que soit la longueur du libellé. */
.sidebar-badge {
  margin-left: auto;
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 10px;
  background: #dc2626;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}

/* MAIN CONTENT */
.main-content {
  margin-left: var(--sidebar-width);
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
}

/* TOP BAR */
.topbar {
  height: var(--header-height);
  background: #fff;
  border-bottom: 1px solid var(--gray-200);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--shadow-sm);
}

.topbar-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--gray-800);
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.topbar-user {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: var(--border-radius);
  transition: background 0.15s;
  text-decoration: none;
  color: var(--gray-700);
  font-size: 13px;
}

.topbar-user:hover { background: var(--gray-100); }

/* CALCULATRICE — petite fenêtre flottante, dans l'esprit de la calculatrice
   d'Apple : fond sombre, touches rondes, opérateurs en orange. Elle se déplace
   en attrapant sa barre de titre. */
.calc-zone { position: relative; display: flex; align-items: center; }

.calc-bouton {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--gray-200);
  background: #fff;
  color: var(--gray-700);
  border-radius: var(--border-radius);
  cursor: pointer;
  font-size: 14px;
  transition: background 0.15s, border-color 0.15s;
}
.calc-bouton:hover { background: var(--gray-100); }
.calc-bouton[aria-expanded="true"] { background: var(--primary); border-color: var(--primary); color: #fff; }

.calc-fenetre {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 288px;
  padding: 0 14px 16px;
  background: #1c1c1e;
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.08);
  z-index: 200;
  user-select: none;
}
.calc-fenetre:focus { outline: none; }
/* Sans cette règle, le display du conteneur écraserait l'attribut hidden. */
.calc-fenetre[hidden] { display: none; }
/* Une fois déplacée, la fenêtre quitte l'ancrage sous le bouton. */
.calc-fenetre.calc-libre { position: fixed; top: auto; right: auto; }

.calc-barre {
  height: 30px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: grab;
  margin: 0 -14px;
  padding: 0 14px;
}
.calc-barre:active { cursor: grabbing; }
.calc-titre {
  font-size: 11px;
  color: #8e8e93;
  letter-spacing: 0.02em;
}
.calc-fermer {
  width: 11px; height: 11px;
  border-radius: 50%;
  border: 0;
  background: #ff5f57;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.calc-fermer:hover { background: #ff3b30; }

.calc-ecran {
  text-align: right;
  padding: 2px 4px 10px;
  overflow: hidden;
}
.calc-ecran-apercu {
  min-height: 16px;
  font-size: 12px;
  color: #8e8e93;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.calc-ecran-valeur {
  font-size: 42px;
  line-height: 1.15;
  font-weight: 300;
  color: #fff;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.calc-touches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }

.calc-t {
  height: 58px;
  border: 0;
  border-radius: 50%;
  background: #505050;
  color: #fff;
  font-size: 24px;
  font-weight: 400;
  cursor: pointer;
  transition: filter 0.1s;
}
.calc-t:hover  { filter: brightness(1.25); }
.calc-t:active { filter: brightness(1.5); }

.calc-t-fonction { background: #a5a5a5; color: #1c1c1e; font-weight: 500; }
.calc-t-op       { background: #ff9f0a; color: #fff; font-size: 27px; }
/* L'opérateur en attente s'inverse : on voit d'un coup d'œil ce qu'on est en
   train de poser après avoir tapé le premier nombre. */
.calc-t-op.est-actif { background: #fff; color: #ff9f0a; }

.calc-t-zero {
  grid-column: span 2;
  border-radius: 30px;
  text-align: left;
  padding-left: 25px;
}

/* Sortie : discrète au repos, rouge au survol. Un bouton toujours rouge à côté
   du nom attire l'œil sur l'action la moins fréquente de la barre. */
.topbar-sortie {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--border-radius);
  color: var(--gray-500);
  font-size: 14px;
  transition: background 0.15s, color 0.15s;
}
.topbar-sortie:hover { background: var(--danger-light, #fee2e2); color: var(--danger, #dc2626); text-decoration: none; }

.user-avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}

/* PAGE CONTENT */
.page-content {
  padding: 24px;
  flex: 1;
  max-width: 1400px;
  width: 100%;
}
.page-content.full-width { max-width: 100%; }

.page-header {
  margin-bottom: 24px;
}

.page-header h1 {
  font-size: 22px;
  font-weight: 700;
  color: var(--gray-900);
  line-height: 1.2;
}

.page-header p {
  font-size: 13.5px;
  color: var(--gray-500);
  margin-top: 4px;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--gray-500);
  margin-bottom: 8px;
}
.breadcrumb a { color: var(--primary); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb-sep { color: var(--gray-300); }

/* ========== CARDS ========== */
.card {
  background: #fff;
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gray-200);
  overflow: hidden;
}

.card-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--gray-100);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-header h2, .card-header h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--gray-800);
}

.card-body { padding: 20px; }

.card-footer {
  padding: 12px 20px;
  background: var(--gray-50);
  border-top: 1px solid var(--gray-100);
}

/* Service cards for dashboard */
.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

.service-card {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--border-radius-lg);
  padding: 20px;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  transition: box-shadow 0.15s, border-color 0.15s, transform 0.15s;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}

.service-card:hover {
  box-shadow: var(--shadow);
  border-color: var(--primary);
  transform: translateY(-1px);
}

.service-card-icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  background: var(--primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 4px;
}

.service-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-800);
}

.service-card-desc {
  font-size: 12.5px;
  color: var(--gray-500);
  line-height: 1.4;
}

/* ========== FORMS ========== */
.form-group { margin-bottom: 16px; }

.form-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-700);
  margin-bottom: 6px;
}

.form-label .required { color: var(--danger); margin-left: 2px; }

.form-control {
  display: block;
  width: 100%;
  padding: 9px 12px;
  font-size: 14px;
  font-family: var(--font);
  color: var(--gray-800);
  background: #fff;
  border: 1px solid var(--gray-300);
  border-radius: var(--border-radius);
  transition: border-color 0.15s, box-shadow 0.15s;
  line-height: 1.4;
}

.form-control:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(79,70,229,0.1);
}

.form-control:disabled, .form-control[readonly] {
  background: var(--gray-100);
  color: var(--gray-500);
  cursor: not-allowed;
}

.form-control.is-invalid { border-color: var(--danger); }
.form-text { font-size: 12px; color: var(--gray-500); margin-top: 4px; }
.invalid-feedback { font-size: 12px; color: var(--danger); margin-top: 4px; }

/* ========== BUTTONS ========== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  font-size: 13.5px;
  font-weight: 500;
  font-family: var(--font);
  border: 1px solid transparent;
  border-radius: var(--border-radius);
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s;
  white-space: nowrap;
  line-height: 1;
}

.btn:disabled { opacity: 0.6; cursor: not-allowed; }

.btn-primary   { background: var(--primary); color: #fff; border-color: var(--primary); }
.btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); }

.btn-success   { background: var(--success); color: #fff; border-color: var(--success); }
.btn-danger    { background: var(--danger);  color: #fff; border-color: var(--danger); }
.btn-warning   { background: var(--warning); color: #fff; border-color: var(--warning); }

.btn-outline {
  background: transparent;
  color: var(--gray-700);
  border-color: var(--gray-300);
}
.btn-outline:hover { background: var(--gray-100); }

.btn-outline-primary {
  background: transparent;
  color: var(--primary);
  border-color: var(--primary);
}
.btn-outline-primary:hover { background: var(--primary-light); }

.btn-sm { padding: 6px 12px; font-size: 12.5px; }
.btn-lg { padding: 12px 20px; font-size: 15px; }
.btn-icon { padding: 8px; }

/* ========== TABLES ========== */
.table-wrapper {
  width: 100%;
  overflow-x: auto;
  border-radius: var(--border-radius-lg);
  border: 1px solid var(--gray-200);
  background: #fff;
}

table.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

.table th {
  background: var(--gray-50);
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--gray-500);
  padding: 11px 16px;
  text-align: left;
  border-bottom: 1px solid var(--gray-200);
  white-space: nowrap;
}

.table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--gray-100);
  color: var(--gray-700);
  vertical-align: middle;
}

.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover td { background: var(--gray-50); }

/* ========== BADGES ========== */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  font-size: 11.5px;
  font-weight: 500;
  border-radius: 20px;
  white-space: nowrap;
}

.badge-primary { background: var(--primary-light); color: var(--primary-dark); }
.badge-success { background: var(--success-light); color: var(--success); }
.badge-warning { background: var(--warning-light); color: var(--warning); }
.badge-danger  { background: var(--danger-light);  color: var(--danger); }
.badge-gray    { background: var(--gray-100); color: var(--gray-600); }

/* ========== ALERTS ========== */
.alert {
  padding: 12px 16px;
  border-radius: var(--border-radius);
  font-size: 13.5px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 16px;
}
.alert[hidden] { display: none; }

.alert-success { background: var(--success-light); color: #065f46; border: 1px solid #a7f3d0; }
.alert-danger  { background: var(--danger-light);  color: #991b1b; border: 1px solid #fca5a5; }
.alert-warning { background: var(--warning-light); color: #92400e; border: 1px solid #fde68a; }
.alert-info    { background: var(--info-light);    color: #164e63; border: 1px solid #a5f3fc; }

/* ========== STAT CARDS ========== */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.stat-card {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--border-radius-lg);
  padding: 16px;
  box-shadow: var(--shadow-sm);
}

.stat-label { font-size: 12px; color: var(--gray-500); font-weight: 500; }
.stat-value { font-size: 24px; font-weight: 700; color: var(--gray-900); margin: 4px 0; line-height: 1; }
.stat-sub   { font-size: 12px; color: var(--gray-400); }

/* ========== MOBILE SIDEBAR TOGGLE ========== */
.sidebar-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  color: var(--gray-700);
  font-size: 20px;
}

.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 150;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {
  .sidebar {
    transform: translateX(-100%);
  }
  .sidebar.open {
    transform: translateX(0);
  }
  .sidebar-overlay.open {
    display: block;
  }
  .main-content {
    margin-left: 0;
  }
  .sidebar-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .page-content {
    padding: 16px;
  }
  .service-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .table th, .table td {
    padding: 10px 12px;
    font-size: 12.5px;
  }
  .topbar { padding: 0 16px; }
}

@media (max-width: 480px) {
  .service-grid { grid-template-columns: 1fr 1fr; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
}

/* ========== UTILITIES ========== */
.d-flex { display: flex; }
.align-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.text-muted { color: var(--gray-500); }
.text-sm { font-size: 12.5px; }
.fw-600 { font-weight: 600; }
.w-100 { width: 100%; }

/* =====================================================================
   LEGACY COMPATIBILITY LAYER
   =====================================================================
   Everything below re-themes the existing app's class vocabulary (used
   across ~100 pages: admin/company tables, auth-card pages, the KNX
   project module, timesheets/navette) onto the tokens above, so no
   markup elsewhere in the app had to change. New pages (login,
   dashboard) use only the design-system classes above; every other
   page keeps its existing classes and inherits the new look through
   the rules in this section. */

/* Auth-card pages (register.php, change_password.php, profile.php,
   verify_email.php, resend_verification.php, migrate.php) */
.auth-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: calc(100vh - var(--header-height) - 48px);
}

.auth-card {
  background-color: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 2.5rem;
  width: 100%;
  max-width: 420px;
}

.auth-card-wide { max-width: 640px; }

.auth-card h1 {
  margin-bottom: 1.5rem;
  font-size: 1.6rem;
  text-align: center;
}

.auth-switch {
  text-align: center;
  margin-top: 1.25rem;
  color: var(--text-muted);
  font-size: 0.95rem;
}

.auth-switch a {
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
}

.auth-switch a:hover { text-decoration: underline; }

@media (max-width: 767px) {
  .auth-card { padding: 1.75rem; }
}

@media (max-width: 768px) {
  .contact-form-grid { grid-template-columns: 1fr !important; }
}

/* Forms: existing markup styles bare <input>/<textarea>/<select> tags
   inside .form-group rather than adding a .form-control class — mirror
   .form-control's look onto that existing selector. */
.form-group label {
  display: block;
  margin-bottom: 0.4rem;
  font-weight: 500;
  font-size: 0.92rem;
  color: var(--gray-700);
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--gray-300);
  border-radius: var(--border-radius);
  font-size: 1rem;
  font-family: inherit;
  color: var(--gray-800);
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-group textarea { resize: vertical; }

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

input[readonly] {
  background-color: var(--gray-100);
  color: var(--text-muted);
  cursor: not-allowed;
}

.form-hint { color: var(--text-muted); font-size: 0.85rem; margin-bottom: 1rem; }
.form-hint-inline { font-weight: 400; font-size: 0.82rem; color: var(--text-muted); }
.form-actions { display: flex; gap: 0.75rem; }
.form-actions .btn { flex: 0 0 auto; }

.admin-form {
  background-color: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gray-200);
  padding: 1.75rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 1.25rem;
  max-width: 480px;
}

@media (min-width: 768px) {
  .admin-form { grid-template-columns: repeat(2, 1fr); max-width: 640px; }
  .admin-form .form-group-full,
  .admin-form .form-hint,
  .admin-form .form-actions { grid-column: 1 / -1; }
}

@media (min-width: 1024px) {
  .admin-form { max-width: 720px; }
}

/* Buttons not covered by the design system's own button classes but
   still used across existing markup */
.btn-block { display: block; width: 100%; margin-top: 0.5rem; }

.btn-secondary { background: var(--gray-100); color: var(--gray-700); border: 1px solid var(--gray-200); }
.btn-secondary:hover { background: var(--gray-200); }
.btn-secondary.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.btn-secondary.active:hover { background: var(--primary-dark); border-color: var(--primary-dark); }

.btn-link {
  background: none;
  border: none;
  padding: 0;
  color: var(--primary);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
.btn-link:hover { text-decoration: underline; }

/* Icon action buttons (view/edit/archive/delete/restore) used in every
   admin/data-table row */
.icon-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  font-size: 1rem;
  line-height: 1;
  color: var(--text-muted);
  background: none;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.15s ease, background-color 0.15s ease;
}
.icon-action:hover { text-decoration: none; }
.icon-view:hover    { color: #2563eb; background-color: #dbeafe; }
.icon-edit:hover    { color: var(--warning); background-color: var(--warning-light); }
.icon-archive:hover { color: var(--gray-600); background-color: var(--gray-100); }
.icon-delete:hover  { color: var(--danger); background-color: var(--danger-light); }
.icon-restore:hover { color: var(--success); background-color: var(--success-light); }
.icon-key:hover     { color: var(--warning); background-color: var(--warning-light); }
.icon-copy:hover    { color: var(--primary); background-color: var(--primary-light); }
.icon-rights:hover  { color: var(--primary); background-color: var(--primary-light); }

/* Old-naming alert modifier still used across the app */
.alert-error { background: var(--danger-light); color: #991b1b; border: 1px solid #fca5a5; }
.alert ul { list-style: disc; padding-left: 1.25rem; }

/* Admin pages: list header + tables (admin/*, company/*, services/*) */
.admin-page h1 { font-size: 1.9rem; margin-bottom: 0.4rem; }

.admin-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.admin-header h1 { margin-bottom: 0; }

.admin-subheading { font-size: 1.1rem; margin: 1.75rem 0 0.85rem; color: var(--gray-800); }

.roles-summary { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.role-pill {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background-color: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  font-size: 0.88rem;
}
.role-pill-count { font-weight: 700; color: var(--text); }

/* Mirrors .table-wrapper/.table under the class names actually used in
   markup everywhere (.table-responsive/.data-table) */
.table-responsive {
  width: 100%;
  overflow-x: auto;
  background-color: var(--card-bg);
  border-radius: var(--radius);
  border: 1px solid var(--gray-200);
  box-shadow: var(--shadow-sm);
}

.data-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.data-table th {
  background: var(--gray-50);
  color: var(--text-muted);
  font-weight: 600;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 11px 16px;
  text-align: left;
  border-bottom: 1px solid var(--gray-200);
  white-space: nowrap;
}
.data-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--gray-100);
  color: var(--gray-700);
  white-space: nowrap;
  vertical-align: middle;
}
/* Colonnes de chiffres : l'en-tête suit l'alignement de sa colonne. Les valeurs
   étaient calées à droite et les titres à gauche, si bien que chaque intitulé
   désignait visuellement la colonne d'à côté. */
.data-table th.num, .data-table td.num { text-align: right; white-space: nowrap; }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover td { background: var(--gray-50); }

.actions-cell { display: flex; align-items: center; gap: 0.35rem; }
.inline-form { display: inline; }

.cat-swatch {
  display: inline-block;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 4px;
  border: 1px solid var(--border);
  vertical-align: middle;
}

/* Small ON/OFF toggle switch (e.g. company/service authorization grid) */
.switch { position: relative; display: inline-block; width: 40px; height: 22px; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch-slider {
  position: absolute; inset: 0; cursor: pointer; background: var(--border);
  transition: background-color 0.15s; border-radius: 22px;
}
.switch-slider::before {
  position: absolute; content: ""; height: 16px; width: 16px; left: 3px; bottom: 3px;
  background: #fff; transition: transform 0.15s; border-radius: 50%;
}
.switch input:checked + .switch-slider { background: var(--primary); }
.switch input:checked + .switch-slider::before { transform: translateX(18px); }
.switch input:disabled + .switch-slider { opacity: 0.5; cursor: not-allowed; }

/* Badge modifiers used across admin/company tables */
.badge-role-superadmin   { background-color: #ede9fe; color: #5b21b6; }
.badge-role-admincompany { background-color: var(--primary-light); color: var(--primary-dark); }
.badge-role-user         { background-color: var(--gray-100); color: var(--text-muted); }
.badge-active            { background-color: var(--success-light); color: var(--success); }
.badge-archived          { background-color: var(--danger-light); color: var(--danger); }
.badge-pending           { background-color: var(--warning-light); color: #92400e; }
.badge-dali              { background-color: #ede9fe; color: #5b21b6; }
.badge-absence           { background-color: var(--warning-light); color: #92400e; white-space: nowrap; }

/* Companies */
.company-logo-thumb {
  width: 40px; height: 40px;
  object-fit: contain;
  border-radius: 6px;
  border: 1px solid var(--border);
  background-color: #fff;
}
.company-logo-placeholder { color: var(--text-muted); }

/* Service permissions */
.permissions-list { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 0.5rem; }
.permission-item {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  background-color: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.6rem 0.85rem;
  cursor: pointer;
  font-size: 0.92rem;
}
.permission-item input { margin-top: 0.2rem; }
.permission-item-disabled { opacity: 0.6; cursor: not-allowed; }

/* Dashboard-style tile grid also used by chantiers/view.php's project hub */
.dash-section { margin-bottom: 2.5rem; }
.dash-section-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: 1rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--border);
}
.dash-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; align-items: stretch; }
.dash-grid > .service-card { display: flex; flex-direction: column; width: 100%; min-width: 0; box-sizing: border-box; flex: none; }
.dash-grid .service-card h3,
.service-card h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 0.4rem; color: var(--text); }
.service-card p { font-size: 0.9rem; color: var(--text-muted); }
.service-icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  background: var(--primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 4px;
}
@media (min-width: 600px) { .dash-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .dash-grid { grid-template-columns: repeat(3, 1fr); } }

/* Dashboard welcome panel for self-registered users awaiting rights */
.welcome-panel {
  background-color: var(--info-light);
  border: 1px solid #a5f3fc;
  border-radius: var(--radius);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}
.welcome-panel h2 { margin: 0 0 0.75rem; font-size: 1.3rem; }
.welcome-panel p { margin: 0 0 0.5rem; line-height: 1.6; }
.welcome-panel-divider { border: none; border-top: 1px solid #a5f3fc; margin: 1rem 0; }
.welcome-panel-grid { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 0.75rem; }
.welcome-panel-item {
  flex: 1 1 180px;
  min-width: 180px;
  background-color: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1rem;
}
.welcome-panel-item .welcome-panel-icon { font-size: 2em; margin-bottom: 0.4rem; }
.welcome-panel-item p { margin-top: 0.35rem; font-size: 0.9em; color: var(--text-muted); }

/* Mon compte (/auth/profile.php) */
.account-divider { border: none; border-top: 1px solid var(--border); margin: 2rem 0; }
.account-company-card { background-color: var(--bg); border-radius: var(--radius); padding: 1.25rem 1.5rem; }
.account-company-card p { margin: 0 0 0.5rem; font-size: 0.92rem; }
.account-company-card p:last-child { margin-bottom: 0; }

/* Inline field status (username availability check on /register.php) */
.field-status { margin: 0.35rem 0 0; font-size: 0.85rem; min-height: 1.1em; }
.field-status--checking { color: var(--text-muted); }
.field-status--checking::before {
  content: '';
  display: inline-block;
  width: 0.7em; height: 0.7em;
  margin-right: 0.4em;
  border: 2px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: field-status-spin 0.6s linear infinite;
  vertical-align: -0.1em;
}
@keyframes field-status-spin { to { transform: rotate(360deg); } }
.field-status--available { color: var(--success-text); }
.field-status--taken, .field-status--invalid { color: var(--error-text); }

/* Zone column hidden on the timesheet entry table (services/heures/saisie.php) */
.col-zone { display: none; }

/* =====================================================================
   KNX project module (services/knx_project/*, chantiers/*)
   ===================================================================== */
.kx-project-layout { display: grid; grid-template-columns: 1fr; align-items: start; gap: 1.5rem; }
.kx-project-main { min-width: 0; }
.kx-project-summary { display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; }
.kx-project-summary h1, .kx-project-summary h2, .kx-project-summary h3 { text-align: left; }
aside.kx-project-summary h2,
aside.kx-project-summary h3,
aside.kx-project-summary .kx-section-title,
aside.kx-project-summary .kx-summary-title,
aside.kx-project-summary .kx-group-label,
aside.kx-project-summary .kx-group-row {
  text-align: left !important;
  justify-content: flex-start !important;
}

.kx-summary-card { background-color: var(--card-bg); border-radius: var(--radius); box-shadow: var(--shadow-sm); border: 1px solid var(--gray-200); padding: 1.25rem 1.5rem; }
.kx-summary-title { font-size: 1.05rem; margin: 0 0 0.9rem; text-align: left; }
.kx-summary-row { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.5rem 0; border-bottom: 1px solid var(--border); font-size: 0.88rem; }
.kx-summary-label { font-weight: 600; }
.kx-summary-detail { color: var(--text-muted); }
.kx-summary-total { display: flex; justify-content: space-between; align-items: center; padding-top: 0.85rem; margin-top: 0.35rem; font-weight: 700; font-size: 1rem; }

.kx-actions-list { display: flex; flex-direction: column; }
.kx-action-row { cursor: default; }
.kx-action-info { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.kx-action-name { font-weight: 600; }
.kx-action-meta { display: flex; align-items: center; gap: 0.5rem; font-size: 0.82rem; color: var(--text-muted); }
.kx-action-key { font-family: 'Courier New', Courier, monospace; font-size: 0.78rem; }
.kx-action-add-form { margin-top: 0.5rem; padding-top: 0.75rem; border-top: 1px solid var(--border); }
.kx-action-add-form .inline-input { flex: 1 1 auto; width: auto; min-width: 0; }

.project-info { position: relative; background-color: var(--card-bg); border-radius: var(--radius); box-shadow: var(--shadow-sm); border: 1px solid var(--gray-200); padding: 1.25rem 3.25rem 1.25rem 1.5rem; margin-bottom: 1.5rem; }
.project-info p { margin-bottom: 0.4rem; }
.project-info p:last-child { margin-bottom: 0; }
.kx-integrator-block { margin-bottom: 0.75rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--border); }
.kx-integrator-details { display: flex; flex-direction: column; gap: 0.15rem; margin-top: 0.25rem; color: var(--text-muted); }
.kx-info-edit-btn, .kx-info-edit-actions button { background: none; border: none; cursor: pointer; font-size: 1.1rem; line-height: 1; padding: 0.3rem; border-radius: 6px; color: var(--text-muted); }
.kx-info-edit-btn { position: absolute; top: 0.85rem; right: 0.85rem; }
.kx-info-edit-actions { position: absolute; top: 0.85rem; right: 0.85rem; display: flex; gap: 0.35rem; }
.kx-info-edit-btn:hover, .kx-info-edit-actions button:hover { background-color: var(--bg); color: var(--text); }
.kx-info-edit-actions button:disabled { opacity: 0.5; cursor: default; }
.kx-info-display input.inline-input { width: 100%; max-width: 320px; }
.kx-info-display textarea.inline-input { width: 100%; max-width: 480px; font-family: inherit; resize: vertical; }
.kx-info-image-edit { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-top: 0.5rem; }
.kx-info-empty { color: var(--text-muted); }
.project-info.is-saving { pointer-events: none; opacity: 0.7; }

/* KNX group address hierarchy tree */
.kx-tree { display: flex; flex-direction: column; gap: 1.25rem; }
.kx-main-group { background-color: var(--card-bg); border-radius: var(--radius); box-shadow: var(--shadow-sm); border: 1px solid var(--gray-200); padding: 1.25rem; }
.kx-middle-group { margin-top: 1rem; margin-left: 1.5rem; padding-left: 1rem; border-left: 2px solid var(--border); }
.kx-group-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; margin: -0.35rem -0.5rem 0.75rem -0.5rem; padding: 0.35rem 0.5rem; border-radius: var(--radius); cursor: pointer; transition: background-color 0.15s ease; }
.kx-group-row:hover { background-color: var(--bg); }
.kx-toggle { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; background: none; border: none; margin: 0; padding: 0.25rem; font-size: 0.75rem; line-height: 1; color: var(--text-muted); cursor: pointer; transform: rotate(90deg); transition: transform 0.2s ease; }
.collapsed > .kx-group-row .kx-toggle { transform: rotate(0deg); }
.kx-collapsible { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 0.25s ease; }
.kx-collapsible-inner { overflow: hidden; min-height: 0; }
.collapsed > .kx-collapsible { grid-template-rows: 0fr; }
.kx-group-label { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; text-align: left; }
.kx-main-row .kx-group-label strong { font-size: 1.1rem; }
.kx-main-row { justify-content: flex-start; }
.kx-main-row .kx-group-label { justify-content: flex-start; text-align: left; }
.kx-main-row .actions-cell { margin-left: auto; }
.kx-middle-row .kx-group-label strong { font-size: 1rem; }
.kx-address-badge { display: inline-block; padding: 0.2rem 0.6rem; border-radius: 6px; background-color: var(--bg); border: 1px solid var(--border); font-family: 'Courier New', Courier, monospace; font-weight: 700; font-size: 0.85rem; color: var(--text); }
.kx-address-table { margin-left: 1rem; }
.kx-product-group { margin-top: 0.35rem; }
.kx-product-row { margin: 0 -0.5rem; }
.kx-product-room { flex: 0 0 160px; color: var(--text-muted); font-size: 0.9rem; }
.kx-product-name { flex: 1 1 auto; font-weight: 600; }
.kx-product-addresses { margin: 0.25rem 0 0.5rem 1.75rem; width: auto; }
.kx-product-addresses td { color: var(--text-muted); font-size: 0.85rem; padding: 0.4rem 1rem; }

.kx-quick-add-form { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; background-color: var(--card-bg); border-radius: var(--radius); box-shadow: var(--shadow-sm); border: 1px solid var(--gray-200); padding: 1rem 1.25rem; margin-bottom: 1.25rem; }
.kx-quick-add-form select.inline-input, .kx-quick-add-form input.inline-input { width: auto; min-width: 160px; }
.kx-quick-add-form .kx-quick-add-name { flex: 1 1 200px; }
.kx-dali-field { display: flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; color: var(--text); cursor: pointer; }
.kx-dali-field[hidden] { display: none; }
.kx-advanced-options { flex-basis: 100%; font-size: 0.9rem; }
.kx-advanced-options summary { cursor: pointer; color: var(--primary); }
.kx-advanced-options-body { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.6rem; }
.kx-advanced-options-body select.inline-input { width: auto; min-width: 80px; }

/* CSV import page */
.kx-import-form { display: flex; flex-direction: column; gap: 1.5rem; max-width: 720px; }
.kx-import-dropzone { background-color: var(--card-bg); border: 2px dashed var(--border); border-radius: var(--radius); padding: 2.5rem 1.5rem; text-align: center; cursor: pointer; transition: border-color 0.15s ease, background-color 0.15s ease; }
.kx-import-dropzone:hover, .kx-import-dropzone:focus-visible { border-color: var(--primary); }
.kx-import-dropzone.is-dragover { border-color: var(--primary); background-color: var(--primary-light); }
.kx-import-dropzone-text { color: var(--text-muted); margin: 0; }
.kx-import-filename { margin: 0.75rem 0 0; font-weight: 600; color: var(--text); }
.kx-import-preview h2 { margin-bottom: 0.75rem; }
.kx-empty { color: var(--text-muted); font-size: 0.9rem; font-style: italic; padding: 0.5rem 0; }

/* Building levels & rooms */
.kx-levels-section { margin: 1.75rem 0 1.5rem; }
.kx-project-summary .kx-levels-section { margin: 0; }
.kx-section-row .admin-subheading { margin: 0; text-align: left; }
.kx-levels-tree { display: flex; flex-direction: column; gap: 0.75rem; }
.kx-project-summary .kx-levels-tree { gap: 0.5rem; }
.kx-level-group { background-color: var(--card-bg); border-radius: var(--radius); box-shadow: var(--shadow-sm); border: 1px solid var(--gray-200); padding: 1.25rem; }
.kx-project-summary .kx-level-group { padding: 0.85rem; }
.kx-level-row .kx-group-label { font-weight: 600; text-align: left; }
.kx-rooms-list { display: flex; flex-direction: column; margin: 0.5rem 0 0.5rem 1.5rem; padding-left: 1rem; border-left: 2px solid var(--border); }
.kx-project-summary .kx-rooms-list { margin: 0.4rem 0 0.4rem 1rem; padding-left: 0.65rem; }
.kx-room-row { cursor: default; }

/* Middle groups panel (project sidebar) */
.kx-middle-groups-section { margin: 0; }
.kx-middle-groups-tree { display: flex; flex-direction: column; gap: 0.5rem; }
.kx-mdg-main-group { background-color: var(--card-bg); border-radius: var(--radius); box-shadow: var(--shadow-sm); border: 1px solid var(--gray-200); padding: 0.85rem; }
.kx-mdg-main-row .kx-group-label strong { font-size: 1rem; }
.kx-mdg-list { display: flex; flex-direction: column; margin: 0.4rem 0 0.4rem 1rem; padding-left: 0.65rem; border-left: 2px solid var(--border); }
.kx-mdg-row { cursor: default; }
.kx-mdg-blocked { color: var(--text-muted); font-size: 0.8rem; font-style: italic; }
.kx-mdg-actions { margin-top: 0.35rem; }
.kx-drag-handle { display: inline-flex; flex-shrink: 0; cursor: grab; color: var(--text-muted); font-size: 0.95rem; line-height: 1; padding: 0 0.15rem; user-select: none; }
.kx-drag-handle:active { cursor: grabbing; }
.dragging { opacity: 0.4; }
.kx-room-level-field { display: none; }
.editing .kx-room-level-field { display: inline-flex; }
.kx-inline-add-form { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.5rem; }
.kx-inline-add-form .inline-input { width: auto; flex: 0 1 240px; }
.kx-inline-add-level { margin-top: 0.75rem; }
.kx-add-confirm { background: none; border: none; color: var(--primary); font-size: 1.1rem; line-height: 1; padding: 0.35rem 0.5rem; cursor: pointer; border-radius: 6px; }
.kx-add-confirm:hover { background-color: var(--bg); }

/* Group address form */
.address-index-group .address-index-inputs { display: flex; align-items: center; gap: 0.5rem; }
.address-index-inputs input[type="number"] { width: 80px; }
.current-logo { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.6rem; color: var(--text-muted); font-size: 0.88rem; }
.kx-project-image-thumb { width: 80px; height: 80px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); }
.kx-checkbox-label { display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer; }
.kx-project-image { max-width: 100%; border-radius: var(--radius); margin-top: 0.75rem; display: block; }

/* Inline editing (admin/company/knx tables) */
.row-lock { position: relative; background: none; border: none; cursor: pointer; font-size: 1rem; line-height: 1; padding: 0.2rem; border-radius: 6px; }
.row-lock:hover { background-color: var(--bg); }
.row-lock.is-saving { color: transparent; }
.row-lock.is-saving::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 14px; height: 14px; margin: -7px 0 0 -7px;
  border: 2px solid var(--border); border-top-color: var(--primary);
  border-radius: 50%; animation: row-lock-spin 0.6s linear infinite;
}
@keyframes row-lock-spin { to { transform: rotate(360deg); } }

.inline-input { width: 100%; min-width: 80px; padding: 0.35rem 0.5rem; border: 1px solid var(--primary); border-radius: 6px; font-size: 0.88rem; font-family: inherit; }
.name-inline-inputs, .group-inline-inputs, .address-inline-inputs { display: flex; gap: 0.5rem; align-items: center; }
.address-inline-inputs { flex-wrap: wrap; white-space: normal; }
.kx-group-readonly { font-size: 0.8rem; color: var(--text-muted); margin-left: 0.4rem; }
.kx-group-readonly-error { color: var(--error-text); }
.name-inline-inputs .inline-input { width: 110px; min-width: 0; }
.group-inline-inputs .inline-input[data-part="group_index"], .address-inline-inputs .inline-input { width: 64px; min-width: 0; text-align: center; }
.group-inline-inputs .inline-input[data-part="name"] { width: 160px; min-width: 0; }

@keyframes row-flash-success { 0% { background-color: var(--success-bg); } 100% { background-color: transparent; } }
@keyframes row-flash-error { 0% { background-color: var(--error-bg); } 100% { background-color: transparent; } }
.row-flash-success { animation: row-flash-success 1.2s ease-out; }
.row-flash-error { animation: row-flash-error 1.2s ease-out; }
.inline-row-error, .inline-row-error-row td { color: var(--error-text); font-size: 0.85rem; padding-top: 0.25rem; padding-bottom: 0.6rem; }
.inline-confirm { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--text-muted); }
.inline-confirm .btn-link { font-size: 1rem; line-height: 1; padding: 0.2rem 0.35rem; border-radius: 4px; }
.inline-confirm .btn-link:hover { text-decoration: none; }
.inline-confirm .confirm-yes { color: var(--error-text); }
.inline-confirm .confirm-yes:hover { background-color: var(--error-bg); }
.inline-confirm .confirm-no { color: var(--text-muted); }
.inline-confirm .confirm-no:hover { background-color: var(--bg); }

/* KNX tree toolbar (Tout développer / Tout réduire) */
.kx-tree-toolbar { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 0.75rem; font-size: 0.85rem; }
.kx-tree-toolbar .btn-link { padding: 0.1rem 0.2rem; }
.kx-tree-toolbar-sep { color: var(--border); }

/* Reserved-character ("\") field validation */
.kx-field-error { color: var(--error-text); font-size: 0.82rem; margin-top: 0.25rem; }
.inline-input.kx-field-invalid { border-color: var(--error-text); }
button.kx-save-disabled, button:disabled.kx-save-disabled { opacity: 0.5; cursor: not-allowed; }

/* Rooms hint banner */
.kx-hint-banner { display: flex; align-items: flex-start; gap: 0.6rem; }
.kx-hint-banner-icon { flex-shrink: 0; }
.kx-hint-banner-body { flex: 1; }
.kx-hint-banner-link { display: inline-block; margin-left: 0.35rem; font-weight: 600; }
.kx-hint-dismiss { display: block; margin-top: 0.4rem; padding: 0; background: none; border: none; cursor: pointer; font-size: 0.82rem; font-family: inherit; color: inherit; text-decoration: underline; }

/* Reserved-separator informative note */
.kx-reserved-char-note { margin-bottom: 1rem; font-size: 0.85rem; color: var(--text-muted); }
.kx-reserved-char-note summary { cursor: pointer; }
.kx-reserved-char-note p { margin: 0.4rem 0 0; }
.kx-reserved-char-note code { background-color: var(--bg); padding: 0.05rem 0.35rem; border-radius: 4px; }

/* Programmation module: devices & button configuration */
.kx-device-add-form .inline-input { width: auto; }
.kx-devices-tree { display: flex; flex-direction: column; gap: 1rem; margin-top: 1rem; }
.kx-device-group { background-color: var(--card-bg); border-radius: var(--radius); box-shadow: var(--shadow-sm); border: 1px solid var(--gray-200); padding: 1.25rem; }
.kx-device-group-title { margin: 0 0 0.75rem; font-size: 1rem; color: var(--text-muted); }
.kx-device-group-item { border-top: 1px solid var(--border); }
.kx-device-group-item:first-of-type { border-top: none; }
.kx-device-row { margin: 0; padding: 0.6rem 0.5rem; }
.kx-device-meta { color: var(--text-muted); font-size: 0.85rem; }
.kx-device-detail { padding: 1rem 0.5rem 1.25rem; }
.kx-button-panel { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.kx-button-grid { display: flex; gap: 0.75rem; flex: 0 0 auto; }
.kx-button-col { display: flex; flex-direction: column; gap: 0.5rem; justify-content: center; }
.kx-device-button {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.25rem; width: 110px; min-height: 64px; padding: 0.5rem;
  background-color: var(--bg); border: 2px solid var(--border); border-radius: 8px;
  cursor: pointer; text-align: center; transition: border-color 0.15s ease, background-color 0.15s ease;
}
.kx-device-button:hover { border-color: var(--primary); }
.kx-device-button.is-selected { border-color: var(--primary); background-color: var(--primary-light); }
.kx-device-button-number { font-weight: 700; font-size: 0.85rem; color: var(--text-muted); }
.kx-device-button-label { font-size: 0.85rem; word-break: break-word; }
.kx-button-config { flex: 1 1 280px; min-width: 260px; }
.kx-button-config-placeholder { color: var(--text-muted); font-style: italic; }
.kx-button-config-form h4 { margin: 0 0 0.75rem; }
.kx-address-field-inputs { display: flex; gap: 0.5rem; }
.kx-address-field-inputs .kx-address-select, .kx-address-field-inputs .kx-address-custom { flex: 1 1 auto; }
.kx-address-toggle { display: inline-block; margin-top: 0.35rem; font-size: 0.82rem; }
.kx-button-config-actions { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.5rem; }
.kx-button-save-status { font-size: 0.85rem; }
.kx-save-success { color: var(--success-text); }
.kx-save-error { color: var(--error-text); }

/* Mobile (< 768px): stacked KNX tree, scrollable tables */
@media (max-width: 767px) {
  .kx-address-table, .kx-product-addresses {
    display: block; overflow-x: auto; -webkit-overflow-scrolling: touch;
    white-space: nowrap; margin-left: 0;
  }
  .kx-group-row { flex-direction: column; align-items: stretch; }
  .kx-toggle { align-self: flex-start; }
  .kx-product-room, .kx-product-name { width: 100%; }
  .actions-cell { width: 100%; flex-wrap: wrap; justify-content: flex-end; }
  .kx-middle-group, .kx-rooms-list { margin-left: 0.75rem; padding-left: 0.75rem; }
  .kx-product-addresses { margin-left: 0.75rem; }
}

@media (min-width: 1024px) {
  .kx-project-layout { grid-template-columns: minmax(0, 65fr) minmax(280px, 35fr); }
  .kx-project-summary { position: sticky; top: calc(var(--header-height) + 20px); }
}

/* =====================================================================
   Feuilles d'heures / Fiche navette (services/heures/*)
   ===================================================================== */
.heures-filter-bar { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; align-items: center; margin-bottom: 1.5rem; }
.heures-filter-bar label { display: flex; align-items: center; gap: .4rem; font-size: .9rem; }

.heures-week-nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.2rem; flex-wrap: wrap; }
.heures-week-title { text-align: center; flex: 1; }
.heures-week-title h1 { margin: 0 0 .2rem; }
.heures-week-dates { font-size: .9rem; color: var(--text-muted); margin-right: .6rem; }
.heures-contract { display: block; font-size: .85rem; color: var(--text-muted); margin-top: .3rem; }

.heures-table-wrap { overflow-x: auto; margin-bottom: 1rem; }
.heures-table { border-collapse: collapse; min-width: 900px; width: 100%; font-size: .88rem; }
.heures-table th, .heures-table td { border: 1px solid var(--gray-200); padding: .35rem .45rem; text-align: center; white-space: nowrap; }
.heures-table th { background: var(--gray-100); font-size: .82rem; font-weight: 600; }
.heures-table td.day-name { font-weight: 600; text-align: left; width: 6rem; }
.day-date { display: block; color: var(--text-muted); font-size: .85em; font-weight: 400; }
.heures-table td.day-name-today { background-color: var(--info-light); }
.day-date-today { font-weight: 700; text-decoration: underline; color: var(--info); }

.heures-table input[type="text"], .heures-table input[type="number"], .heures-table input[type="time"], .heures-table select {
  border: 1px solid var(--gray-300); border-radius: 4px; padding: .2rem .35rem; font-size: .85rem;
  background: #fff; width: 100%; box-sizing: border-box;
}
.heures-table td:nth-child(2) { min-width: 9rem; }
.heures-table td.time-field { min-width: 6.5rem; }
.heures-table td.meal-cell { width: 3.5rem; }
.heures-table td.zone-cell { width: 4rem; }
.heures-table td.total-cell { width: 4.5rem; font-weight: 600; }

.heures-day-row.day-absent .time-field input { background: var(--gray-100); color: var(--gray-400); cursor: not-allowed; }

.zone-label { display: inline-block; padding: .1rem .45rem; border-radius: 3px; font-size: .8rem; font-weight: 700; background: var(--info-light); color: var(--info); min-width: 2rem; }
.zone-label:empty::before, .zone-label[data-zone=""]::before { content: '—'; color: var(--gray-400); font-weight: 400; }

.heures-totals-row td { background: var(--gray-50); font-weight: 600; border-top: 2px solid var(--gray-300); }
.heures-totals-row .overtime-cell { text-align: left; font-weight: 400; padding-left: .8rem; }

.heures-actions { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.heures-back { margin-top: .5rem; }

.save-status { font-size: .85rem; transition: opacity .3s; }
.save-status.saving { color: var(--text-muted); }
.save-status.saved { color: var(--success); }
.save-status.error { color: var(--danger); }

.text-success { color: var(--success); }
.text-danger { color: var(--danger); }

.navette-export-btns { display: flex; gap: .6rem; }

/* Le mois encadré par ses deux flèches : la lecture va de gauche à droite, le
   titre reste au centre et ne bouge pas d'un mois à l'autre. */
.navette-mois { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.navette-mois h1 { margin: 0; }
.navette-block { margin-bottom: 2rem; border: 1px solid var(--gray-200); border-radius: 6px; overflow: hidden; }
.navette-employee-header { display: flex; align-items: center; justify-content: space-between; background: var(--gray-100); padding: .55rem .8rem; border-bottom: 1px solid var(--gray-200); font-size: .95rem; }
.navette-base { font-size: .85rem; color: var(--text-muted); }
.navette-table { margin: 0; font-size: .84rem; }
.navette-table th, .navette-table td { padding: .3rem .5rem; text-align: center; }
.navette-table td:first-child { text-align: left; }

.heures-viewing-other-banner {
  background: var(--warning-light); border: 1px solid #fde68a; border-radius: 6px;
  padding: 12px 16px; margin-bottom: 16px; display: flex; align-items: center;
  justify-content: space-between; gap: 1rem;
}
.heures-viewing-other-banner a { font-size: .9em; white-space: nowrap; }

.navette-actions-cell { display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.navette-absences-cell { display: flex; flex-direction: column; gap: .3rem; align-items: center; }
.navette-absence-entry { display: flex; flex-direction: column; align-items: center; }
.navette-absence-note { display: block; color: var(--text-muted); font-size: .8em; margin-top: .1rem; }

/* =====================================================================
   Media category chips (services/media/upload.php, view.php, index.php)
   ===================================================================== */
.category-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }

.category-chip { display: inline-flex; cursor: pointer; }
.category-chip input[type="checkbox"] { display: none; }

.chip-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1.5px solid var(--gray-200);
  border-radius: 20px;
  font-size: 12.5px;
  background: #fff;
  color: var(--gray-700);
  transition: border-color 0.15s, background 0.15s;
  cursor: pointer;
  user-select: none;
}

.category-chip input:checked + .chip-label {
  border-color: var(--primary);
  background: var(--primary-light);
  color: var(--primary-dark);
  font-weight: 500;
}

.chip-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}

/* =====================================================================
   Two-column layout utility (e.g. chantiers/view.php: dossier + contact)
   ===================================================================== */
.two-col-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}
@media (max-width: 768px) {
  .two-col-grid { grid-template-columns: 1fr !important; }
}

/* =====================================================================
   Pagination générique (assets/js/pagination.js)
   ===================================================================== */

/* Masquage par la pagination. Distinct de [hidden], qui reste réservé aux
   filtres des pages : les deux mécanismes doivent pouvoir coexister sans que
   l'un efface l'état de l'autre. */
.is-paged-out { display: none !important; }

.nalie-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 14px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card-bg);
  font-size: 0.9rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.nalie-pagination-size {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.nalie-pagination-size label {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  font-weight: 500;
  color: var(--text-muted, #6b7280);
}

.nalie-pagination-select {
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.nalie-pagination-select:hover { border-color: var(--primary); }
.nalie-pagination-select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}

/* Compteur en pilule discrète : lisible sans concurrencer les boutons. */
.nalie-pagination-count {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--gray-100, #f3f4f6);
  color: var(--text-muted, #6b7280);
  font-variant-numeric: tabular-nums;
}

.nalie-pagination-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}

.nalie-pagination-nav .btn {
  border-radius: 8px;
  padding: 0.4rem 0.85rem;
  font-size: 0.88rem;
}

.nalie-pagination-pages {
  min-width: 8.5rem;
  text-align: center;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.nalie-pagination button[disabled] { opacity: 0.4; cursor: not-allowed; }

@media (max-width: 640px) {
  .nalie-pagination { justify-content: center; gap: 10px; }
  .nalie-pagination-size { width: 100%; justify-content: space-between; }
  .nalie-pagination-nav { width: 100%; justify-content: space-between; }
  .nalie-pagination-pages { min-width: 0; }
}

/* =====================================================================
   Calibrage des colonnes et des champs sur la donnée
   =====================================================================
   Principe : une donnée de largeur connue (date, montant, quantité, état)
   ne doit pas occuper l'espace d'une donnée de largeur variable (nom,
   libellé, adresse). Sans contrainte, le navigateur répartit la largeur
   au prorata du contenu et une colonne « Date » finit aussi large qu'un
   nom de dossier.

   Usage : poser une classe u-* sur le <th>/<td> ou sur le .form-group.
   ===================================================================== */

/* ── Colonnes de tableau ──────────────────────────────────────────── */
.u-col-date     { width: 7rem;  white-space: nowrap; font-variant-numeric: tabular-nums; }
.u-col-datetime { width: 10rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.u-col-money    { width: 8rem;  white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.u-col-num      { width: 5.5rem; white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.u-col-pct      { width: 5rem;  white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.u-col-badge    { width: 8rem;  white-space: nowrap; }
.u-col-actions  { width: 6rem;  white-space: nowrap; }
.u-col-short    { width: 10rem; white-space: nowrap; }
.u-col-medium   { width: 14rem; }

/* Colonne élastique : absorbe la largeur restante. À poser sur la seule
   colonne dont le contenu est réellement variable. */
.u-col-grow     { width: auto; }

/* Tronque proprement au lieu de faire déborder la ligne. */
.u-truncate {
  max-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* table-layout: fixed fait respecter les largeurs ci-dessus ; sans lui le
   navigateur les traite comme de simples suggestions. */
.data-table--calibrated { table-layout: fixed; width: 100%; }
.data-table--calibrated td { overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 768px) {
  /* Sur mobile la largeur fixe est contre-productive : on rend la main au
     navigateur et le conteneur .table-responsive prend le défilement. */
  .data-table--calibrated { table-layout: auto; }
  .u-truncate { max-width: none; }
}

/* ── Champs de formulaire ─────────────────────────────────────────── */
/* Un champ date étiré sur toute la largeur d'un formulaire est illisible :
   l'œil ne sait plus quelle zone est saisissable. */
.form-group.u-field-date     input,
.form-group.u-field-date     select { max-width: 11rem; }
.form-group.u-field-money    input { max-width: 10rem; text-align: right; }
.form-group.u-field-num      input { max-width: 8rem;  text-align: right; }
.form-group.u-field-short    input,
.form-group.u-field-short    select { max-width: 16rem; }
.form-group.u-field-medium   input,
.form-group.u-field-medium   select { max-width: 24rem; }
.form-group.u-field-postal   input { max-width: 8rem; }
.form-group.u-field-phone    input { max-width: 13rem; }
.form-group.u-field-full     input,
.form-group.u-field-full     select,
.form-group.u-field-full     textarea { max-width: none; }

@media (max-width: 640px) {
  .form-group[class*="u-field-"] input,
  .form-group[class*="u-field-"] select { max-width: none; }
}

/* Sans classe explicite, un input de type date/number reste borné : c'est le
   défaut raisonnable, une date n'a jamais besoin de 40rem. */
.form-group input[type="date"],
.form-group input[type="time"] { max-width: 11rem; }
.form-group input[type="number"] { max-width: 12rem; }

/* ══ BARRE DE RECHERCHE + PASTILLES DE FILTRE ══════════════════════════════
   Motif commun aux listings : un champ de recherche arrondi à gauche, des
   pastilles de filtre à droite. Les classes gardent leur préfixe « contrats- »
   d'origine — les renommer aurait touché six écrans pour un gain nul — mais le
   style est ici, et non plus dans la seule page Contrats qui l'avait défini
   localement pendant que cinq autres l'utilisaient sans le charger.          */
/* ── Barre de recherche + filtres ───────────────────────────────────────── */
.contrats-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.contrats-search-wrap { position: relative; flex: 1 1 22rem; min-width: 16rem; }
.contrats-search-icon {
    position: absolute;
    left: 12px; top: 50%;
    transform: translateY(-50%);
    font-size: 0.95rem;
    opacity: 0.55;
    pointer-events: none;
}
.contrats-search {
    width: 100%;
    padding: 0.6rem 0.9rem 0.6rem 2.4rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--card-bg);
    color: var(--text);
    font-size: 0.95rem;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.contrats-search:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}

.contrats-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.contrats-filters .filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0.45rem 0.85rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--card-bg);
    color: var(--text);
    font-size: 0.88rem;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.contrats-filters .filter-pill:hover {
    border-color: var(--primary);
    color: var(--primary);
}
.contrats-filters .filter-pill.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    font-weight: 600;
}

@media (max-width: 720px) {
    .contrats-search-wrap { flex-basis: 100%; }
}

/* Le rattrapage DALI se pose sous le total, séparé : c'est une action, pas une
   ligne de résumé. */
/* Sorties d'actionneur par produit, portées par le groupe principal. Le libellé
   est HORS de la cellule éditable : inline-edit.js réécrit le contenu de la
   cellule après enregistrement, un suffixe placé dedans disparaîtrait au premier
   changement.                                                                 */
.kx-sorties-label { font-size: 0.78rem; color: var(--text-muted); white-space: nowrap; }
.kx-sorties-valeur { min-width: 1.5rem; text-align: right; font-variant-numeric: tabular-nums; }
.kx-sorties-saisie { max-width: 5rem; }

/* Choix des groupes médians dans l'ajout rapide, pour les groupes principaux à
   0 sortie. Occupe toute la largeur de la barre de saisie, qui est en flex.   */
.kx-medians-choix {
  flex-basis: 100%;
  margin-top: 0.5rem;
  padding: 0.6rem 0.75rem;
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: 6px;
}
.kx-medians-choix[hidden] { display: none; }
.kx-medians-groupe[hidden] { display: none; }
.kx-medians-titre {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
}
/* ══ REGISTRE DU PERSONNEL ═════════════════════════════════════════════════
   L'état d'échéance doit se lire d'un coup d'œil : c'est la seule information
   du registre qui appelle une action.                                        */
.pers-etat {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}
.pers-etat-perime   { background: var(--danger-light, #fef2f2); color: var(--danger, #b91c1c); }
.pers-etat-proche   { background: #fffbeb; color: #b45309; }
.pers-etat-valide   { background: #f0fdf4; color: #15803d; }
/* Sans échéance n'est pas « valide » : c'est hors surveillance, et le gris le dit
   mieux que le vert. */
.pers-etat-sans_fin { background: var(--gray-100, #f3f4f6); color: var(--text-muted); }

.pers-echeances { margin: 0.5rem 0 0; padding-left: 1.2rem; }
.pers-echeances li { margin: 0.15rem 0; }
.pers-sorti { opacity: 0.6; }
.pers-sans-compte {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-style: italic;
  margin-left: 0.35rem;
}
.pers-identite p { margin: 0.2rem 0; }
.pers-form { max-width: 34rem; margin-top: 0.75rem; }

/* ══ PARTAGE DES PHOTOS AU CLIENT ══════════════════════════════════════════ */
.mp-phase { display: block; margin: 0.2rem 0; cursor: pointer; }
.mp-compte { color: var(--text-muted); font-size: 0.82rem; margin-left: 0.4rem; }
/* Une phase vide se signale sans se barrer la route : elle reste partageable. */
.mp-compte-vide { font-style: italic; }
.mp-lien {
  width: 100%;
  margin-top: 0.4rem;
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.8rem;
}
/* Dans la colonne d'actions, le lien ne doit pas pousser le tableau en largeur. */
.mp-lien-court { max-width: 11rem; margin: 0 0.35rem 0 0; }

/* ══ COMPLÉTION D'UN PRODUIT KNX ═══════════════════════════════════════════
   Les lignes déjà pourvues s'effacent visuellement : ce qui compte sur cet
   écran, c'est ce qui manque.                                                */
.kx-completion-produit { margin-bottom: 1.25rem; }
.kx-completion-type {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
}
.kx-completion-type label { font-weight: 600; }
.kx-completion-deja { opacity: 0.55; }
.kx-completion-index { width: 4.5rem; }

/* Une case déjà prise par autre chose doit se distinguer d'une case libre AVANT
   d'enregistrer : c'est le seul écart que l'intégrateur doit trancher lui-même. */
.kx-completion-occupee { background: var(--danger-light, #fef2f2); }
.kx-completion-alerte {
  font-size: 0.78rem;
  color: var(--danger, #b91c1c);
  font-weight: 600;
}
.kx-completion-alerte[hidden] { display: none; }

/* ══ AUTOCOMPLÉTION DES COMMUNES ═══════════════════════════════════════════
   La liste est posée dans <body> et positionnée en coordonnées de page : dans
   le flux, elle serait rognée par le premier parent à overflow caché — la carte
   du formulaire de contact, notamment.                                       */
.commune-suggestions {
  position: absolute;
  z-index: 80;
  max-height: 15rem;
  overflow-y: auto;
  background: var(--card-bg, #fff);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.commune-suggestions[hidden] { display: none; }
.commune-suggestion {
  display: block;
  width: 100%;
  padding: 0.4rem 0.65rem;
  border: 0;
  background: none;
  text-align: left;
  font-size: 0.88rem;
  cursor: pointer;
  color: var(--text);
}
.commune-suggestion:hover,
.commune-suggestion.is-surligne { background: var(--gray-100, #f3f4f6); }
.commune-cp {
  display: inline-block;
  min-width: 3.6rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* ══ BIBLIOTHÈQUES DE DOCUMENTS ════════════════════════════════════════════
   La zone confidentielle doit se distinguer d'un coup d'œil dans une liste
   mélangée : c'est le seul repère qui dise, avant d'ouvrir, qu'une pièce ne se
   transfère pas sans y penser.                                              */
.doc-bloc { margin-top: 1.5rem; }
.doc-titre { font-weight: 600; }

/* Zones de dépôt, une par bibliothèque. Elles restent côte à côte tant qu'il y a
   la place, et passent l'une sous l'autre en dessous : deux cibles étroites se
   confondent au doigt, et se tromper de zone est précisément ce qu'il faut
   éviter. */
.doc-zones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1rem;
  margin: 1rem 0 0.5rem;
}
.doc-zones-formats { margin-bottom: 1.25rem; }

.doc-depot-rattachement { max-width: 34rem; margin-top: 1rem; }
.doc-depot-rattachement label { display: block; font-weight: 600; margin-bottom: 0.25rem; }
.doc-depot-rattachement select { width: 100%; }

.doc-zone-depot {
  position: relative;
  padding: 1.1rem 1rem;
  border: 2px dashed var(--border);
  border-radius: 10px;
  background: var(--surface);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.doc-zone-depot:hover { border-color: var(--primary); }

/* L'état de survol doit être franc : c'est le seul retour visuel qui confirme
   qu'on lâchera dans la bonne bibliothèque. */
.doc-zone-depot.is-survol {
  border-color: var(--primary);
  border-style: solid;
  background: var(--primary-light, #eff6ff);
}
.doc-zone-depot.is-envoi { opacity: 0.7; cursor: progress; }

.doc-zone-depot--confidentiel { border-color: var(--danger, #b91c1c); }
.doc-zone-depot--confidentiel:hover,
.doc-zone-depot--confidentiel.is-survol {
  border-color: var(--danger, #b91c1c);
  background: var(--danger-light, #fef2f2);
}

.doc-zone-titre { font-weight: 700; font-size: 0.95rem; }
.doc-zone-aide { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.2rem; }
.doc-zone-consigne { font-size: 0.82rem; color: var(--text-muted); margin-top: 0.6rem; }
.doc-depot-etat { font-size: 0.82rem; margin-top: 0.5rem; min-height: 1.1em; }
.doc-depot-etat--ok { color: var(--success, #15803d); }
.doc-depot-etat--erreur { color: var(--danger, #b91c1c); font-weight: 600; }

/* Hors flux plutôt que display:none : un champ réellement masqué n'est pas
   ouvrable par .click() sur certains navigateurs. */
.doc-zone-champ {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}
.doc-zone { font-size: 0.82rem; color: var(--text-muted); white-space: nowrap; }
.doc-zone--confidentiel {
  color: var(--danger, #b91c1c);
  font-weight: 600;
}

.kx-median-case {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0 0.9rem 0.3rem 0;
  font-size: 0.86rem;
  cursor: pointer;
}

.kx-summary-dali { margin-top: 0.75rem; }
.kx-summary-dali button { width: 100%; }

/* ══ TRI DES COLONNES ══════════════════════════════════════════════════════
   Piloté par assets/js/table-sort.js, actif sur tout tableau dont un en-tête
   porte la classe. La flèche indique le sens en cours ; ↕ signale simplement
   qu'on peut cliquer.                                                       */
.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.sortable::after { content: ' ↕'; font-size: 10px; color: var(--gray-400); }
.sortable.asc::after  { content: ' ↑'; color: var(--primary); }
.sortable.desc::after { content: ' ↓'; color: var(--primary); }