/* ============================================================
   Nicoka atomic components — Employee bundle
   Server-rendered HTML primitives for the "Mon Profil" redesign.
   Depends on tokens.css (must be loaded first).
   ============================================================ */


/* ============================================================
   Chip
   ------------------------------------------------------------
   HTML:
     <span class="nk-chip nk-chip--{tone} nk-chip--{size} [nk-chip--solid]">
         [<span class="nk-chip__dot"></span>] Label
     </span>

   Modifiers:
     tone:  --neutral | --success | --accent          (default: neutral)
     size:  --sm | --md                               (default: md)
     solid: --solid                                   (filled vs ghost)
   ============================================================ */
.nk-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    font-family: var(--nk-font-sans);
    font-weight: var(--nk-fw-medium);
    line-height: 1;
    white-space: nowrap;
    border: 1px solid transparent;
}

.nk-chip--sm {
    padding: 2px 8px;
    font-size: var(--nk-fs-label);
}
.nk-chip--md {
    padding: 4px 12px;
    font-size: var(--nk-fs-body-sm);
}

/* Tone: neutral (ghost is default) */
.nk-chip--neutral {
    background: var(--nk-panel);
    color: var(--nk-ink-2);
    border-color: var(--nk-rule);
}
.nk-chip--neutral.nk-chip--solid {
    background: var(--nk-ink);
    color: var(--nk-panel);
    border-color: var(--nk-ink);
}

/* Tone: success */
.nk-chip--success {
    background: color-mix(in oklab, var(--nk-success) 12%, var(--nk-panel));
    color: var(--nk-success);
    border-color: color-mix(in oklab, var(--nk-success) 30%, transparent);
}
.nk-chip--success.nk-chip--solid {
    background: var(--nk-success);
    color: white;
    border-color: var(--nk-success);
}

/* Tone: accent */
.nk-chip--accent {
    background: var(--nk-accent-soft);
    color: var(--nk-accent-ink);
    border-color: color-mix(in oklab, var(--nk-accent) 25%, transparent);
}
.nk-chip--accent.nk-chip--solid {
    background: var(--nk-accent);
    color: white;
    border-color: var(--nk-accent);
}

/* Status dot prefix (e.g. "● Actif") */
.nk-chip__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    display: inline-block;
}


/* ============================================================
   Dot — small colour swatch (leave type, status, category…)
   ------------------------------------------------------------
   HTML:
     <span class="nk-dot" style="--nk-dot-color: #7bd148;"></span>
   Vars:
     --nk-dot-size   px (default 9)
     --nk-dot-color  any CSS colour; set inline to the entity's real
                     colour. Falls back to --nk-mute when unset, so a
                     caller can also tint via a class that sets the var.
   ============================================================ */
.nk-dot {
    --nk-dot-size: 9px;
    width: var(--nk-dot-size);
    height: var(--nk-dot-size);
    border-radius: 3px;
    flex-shrink: 0;
    display: inline-block;
    background: var(--nk-dot-color, var(--nk-mute));
}


/* ============================================================
   Avatar
   ------------------------------------------------------------
   HTML:
     <span class="nk-avatar"
           style="--nk-avatar-size: 48px; --nk-avatar-hue: 30;">
         AB
     </span>

   Inputs (CSS vars):
     --nk-avatar-size  px (default 40)
     --nk-avatar-hue   0-360 (warm placeholder gradient, default 40)
   Content: 1-3 initials, uppercased automatically.
   ============================================================ */
.nk-avatar {
    --nk-avatar-size: 40px;
    --nk-avatar-hue: 40;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--nk-avatar-size);
    height: var(--nk-avatar-size);
    border-radius: 50%;
    font-family: var(--nk-font-sans);
    font-weight: var(--nk-fw-semibold);
    font-size: calc(var(--nk-avatar-size) * 0.38);
    line-height: 1;
    text-transform: uppercase;
    color: white;
    user-select: none;
    background:
        linear-gradient(
            135deg,
            oklch(0.72 0.12 calc(var(--nk-avatar-hue) - 10)),
            oklch(0.58 0.14 calc(var(--nk-avatar-hue) + 20))
        );
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}


/* ============================================================
   FieldRow (read-mode input)
   ------------------------------------------------------------
   HTML:
     <label class="nk-field-row [nk-field-row--required] [nk-field-row--choose]">
         <span class="nk-field-row__label">Email</span>
         <span class="nk-field-row__input">
             jane.doe@example.com
         </span>
     </label>

     Empty value (placeholder):
     <span class="nk-field-row__input nk-field-row__input--empty">
         Renseigner l'email
     </span>

   Modifiers:
     --required  appends " *" to the label
     --choose    renders a chevron at the end (selectable field)
   ============================================================ */
.nk-field-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.nk-field-row__label {
    font-family: var(--nk-font-sans);
    font-size: 10.5px;
    font-weight: var(--nk-fw-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--nk-mute);
}

.nk-field-row--required .nk-field-row__label::after {
    content: ' *';
    color: var(--nk-accent);
}

.nk-field-row__input {
    display: flex;
    align-items: center;
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--nk-rule);
    border-radius: var(--nk-radius-md);
    background: var(--nk-panel);
    color: var(--nk-ink);
    font-family: var(--nk-font-sans);
    font-size: var(--nk-fs-body);
    line-height: 1;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.nk-field-row__input--empty {
    color: var(--nk-mute);
    font-style: italic;
}

.nk-field-row__input:hover {
    border-color: color-mix(in oklab, var(--nk-rule) 100%, var(--nk-ink) 8%);
}

.nk-field-row__input:focus-within,
.nk-field-row__input:focus {
    outline: none;
    border-color: var(--nk-accent);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--nk-accent) 20%, transparent);
}

/* Choose variant: chevron at the right edge */
.nk-field-row--choose .nk-field-row__input {
    cursor: pointer;
    justify-content: space-between;
}
.nk-field-row--choose .nk-field-row__input::after {
    content: '';
    width: 8px;
    height: 8px;
    border-right: 1.5px solid var(--nk-mute);
    border-bottom: 1.5px solid var(--nk-mute);
    transform: rotate(45deg) translate(-2px, -2px);
    margin-left: 8px;
}


/* ============================================================
   SectionTitle + Section grid
   ------------------------------------------------------------
   HTML:
     <h3 class="nk-section-title">Informations personnelles</h3>
     <div class="nk-section-grid">
         <!-- nk-field-row x N, auto wrapped into 2 columns -->
     </div>
   ============================================================ */
.nk-section-title {
    font-family: var(--nk-font-sans);
    font-size: var(--nk-fs-body);    /* 13px */
    font-weight: var(--nk-fw-semibold);
    color: var(--nk-ink);
    margin: 0 0 14px 0;
    letter-spacing: var(--nk-tracking-h2);
}

.nk-section-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 28px;
}

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


/* ============================================================
   Donut
   ------------------------------------------------------------
   HTML:
     <span class="nk-donut"
           style="--nk-donut-size: 56px;
                  --nk-donut-pct: 75;
                  --nk-donut-color: var(--nk-accent);">
         <svg class="nk-donut__svg" viewBox="0 0 36 36" aria-hidden="true">
             <circle class="nk-donut__track" cx="18" cy="18" r="15.915"/>
             <circle class="nk-donut__value" cx="18" cy="18" r="15.915"/>
         </svg>
         <span class="nk-donut__label">75%</span>
     </span>

   Inputs (CSS vars):
     --nk-donut-size   px (default 56)
     --nk-donut-pct    0-100 (caller computes value/total * 100)
     --nk-donut-color  any color (default --nk-accent)
   ============================================================ */
.nk-donut {
    --nk-donut-size: 56px;
    --nk-donut-pct: 0;
    --nk-donut-color: var(--nk-accent);

    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--nk-donut-size);
    height: var(--nk-donut-size);
}

.nk-donut__svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.nk-donut__track,
.nk-donut__value {
    fill: none;
    stroke-width: 3;             /* viewBox 36 → 3 ≈ 6px stroke at 56px */
}

.nk-donut__track {
    stroke: var(--nk-rule);
}

.nk-donut__value {
    stroke: var(--nk-donut-color);
    stroke-linecap: round;
    stroke-dasharray: var(--nk-donut-pct) 100;
    transition: stroke-dasharray 240ms ease;
}

.nk-donut__label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--nk-font-sans);
    font-size: calc(var(--nk-donut-size) * 0.22);
    font-weight: var(--nk-fw-semibold);
    color: var(--nk-ink);
}


/* ============================================================
   Icon utility (inline SVG normalizer)
   ------------------------------------------------------------
   Use on any inline <svg> to get a consistent stroke + size.
   HTML:
     <svg class="nk-icon" viewBox="0 0 24 24">...</svg>

   Modifiers: --xs (12) | --sm (14) | (default 16) | --lg (20) | --xl (24)
   ============================================================ */
.nk-icon {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    stroke-width: 1.75;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}
.nk-icon--xs { width: 12px; height: 12px; }
.nk-icon--sm { width: 14px; height: 14px; }
.nk-icon--lg { width: 20px; height: 20px; }
.nk-icon--xl { width: 24px; height: 24px; }


/* ============================================================
   Card
   ------------------------------------------------------------
   HTML:
     <article class="nk-card"> ... </article>
   ============================================================ */
.nk-card {
    background: var(--nk-panel);
    border-radius: var(--nk-radius-xl);
    overflow: hidden;
    box-shadow: var(--nk-shadow-card);
}

/* ============================================================
   Card title — section heading + optional right-aligned meta
   ------------------------------------------------------------
   HTML:
     <div class="nk-card-title">
       <h2>Compteurs</h2>
       <span class="nk-card-title__meta">Période en cours · 2026</span>
     </div>
   ============================================================ */
.nk-card-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}
.nk-card-title h2 {
    margin: 0;
    font-family: var(--nk-font-sans);
    font-size: 15px;
    font-weight: var(--nk-fw-semibold);
    color: var(--nk-ink);
    letter-spacing: -0.01em;
}
.nk-card-title__meta {
    font-size: 11.5px;
    color: var(--nk-mute);
}

/* ============================================================
   Empty state — centered muted message (no data yet)
   ------------------------------------------------------------
   HTML:
     <div class="nk-card nk-empty">Aucune donnée pour le moment.</div>
   ============================================================ */
.nk-empty {
    padding: 48px 22px;
    color: var(--nk-mute);
    text-align: center;
    font-family: var(--nk-font-sans);
    font-size: 13px;
}

/* ============================================================
   List + list row — clickable rows (icon/dot + body + trailing)
   ------------------------------------------------------------
   HTML:
     <div class="nk-card nk-list">
       <a class="nk-list-row" href="…">
         <span class="nk-dot" …></span>
         <div class="nk-list-row__body">
           <div class="nk-list-row__title">Congé Payé</div>
           <div class="nk-list-row__meta">8 → 22 juil. 2026 · 14 j</div>
         </div>
         <span class="badge …">…</span>
         <i class="fa-light fa-chevron-right nk-list-row__chev"></i>
       </a>
       …
     </div>
   ============================================================ */
.nk-list {
    padding: 0;
    overflow: hidden;
}
.nk-list-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 22px;
    border-bottom: 1px solid var(--nk-rule);
    color: var(--nk-ink);
    text-decoration: none;
    font-family: var(--nk-font-sans);
}
.nk-list-row:last-child {
    border-bottom: 0;
}
.nk-list-row__body {
    flex: 1;
    min-width: 0;
}
.nk-list-row__title {
    font-size: 13.5px;
    font-weight: var(--nk-fw-semibold);
    color: var(--nk-ink);
}
.nk-list-row__meta {
    font-size: 12px;
    color: var(--nk-mute);
}

/* ============================================================
   Data table — aligned numeric table with an optional total row
   ------------------------------------------------------------
   <table class="nk-table"> (wrap in a scroll container for wide
   tables). Cell classes:
     th/td.first  first column, left-aligned, no left padding
     th/td.last   last column padding
     td.num       right-aligned number (tabular)
     td.num.zero  muted zero · td.num.bold  emphasised
     tr.total     summary row (top rule) · td.label  its label
   ============================================================ */
.nk-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--nk-font-sans);
}
.nk-table th {
    text-align: right;
    padding: 0 16px 10px;
    font-size: 10.5px;
    color: var(--nk-mute);
    font-weight: var(--nk-fw-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    border-bottom: 1px solid var(--nk-rule);
}
.nk-table th.first { text-align: left; padding-left: 0; }
.nk-table th.last { padding-right: 0; padding-left: 16px; }
.nk-table tbody tr { border-bottom: 1px solid var(--nk-rule); }
.nk-table tbody tr.total { border-top: 2px solid var(--nk-ink); border-bottom: 0; }
.nk-table td {
    padding: 14px 16px;
    font-variant-numeric: tabular-nums;
    font-size: 13.5px;
}
.nk-table td.num { text-align: right; font-weight: 500; color: var(--nk-ink-2); }
.nk-table td.num.zero { color: rgba(0, 0, 0, 0.28); }
.nk-table td.num.bold { font-weight: 700; color: var(--nk-ink); }
.nk-table td.first { padding-left: 0; padding-right: 16px; }
.nk-table td.last { padding-right: 0; padding-left: 16px; }
.nk-table tbody tr.total td { padding-top: 14px; padding-bottom: 0; }
.nk-table tbody tr.total td.label { font-size: 13.5px; font-weight: 700; color: var(--nk-ink); }


/* ============================================================
   Kicker (small uppercase breadcrumb / eyebrow text)
   ------------------------------------------------------------
   HTML:
     <div class="nk-kicker">Mon espace · Mon profil</div>
   ============================================================ */
.nk-kicker {
    font-family: var(--nk-font-sans);
    font-size: 11.5px;
    color: var(--nk-mute);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}


/* ============================================================
   Page head — kicker + title on the left, actions on the right
   ------------------------------------------------------------
   Standard header for the modernized "my/*" pages (Mes congés,
   Notes de frais, …). The hero variant of "Mon Profil" (avatar +
   identity) is a different component, not this one.
   HTML:
     <div class="nk-page-head">
       <div>
         <div class="nk-kicker">Mon espace · …</div>
         <h1 class="nk-page-head__title">Titre de page</h1>
       </div>
       <div class="nk-page-head__actions"> …buttons… </div>
     </div>
   ============================================================ */
.nk-page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
    flex-wrap: wrap;
}
.nk-page-head .nk-kicker {
    margin-bottom: 6px;
}
.nk-page-head__title {
    margin: 0;
    font-family: var(--nk-font-sans);
    font-size: var(--nk-fs-h1);
    font-weight: var(--nk-fw-semibold);
    color: var(--nk-ink);
    letter-spacing: var(--nk-tracking-h1);
}
.nk-page-head__actions {
    display: flex;
    gap: 10px;
    align-items: center;
}


/* ============================================================
   MetaList (horizontal list of "icon + label" items)
   ------------------------------------------------------------
   HTML:
     <ul class="nk-meta-list">
         <li class="nk-meta-item">
             <svg class="nk-icon nk-icon--sm">...</svg>
             Paris · Siège
         </li>
         <li class="nk-meta-item">
             <svg class="nk-icon nk-icon--sm">...</svg>
             Manager : <b>Camille Dupont</b>
         </li>
     </ul>
   ============================================================ */
.nk-meta-list {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--nk-mute);
    font-size: 12.5px;
}
.nk-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.nk-meta-item b {
    color: var(--nk-ink-2);
    font-weight: var(--nk-fw-semibold);
}


/* ============================================================
   Button
   ------------------------------------------------------------
   HTML:
     <button class="nk-btn nk-btn--primary">
         <svg class="nk-icon nk-icon--sm">...</svg> Modifier
     </button>

   Variants:
     --primary    ink background, white text       (default action)
     --secondary  panel background, rule border    (neutral action)
     --ghost      transparent, ink text            (low-emphasis)
     --accent     accent background, white text    (call to action)

   Sizes:
     (default) 36px height       --sm 28px height
   ============================================================ */
.nk-btn {
    height: 36px;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: var(--nk-radius-md);
    font-family: var(--nk-font-sans);
    font-size: 12.5px;
    font-weight: var(--nk-fw-semibold);
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    user-select: none;
    transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
    background: transparent;
    color: var(--nk-ink);
}
.nk-btn:focus-visible {
    outline: 2px solid var(--nk-accent);
    outline-offset: 2px;
}
.nk-btn--sm { height: 28px; padding: 0 10px; font-size: 12px; }

.nk-btn--primary {
    background: var(--nk-ink);
    color: white;
    border-color: var(--nk-ink);
}
.nk-btn--primary:hover {
    background: color-mix(in oklab, var(--nk-ink) 88%, white);
}

.nk-btn--secondary {
    background: var(--nk-panel);
    color: var(--nk-ink);
    border-color: var(--nk-rule);
}
.nk-btn--secondary:hover {
    border-color: color-mix(in oklab, var(--nk-rule) 100%, var(--nk-ink) 12%);
}

.nk-btn--ghost {
    background: transparent;
    color: var(--nk-ink-2);
}
.nk-btn--ghost:hover {
    background: color-mix(in oklab, var(--nk-ink) 6%, transparent);
}

.nk-btn--accent {
    background: var(--nk-accent);
    color: white;
    border-color: var(--nk-accent);
}
.nk-btn--accent:hover {
    background: color-mix(in oklab, var(--nk-accent) 88%, black);
}


/* ============================================================
   Tabs (underline)
   ------------------------------------------------------------
   HTML:
     <nav class="nk-tabs">
         <a class="nk-tab nk-tab--active">Données personnelles</a>
         <a class="nk-tab">Coordonnées bancaires</a>
         <a class="nk-tab">Signature</a>
         <div class="nk-tabs__trailing">
             <!-- e.g. nk-saved-indicator -->
         </div>
     </nav>
   ============================================================ */
.nk-tabs {
    display: flex;
    gap: 0;
    align-items: flex-end;
    border-bottom: 1px solid var(--nk-rule);
    flex-wrap: wrap;
}
.nk-tab {
    padding: 12px 18px;
    cursor: pointer;
    color: var(--nk-mute);
    font-family: var(--nk-font-sans);
    font-size: var(--nk-fs-body);
    font-weight: var(--nk-fw-medium);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    text-decoration: none;
    background: transparent;
}
.nk-tab:hover {
    color: var(--nk-ink-2);
}
.nk-tab--active {
    color: var(--nk-ink);
    font-weight: var(--nk-fw-semibold);
    border-bottom-color: var(--nk-accent);
}
.nk-tabs__trailing {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
}

/* Variant: pills (no bottom rule, rounded chips, solid-ink active) */
.nk-tabs--pills {
    border-bottom: none;
    gap: 6px;
}
.nk-tabs--pills .nk-tab {
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--nk-rule);
    margin-bottom: 0;
    font-size: var(--nk-fs-body-sm);
    line-height: 1;
}
.nk-tabs--pills .nk-tab:hover {
    color: var(--nk-ink-2);
    border-color: color-mix(in oklab, var(--nk-rule) 100%, var(--nk-ink) 12%);
}
.nk-tabs--pills .nk-tab--active {
    background: var(--nk-ink);
    color: white;
    border-color: var(--nk-ink);
}


/* ============================================================
   nk-v2 — Nicoka modernized theme over Bootstrap 5 primitives
   ------------------------------------------------------------
   Apply this class on any wrapper (page, card, body) and Bootstrap's
   own `.nav-tabs` / `.nav-pills` pick up the Nicoka look without
   needing custom .nk-* markup. Useful when the HTML comes from an
   Orix component (TabPanel, etc.) or when you'd rather write plain
   BS5 markup and theme it from one place.

   Markup (no changes vs vanilla BS5):
     <nav class="nav nav-tabs">
         <a class="nav-link active">…</a>
         <a class="nav-link">…</a>
     </nav>

     <nav class="nav nav-pills">
         <a class="nav-link active">…</a>
         <a class="nav-link">…</a>
     </nav>
   ============================================================ */

/* ---- Bridge: v2 palette for embedded Bootstrap components --------
   Feeds ONLY the v2-specific palette deltas (warm ink, soft rules,
   rounder corners) into Bootstrap's runtime variables, scoped to this
   wrapper. The brand / primary action color is deliberately NOT set
   here: orix-1.2.4.css already themes .btn-primary, .card, .badge…
   from the per-client --main-bg-color globally. Re-theming them would
   only duplicate (and risk overriding) that. So this stays minimal —
   only what global theming doesn't already cover.
   See docs/conventions.md (anti-pattern "primitive BS réinventée"). */
.nk-v2 {
    --bs-body-color: var(--nk-ink);
    --bs-secondary-color: var(--nk-mute);
    --bs-border-color: var(--nk-rule);
    --bs-border-radius: var(--nk-radius-md);
    --bs-border-radius-sm: var(--nk-radius-sm);
    --bs-border-radius-lg: var(--nk-radius-lg);
}

/* Shared nav defaults */
.nk-v2 .nav {
    --bs-nav-link-padding-x: 18px;
    --bs-nav-link-padding-y: 12px;
    --bs-nav-link-font-size: var(--nk-fs-body);
    --bs-nav-link-font-weight: var(--nk-fw-medium);
    --bs-nav-link-color: var(--nk-mute);
    --bs-nav-link-hover-color: var(--nk-ink-2);
}

/* Underline tabs */
.nk-v2 .nav-tabs {
    --bs-nav-tabs-border-width: 1px;
    --bs-nav-tabs-border-color: var(--nk-rule);
    --bs-nav-tabs-border-radius: 0;
    --bs-nav-tabs-link-hover-border-color: transparent transparent transparent;
    --bs-nav-tabs-link-active-color: var(--nk-ink);
    --bs-nav-tabs-link-active-bg: transparent;
    --bs-nav-tabs-link-active-border-color: transparent transparent var(--nk-accent);
}
.nk-v2 .nav-tabs .nav-link {
    border-top: 0;
    border-left: 0;
    border-right: 0;
    border-bottom-width: 2px;
    border-radius: 0;
}
.nk-v2 .nav-tabs .nav-link.active {
    font-weight: var(--nk-fw-semibold);
}

/* ============================================================
   Badge-pills — standalone pill-style nav, no parent theme needed.
   ------------------------------------------------------------
   Works on any container (<nav>, <ul>, <div>) with anchor children.
   Active child = `.active` (BS5 convention) — supports both plain
   <a> and <a class="nav-link"> markup.

   Markup:
     <nav class="nk-badge-pills">
         <a class="active">Données personnelles</a>
         <a>Coordonnées bancaires</a>
         <a>Signature</a>
     </nav>
   ============================================================ */
/* ============================================================
   Tabs-bar — underline tabs with a bottom rule.
   ------------------------------------------------------------
   Pairs with Orx\Ui\Navigation\Top\Menu (ft-link markup). The
   active item gets an accent underline that overlaps the bottom
   rule (margin-bottom: -1px trick).

     <div class="nk-tabs-bar">
         <?= $topMenu->render() ?>      <!-- <ul class="ft-link">... -->
         <span class="nk-saved-indicator">…</span>
     </div>
   ============================================================ */
.nk-tabs-bar {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 0;
    border-bottom: 1px solid var(--nk-rule);
    font-family: var(--nk-font-sans);
}
.nk-tabs-bar ul.ft-link {
    display: flex;
    gap: 0;
    padding: 0;
    margin: 0;
    list-style: none;
}
.nk-tabs-bar ul.ft-link li {
    width: auto;
    border-right: 0;
    padding: 0;
    text-align: left;
    line-height: 1;
    display: inline-flex;
}
.nk-tabs-bar ul.ft-link li a {
    display: inline-flex;
    align-items: center;
    padding: 12px 18px;
    color: var(--nk-mute);
    font-family: var(--nk-font-sans);
    font-size: var(--nk-fs-body);
    font-weight: var(--nk-fw-medium);
    line-height: 1;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
    cursor: pointer;
}
.nk-tabs-bar ul.ft-link li a:hover {
    color: var(--nk-ink-2);
}
.nk-tabs-bar ul.ft-link li a.active {
    color: var(--nk-ink);
    font-weight: var(--nk-fw-semibold);
    /* Active underline follows the client theme colour (--main-bg-color),
       with the amber accent as fallback for non-themed contexts. */
    border-bottom-color: var(--main-bg-color, var(--nk-accent));
}
.nk-tabs-bar ul.ft-link li a div.menu-text-label {
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
    display: inline;
    padding-bottom: 0;
}
/* Hide Orix's .underline div — we use border-bottom on <a> for the
   accent line, so the legacy underline element is redundant. */
.nk-tabs-bar ul.ft-link li a:hover .underline,
.nk-tabs-bar ul.ft-link li a.active .underline,
.nk-tabs-bar ul.ft-link li .underline {
    display: none;
}


.nk-badge-pills {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 0;
    margin: 0;
    list-style: none;
    font-family: var(--nk-font-sans);
}

/* Direct anchor children — for custom inline pill nav */
.nk-badge-pills > a,
.nk-badge-pills > .nav-link {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--nk-rule);
    background: transparent;
    color: var(--nk-ink-2);
    font-size: var(--nk-fs-body-sm);
    font-weight: var(--nk-fw-medium);
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}
.nk-badge-pills > a:hover,
.nk-badge-pills > .nav-link:hover {
    color: var(--nk-ink-2);
    border-color: color-mix(in oklab, var(--nk-rule) 100%, var(--nk-ink) 12%);
}
.nk-badge-pills > a.active,
.nk-badge-pills > .nav-link.active,
.nk-badge-pills > .active {
    background: var(--nk-ink);
    color: #fff;
    border-color: var(--nk-ink);
}

/* ----- Orx\Ui\Navigation\Top\Menu adaptation ----------------
   Top\Menu renders:
     <ul class="ft-link">
         <li><a class="item active"><div class="menu-text-label">…</div>
                                    <div class="underline"></div></a></li>
     </ul>
   Orix's orix-1.2.4.css already styles ul.ft-link li (width 24%,
   border-right, text-overflow ellipsis, underline on hover/active).
   Selectors below repeat the same element chain to beat that
   specificity (0,0,3,3) and apply the pill look. */
.nk-badge-pills ul.ft-link {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0;
    margin: 0;
    list-style: none;
}
.nk-badge-pills ul.ft-link li {
    width: auto;
    border-right: 0;
    padding: 0;
    text-align: left;
    line-height: 1;
    display: inline-flex;
}
.nk-badge-pills ul.ft-link li a {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--nk-rule);
    background: transparent;
    color: var(--nk-ink-2);
    font-family: var(--nk-font-sans);
    font-size: var(--nk-fs-body-sm);
    font-weight: var(--nk-fw-medium);
    line-height: 1;
    text-decoration: none;
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
}
.nk-badge-pills ul.ft-link li a:hover {
    color: var(--nk-ink-2);
    border-color: color-mix(in oklab, var(--nk-rule) 100%, var(--nk-ink) 12%);
}
.nk-badge-pills ul.ft-link li a.active {
    background: var(--nk-ink);
    color: #fff;
    border-color: var(--nk-ink);
}
.nk-badge-pills ul.ft-link li a div.menu-text-label {
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
    display: inline;
    padding-bottom: 0;
}
.nk-badge-pills ul.ft-link li a:hover .underline,
.nk-badge-pills ul.ft-link li a.active .underline,
.nk-badge-pills ul.ft-link li .underline {
    display: none;
}


/* ============================================================
   SavedIndicator (form auto-save status)
   ------------------------------------------------------------
   HTML:
     <span class="nk-saved-indicator">
         <svg class="nk-icon nk-icon--xs">...</svg>
         Enregistré il y a 2 min
     </span>
   ============================================================ */
.nk-saved-indicator {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 0 12px;
    color: var(--nk-mute);
    font-family: var(--nk-font-sans);
    font-size: 11.5px;
}
.nk-saved-indicator > .nk-icon {
    color: var(--nk-success);
}


/* ============================================================
   Pills (sub-tabs)
   ------------------------------------------------------------
   HTML:
     <nav class="nk-pills">
         <a class="nk-pill nk-pill--active">Données personnelles</a>
         <a class="nk-pill">Coordonnées bancaires</a>
         <a class="nk-pill">Signature</a>
     </nav>
   ============================================================ */
.nk-pills {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.nk-pill {
    padding: 6px 12px;
    border-radius: 999px;
    font-family: var(--nk-font-sans);
    font-size: var(--nk-fs-body-sm);
    font-weight: var(--nk-fw-medium);
    background: transparent;
    color: var(--nk-ink-2);
    border: 1px solid var(--nk-rule);
    cursor: pointer;
    text-decoration: none;
    line-height: 1;
}
.nk-pill:hover {
    border-color: color-mix(in oklab, var(--nk-rule) 100%, var(--nk-ink) 12%);
}
.nk-pill--active {
    background: var(--nk-ink);
    color: white;
    border-color: var(--nk-ink);
}


/* ============================================================
   KPI tile
   ------------------------------------------------------------
   HTML:
     <div class="nk-kpi nk-kpi--accent">
         <div class="nk-kpi__icon">
             <!-- nk-donut or any inline SVG/avatar -->
         </div>
         <div class="nk-kpi__body">
             <div class="nk-kpi__label">Congés</div>
             <div class="nk-kpi__value">
                 18.5 <span class="nk-kpi__total">/ 25 j</span>
             </div>
             <div class="nk-kpi__sub">Prochain : 8 → 22 juil. 2026</div>
         </div>
     </div>

   Modifier:
     --accent     accent-soft background, accent-ink label
                  (otherwise: panel bg, mute label)
   ============================================================ */
.nk-kpi {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: var(--nk-radius-lg);
    background: var(--nk-panel);
    border: 1px solid var(--nk-rule);
    color: inherit;
    text-decoration: none;
    transition: background-color 120ms ease, box-shadow 120ms ease;
}
a.nk-kpi:hover {
    text-decoration: none;
    box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.12);
}
.nk-kpi--accent {
    background: var(--nk-accent-soft);
    border-color: transparent;
}
/* Mockup KPI tones — green (next absence) + violet (training). */
.nk-kpi--success {
    background: var(--nk-success-soft);
    border-color: transparent;
}
.nk-kpi--success .nk-kpi__label {
    color: var(--nk-success-ink);
}
.nk-kpi--success .nk-kpi__icon {
    color: var(--nk-success);
}
.nk-kpi--violet {
    background: var(--nk-violet-soft);
    border-color: transparent;
}
.nk-kpi--violet .nk-kpi__label {
    color: var(--nk-violet-ink);
}
.nk-kpi--violet .nk-kpi__icon {
    color: var(--nk-violet);
}
.nk-kpi__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
/* White rounded chip behind the icon on tinted tiles (mockup look). */
.nk-kpi--success .nk-kpi__icon,
.nk-kpi--violet .nk-kpi__icon {
    width: 30px;
    height: 30px;
    border-radius: var(--nk-radius-md);
    background: var(--nk-panel);
    font-size: 13px;
}
.nk-kpi__body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.nk-kpi__label {
    font-family: var(--nk-font-sans);
    font-size: 10.5px;
    color: var(--nk-mute);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-weight: var(--nk-fw-semibold);
}
.nk-kpi--accent .nk-kpi__label {
    color: var(--nk-accent-ink);
}
.nk-kpi__value {
    font-family: var(--nk-font-sans);
    font-size: var(--nk-fs-body-lg);
    color: var(--nk-ink);
    font-weight: var(--nk-fw-semibold);
    margin-top: 2px;
    line-height: 1.2;
}
.nk-kpi__total {
    color: var(--nk-mute);
    font-weight: var(--nk-fw-regular);
}
.nk-kpi__sub {
    font-family: var(--nk-font-sans);
    font-size: 11px;
    color: var(--nk-mute);
    margin-top: 1px;
}

/* ---- Card variant — prominent stat card (KPI strips of the
   timeoff / expenses pages): white card, big value, no border.
   Compose with --alert for the "to send" warning card. ---------- */
.nk-kpi--card {
    display: flex;
    padding: 18px;
    gap: 14px;
    border: 0;
    border-radius: var(--nk-radius-xl);
    box-shadow: var(--nk-shadow-card);
}
.nk-kpi--card .nk-kpi__body {
    flex: 1;
}
.nk-kpi--card .nk-kpi__label {
    font-size: 11px;
    letter-spacing: 0.04em;
}
.nk-kpi--card .nk-kpi__value {
    font-size: 23px;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    margin-top: 3px;
}
.nk-kpi--card .nk-kpi__sub {
    font-size: 11.5px;
    margin-top: 2px;
}
/* Shared sub-elements used by the card/alert variants */
.nk-kpi__unit {
    font-size: 13px;
    color: var(--nk-mute);
    font-weight: 500;
}
.nk-kpi__head {
    display: flex;
    align-items: center;
    gap: 8px;
}
.nk-kpi__value-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

/* ---- Alert variant — "to send" warning card (accent-soft).
   Use together with --card; must follow it to override the frame. -- */
.nk-kpi--alert {
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    background: var(--nk-accent-soft);
    box-shadow: none;
    border: 1px solid var(--nk-accent);
}
.nk-kpi--alert .nk-kpi__head {
    color: var(--nk-accent);
}
.nk-kpi--alert .nk-kpi__label {
    color: var(--nk-accent-ink);
}
.nk-kpi--alert .nk-kpi__value-row {
    margin-top: 6px;
}
.nk-kpi--alert .nk-kpi__sub {
    color: var(--nk-accent-ink);
    font-size: 12px;
}
.nk-kpi--alert .btn {
    margin-top: 12px;
    height: 34px;
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}