/* ============================================================
   Facturation PME — app.css
   Design sobre, professionnel, adapté aux PME suisses
   ============================================================ */

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

/* ---- Reset & Base ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:         #f5f4f0;
  --surface:    #ffffff;
  --border:     #d3d1c7;
  --border-light: #eeedea;
  --text:       #1a1a18;
  --text-muted: #5e5c57;
  --primary:    #185FA5;
  --primary-dk: #0C447C;
  --success:    #0F6E56;
  --danger:     #A32D2D;
  --warning:    #925408;
  --radius:     8px;
  --radius-lg:  12px;
  --shadow:     0 1px 3px rgba(0,0,0,0.08);
}

html { font-size: 16px; }

body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---- Layout ---- */
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}
.container--sm { max-width: 600px; }
.container--lg { max-width: 1200px; }

/* ---- Navigation ---- */
.nav {
  background: var(--surface);
  border-bottom: 0.5px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
}
.nav-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  align-items: stretch;
  gap: 2rem;
  height: 56px;
}
.nav-brand {
  font-weight: 600;
  font-size: 1rem;
  color: var(--text);
  white-space: nowrap;
  display: flex;
  align-items: center;
}
.nav-links {
  display: flex;
  gap: 0;
  flex: 1;
}
.nav-links a {
  display: flex;
  align-items: center;
  padding: 0 0.55rem;
  border-radius: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -0.5px;
  font-size: 0.83rem;
  color: var(--text-muted);
  transition: color 0.15s, background 0.15s;
  white-space: nowrap;
}
.nav-links a:hover {
  background: var(--bg);
  color: var(--text);
  text-decoration: none;
  border-radius: var(--radius);
  border-bottom-color: transparent;
}
.nav-links a.active {
  color: var(--primary);
  font-weight: 600;
  border-bottom-color: var(--primary);
  background: transparent;
}
.nav-dropdown {
  position: relative;
  display: flex;
  align-items: stretch;
}
.nav-dropdown-btn {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0 0.75rem;
  height: 100%;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-muted);
  font-family: inherit;
  transition: color 0.15s;
  margin-bottom: -0.5px;
}
.nav-dropdown-btn:hover { color: var(--text); }
.nav-dropdown-btn.active {
  color: var(--primary);
  font-weight: 600;
  border-bottom-color: var(--primary);
}
.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 2px);
  right: 0;
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  min-width: 160px;
  z-index: 200;
  padding: 0.35rem 0;
}
.nav-dropdown-menu.open { display: block; }
.nav-dropdown-menu a {
  display: block;
  padding: 0.55rem 1rem;
  font-size: 0.88rem;
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
  transition: background 0.12s;
  border-bottom: none !important;
}
.nav-dropdown-menu a:hover { background: var(--bg); }
.nav-dropdown-menu a.active { color: var(--primary); font-weight: 600; }

.nav-user {
  font-size: 0.85rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 1rem;
}
.nav-user a { color: var(--text-muted); font-size: 0.85rem; white-space: nowrap; }
.nav-user a:hover { color: var(--danger); }

/* ---- Page header ---- */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}
.page-header h1 { font-size: 1.5rem; font-weight: 600; }
.header-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

h1 { font-size: 1.5rem; font-weight: 600; margin-bottom: 1rem; }
h2 { font-size: 1.15rem; font-weight: 600; margin-bottom: 0.75rem; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  min-height: 38px;
  border-radius: var(--radius);
  border: 0.5px solid var(--border);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s;
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  line-height: 1.4;
}
.btn:hover { background: var(--bg); text-decoration: none; }
.btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.48;
  pointer-events: none;
  cursor: not-allowed;
}
.btn-primary {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}
.btn-primary:hover { background: var(--primary-dk); border-color: var(--primary-dk); color: white; }
.btn-primary:focus-visible { outline-color: var(--primary-dk); }
.btn-secondary { background: var(--surface); color: var(--text); }
.btn-danger {
  background: var(--danger);
  color: white;
  border-color: var(--danger);
}
.btn-danger:hover { background: #8a2525; border-color: #8a2525; color: white; }
.btn-danger:focus-visible { outline-color: var(--danger); }
.btn-warning {
  background: var(--warning);
  color: white;
  border-color: var(--warning);
}
.btn-warning:hover { background: #7a470a; border-color: #7a470a; color: white; }
.btn-warning:focus-visible { outline-color: var(--warning); }
.btn-sm { padding: 0.3rem 0.65rem; font-size: 0.8rem; min-height: 32px; }
.btn-link {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--text-muted);
  padding: 0;
  min-height: auto;
}
.btn-link.danger { color: var(--danger); }
.btn-link:hover { text-decoration: underline; }
.btn-filtre { font-size: 0.82rem; padding: 0.3rem 0.7rem; min-height: 32px; }
.btn-filtre.active { background: var(--primary); color: white; border-color: var(--primary); }
/* Groupe de boutons avec espacement automatique */
.btn-group {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
}

/* ---- Cards ---- */
.card {
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
  overflow: visible;  /* ← ajoute cette ligne */
}

/* ---- Analytics grids ---- */
.analytics-grid-main { display: grid; grid-template-columns: 2fr 1fr; gap: 1.25rem; margin-bottom: 1.25rem; }
.analytics-grid-sub  { display: grid; grid-template-columns: 1fr 1fr;  gap: 1.25rem; margin-bottom: 2rem; }

/* ---- Stats dashboard ---- */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; margin-bottom: 2rem; }
.stat-card {
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-left: 3px solid #cbd5e1;
  border-radius: var(--radius-lg);
  padding: 1rem 1.25rem;
}
.stat-card--warning { border-left-color: var(--warning); background: var(--surface); }
.stat-card--primary { border-left-color: var(--primary); }
.stat-card--success { border-left-color: var(--success); }
.stat-card--danger  { border-left-color: var(--danger); }
.stat-card__value { font-size: 1.6rem; font-weight: 600; color: var(--text); }
.stat-card--warning .stat-card__value { color: var(--warning); }
.stat-card__label { font-size: 0.78rem; color: var(--text-muted); margin-top: 2px; }

/* ---- Tables ---- */
.table { width: 100%; border-collapse: collapse; background: var(--surface); border-radius: var(--radius-lg); overflow: hidden; border: 0.5px solid var(--border); }
.table thead th {
  background: var(--bg);
  padding: 0.7rem 1rem;
  text-align: left;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted);
  border-bottom: 0.5px solid var(--border);
}
.table thead th.text-right { text-align: right; }
.table tbody td {
  padding: 0.75rem 1rem;
  border-bottom: 0.5px solid var(--border-light);
  font-size: 0.9rem;
  vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover td { background: #fafaf7; }
.table td.text-right { text-align: right; }
.table td.actions { display: flex; gap: 0.75rem; align-items: center; }

/* Lignes du document */
.table-lignes input, .table-lignes select {
  width: 100%;
  padding: 0.35rem 0.5rem;
  border: 0.5px solid var(--border);
  border-radius: 6px;
  font-size: 0.85rem;
  background: var(--surface);
}
.table-lignes input:focus, .table-lignes select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(24,95,165,0.1);
}
.table-lignes td { padding: 0.5rem 0.75rem; vertical-align: top; }
.ligne-total { font-weight: 500; font-size: 0.9rem; }
.btn-supprimer-ligne { font-size: 0.8rem; color: var(--danger); background: none; border: none; cursor: pointer; padding: 0.2rem 0.4rem; border-radius: 4px; }
.btn-supprimer-ligne:hover { background: #fcebeb; }

/* ---- Totaux ---- */
.totaux-box {
  display: flex;
  justify-content: flex-end;
  margin: 1rem 0;
}
.table-totaux { width: 300px; border-collapse: collapse; }
.table-totaux td { padding: 0.35rem 0.75rem; font-size: 0.9rem; }
.table-totaux .text-right { text-align: right; }
.table-totaux .tva-row td { color: var(--text-muted); font-size: 0.82rem; }
.table-totaux .total-ht-row td { border-top: 0.5px solid var(--border); padding-top: 0.5rem; }
.table-totaux .total-ttc-row td { font-size: 1.05rem; font-weight: 600; border-top: 1.5px solid var(--text); padding-top: 0.5rem; }

/* ---- Forms ---- */
.field { margin-bottom: 1.1rem; }
.field label {
  display: block;
  font-size: 0.85rem;
  font-weight: 500;
  margin-bottom: 0.3rem;
  color: var(--text);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.55rem 0.75rem;
  border: 0.5px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.95rem;
  background: var(--surface);
  color: var(--text);
  transition: border-color 0.15s, box-shadow 0.15s;
  font-family: inherit;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(24,95,165,0.1);
}
.field textarea { resize: vertical; min-height: 80px; }
.field--error input,
.field--error select,
.field--error textarea { border-color: var(--danger); }
.field--error input:focus,
.field--error select:focus,
.field--error textarea:focus {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(163,45,45,0.12);
}
.field-error { display: block; font-size: 0.78rem; color: var(--danger); margin-top: 4px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field--npa { max-width: 120px; }
.required { color: var(--danger); }
.form-actions { display: flex; gap: 0.75rem; justify-content: flex-end; margin-top: 1.5rem; }

/* ---- Alerts ---- */
.alert {
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  margin-bottom: 1rem;
  font-size: 0.9rem;
}
.alert-success { background: #e1f5ee; color: #0F6E56; border: 0.5px solid #9FE1CB; }
.alert-danger  { background: #fcebeb; color: var(--danger); border: 0.5px solid #F7C1C1; }
.alert-warning { background: #fff7ed; color: #9a3412; border: 0.5px solid #fed7aa; }

/* ---- Modals & Toasts — animations ---- */
@keyframes fadeInOverlay {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes slideUpModal {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}
@keyframes slideInToast {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0);    }
}
@keyframes fadeOutToast {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(20px); }
}

/* ---- Badges ---- */
.badge {
  display: inline-block;
  padding: 0.2rem 0.65rem;
  border-radius: 99px;
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
}
.badge--gray  { background: #f1efe8; color: #5f5e5a; }
.badge--blue  { background: #e6f1fb; color: #185FA5; }
.badge--green { background: #e1f5ee; color: #0F6E56; }
.badge--red   { background: #fcebeb; color: var(--danger); }

/* ---- Detail list (fiche client) ---- */
.detail-list { display: grid; grid-template-columns: 140px 1fr; gap: 0.5rem 1rem; font-size: 0.9rem; }
.detail-list dt { color: var(--text-muted); font-weight: 500; }

/* ---- Empty state ---- */
.empty-state { color: var(--text-muted); font-size: 0.9rem; padding: 2rem 0; }

/* ---- Text helpers ---- */
.text-muted  { color: var(--text-muted); font-size: 0.85rem; }
.text-right  { text-align: right; }
small.text-muted { font-size: 0.78rem; }

/* ---- Filtres ---- */
.filtres { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 1.5rem; }

/* ---- Hamburger ---- */
.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  margin-left: auto;
}
.nav-burger span {
  display: block;
  width: 22px; height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform .2s, opacity .2s;
}
.nav-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-mobile {
  display: none;
  flex-direction: column;
  position: fixed;
  top: 52px;
  left: 0; right: 0; bottom: 0;
  background: var(--surface);
  border-top: 1px solid var(--border);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  z-index: 150;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.nav-mobile.open { display: flex; }
.nav-mobile a {
  padding: .9rem 1.5rem;
  font-size: .95rem;
  color: var(--text);
  border-bottom: 1px solid var(--border-light);
  text-decoration: none;
  flex-shrink: 0;
}
.nav-mobile a:hover, .nav-mobile a.active { color: var(--primary); background: var(--bg); }
.nav-mobile a.logout { color: var(--danger); }

/* Backdrop — zone cliquable pour fermer le menu */
#nav-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 149;
  -webkit-tap-highlight-color: transparent;
}
#nav-backdrop.open { display: block; }

/* ---- Bottom nav (mobile only) ---- */
.nav-bottom { display: none; }

/* ============================================================
   Responsive — Tablet (≤ 900px)
   ============================================================ */
@media (max-width: 900px) {
  .nav-links a { padding: 0 0.4rem; font-size: 0.81rem; }
  .nav-dropdown-btn { padding: 0 0.5rem; font-size: 0.81rem; }
  .analytics-grid-main { grid-template-columns: 1fr; }
  .analytics-grid-sub  { grid-template-columns: 1fr 1fr; }
  .container { padding: 1.5rem 1.25rem; }
}

/* ============================================================
   Responsive — Mobile (≤ 640px)
   ============================================================ */
@media (max-width: 640px) {

  /* ── Global ── */
  body { padding-bottom: 74px; }
  .container { padding: 1.25rem 0.875rem; }
  h1 { font-size: 1.25rem; }
  h2 { font-size: 1.05rem; }

  /* ── Top nav ── */
  .nav-inner  { gap: 0.5rem; padding: 0 1rem; }
  .nav-brand  { flex: 1; }
  .nav-links  { display: none; }
  .nav-user   { display: none; }
  .nav-burger { display: flex; }

  /* ── Menu mobile : s'arrête au-dessus de la nav bottom ── */
  .nav-mobile {
    bottom: calc(62px + env(safe-area-inset-bottom, 0px));
    padding-bottom: 0;
  }

  /* ── Bottom nav bar ── */
  .nav-bottom {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: 62px;
    background: var(--surface);
    border-top: 0.5px solid var(--border);
    z-index: 200;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    align-items: center;
  }
  .nav-bottom > a:not(.nav-fab),
  .nav-bottom > button.nav-menu-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.58rem;
    font-weight: 500;
    letter-spacing: 0.3px;
    transition: color 0.15s;
    -webkit-tap-highlight-color: transparent;
    padding: 0.4rem 0.25rem;
    height: 100%;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
  }
  .nav-bottom > a svg,
  .nav-bottom > button.nav-menu-btn svg {
    width: 22px; height: 22px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
  }
  .nav-bottom > a.active,
  .nav-bottom > a:hover,
  .nav-bottom > button.nav-menu-btn.active,
  .nav-bottom > button.nav-menu-btn:hover { color: var(--primary); text-decoration: none; }

  /* ── FAB central (Nouveau document) ── */
  .nav-fab {
    flex: 0 0 auto !important;
    width: 52px !important;
    height: 52px !important;
    background: var(--primary) !important;
    border-radius: 50% !important;
    color: white !important;
    box-shadow: 0 4px 14px rgba(24,95,165,0.40);
    position: relative;
    bottom: 10px;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
    gap: 0;
    padding: 0 !important;
    margin: 0 6px;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s, transform 0.12s, box-shadow 0.15s;
  }
  .nav-fab:hover, .nav-fab:active {
    background: var(--primary-dk) !important;
    color: white !important;
    transform: scale(1.06);
    box-shadow: 0 6px 18px rgba(24,95,165,0.50);
    text-decoration: none !important;
  }
  .nav-fab svg {
    width: 28px !important; height: 28px !important;
    stroke: white !important;
    stroke-width: 2.5;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* ── Page header ── */
  .page-header { flex-direction: column; align-items: flex-start; }
  .page-header h1 { font-size: 1.2rem; }
  .header-actions { width: 100%; }
  .header-actions > .btn { width: 100%; justify-content: center; }

  /* ── Stats ── */
  .stats-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
  }
  .stat-card { padding: 0.875rem 1rem; }
  .stat-card__value { font-size: 1.35rem; }

  /* ── Cards ── */
  .card { padding: 1rem; }

  /* ── Quick actions (tableau de bord) ── */
  .quick-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.6rem;
    margin-bottom: 1.5rem !important;
  }
  .quick-actions .btn {
    width: 100%;
    justify-content: center;
    font-size: 0.82rem;
    padding: 0.6rem 0.5rem;
  }

  /* ── Filtres badge: scroll horizontal ── */
  .filtres {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    gap: 0.3rem;
    padding-bottom: 2px;
    margin-bottom: 1rem;
  }
  .filtres::-webkit-scrollbar { display: none; }
  .btn-filtre { font-size: 0.78rem; padding: 0.28rem 0.6rem; white-space: nowrap; flex-shrink: 0; }

  /* ── Filtres formulaires (dépenses, etc.) ── */
  .filter-form {
    flex-direction: column !important;
    gap: 0.5rem !important;
    flex-wrap: nowrap !important;
  }
  .filter-form .field {
    min-width: unset !important;
    margin: 0 !important;
    width: 100%;
  }

  /* ── Tables → cartes (sauf table-lignes) ── */
  .table:not(.table-lignes) {
    display: block;
    border: none;
    background: transparent;
    border-radius: 0;
    overflow: visible;
    white-space: normal;
    box-shadow: none;
  }
  .table:not(.table-lignes) thead { display: none; }
  .table:not(.table-lignes) tbody { display: flex; flex-direction: column; gap: 0.5rem; }
  .table:not(.table-lignes) tbody tr {
    display: block;
    background: var(--surface);
    border: 0.5px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 0.875rem 1rem 0.7rem;
    box-shadow: var(--shadow);
  }
  .table:not(.table-lignes) tbody tr:hover td { background: transparent; }
  .table:not(.table-lignes) tbody td {
    display: block;
    padding: 0.12rem 0;
    border: none;
    font-size: 0.875rem;
    white-space: normal;
    vertical-align: middle;
  }
  .table:not(.table-lignes) tbody td:first-child {
    font-weight: 600;
    font-size: 0.95rem;
    padding-bottom: 0.4rem;
    margin-bottom: 0.25rem;
    border-bottom: 0.5px solid var(--border-light);
  }
  .table:not(.table-lignes) tbody td:empty { display: none; }
  .table:not(.table-lignes) td.actions {
    display: flex !important;
    gap: 1.25rem;
    margin-top: 0.35rem;
    padding: 0.5rem 0 0;
    border-top: 0.5px solid var(--border-light);
    align-items: center;
  }

  /* ── table-lignes: scroll horizontal + meilleurs touch targets ── */
  .table-lignes {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-size: 0.82rem;
    white-space: nowrap;
  }
  .table-lignes thead th,
  .table-lignes tbody td { padding: 0.5rem 0.4rem; }
  .table-lignes input,
  .table-lignes select {
    padding: 0.5rem 0.4rem !important;
    min-height: 40px;
    font-size: 0.9rem;
  }

  /* ── Totaux: full width ── */
  .totaux-box {
    justify-content: flex-start;
    margin: 0.75rem 0;
  }
  .table-totaux { width: 100%; }

  /* ── Formulaires ── */
  .field-row { grid-template-columns: 1fr; }
  .field input,
  .field select,
  .field textarea { padding: 0.65rem 0.75rem; font-size: 1rem; }
  .form-actions { flex-direction: column-reverse; gap: 0.5rem; }
  .form-actions .btn { width: 100%; justify-content: center; }

  /* ── Labels sur les cartes mobiles (via data-label) ── */
  .table:not(.table-lignes) tbody td.text-right { text-align: left; }
  .table:not(.table-lignes) tbody td[data-label]:not(:first-child):not(.actions)::before {
    content: attr(data-label) "\00a0";
    font-size: 0.72rem;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
  }

  /* ── Analytique ── */
  .analytics-grid-main,
  .analytics-grid-sub { grid-template-columns: 1fr !important; }

  /* ── Stock: table scrollable + formulaire d'ajustement ── */
  .stock-table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-lg);
  }
  .stock-adjust-form {
    flex-direction: column !important;
    gap: 0.6rem !important;
    align-items: stretch !important;
  }
  .stock-adjust-form > div {
    min-width: unset !important;
    flex: 1 1 auto !important;
  }
  .stock-adjust-form > div > input,
  .stock-adjust-form > div > select {
    width: 100% !important;
    box-sizing: border-box;
  }

  /* ── Pages header inline (TVA, Résultat, Stock) ── */
  .page-inline-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
  }
  .page-inline-header > div:last-child,
  .page-inline-header > form {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
  }
  .page-inline-header select { flex: 1; min-width: 120px; }

  /* ── TVA / Résultat: tables scrollables ── */
  .data-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-lg);
  }

  /* ── Detail list ── */
  .detail-list { grid-template-columns: 110px 1fr; }

  /* ── Toast: au-dessus de la nav bottom ── */
  #global-toast {
    bottom: 74px !important;
    right: 0.875rem !important;
    left: 0.875rem;
    max-width: none !important;
  }
}
/* ---- Select Search & Autocomplete Component ---- */
.ss-container { position: relative; }

.ss-input {
  width: 100%;
  padding: 0.55rem 0.75rem;
  border: 0.5px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.95rem;
  background: var(--surface);
  color: var(--text);
  transition: border-color 0.15s, box-shadow 0.15s;
  font-family: inherit;
}
.ss-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(24,95,165,0.1);
}

.ss-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  max-height: 220px;
  overflow-y: auto;
  z-index: 9999;
}

.ss-item {
  padding: 0.5rem 0.85rem;
  font-size: 0.88rem;
  cursor: pointer;
  transition: background 0.1s;
  border-bottom: 0.5px solid var(--border-light);
}
.ss-item:last-child { border-bottom: none; }
.ss-item:hover { background: var(--bg); }
.ss-item.ss-empty { color: var(--text-muted); cursor: default; font-style: italic; }
.ss-item.ss-more  { color: var(--text-muted); font-size: 0.78rem; cursor: default; font-style: italic; }
.ss-item strong   { color: var(--primary); font-weight: 700; }

/* Dropdown désignation dans les lignes */
.designation-dropdown {
  min-width: 280px;
}

/* RH / Entreprise */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.kpi-grid a { text-decoration: none; color: inherit; }
.action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: .75rem;
  margin-top: .75rem;
}
.action-card {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  padding: .9rem 1rem;
  border: .5px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  transition: background .15s, border-color .15s, transform .12s;
}
.action-card:hover {
  background: var(--bg);
  border-color: var(--primary);
  text-decoration: none;
  transform: translateY(-1px);
}
.action-card strong { font-size: .95rem; }
.action-card span { font-size: .8rem; color: var(--text-muted); }
.form-section {
  background: var(--surface);
  border: .5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1rem;
}
.form-section h2 {
  font-size: 1rem;
  margin-bottom: 1rem;
  padding-bottom: .5rem;
  border-bottom: .5px solid var(--border-light);
}
.input-suffix {
  display: flex;
  align-items: stretch;
}
.input-suffix input {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
.input-suffix span {
  display: inline-flex;
  align-items: center;
  padding: 0 .75rem;
  border: .5px solid var(--border);
  border-left: 0;
  border-top-right-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
  background: var(--bg);
  color: var(--text-muted);
  font-size: .85rem;
  white-space: nowrap;
}
.rh-info-card {
  background: #eef6ff;
  color: #0C447C;
  border: .5px solid #b8d7f2;
  border-radius: var(--radius-lg);
  padding: .85rem 1rem;
  font-size: .9rem;
}
@media (max-width: 640px) {
  .form-section { padding: 1rem; }
  .action-grid { grid-template-columns: 1fr; }
}
/* ---- RH Paie ---- */
.rh-page-header { align-items: flex-start; gap: 1rem; }
.rh-header-actions { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: flex-end; }
.rh-compact-alert { margin-bottom: 1rem; padding: .75rem .9rem; border: .5px solid #f3d19a; border-radius: var(--radius); background: #fff8e6; color: #6f4b00; font-size: .88rem; }
.rh-settings-layout { display: grid; gap: 1rem; }
.rh-panel { background: #fff; border: .5px solid var(--border); border-radius: var(--radius-lg); padding: 1rem; box-shadow: 0 10px 24px rgba(20,20,18,.035); }
.rh-panel__header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: .9rem; }
.rh-panel__header span { color: var(--text-muted); font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.rh-panel__header h2 { margin: .12rem 0 0; font-size: 1.05rem; }
.rh-form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .85rem; }
.rh-form-grid .field { margin-bottom: 0; min-width: 0; }
.rh-field-wide { grid-column: span 2; }
.rh-form-grid--insurance { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rh-form-grid--rules { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; }
.lpp-rate-list { display: grid; gap: .65rem; margin-top: .55rem; }
.lpp-rate-row { padding: .7rem; border: .5px solid var(--border-light); border-radius: var(--radius); background: var(--bg); }
.lpp-rate-row__title { margin-bottom: .55rem; color: var(--text-muted); font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.lpp-rate-row__fields { display: grid; grid-template-columns: minmax(74px, .6fr) minmax(74px, .6fr) minmax(120px, .9fr) minmax(132px, .9fr) minmax(160px, 1.2fr); gap: .65rem; align-items: end; }
.lpp-rate-row .field { margin-bottom: 0; min-width: 0; }
.rh-checkline { display: inline-flex; align-items: center; gap: .45rem; margin-top: .9rem; color: var(--text-muted); font-size: .9rem; }
.rh-help-text { margin: .8rem 0 0; font-size: .82rem; }
.rh-form-actions { display: flex; justify-content: flex-end; }
.rh-active-insurances { margin-top: 1rem; }
.rh-insurance-list { display: grid; gap: .65rem; }
.rh-insurance-card { display: grid; grid-template-columns: minmax(180px, .9fr) minmax(0, 1.4fr) auto; gap: .8rem; align-items: center; padding: .75rem; border: .5px solid var(--border); border-radius: var(--radius); background: var(--bg); }
.rh-insurance-card strong,
.rh-insurance-card span { display: block; }
.rh-insurance-card span { color: var(--text-muted); font-size: .82rem; }
.rh-insurance-meta { display: flex; gap: .65rem; flex-wrap: wrap; }
.rh-rules-intro { display: flex; justify-content: space-between; gap: 1rem; align-items: center; margin-bottom: 1rem; padding: 1rem; border: .5px solid #b8d7f2; border-radius: var(--radius-lg); background: #eef6ff; color: #0C447C; }
.rh-rules-intro p { margin: .2rem 0 0; font-size: .86rem; }
.rh-rule-form { display: grid; gap: .85rem; }
.rh-rules-grid { display: grid; gap: 1rem; margin-top: 1rem; }
.rule-card-list { display: grid; gap: .7rem; }
.rule-card { padding: .85rem; border: .5px solid var(--border); border-radius: var(--radius); background: var(--bg); }
.rule-card__main { display: flex; justify-content: space-between; gap: .75rem; align-items: flex-start; }
.rule-card__title strong,
.rule-card__title span { display: block; }
.rule-card__title span { color: var(--text-muted); font-size: .82rem; margin-top: .15rem; }
.rule-card__badges { display: flex; gap: .3rem; flex-wrap: wrap; justify-content: flex-end; }
.rule-badge { display: inline-flex; align-items: center; min-height: 22px; padding: .12rem .5rem; border-radius: 999px; background: #f4f4f5; color: #52525b; font-size: .7rem; font-weight: 700; white-space: nowrap; }
.rule-badge--federal { background: #eef2ff; color: #3730a3; }
.rule-badge--cantonal { background: #ecfdf5; color: #047857; }
.rule-badge--active { background: #dcfce7; color: #15803d; }
.rule-badge--expired { background: #fee2e2; color: #991b1b; }
.rule-badge--missing { background: #fef3c7; color: #92400e; }
.rule-card__meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; margin: .75rem 0 0; }
.rule-card__meta dt { color: var(--text-muted); font-size: .72rem; }
.rule-card__meta dd { margin: .12rem 0 0; font-size: .86rem; overflow-wrap: anywhere; }
.rule-card__source { margin: .75rem 0 0; color: var(--text-muted); font-size: .8rem; border-top: .5px solid var(--border); padding-top: .55rem; }
@media (max-width: 900px) {
  .rh-form-grid,
  .rh-form-grid--insurance,
  .rh-form-grid--rules,
  .rule-card__meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rh-insurance-card { grid-template-columns: 1fr; }
  .lpp-rate-row__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lpp-rate-row__fields .field:last-child { grid-column: 1 / -1; }
  .rh-rules-intro { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 640px) {
  .rh-page-header,
  .rh-panel__header,
  .rule-card__main { flex-direction: column; }
  .rh-header-actions,
  .rh-form-actions { width: 100%; justify-content: stretch; }
  .rh-header-actions .btn,
  .rh-form-actions .btn,
  .rh-insurance-card .btn { width: 100%; justify-content: center; }
  .rh-form-grid,
  .rh-form-grid--insurance,
  .rh-form-grid--rules,
  .rule-card__meta { grid-template-columns: 1fr; }
  .lpp-rate-row__fields { grid-template-columns: 1fr; }
  .lpp-rate-row__fields .field:last-child { grid-column: auto; }
  .rh-field-wide { grid-column: auto; }
  .rule-card__badges { justify-content: flex-start; }
}

/* ── Règles légales (rl-*) ─────────────────────────────────────────────── */
.rl-page { display: flex; flex-direction: column; gap: 1rem; }

/* Notice */
.rl-notice { display: flex; align-items: flex-start; gap: .75rem; padding: .85rem 1rem; border: .5px solid #b8d7f2; border-radius: var(--radius-lg); background: #eef6ff; color: #0C447C; font-size: .86rem; }
.rl-notice svg { flex-shrink: 0; margin-top: .1rem; }
.rl-notice p { margin: 0; flex: 1; }
.rl-notice__badges { display: flex; gap: .3rem; flex-wrap: wrap; flex-shrink: 0; align-items: center; }

/* Badges */
.rl-badge { display: inline-flex; align-items: center; padding: .1rem .45rem; border-radius: 999px; font-size: .69rem; font-weight: 700; letter-spacing: .03em; white-space: nowrap; }
.rl-badge--federal   { background: #eef2ff; color: #3730a3; }
.rl-badge--cantonal  { background: #ecfdf5; color: #047857; }
.rl-badge--active    { background: #dcfce7; color: #15803d; }
.rl-badge--expired   { background: #fee2e2; color: #991b1b; }
.rl-badge--inactive  { background: #f4f4f5; color: #71717a; }
.rl-badge--missing   { background: #fef3c7; color: #92400e; }

/* Barre de filtres */
.rl-filter-bar { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.rl-filter-years { display: flex; gap: .3rem; flex-wrap: wrap; }
.rl-year-btn { padding: .3rem .7rem; font-size: .8rem; font-weight: 600; border: .5px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text-muted); cursor: pointer; transition: background .12s, color .12s, border-color .12s; }
.rl-year-btn:hover { background: var(--bg); color: var(--text); border-color: var(--border); }
.rl-year-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.rl-filter-search { flex: 1; min-width: 180px; }
.rl-filter-search input { width: 100%; padding: .38rem .75rem; border: .5px solid var(--border); border-radius: var(--radius); background: var(--surface); font-size: .86rem; color: var(--text); }
.rl-filter-search input:focus { outline: 2px solid var(--primary); outline-offset: 1px; }

/* Colonnes fédéral / cantonal */
.rl-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
.rl-column { background: var(--surface); border: .5px solid var(--border); border-radius: var(--radius-lg); padding: 1rem; box-shadow: 0 10px 24px rgba(20,20,18,.035); }
.rl-column__header { display: flex; align-items: center; gap: .5rem; margin-bottom: .9rem; padding-bottom: .7rem; border-bottom: .5px solid var(--border-light); }
.rl-column__header h2 { margin: 0; font-size: 1rem; flex: 1; }
.rl-column__count { font-size: .75rem; color: var(--text-muted); font-weight: 600; }
.rl-empty { color: var(--text-muted); font-size: .86rem; margin: .5rem 0; }

/* Groupe par année */
.rl-year-group { margin-bottom: 1rem; }
.rl-year-group:last-child { margin-bottom: 0; }
.rl-year-label { display: flex; align-items: center; gap: .4rem; margin-bottom: .4rem; }
.rl-year-label span:first-child { font-size: .72rem; font-weight: 700; letter-spacing: .06em; color: var(--text-muted); text-transform: uppercase; }
.rl-year-current { font-size: .68rem; font-weight: 700; padding: .08rem .4rem; border-radius: 999px; background: #dcfce7; color: #15803d; }
.rl-cards { display: flex; flex-direction: column; gap: .5rem; }

/* Card règle */
.rl-card { border: .5px solid var(--border); border-radius: var(--radius); background: var(--bg); padding: .7rem .85rem; transition: border-color .12s; }
.rl-card:hover { border-color: #b5c8de; }
.rl-card--dim { opacity: .65; }
.rl-card__top { display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem; }
.rl-card__identity { flex: 1; min-width: 0; }
.rl-card__code { display: block; font-family: ui-monospace, 'Cascadia Code', monospace; font-size: .78rem; font-weight: 700; color: var(--primary); letter-spacing: .02em; overflow-wrap: anywhere; }
.rl-card__label { display: block; font-size: .8rem; color: var(--text-muted); margin-top: .2rem; line-height: 1.3; }
.rl-card__value { font-size: 1.05rem; font-weight: 700; color: var(--text); white-space: nowrap; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.rl-card__foot { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; margin-top: .55rem; padding-top: .45rem; border-top: .5px solid var(--border-light); flex-wrap: wrap; }
.rl-card__badges { display: flex; gap: .25rem; flex-wrap: wrap; }
.rl-card__meta { display: flex; flex-direction: column; gap: .12rem; align-items: flex-end; text-align: right; }
.rl-card__meta span { font-size: .72rem; color: var(--text-muted); }
.rl-card__source { font-size: .7rem; color: var(--text-muted); max-width: 28ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Panel ajout avancé */
.rl-add-panel { border: .5px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: 0 10px 24px rgba(20,20,18,.035); overflow: hidden; }
.rl-add-toggle { display: flex; align-items: center; gap: .5rem; padding: .9rem 1rem; cursor: pointer; list-style: none; font-weight: 600; font-size: .9rem; color: var(--text); user-select: none; }
.rl-add-toggle::-webkit-details-marker { display: none; }
.rl-add-toggle:hover { background: var(--bg); }
.rl-add-toggle svg { color: var(--primary); flex-shrink: 0; }
.rl-add-toggle__hint { font-size: .78rem; font-weight: 400; color: var(--text-muted); }
.rl-add-body { padding: 0 1rem 1rem; border-top: .5px solid var(--border-light); }
.rl-add-form { margin-top: .85rem; display: flex; flex-direction: column; gap: .6rem; }
.rl-form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.rl-add-actions { display: flex; justify-content: space-between; align-items: center; padding-top: .5rem; }

/* Responsive */
@media (max-width: 960px) {
  .rl-columns { grid-template-columns: 1fr; }
  .rl-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rl-notice__badges { display: none; }
}
@media (max-width: 600px) {
  .rl-card__top { flex-direction: column; gap: .3rem; }
  .rl-card__value { font-size: .9rem; }
  .rl-card__foot { flex-direction: column; }
  .rl-card__meta { align-items: flex-start; text-align: left; }
  .rl-form-grid { grid-template-columns: 1fr; }
  .rl-add-actions { flex-direction: column; gap: .5rem; align-items: stretch; }
  .rl-add-actions .btn { width: 100%; justify-content: center; }
  .rl-filter-bar { flex-direction: column; align-items: stretch; }
  .rl-filter-search { min-width: 0; }
}
/* Coverage panel */
.rl-coverage-panel { background: var(--surface); border: .5px solid var(--border); border-radius: var(--radius-lg); padding: 1rem; box-shadow: 0 10px 24px rgba(20,20,18,.035); }
.rl-coverage-header { display: flex; align-items: baseline; gap: .75rem; margin-bottom: .85rem; padding-bottom: .6rem; border-bottom: .5px solid var(--border-light); }
.rl-coverage-header h2 { margin: 0; font-size: 1rem; }
.rl-coverage-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .65rem; }
.rl-coverage-card { border: .5px solid var(--border); border-radius: var(--radius); padding: .75rem; background: var(--bg); }
.rl-coverage-card--ok { border-color: #bbf7d0; background: #f0fdf4; }
.rl-coverage-card--missing { border-color: #fde68a; background: #fffbeb; }
.rl-coverage-card__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: .45rem; }
.rl-coverage-card__code { font-size: 1.05rem; font-weight: 800; letter-spacing: .04em; }
.rl-coverage-card--ok .rl-coverage-card__code { color: #15803d; }
.rl-coverage-card--missing .rl-coverage-card__code { color: #92400e; }
.rl-coverage-list { list-style: none; margin: .3rem 0; padding: 0; display: flex; flex-direction: column; gap: .2rem; }
.rl-coverage-list__item { display: flex; align-items: center; gap: .3rem; font-size: .72rem; font-family: ui-monospace, monospace; }
.rl-coverage-list__item--ok { color: #15803d; }
.rl-coverage-list__item--missing { color: #92400e; font-weight: 600; }
.rl-coverage-list__item em { font-style: normal; font-weight: 400; color: var(--text-muted); font-family: inherit; }
.rl-coverage-install { margin-top: .6rem; }
.rl-coverage-install .btn-sm { font-size: .78rem; padding: .3rem .65rem; }
.rl-coverage-nopre { font-size: .72rem; color: var(--text-muted); margin: .5rem 0 0; font-style: italic; }
/* ── fin règles légales ─────────────────────────────────────────────────── */

.payroll-filter-card {
  margin-bottom: 1rem;
}

.payroll-filter-grid {
  display: grid;
  grid-template-columns: 140px 120px 1fr 180px auto;
  gap: 0.75rem;
  align-items: end;
}

.payroll-filter-grid .field {
  margin-bottom: 0;
}

.payroll-filter-grid .field label {
  margin-bottom: 0.45rem;
}

.payroll-filter-button {
  height: 42px;
  white-space: nowrap;
  align-self: end;
}

.payroll-table-wrap {
  margin-top: 0;
}

.manual-payroll-form h2 {
  margin: 1.25rem 0 0.75rem;
  font-size: 1.05rem;
}

.manual-payroll-grid {
  display: grid;
  grid-template-columns: 1.4fr 140px 140px;
  gap: 0.9rem;
}

.manual-payroll-grid--money {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.manual-payroll-context {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.manual-payroll-context div {
  border: .5px solid var(--border);
  border-radius: var(--radius);
  padding: 0.75rem;
  background: var(--bg);
}

.manual-payroll-context span {
  display: block;
  color: var(--text-muted);
  font-size: 0.76rem;
  margin-bottom: 0.25rem;
}

.manual-payroll-context strong {
  display: block;
  font-size: 0.92rem;
}

.manual-payroll-tools {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.calc-badge {
  display: inline-block;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 500;
  margin-left: 0.25rem;
}

.calc-badge--manual {
  color: var(--primary);
}

.manual-payroll-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 1.25rem 0;
}

.manual-payroll-summary div {
  border: .5px solid var(--border);
  border-radius: var(--radius);
  padding: 0.8rem;
  background: var(--bg);
}

.manual-payroll-summary span {
  display: block;
  color: var(--text-muted);
  font-size: 0.8rem;
  margin-bottom: 0.25rem;
}

.manual-payroll-summary strong {
  display: block;
  font-size: 1rem;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .payroll-filter-grid {
    grid-template-columns: 1fr 1fr;
  }

  .manual-payroll-grid,
  .manual-payroll-grid--money,
  .manual-payroll-context,
  .manual-payroll-summary {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .payroll-filter-grid {
    grid-template-columns: 1fr;
  }

  .payroll-filter-button {
    width: 100%;
    justify-content: center;
  }

  .manual-payroll-grid,
  .manual-payroll-grid--money,
  .manual-payroll-context,
  .manual-payroll-summary {
    grid-template-columns: 1fr;
  }
}
/* ---- RH Paie creation ---- */
.payroll-create-page { max-width: 1180px; }
@media (min-width: 901px) {
  body:not(.sidebar-collapsed) .payroll-create-page {
    margin-left: max(1.5rem, calc((100vw - 1180px) / 2 - 220px));
    margin-right: auto;
  }
}
.payroll-create-header { align-items: flex-start; margin-bottom: 1rem; }
.payroll-create-alert { margin-bottom: 1rem; }
.payroll-create-shell { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1rem; align-items: start; }
.payroll-create-main { display: grid; gap: 1rem; min-width: 0; }
.payroll-panel,
.payroll-summary-card { background: #fff; border: .5px solid var(--border); border-radius: var(--radius-lg); box-shadow: 0 10px 24px rgba(20,20,18,.035); }
.payroll-panel { padding: 1rem; }
.payroll-panel__header { display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem; margin-bottom: .85rem; }
.payroll-panel__header h2 { margin: .12rem 0 0; font-size: 1rem; line-height: 1.25; }
.payroll-panel__eyebrow { display: block; color: var(--text-muted); font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.payroll-status-pill,
.scope-badge { display: inline-flex; align-items: center; min-height: 22px; padding: .12rem .48rem; border-radius: 999px; font-size: .7rem; font-weight: 700; line-height: 1.1; white-space: nowrap; }
.payroll-status-pill { background: #eef6ff; color: #185FA5; }
.scope-badge--federal { background: #eef2ff; color: #3730a3; }
.scope-badge--cantonal { background: #ecfdf5; color: #047857; }
.scope-badge--auto { background: #fff7ed; color: #9a3412; }
.scope-badge--manual { background: #f4f4f5; color: #52525b; }
.payroll-context-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .55rem; margin-bottom: .9rem; }
.payroll-context-strip div { min-width: 0; padding: .65rem .7rem; border: .5px solid var(--border); border-radius: var(--radius); background: var(--bg); }
.payroll-context-strip span,
.payroll-summary-list span { display: block; color: var(--text-muted); font-size: .74rem; margin-bottom: .22rem; }
.payroll-context-strip strong,
.payroll-summary-list strong { display: block; overflow-wrap: anywhere; }
.payroll-form-grid { display: grid; gap: .85rem; }
.payroll-form-grid--context { grid-template-columns: minmax(220px, 1.25fr) minmax(180px, .75fr); }
.payroll-form-grid--period { grid-template-columns: 120px 150px minmax(260px, 1fr); align-items: end; }
.payroll-form-grid--money { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.payroll-form-grid .field { margin-bottom: 0; min-width: 0; }
.payroll-form-grid label { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.payroll-recalc-box { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.payroll-recalc-box small { color: var(--text-muted); font-size: .76rem; }
.payroll-inline-note { display: flex; gap: .6rem; align-items: flex-start; margin-top: .85rem; padding: .7rem .8rem; border-radius: var(--radius); background: #f8fafc; color: #475569; font-size: .82rem; }
.payroll-inline-note strong { color: #1f2937; white-space: nowrap; }
.payroll-prefill-warning { margin: .85rem 0 0; font-size: .82rem; }
.payroll-summary-card { position: sticky; top: 1rem; padding: 1rem; }
.payroll-summary-card__top { padding-bottom: .85rem; border-bottom: .5px solid var(--border); }
.payroll-summary-card__top strong { display: block; margin-top: .16rem; font-size: 1.05rem; }
.payroll-summary-card__top small { display: block; margin-top: .2rem; color: var(--text-muted); }
.payroll-summary-list { display: grid; gap: .6rem; margin: .9rem 0; }
.payroll-summary-list div { padding: .75rem; border: .5px solid var(--border); border-radius: var(--radius); background: var(--bg); }
.payroll-summary-list__net { background: #f0fdf4 !important; border-color: #bbf7d0 !important; }
.payroll-summary-list__net strong { color: #166534; font-size: 1.2rem; }
.payroll-summary-hints { display: grid; gap: .35rem; padding: .75rem 0; border-top: .5px solid var(--border); border-bottom: .5px solid var(--border); color: var(--text-muted); font-size: .78rem; }
.scope-dot { display: inline-block; width: .55rem; height: .55rem; border-radius: 999px; margin-right: .35rem; }
.scope-dot--federal { background: #6366f1; }
.scope-dot--cantonal { background: #10b981; }
.scope-dot--manual { background: #71717a; }
.payroll-summary-actions { display: grid; gap: .55rem; margin-top: .9rem; }
.payroll-summary-actions .btn { width: 100%; justify-content: center; }
@media (max-width: 980px) {
  .payroll-create-shell { grid-template-columns: 1fr; }
  .payroll-summary-card { position: static; }
  .payroll-summary-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .payroll-summary-hints { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .payroll-create-header { gap: .75rem; }
  .payroll-create-header,
  .payroll-panel__header,
  .payroll-inline-note { flex-direction: column; }
  .payroll-context-strip,
  .payroll-form-grid--context,
  .payroll-form-grid--period,
  .payroll-form-grid--money,
  .payroll-summary-list,
  .payroll-summary-hints { grid-template-columns: 1fr; }
  .payroll-panel,
  .payroll-summary-card { padding: .9rem; }
  .payroll-recalc-box,
  .payroll-summary-actions { align-items: stretch; }
  .payroll-recalc-box .btn,
  .payroll-create-header .btn { width: 100%; justify-content: center; }
}

/* ---- RH Employé show ---- */
.employee-detail-page {
  padding-bottom: 2rem;
}

.employee-breadcrumb {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin: .25rem 0 1rem;
  color: var(--text-muted);
  font-size: .85rem;
}

.employee-breadcrumb a,
.employee-back-link {
  color: var(--primary);
  text-decoration: none;
}

.employee-back-link {
  display: inline-flex;
  margin-bottom: .45rem;
  font-weight: 600;
  font-size: .9rem;
}

.employee-detail-header {
  align-items: flex-start;
}

.employee-header-meta {
  margin: .35rem 0 0;
  color: var(--text-muted);
}

.employee-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
  gap: 1rem;
  align-items: stretch;
}

.employee-show-card {
  margin-bottom: 1rem;
}

.employee-show-card h2 {
  margin: 0;
  font-size: 1.05rem;
}

.employee-show-card .table {
  margin-top: 0.5rem;
}

.employee-card-header {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  align-items: flex-start;
  margin-bottom: .9rem;
}

.employee-card-header p {
  margin: .35rem 0 0;
  color: var(--text-muted);
  font-size: .9rem;
  line-height: 1.45;
}

.employee-info-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .85rem 1rem;
  margin: 0;
}

.employee-info-list div {
  min-width: 0;
}

.employee-info-list dt {
  color: var(--text-muted);
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
}

.employee-info-list dd {
  margin: .2rem 0 0;
  overflow-wrap: anywhere;
}

.employee-status-pill {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: .18rem .55rem;
  background: var(--bg);
  color: var(--text-muted);
  font-size: .78rem;
  font-weight: 700;
  white-space: nowrap;
}

.employee-status-pill--success {
  border-color: rgba(15, 110, 86, .25);
  background: #ECFDF5;
  color: #0F6E56;
}

.employee-portal-card form {
  display: flex;
  align-items: center;
  gap: .6rem;
}

.employee-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.employee-empty-state {
  display: grid;
  gap: .25rem;
  padding: .95rem;
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg);
  color: var(--text-muted);
}

.employee-empty-state strong {
  color: var(--text);
}

.employee-form-label {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin: 0 0 0.4rem;
}

.employee-document-form {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1.2fr auto auto;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 1rem;
}

.employee-document-form input,
.employee-document-form select {
  width: 100%;
  padding: 0.55rem 0.75rem;
  border: 0.5px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.9rem;
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
}

.employee-document-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
  font-size: 0.9rem;
}

.employee-document-checkbox input {
  width: auto;
}

.employee-document-list {
  display: grid;
  gap: .55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.employee-document-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .7rem .85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.employee-danger-zone {
  margin-top: .5rem;
}

.btn.is-loading {
  position: relative;
  pointer-events: none;
  opacity: .78;
}

.btn.is-loading::before {
  content: "";
  width: .85rem;
  height: .85rem;
  margin-right: .45rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 999px;
  animation: sd-spin .7s linear infinite;
}

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

.sd-toast-region {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 1100;
  display: grid;
  gap: .6rem;
  width: min(380px, calc(100vw - 2rem));
  pointer-events: none;
}

.sd-toast {
  transform: translateY(8px);
  opacity: 0;
  padding: .75rem .9rem;
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 28px rgba(15, 23, 42, .16);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font-weight: 700;
  transition: opacity .18s ease, transform .18s ease;
}

.sd-toast.is-visible {
  transform: translateY(0);
  opacity: 1;
}

.sd-toast--success {
  border-color: rgba(26, 127, 55, .25);
  background: #F0FDF4;
  color: #166534;
}

.sd-toast--error {
  border-color: rgba(163, 45, 45, .25);
  background: #FEF2F2;
  color: #991B1B;
}

@media (max-width: 900px) {
  .employee-detail-grid {
    grid-template-columns: 1fr;
  }

  .employee-document-form {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .employee-breadcrumb {
    flex-wrap: wrap;
  }

  .employee-card-header,
  .employee-portal-card form,
  .employee-document-list li {
    align-items: stretch;
    flex-direction: column;
  }

  .employee-info-list {
    grid-template-columns: 1fr;
  }

  .employee-portal-card .btn,
  .employee-card-header .btn {
    width: 100%;
    justify-content: center;
  }

  .employee-document-form {
    grid-template-columns: 1fr;
  }

  .employee-document-form .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ---- Portail employe ---- */
.employee-portal-body {
  min-height: 100vh;
}

.employee-portal-nav .nav-user .btn {
  padding: .42rem .8rem;
  color: var(--text);
}

.portal-shell {
  padding-top: 2rem;
  padding-bottom: 3rem;
}

.portal-page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.portal-page-header h1 {
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.25;
}

.portal-page-header p {
  margin: .35rem 0 0;
}

.portal-hero,
.portal-latest,
.portal-panel {
  background: var(--surface);
  border: .5px solid var(--border);
  border-radius: var(--radius-lg);
}

.portal-hero {
  padding: 1.35rem 1.5rem;
  margin-bottom: 1.25rem;
}

.portal-hero-text h1 {
  margin: 0 0 .2rem;
  font-size: 1.35rem;
  line-height: 1.25;
}

.portal-hero-text p {
  margin: 0;
  color: var(--text-muted);
  font-size: .9rem;
}

.portal-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .65rem;
  margin-bottom: 1.25rem;
}

.portal-stat {
  background: var(--surface);
  border: .5px solid var(--border-light);
  border-radius: var(--radius);
  padding: .8rem 1rem;
  text-align: center;
}

.portal-stat strong {
  display: block;
  margin-bottom: .15rem;
  font-size: 1.4rem;
  line-height: 1.2;
}

.portal-stat span {
  display: block;
  color: var(--text-muted);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.portal-latest {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
  padding: .85rem 1rem;
}

.portal-latest .text-muted {
  margin-left: .5rem;
  font-size: .88rem;
}

.portal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: .75rem;
}

.portal-card {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  min-height: 108px;
  padding: 1.05rem 1.15rem;
  background: var(--surface);
  border: .5px solid var(--border);
  border-radius: var(--radius);
  color: inherit;
  text-decoration: none;
  transition: border-color .15s, box-shadow .15s;
}

.portal-card:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow);
  text-decoration: none;
}

.portal-card h3 {
  margin: 0;
  font-size: .98rem;
  line-height: 1.3;
}

.portal-card small {
  color: var(--text-muted);
  font-size: .82rem;
  line-height: 1.45;
}

.portal-select-card button {
  width: fit-content;
  margin-top: auto;
}

.portal-badge,
.portal-status {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}

.portal-badge {
  padding: .12rem .45rem;
}

.portal-badge--warn {
  background: #FEF3C7;
  color: #92400E;
}

.portal-status {
  padding: .16rem .5rem;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-muted);
}

.portal-panel {
  margin-bottom: 1rem;
  padding: 1rem;
}

.portal-panel--flush {
  padding: 0;
  overflow: hidden;
}

.portal-panel h2 {
  margin: 0 0 .5rem;
  font-size: 1.05rem;
}

.portal-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.portal-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
}

.portal-table th,
.portal-table td {
  padding: .75rem 1rem;
  text-align: left;
  vertical-align: middle;
  border-bottom: .5px solid var(--border-light);
}

.portal-table th {
  background: var(--bg);
  color: var(--text-muted);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.portal-table tbody tr:last-child td {
  border-bottom: none;
}

.portal-table .text-right {
  text-align: right;
}

.portal-empty-row {
  color: var(--text-muted);
  text-align: center;
}

.portal-form {
  display: grid;
  gap: .85rem;
}

.portal-form-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .85rem;
  align-items: end;
}

.portal-form-grid .field {
  min-width: 0;
  margin-bottom: 0;
}

.portal-form-grid--hours,
.portal-form-grid--profile {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.portal-form-grid .field--wide {
  grid-column: span 2;
}

.portal-form .input-suffix input {
  width: 100%;
}

.portal-checkbox {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  width: fit-content;
}

.portal-actions {
  display: flex;
  justify-content: flex-end;
  gap: .5rem;
  flex-wrap: wrap;
}

.portal-actions--left {
  justify-content: flex-start;
  margin-top: 1rem;
}

.portal-footer {
  margin-top: 4rem;
  padding: 1.5rem;
  text-align: center;
  font-size: .78rem;
  color: var(--text-muted);
  border-top: .5px solid var(--border-light);
}

@media (max-width: 900px) {
  .portal-stats,
  .portal-form-grid,
  .portal-form-grid--hours,
  .portal-form-grid--profile {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .employee-portal-nav .nav-inner {
    height: auto;
    min-height: 56px;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    padding-top: .6rem;
    padding-bottom: .6rem;
  }

  .employee-portal-nav .nav-links {
    display: flex;
    order: 3;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .employee-portal-nav .nav-user {
    display: flex;
  }

  .portal-page-header,
  .portal-latest {
    align-items: stretch;
    flex-direction: column;
  }

  .portal-latest .text-muted {
    display: block;
    margin: .25rem 0 0;
  }

  .portal-stats,
  .portal-form-grid,
  .portal-form-grid--hours,
  .portal-form-grid--profile {
    grid-template-columns: 1fr;
  }

  .portal-form-grid .field--wide {
    grid-column: auto;
  }

  .portal-table {
    min-width: 0;
  }

  .portal-table thead {
    display: none;
  }

  .portal-table tbody,
  .portal-table tr,
  .portal-table td {
    display: block;
  }

  .portal-table tr {
    padding: .8rem 1rem;
    border-bottom: .5px solid var(--border-light);
  }

  .portal-table tbody tr:last-child {
    border-bottom: none;
  }

  .portal-table td {
    padding: .2rem 0;
    border-bottom: none;
    text-align: left !important;
  }

  .portal-table td[data-label]:not(.portal-empty-row)::before {
    content: attr(data-label) ": ";
    color: var(--text-muted);
    font-size: .74rem;
    font-weight: 700;
    text-transform: uppercase;
  }

  .portal-actions,
  .portal-actions .btn,
  .portal-page-header .btn,
  .portal-select-card button {
    width: 100%;
    justify-content: center;
  }
}
/* ---- RH Contrat form ---- */
.contract-form-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem 1rem;
  align-items: end;
}

.contract-form-grid .field {
  margin-bottom: 0;
}

.contract-form-actions {
  margin-top: 1rem;
  display: flex;
  justify-content: flex-start;
}

@media (max-width: 900px) {
  .contract-form-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .contract-form-grid {
    grid-template-columns: 1fr;
  }

  .contract-form-actions .btn {
    width: 100%;
    justify-content: center;
  }
}
.sd-confirm-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(15, 23, 42, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
}

.sd-confirm-overlay[hidden] {
    display: none;
}

.sd-confirm-modal {
    width: min(440px, 100%);
    background: #fff;
    border: 0.5px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 18px 60px rgba(15, 23, 42, 0.22);
    padding: 1.4rem;
}

.sd-confirm-modal h3 {
    margin: 0 0 0.45rem;
    font-size: 1.15rem;
}

.sd-confirm-modal p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.92rem;
    line-height: 1.45;
}

.sd-confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.65rem;
    margin-top: 1.35rem;
}

/* ============================================================
   RH Module — UX & Accessibilité (ajouts ciblés)
   ============================================================ */

/* Empty state centré — tableaux vides, sections vides */
.rh-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1.5rem;
  text-align: center;
  color: var(--text-muted);
  gap: 0.35rem;
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg);
  margin: 0.5rem 0;
}
.rh-empty__icon {
  font-size: 1.75rem;
  line-height: 1;
  opacity: 0.45;
  margin-bottom: 0.25rem;
}
.rh-empty__title {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text);
}
.rh-empty__sub {
  font-size: 0.82rem;
  max-width: 32ch;
}
/* Version inline dans un <td> */
td.rh-empty-cell {
  padding: 2rem 1rem !important;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.88rem;
}

/* Pagination RH */
.rh-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 1.5rem 0 0;
  flex-wrap: wrap;
}
.rh-pagination__info {
  font-size: 0.85rem;
  color: var(--text-muted);
  padding: 0 0.25rem;
}

/* Status pill employé avec couleur sémantique */
.employee-status-pill[data-status="actif"] {
  background: #e1f5ee;
  color: #0F6E56;
  border-color: #9FE1CB;
}
.employee-status-pill[data-status="inactif"],
.employee-status-pill[data-status="archive"] {
  background: #f1efe8;
  color: #5f5e5a;
  border-color: var(--border);
}

/* Alertes accessibles — role="alert" */
.alert[role="alert"] {
  position: relative;
}

/* Section d'actions fiches de paie — séparation visuelle claire */
.paie-actions-bar {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
}
.paie-actions-bar + .paie-actions-validate {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-light);
}
.paie-actions-validate {
  background: #fff8e1;
  border: 1px solid #f0a500;
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
}
.paie-actions-validate p {
  margin: 0 0 0.75rem;
  font-size: 0.88rem;
  color: #6d4c00;
}

/* Résumé brut/déductions/net — meilleure hiérarchie visuelle */
.paie-amounts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
.paie-amount-card {
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 0.9rem 1rem;
  border-left: 3px solid var(--border);
}
.paie-amount-card--brut { border-left-color: var(--primary); }
.paie-amount-card--deduction { border-left-color: var(--warning); }
.paie-amount-card--net { border-left-color: var(--success); background: #f0fdf4; }
.paie-amount-card--employer { border-left-color: #64748b; }
.paie-amount-card__value {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}
.paie-amount-card--net .paie-amount-card__value { color: #166534; }
.paie-amount-card--deduction .paie-amount-card__value { color: var(--warning); }
.paie-amount-card__label {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 2px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Formulaires inline heures/absences */
.rh-inline-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.85rem;
  align-items: end;
}
.rh-inline-form-grid .field { margin-bottom: 0; }
.rh-inline-form-footer {
  margin-top: 1rem;
  display: flex;
  justify-content: flex-start;
}

@media (max-width: 640px) {
  .paie-actions-bar { flex-direction: column; align-items: stretch; }
  .paie-actions-bar .btn { width: 100%; justify-content: center; }
  .paie-amount-card__value { font-size: 1.2rem; }
  .rh-inline-form-grid { grid-template-columns: 1fr; }
  .rh-inline-form-footer .btn { width: 100%; justify-content: center; }
  .rh-pagination { gap: 0.4rem; }
}
/* ============================================================
   Sidebar — Navigation latérale desktop
   Refonte navigation : remplacement de la barre horizontale
   par une sidebar gauche organisée par modules métier.
   Ajout pur : aucune règle existante n'est modifiée.
   ============================================================ */

/* ── Lien topbar (remplace .nav-user a dans la nouvelle topbar) ──────────── */
.nav-user-link {
  font-size: 0.85rem;
  color: var(--text-muted);
  white-space: nowrap;
  text-decoration: none;
  transition: color 0.15s;
}
.nav-user-link:hover {
  color: var(--danger);
  text-decoration: none;
}

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
.sidebar {
  width: 220px;
  position: fixed;
  top: 56px;                /* colle sous la topbar (height: 56px dans .nav-inner) */
  left: 0;
  bottom: 0;
  background: var(--surface);
  border-right: 0.5px solid var(--border);
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 90;              /* sous .nav (100) et .nav-mobile (150) */
  padding: 0.6rem 0 2rem;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.sidebar::-webkit-scrollbar        { width: 4px; }
.sidebar::-webkit-scrollbar-track  { background: transparent; }
.sidebar::-webkit-scrollbar-thumb  { background: var(--border); border-radius: 2px; }

/* ── Groupe (section métier) ─────────────────────────────────────────────── */
.sidebar-group {
  margin-top: 0.1rem;
}
.sidebar-group-label {
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  padding: 0.85rem 1rem 0.3rem;
  opacity: 0.75;
  user-select: none;
}

/* ── Lien standard ───────────────────────────────────────────────────────── */
.sidebar-link {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.38rem 0.8rem;
  margin: 0.04rem 0.45rem;
  font-size: 0.83rem;
  color: var(--text-muted);
  border-radius: var(--radius);
  text-decoration: none;
  transition: background 0.12s, color 0.12s;
  white-space: nowrap;
  line-height: 1.4;
  cursor: pointer;
  font-family: inherit;
}
.sidebar-link:hover {
  background: var(--bg);
  color: var(--text);
  text-decoration: none;
}
.sidebar-link.active {
  background: #e6f1fb;      /* bleu SwissDash très atténué */
  color: var(--primary);
  font-weight: 600;
}
.sidebar-link svg {
  flex-shrink: 0;
  opacity: 0.6;
}
.sidebar-link.active svg,
.sidebar-link:hover svg { opacity: 1; }

/* ── Dashboard — entrée hors groupe, légèrement plus grande ─────────────── */
/* Séparée des groupes par une ligne basse subtile */
.sidebar-link--dashboard {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--text);
  margin: 0.35rem 0.45rem 0;
  border-radius: var(--radius);
  padding: 0.45rem 0.8rem 0.7rem;
  border-bottom: 0.5px solid var(--border-light);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.sidebar-link--dashboard:hover {
  background: var(--bg);
  color: var(--primary);
}
.sidebar-link--dashboard.active {
  background: #e6f1fb;
  color: var(--primary);
}

/* ── Bouton Timer dans Organisation ──────────────────────────────────────── */
/* Rendu comme un lien mais c'est un <button> — déclenche le popover topbar */
.sidebar-link--timer {
  background: none;
  border: none;
  width: calc(100% - 0.9rem); /* = 100% du parent moins ses marges latérales */
  text-align: left;
  font-style: italic;
  opacity: 0.8;
}
.sidebar-link--timer:hover {
  font-style: normal;
  opacity: 1;
}

/* ── Badge alerte (ex: stock en rupture) ─────────────────────────────────── */
/* Placé à droite du label via margin-left: auto sur le parent flex */
.sidebar-badge {
  background: #ef4444;
  color: white;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 700;
  padding: 0.08rem 0.4rem;
  line-height: 1.4;
  margin-left: auto;
  flex-shrink: 0;
}

/* ── Label de section dans le drawer mobile ──────────────────────────────── */
.nav-mobile-section {
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  padding: 0.85rem 1.5rem 0.3rem;
  background: var(--bg);
  border-bottom: none;
  user-select: none;
}

/* ── Décalage du contenu principal (compense la sidebar fixe) ────────────── */
/* Appliqué uniquement sur desktop (≥ 901px) pour ne pas affecter tablette/mobile */
@media (min-width: 901px) {
  .app-main {
    margin-left: 220px;
  }
}

/* ── Tablette (≤ 900px) : sidebar cachée, hamburger visible ──────────────── */
/*
   Sur tablette, la sidebar n'a plus la place d'être visible en permanence.
   On réutilise le drawer mobile (nav-mobile + nav-burger) déjà fonctionnel.
   Note : les règles ≤ 640px existantes (nav-bottom, scroll lock, etc.) restent
   inchangées et continuent de s'appliquer en plus de celles-ci.
*/
@media (max-width: 900px) {
  .sidebar   { display: none; }  /* cachée — le drawer prend le relais */
  .nav-burger { display: flex; }  /* visible dès la tablette (était ≤ 640px) */
  .nav-inner  { gap: 1rem; }      /* réduit l'écart topbar sur tablette */
}
/* ============================================================
   Navigation v2 — correctifs et nouvelles fonctionnalités
   À AJOUTER à la toute fin de app.css (après le bloc sidebar déjà ajouté).
   ============================================================ */

/* ── Hamburger : toujours visible (toggle sidebar desktop + drawer mobile) ── */
/* Remplace le display:none par défaut de l'ancien hamburger */
.nav-burger {
  display: flex !important;
  margin-left: 0;           /* reset de l'ancien margin-left:auto */
  flex-shrink: 0;
  order: -1;                /* garantit qu'il reste en premier dans le flex */
  color: var(--text-muted);
  transition: color 0.15s;
}
.nav-burger:hover { color: var(--text); }

/* Icône "sidebar fermée" : légèrement différente visuellement */
.nav-burger.is-sidebar-closed span:nth-child(1) { width: 14px; }
.nav-burger.is-sidebar-closed span:nth-child(3) { width: 18px; }

/* ── Groupe droite de la topbar ─────────────────────────────────────────── */
.nav-right {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
}

/* ── Bouton Timer (topbar) ─────────────────────────────────────────────── */
.nav-timer-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.28rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-muted);
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.nav-timer-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: #f0f6ff;
}

/* ── Liens "Mon compte" / "Connexion" (topbar) ─────────────────────────── */
/* Remplace l'ancienne .nav-user-link — meilleur style */
.nav-user-link {
  font-size: 0.83rem;
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
  text-decoration: none;
  padding: 0.28rem 0.55rem;
  border-radius: var(--radius);
  transition: color 0.15s, background 0.15s;
}
.nav-user-link:hover {
  color: var(--text);
  background: var(--bg);
  text-decoration: none;
}

/* ── Badge "Espace" (non-propriétaire) ─────────────────────────────────── */
.nav-espace-badge {
  font-size: 0.72rem;
  background: #fef3c7;
  color: #92400e;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  font-weight: 600;
  border: 0.5px solid #fcd34d;
  cursor: default;
  white-space: nowrap;
}

/* ── Sidebar : transition douce ─────────────────────────────────────────── */
.sidebar {
  transition: transform 0.22s ease, width 0.22s ease;
}
.app-main {
  transition: margin-left 0.22s ease;
}

/* ── Sidebar repliée (classe ajoutée sur <body> par JS) ─────────────────── */
body.sidebar-collapsed .sidebar {
  transform: translateX(-220px);
  pointer-events: none;   /* évite les clics accidentels pendant l'animation */
}
@media (min-width: 901px) {
  body.sidebar-collapsed .app-main {
    margin-left: 0;
  }
}

/* ── Groupes repliables : en-tête cliquable ──────────────────────────────── */
.sidebar-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  /* Reprend le style du label */
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  padding: 0.85rem 1rem 0.3rem;
  opacity: 0.75;
  user-select: none;
  transition: opacity 0.12s;
}
.sidebar-group-header:hover { opacity: 1; }
.sidebar-group--active .sidebar-group-header { opacity: 1; }

/* Chevron animé */
.sidebar-chevron {
  flex-shrink: 0;
  opacity: 0.55;
  transition: transform 0.2s ease;
  margin-left: 0.25rem;
}
.sidebar-group--active .sidebar-chevron { opacity: 0.8; }

/* État replié : chevron tourné + body caché */
.sidebar-group--collapsed .sidebar-chevron {
  transform: rotate(-90deg);
}
.sidebar-group--collapsed .sidebar-group-body {
  display: none;
}

/* ── Supprime le doublon .sidebar-group-label (remplacé par -header) ──── */
/* (la classe .sidebar-group-label-text est maintenant dans le bouton) */
.sidebar-group-label-text {
  /* identique à l'ancien .sidebar-group-label, mais en <span> dans le <button> */
}

/* ── Mobile / tablette : cacher la nav-right de la topbar ───────────────── */
/* Timer, Mon compte, badge Espace sont dans le drawer mobile — inutiles en topbar */
@media (max-width: 900px) {
  .nav-right { display: none; }
  /* Le hamburger est déjà forcé display:flex via la règle globale ci-dessus */
}

/* ── Mobile (≤ 640px) : ajustements topbar ──────────────────────────────── */
@media (max-width: 640px) {
  /* nav-inner : gap réduit, padding déjà géré en inline */
  .nav-inner { gap: 0.5rem; }
  /* nav-brand prend l'espace restant sur mobile */
  .nav-brand  { flex: 1; }
}
/* ============================================================
   Navigation v3 — correctifs visuels
   À AJOUTER à la toute fin de app.css (après le bloc v2).
   ============================================================ */

/* ── Brand SwissDash : deux lignes (app name + workspace name) ──────────── */
.nav-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  text-decoration: none;
  line-height: 1;
}
.nav-brand:hover { text-decoration: none; }

.nav-brand-app {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.nav-brand-workspace {
  font-size: 0.68rem;
  color: var(--text-muted);
  font-weight: 500;
  line-height: 1.3;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Contrainte de largeur de main : évite les débordements horizontaux ─── */
/*
   Problème : sur /audit (et d'autres pages avec grandes tables), le contenu
   dépasse la largeur de l'écran car main n'a pas de contrainte explicite.
   Solution : limiter main à l'espace disponible (viewport - sidebar)
   et activer le scroll horizontal à l'intérieur si nécessaire.
*/
@media (min-width: 901px) {
  .app-main {
    max-width: calc(100vw - 220px);
    box-sizing: border-box;
  }
  body.sidebar-collapsed .app-main {
    max-width: 100vw;
  }
}

/* Tables larges : scroll horizontal plutôt que débordement ──────────────── */
/* S'applique aux wrappers de tables existants dans les vues */
.data-table-wrap,
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── Ajustement mobile topbar (gap déjà override en inline sur nav-inner) ── */
@media (max-width: 640px) {
  .nav-brand-workspace { display: none; } /* sur très petit écran : juste SwissDash */
}