/* global.css — Base resets and shared styles */

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

html { font-size: var(--km-font-size, 16px); }

body {
  font-family: var(--km-font, "Segoe UI", system-ui, sans-serif);
  background: var(--bg);
  color: var(--text);
  transition: background var(--km-trans), color var(--km-trans);
  overflow-x: hidden;
  line-height: var(--km-line-height, 1.5);
  letter-spacing: var(--km-letter-spacing, 0em);
}

button  { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; color: var(--text); }
a { color: inherit; text-decoration: none; }

img { display: block; max-width: 100%; }

/* Scrollbar — hidden until hover, expands when grabbing */
:root {
  --km-scrollbar-color: var(--border);
  --km-scrollbar-color-hover: var(--text-2);
}
* { scrollbar-width: thin; scrollbar-color: transparent transparent; }
*:hover { scrollbar-color: var(--km-scrollbar-color) transparent; }

/* Track is 12px wide (hover target), thumb uses border to appear thin */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: transparent;
  border: 4px solid transparent;
  background-clip: padding-box;
  border-radius: 99px;
  transition: background .15s, border .15s;
}
/* Show thin thumb on container hover */
*:hover::-webkit-scrollbar-thumb {
  background-color: var(--km-scrollbar-color);
  border: 4px solid transparent;
  background-clip: padding-box;
}
/* Expand thumb when hovering the bar itself */
::-webkit-scrollbar-thumb:hover {
  background-color: var(--km-scrollbar-color-hover) !important;
  border: 2px solid transparent !important;
  background-clip: padding-box;
}

/* Focus ring */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Utility */
.km-hidden   { display: none !important; }
.km-spacer   { flex: 1; }
.km-ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Sortable table headers ── */
.km-th-sort { cursor: pointer; user-select: none; white-space: nowrap; }
.km-th-sort::after { content: '⇅'; margin-left: 5px; opacity: .3; font-size: 10px; }
.km-th-sort[data-sort-dir="asc"]::after  { content: '▲'; opacity: .85; color: var(--accent); }
.km-th-sort[data-sort-dir="desc"]::after { content: '▼'; opacity: .85; color: var(--accent); }

/* Div-based list header sort (admin user list) */
.km-adm-hcol.km-th-sort { cursor: pointer; }
.km-adm-hcol.km-th-sort:hover { color: var(--accent); }

/* ── Fonction colour badges — global (used by kmFonctionBadge() in colors.js) ── */
.km-fn-badge { display:inline-block; font-size:10px; padding:2px 8px; border-radius:999px;
               font-weight:600; white-space:nowrap; border:1px solid transparent; line-height:1.6; }
.km-fn-badge.fn-com { background:color-mix(in srgb,#3b82f6 15%,var(--surface)); color:#1e40af; border-color:color-mix(in srgb,#3b82f6 30%,var(--surface)); }
.km-fn-badge.fn-sup { background:color-mix(in srgb,#8b5cf6 15%,var(--surface)); color:#5b21b6; border-color:color-mix(in srgb,#8b5cf6 30%,var(--surface)); }
.km-fn-badge.fn-res { background:color-mix(in srgb,#10b981 15%,var(--surface)); color:#065f46; border-color:color-mix(in srgb,#10b981 30%,var(--surface)); }
.km-fn-badge.fn-dir { background:color-mix(in srgb,#ec4899 15%,var(--surface)); color:#9d174d; border-color:color-mix(in srgb,#ec4899 30%,var(--surface)); }
.km-fn-badge.fn-liv { background:color-mix(in srgb,#f59e0b 15%,var(--surface)); color:#92400e; border-color:color-mix(in srgb,#f59e0b 30%,var(--surface)); }
.km-fn-badge.fn-tec { background:color-mix(in srgb,#06b6d4 15%,var(--surface)); color:#0e7490; border-color:color-mix(in srgb,#06b6d4 30%,var(--surface)); }
.km-fn-badge.fn-adm { background:color-mix(in srgb,#ef4444 15%,var(--surface)); color:#991b1b; border-color:color-mix(in srgb,#ef4444 30%,var(--surface)); }
.km-fn-badge.fn-ope { background:color-mix(in srgb,#64748b 15%,var(--surface)); color:#334155; border-color:color-mix(in srgb,#64748b 30%,var(--surface)); }
.km-fn-badge.fn-aut { background:var(--surface-2); color:var(--text-2); border-color:var(--border); }