/* Aligné sur le pattern cost/ · mêmes tokens, même rythme visuel */
  .content { background: var(--surface-soft); }

  /* Toolbar */
  .toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 24px; flex-wrap: wrap; }
  .toolbar input[type="search"],
  .toolbar select {
    border: 1px solid var(--hairline);
    background: var(--input-bg);
    border-radius: var(--r-md);
    padding: 0 16px;
    height: 44px;
    font-size: 14px;
    color: var(--ink);
    outline: none;
    font-family: inherit;
    transition: border-color 0.15s;
  }
  .toolbar input[type="search"] { min-width: 280px; }
  .toolbar input[type="search"]:focus,
  .toolbar select:focus { border-color: var(--primary); }
  .toolbar .spacer { flex: 1; }
  .btn {
    font-family: inherit;
    font-size: 14px; font-weight: 600;
    height: 44px; padding: 0 20px;
    display: inline-flex; align-items: center; gap: 6px;
    border-radius: var(--r-pill);
    border: none;
    background: var(--surface-strong);
    color: var(--ink); cursor: pointer;
    transition: background 0.15s;
  }
  .btn:hover { background: var(--hairline); }
  .btn.primary { background: var(--primary); color: var(--on-primary); }
  .btn.primary:hover { background: var(--primary-active); }
  .btn.danger { background: transparent; color: var(--semantic-down); border: 1px solid var(--hairline); }
  .btn.danger:hover { background: var(--surface-strong); }

  /* Table */
  .table-card {
    background: var(--canvas);
    border-radius: var(--r-xl);
    border: none;
    box-shadow: var(--shadow);
    overflow: hidden;
  }
  table.employees { width: 100%; border-collapse: collapse; font-size: 13px; }
  /* EN-TÊTE · il était `--surface-soft`, c'est-à-dire EXACTEMENT la couleur du
     fond de page : la ligne des titres se confondait avec le vide autour de la
     carte. Une première correction l'a passé en NOIR · trop dur, une bande qui
     écrase le tableau qu'elle annonce.
     Il prend maintenant `--surface-strong` · la teinte de la pastille des
     onglets en haut et des ronds du rail. Assez pour marquer la ligne, assez
     doux pour ne pas crier, et déjà vu ailleurs dans la plateforme.
     Paire AUTO-INVERSE (`--surface-strong` + `--ink`) · les deux basculent
     ensemble en mode sombre, donc rien à surcharger. */
  table.employees th {
    font-size: var(--text-caption); font-weight: var(--weight-semibold);
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--ink);
    padding: 12px 14px;
    text-align: left;
    background: var(--surface-strong);
    border-bottom: none;
    user-select: none;
  }
  /* En-têtes triables · cliquables avec flèche d'ordre.
     L'icône ⇅ est TOUJOURS visible (en gris pâle) pour signaler que la
     colonne est triable. Au hover : plus foncée. Active : ▲ ou ▼ en bleu. */
  table.employees th[data-sort] {
    cursor: pointer;
    transition: color 0.15s;
    white-space: nowrap;
  }
  table.employees th[data-sort] { color: var(--body); }
  table.employees th[data-sort]:hover { color: var(--ink); }
  table.employees th[data-sort].sort-active { color: var(--ink); }
  table.employees th[data-sort] .sort-arrow {
    display: inline-block;
    margin-left: 4px;
    color: var(--muted);
    font-size: var(--text-caption);
    line-height: 1;
    /* baseline + top négatif · les glyphs ⇅ ▲ ▼ ont un baseline naturel
       trop bas dans la plupart des fonts, on les remonte de 1px pour les
       aligner avec le texte en majuscules de l'en-tête. */
    vertical-align: baseline;
    position: relative;
    top: -1px;
    opacity: 0.55;
    transition: opacity 0.15s, color 0.15s;
  }
  table.employees th[data-sort] .sort-arrow::after { content: '⇅'; }
  table.employees th[data-sort]:hover .sort-arrow { opacity: 0.9; color: var(--ink); }
  table.employees th[data-sort].sort-active .sort-arrow {
    color: var(--primary);
    opacity: 1;
  }
  table.employees th[data-sort].sort-active.sort-asc  .sort-arrow::after { content: '▲'; }
  table.employees th[data-sort].sort-active.sort-desc .sort-arrow::after { content: '▼'; }

  /* Cellule "Type de travail" · chaque item sur sa propre ligne, line-height
     reduit pour rester compact (2-3 items rentrent sans étirer la rangée). */
  table.employees td.work-types-cell { line-height: 1.4; padding-top: 8px; padding-bottom: 8px; }
  table.employees td.work-types-cell > div { font-size: 12px; }

  /* Onglets de catégorie dans le drawer "Taux par poste" */
  .rates-tabs {
    display: flex; gap: 4px; flex-wrap: wrap;
    border-bottom: 1px solid var(--hairline);
    margin-bottom: 16px;
    padding: 0 4px;
  }
  .rates-tab {
    background: transparent; border: none; cursor: pointer;
    padding: 10px 16px;
    font-size: 13px; font-weight: 500;
    color: var(--muted);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.15s, border-color 0.15s;
    font-family: inherit;
  }
  .rates-tab:hover { color: var(--ink); }
  .rates-tab.active {
    color: var(--ink); font-weight: 600;
    border-bottom-color: var(--primary);
  }
  .rates-tab .count {
    font-size: 11px; font-family: var(--font-display);
    font-variant-numeric: tabular-nums;
    color: var(--muted-soft);
    margin-left: 6px;
  }
  .rates-tab.active .count { color: var(--primary); }

  /* Onglets de page · Employés / Sous-traitants. Place tout en haut, sous le topbar. */
  .page-tabs {
    display: flex; gap: 4px;
    border-bottom: 1px solid var(--hairline);
    margin-bottom: 24px;
    padding: 0 4px;
  }
  .page-tab {
    background: transparent; border: none; cursor: pointer;
    padding: 12px 20px;
    font-size: 14px; font-weight: 500;
    color: var(--muted);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.15s, border-color 0.15s;
    font-family: inherit;
  }
  .page-tab:hover { color: var(--ink); }
  .page-tab.active {
    color: var(--ink); font-weight: 600;
    border-bottom-color: var(--primary);
  }
  table.employees td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--hairline-soft);
    color: var(--body);
    vertical-align: middle;
  }
  table.employees tbody tr { transition: background 0.1s; cursor: pointer; }
  table.employees tbody tr:hover { background: var(--surface-soft); }
  table.employees tbody tr:last-child td { border-bottom: none; }
  .num { font-family: var(--font-display); font-variant-numeric: tabular-nums; font-size: 12px; color: var(--muted); }
  .name { font-weight: 600; color: var(--ink); }
  /* Quand on ajoute un .presence-dot dans le nom : positionnement inline a gauche du nom */
  .name-with-presence {
    display: inline-flex; align-items: center; gap: 8px;
  }
  .name-with-presence .presence-dot {
    position: static;
    width: 8px; height: 8px;
    border: none;
    flex-shrink: 0;
  }
  .muted { color: var(--muted-soft); font-size: 12px; }
  .rate { text-align: right; font-family: var(--font-display); font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); }
  .rate .unit { font-weight: 400; color: var(--muted); margin-left: 2px; }
  .col-actions { width: 130px; text-align: right; white-space: nowrap; }
  .btn-edit {
    font-family: inherit;
    font-size: 12px; font-weight: 600;
    padding: 6px 14px; border-radius: var(--r-pill);
    border: 1px solid var(--hairline);
    background: var(--canvas);
    color: var(--body); cursor: pointer;
    transition: all 0.15s;
  }
  .btn-edit:hover { border-color: var(--primary); color: var(--primary); }
  /* Kebab menu · bouton 3 points discret a cote du bouton Modifier. Visible
     seulement si admin a la permission. Click ouvre un dropdown contextuel. */
  .btn-kebab {
    font-family: inherit;
    font-size: 18px; line-height: 1; font-weight: 600;
    padding: 4px 9px; border-radius: var(--r-pill);
    border: 1px solid var(--hairline);
    background: var(--canvas);
    color: var(--muted); cursor: pointer;
    transition: all 0.15s;
    margin-left: 4px;
    vertical-align: middle;
  }
  .btn-kebab:hover { border-color: var(--primary); color: var(--primary); }
  /* Dropdown du kebab menu · appendu au body, position fixed */
  .kebab-menu {
    background: var(--canvas);
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    padding: 4px;
    z-index: 1000;
    min-width: 260px;
  }
  .kebab-item {
    display: flex; align-items: center; gap: 8px;
    width: 100%;
    padding: 8px 10px;
    background: transparent; border: none;
    text-align: left;
    font-family: inherit; font-size: 13px;
    color: var(--ink);
    cursor: pointer;
    border-radius: var(--r-sm);
    transition: background 0.12s;
  }
  .kebab-item:hover { background: var(--primary-soft); color: var(--primary); }
  .pill {
    display: inline-block; font-size: var(--text-caption); font-weight: 600;
    padding: 2px 9px; border-radius: var(--r-pill);
    text-transform: uppercase; letter-spacing: 0.05em;
  }
  .pill.active     { background: var(--surface-strong); color: var(--semantic-up); }
  .pill.inactive   { background: var(--surface-strong); color: var(--semantic-down); }
  .pill.on_leave   { background: rgba(244,176,0,0.15); color: var(--accent-yellow); }

  .empty {
    text-align: center; padding: 60px 20px;
    color: var(--muted); font-size: 13px;
  }
  .empty-strong { color: var(--ink); font-weight: 600; margin-bottom: 4px; }

  /* Drawer · réutilise les classes .drawer-* de assets/styles.css.
     Override uniquement la largeur (75vw au lieu du 50vw par défaut)
     pour accueillir le formulaire long en 2 colonnes. */
  .drawer-panel { width: clamp(720px, 75vw, 1400px); }
  @media (max-width: 768px) {
    .drawer-panel { width: 100vw; }
  }

  /* Form · 2 colonnes parallèles (Identité+Adresse | Métiers+Emploi+Notes) */
  .form-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
    align-items: start;
  }
  @media (max-width: 1023px) {
    .form-cols { grid-template-columns: 1fr; gap: var(--space-base); }
  }
  .form-col {
    display: flex;
    flex-direction: column;
    gap: var(--space-base);
  }
  .field-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm);
  }
  .field-grid .field { grid-column: span 1; }
  .field-grid .field.full { grid-column: 1 / -1; }
  @media (max-width: 600px) {
    .field-grid { grid-template-columns: 1fr; }
    .field-grid .field { grid-column: 1 / -1; }
  }
  .field label {
    display: block;
    font-size: 12px; font-weight: 500;
    color: var(--muted);
    margin-bottom: 4px;
  }
  .field label .req { color: var(--semantic-down); }
  .field input,
  .field select,
  .field textarea {
    width: 100%;
    border: 1px solid var(--hairline);
    background: var(--input-bg);
    border-radius: var(--r-md);
    padding: 8px 12px;
    font-size: 13px; font-family: var(--font-body); color: var(--ink);
    outline: none;
    transition: border-color 0.15s;
  }
  .field input:focus,
  .field select:focus,
  .field textarea:focus { border-color: var(--primary); }
  .field textarea { resize: vertical; min-height: 90px; }
  /* Inputs numériques / IDs en mono (DESIGN.md: chiffres tabulaires en mono) */
  .field input[type="number"],
  .field input[name="employee_number"] {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
  }
  /* Masquer les flèches des champs numériques · on saisit le chiffre directement.
     Couvre les inputs dans .field ET les inputs autonomes (.rate-input) du
     drawer "Taux par poste". */
  .field input[type="number"]::-webkit-outer-spin-button,
  .field input[type="number"]::-webkit-inner-spin-button,
  input.rate-input::-webkit-outer-spin-button,
  input.rate-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
  .field input[type="number"],
  input.rate-input { -moz-appearance: textfield; }

  /* ============================================================
     Multi-select compact pour Rôles punch + Types de travail.
     Un bouton trigger + dropdown avec cases à cocher.
     ============================================================ */
  .multi-select { position: relative; }
  .multi-select-trigger {
    width: 100%;
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    border: 1px solid var(--hairline);
    background: var(--input-bg);
    border-radius: var(--r-md);
    padding: 8px 12px;
    font-size: 13px; font-family: var(--font-body); color: var(--ink);
    cursor: pointer; text-align: left;
    transition: border-color 0.15s;
  }
  .multi-select-trigger:hover { border-color: var(--muted-soft); }
  .multi-select.is-open .multi-select-trigger { border-color: var(--primary); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
  .multi-select-label { flex: 1; color: var(--muted); }
  .multi-select-label.has-value { color: var(--ink); }
  .multi-select-arrow {
    color: var(--muted); font-size: 11px; flex-shrink: 0;
    transition: transform 0.15s;
  }
  .multi-select.is-open .multi-select-arrow { transform: rotate(180deg); }
  .multi-select-dropdown {
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--canvas);
    border: 1px solid var(--primary);
    border-top: none;
    border-bottom-left-radius: var(--r-md);
    border-bottom-right-radius: var(--r-md);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    z-index: 50;
    display: none;
    max-height: 220px; overflow-y: auto;
    padding: 4px;
  }
  .multi-select.is-open .multi-select-dropdown { display: block; }
  .check-item {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 10px;
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: background 0.12s;
    user-select: none;
  }
  .check-item:hover { background: var(--surface-soft); }
  .check-item.is-primary { background: var(--primary-soft); }
  .check-item input[type="checkbox"] {
    margin: 0; cursor: pointer; flex-shrink: 0;
    width: 15px; height: 15px;
    accent-color: var(--primary);
  }
  .check-item .check-label { flex: 1; font-size: 13px; color: var(--ink); line-height: 1.3; }
  .check-item .check-meta {
    font-size: var(--text-caption); color: var(--muted);
    padding: 1px 5px; border-radius: var(--r-pill);
    background: var(--surface-strong);
    text-transform: uppercase; letter-spacing: 0.04em; flex-shrink: 0;
  }
  .check-item .check-meta.commercial { background: var(--primary-soft); color: var(--primary); }
  .check-item .check-meta.residentiel { background: rgba(244,176,0,0.2); color: #9a6a00; }
  .btn-primary-star {
    background: none; border: none; color: var(--muted-soft);
    font-size: 13px; cursor: pointer; padding: 2px 6px;
    border-radius: var(--r-sm); flex-shrink: 0;
    transition: color 0.12s, background 0.12s;
  }
  .btn-primary-star:hover { color: var(--accent-yellow); background: var(--surface-strong); }
  .check-item.is-primary .btn-primary-star { color: var(--accent-yellow); }
  .check-item:not(.has-check) .btn-primary-star { visibility: hidden; }

  /* Accès à l'app */
  .access-toggle {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    background: var(--input-bg);
    cursor: pointer;
    font-size: 13px; color: var(--ink);
    user-select: none;
  }
  .access-toggle:hover { border-color: var(--muted-soft); }
  .access-toggle input { accent-color: var(--primary); cursor: pointer; }
  .access-hint {
    font-size: 12px; color: var(--muted);
    background: var(--surface-soft);
    padding: 8px 12px;
    border-radius: var(--r-sm);
    margin-bottom: var(--space-sm);
    line-height: 1.45;
  }
  .access-hint strong { color: var(--ink); font-weight: 600; }
  .access-hint code {
    font-family: var(--font-mono);
    font-size: 11px;
    background: var(--canvas);
    border: 1px solid var(--hairline);
    padding: 1px 5px;
    border-radius: var(--r-xs);
    color: var(--ink);
  }
  /* Champ mot de passe avec bouton œil intégré */
  .password-wrap { position: relative; }
  .password-wrap input { padding-right: 40px; }
  .password-toggle {
    position: absolute;
    right: 6px; top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--muted);
    cursor: pointer;
    padding: 6px;
    display: inline-flex;
    align-items: center;
    border-radius: var(--r-sm);
    transition: color 0.15s, background 0.15s;
  }
  .password-toggle:hover { color: var(--ink); background: var(--surface-soft); }
  .password-toggle svg { width: 18px; height: 18px; display: block; }

  /* Accordéons pour les sections Punch (Rôles + Types de travail) */
  .section-collapsible .section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
    margin: 0;
  }
  .section-collapsible .section-head .chevron {
    font-size: 14px;
    color: var(--muted);
    display: inline-block;
    transition: transform 0.2s;
    flex-shrink: 0;
  }
  .section-collapsible.is-open .section-head .chevron {
    transform: rotate(90deg);
  }
  .section-body {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.35s ease;
  }
  .section-collapsible.is-open .section-body {
    max-height: 2000px;
  }

  .toast {
    position: fixed; bottom: 24px; right: 24px;
    background: var(--ink); color: var(--canvas);
    padding: 12px 18px; border-radius: var(--r-md);
    font-size: 13px; font-weight: 600;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    z-index: 300;
    opacity: 0; transform: translateY(10px);
    transition: all 0.2s;
    /* JAMAIS capter les clics · meme a opacity:0 un element fixe reste
       dans le flux des evenements et bloquait le bouton Enregistrer du
       drawer (tous deux en bas a droite). Bug "le 2e save ne fait rien". */
    pointer-events: none;
  }
  .toast.show { opacity: 1; transform: translateY(0); }
  .toast.error { background: var(--semantic-down); }

  .no-access {
    padding: 60px 20px;
    text-align: center; color: var(--muted);
  }
  .no-access h2 { color: var(--ink); margin-bottom: 8px; font-size: 18px; }