/* Espace Administrateur, sélecteur d’espace et Historique. Mêmes couleurs que la charte : vert sauge, vert profond, miel. */

/* ---------- sélecteur d’espace (Salarié · Direction · Administrateur) ---------- */
.space-switch { display: inline-flex; border: 2px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface); }
.space-btn { appearance: none; border: 0; background: var(--surface); color: var(--ink); font: inherit; font-weight: 650; font-size: .9rem; padding: 6px 12px; min-height: 40px; cursor: pointer; }
.space-btn + .space-btn { border-left: 2px solid var(--line); }
.space-btn:hover:not([aria-pressed=true]) { background: var(--surface-2); }
.space-btn[aria-pressed=true] { background: var(--brand); color: var(--on-brand); cursor: default; }
.dir-tag.sys-tag { background: var(--honey); border-color: var(--honey-strong); color: var(--on-honey); }

/* ---------- pastilles ---------- */
.badge.sys-onoff.on { background: var(--ok-bg); color: var(--ok); }
.badge.sys-onoff.off { background: var(--surface-2); color: var(--muted); }
.badge.sys-role.r-emp { background: var(--surface-2); color: var(--ink); }
.badge.sys-role.r-dir { background: var(--k-rest-bg); color: var(--k-rest); }
.badge.sys-role.r-adm { background: var(--honey); color: var(--on-honey); }
.badge.sys-role.r-sys { background: var(--k-other-bg); color: var(--k-other); }
.badge.sys-role.r-anon { background: var(--warn-bg); color: var(--warn); }
.badge.sys-me { margin-left: 6px; }
.badge.sys-match { margin-left: 6px; font-size: .72rem; }
.badge.sys-match.actor { background: var(--honey); color: var(--on-honey); }
.badge.sys-match.target { background: var(--k-rest-bg); color: var(--k-rest); }
.badge.sys-op.create { background: var(--ok-bg); color: var(--ok); }
.badge.sys-op.update { background: var(--warn-bg); color: var(--warn); }
.badge.sys-op.delete { background: var(--bad-bg); color: var(--bad); }
.sys-warn { color: var(--warn); font-weight: 650; }
.notice.ok { background: var(--ok-bg); color: var(--ok); }
.sys-list { margin: 6px 0 0; padding-left: 20px; }
tr.inactive td { opacity: .62; }
tr.fail td { background: #fdf3f2; }

/* ---------- interrupteur ACTIVÉ / DÉSACTIVÉ ---------- */
.sys-switch { appearance: none; background: none; border: 0; padding: 4px 2px; min-height: 40px; display: inline-flex; align-items: center; gap: 8px; font: inherit; cursor: pointer; color: var(--ink); }
.sys-switch:disabled { opacity: .45; cursor: not-allowed; }
.sys-switch .track { position: relative; width: 46px; height: 26px; border-radius: 999px; background: #c9d0be; border: 2px solid var(--line-strong); transition: background .15s; flex: none; }
.sys-switch .knob { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(31, 40, 29, .35); transition: transform .15s; }
.sys-switch.on .track { background: var(--brand); border-color: var(--brand-strong); }
.sys-switch.on .knob { transform: translateX(20px); }
.sys-switch .sw-text { font-size: .74rem; font-weight: 800; letter-spacing: .05em; min-width: 5.6em; text-align: left; }
.sys-switch.on .sw-text { color: var(--ok); }
.sys-switch:focus-visible .track { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .sys-switch .track, .sys-switch .knob { transition: none; } }

/* ---------- utilisateurs, structures ---------- */
.sys-secret { font: 700 1.6rem ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: .12em; text-align: center; background: var(--surface-2); border: 2px dashed var(--sage); border-radius: 12px; padding: 16px 10px; user-select: all; overflow-wrap: anywhere; }
table.sys-users td { vertical-align: middle; }
table.sys-users td.actions-td { min-width: 15em; }
table.sys-users td .actions-cell { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
table.sys-users td .actions-cell .btn { min-height: 38px; padding: 6px 8px; font-size: .84rem; }
table.sys-users td .actions-cell .btn:last-child:nth-child(odd) { grid-column: 1 / -1; }
table.sys-users th:nth-child(4), table.sys-users td:nth-child(4) { width: 1%; white-space: nowrap; }
.sys-switch .sw-text { white-space: nowrap; }

/* ---------- Historique ---------- */
.sys-search { display: flex; gap: 12px; flex-wrap: wrap; align-items: end; }
.sys-search .field { flex: 1 1 220px; }
.sys-search .field.grow { flex: 3 1 320px; }
.sys-filters summary { font-weight: 700; cursor: pointer; min-height: 32px; }
.sys-filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 12px 0; }
.sys-stamp { display: grid; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* l’Historique a beaucoup de colonnes : on lui laisse plus de largeur qu’aux autres écrans */
.app.wide:has(table.sys-history), .app.wide:has(table.sys-users) { max-width: 1400px; }
table.sys-history th, table.sys-history td { font-size: .82rem; padding: 7px 7px; vertical-align: top; }
table.sys-history td:nth-child(6) { min-width: 10em; }
table.sys-history td .sys-warn { font-weight: 500; }
table.sys-history td.actions-td { padding-left: 4px; padding-right: 8px; }
table.sys-history td.actions-td .btn { min-height: 34px; padding: 4px 10px; }
table.sys-history td code { white-space: nowrap; }
table.sys-history td .badge { white-space: nowrap; }
table.sys-history td code, .sys-dl code { font: .85em ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.sys-desc { background: var(--surface-2); border-radius: 12px; padding: 10px 12px; margin: 12px 0; }
.sys-sheet { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; margin: 14px 0 18px; }
.sys-sheet h3 { color: var(--brand); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; }
.sys-dl { margin: 0; display: grid; grid-template-columns: 1fr; gap: 0; }
.sys-dl dt { color: var(--muted); font-size: .8rem; margin-top: 6px; }
.sys-dl dd { margin: 0; overflow-wrap: anywhere; }
.sys-change { display: grid; gap: 8px; }
table.sys-diff { font-size: .9rem; }
table.sys-diff th[scope=row] { background: none; font-weight: 650; white-space: normal; width: 30%; }
table.sys-diff td { width: 35%; overflow-wrap: anywhere; }
table.sys-diff tr.chg td.before { background: var(--bad-bg); color: var(--bad); }
table.sys-diff tr.chg td.after { background: var(--ok-bg); color: var(--ok); font-weight: 700; }
table.sys-diff tr.same td, table.sys-diff tr.same th { color: var(--muted); }
.sys-same summary { cursor: pointer; color: var(--muted); font-weight: 650; margin: 4px 0; }
.sys-hash { word-break: break-all; }
.sys-verify:empty { display: none; }
/* Fiche utilisateur (Espace Salarié / Espace Direction) : liste de crèches à cocher, et sections repérables dans le formulaire. */
.check-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 4px 12px; background: var(--surface-2); border-radius: 12px; padding: 10px 12px; margin: 4px 0 14px; }
form.stack h3 { color: var(--brand); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; margin: 18px 0 2px; border-top: 1px solid var(--border); padding-top: 14px; }
form.stack h3:first-of-type { border-top: none; padding-top: 0; }
/* Permissions Direction (catalogue exhaustif) : rubriques repliables, avec leurs propres actions « Tout cocher / décocher ». */
.perm-section { border: 1px solid var(--border); border-radius: 12px; margin: 8px 0; padding: 4px 12px; background: var(--surface); }
.perm-section > summary { cursor: pointer; font-weight: 700; min-height: 40px; display: flex; align-items: center; }
.perm-section[open] > summary { border-bottom: 1px solid var(--border); margin-bottom: 8px; }
.perm-section .perm-group legend { font-weight: 650; color: var(--muted); }
.perm-section .row { margin: 6px 0; }
@media (max-width: 760px) {
  .space-btn { padding: 6px 9px; font-size: .84rem; }
  table.sys-history td.actions-td .btn { width: 100%; }
}