/* ═══════════════════════════════════════════════════════════════════
   HRM - fælles CSS
   Layout og styling for HR-modulet. Bygger på design-tokens.css.
═══════════════════════════════════════════════════════════════════ */

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

.hrm-view {
    display: grid;
    grid-template-columns: 240px 1fr;
    /* App-shell: bounded højde + intern scroll (paritet m. Workspace/Canvas).
       Var min-height:100vh → body scrollede → sidebar scrollede væk. */
    height: 100vh;
    overflow: hidden;
    /* Kobolt-bauhaus: creme-bund (--bh-bg fra bauhaus-skin) med design-token-fallback. */
    background: var(--bh-bg, var(--color-bg));
    color: var(--bh-ink, var(--color-text-1));
    font-family: var(--font-sans, 'Inter', sans-serif);
    /* Sidebar tvinges til solid kobolt af bauhaus-skin (.hrm-sidebar). Disse lokale
       shade-vars bruges nu kun af topbaren; sat til creme-tone så den smelter ind. */
    /* Repointet til delte neutral-flip-tokens (2026-06-14): --bh-blue var ACCENT-farven (forkert neutral). */
    --hrm-sidebar-bg: var(--sidebar-bg);
    --hrm-topbar-bg: var(--topbar-bg);
}
[data-theme="light"] .hrm-view { --hrm-sidebar-bg: var(--sidebar-bg); --hrm-topbar-bg: var(--topbar-bg); }

/* ─── Kobolt-bauhaus semantik-remap (2026-05-31) ─────────────────────
   design-tokens.css definerer --color-danger:#ef4444 / --color-warn:#f59e0b /
   --color-info:#339af0 - IKKE bauhaus-paletten. bauhaus-skin.css overrider IKKE
   disse semantik-tokens. Vi remapper dem HRM-scopet til mockup-paletten, så hver
   var(--color-danger/-warn/-info/-success) inde i HRM rammer kobolt-bauhaus.
   Bruger --bh-* hvis skin er loaded, ellers eksakte mockup-hex som fallback.
   Rør IKKE de globale tokens (ejes ikke af denne agent). */
.hrm-view {
    /* Tokenisér ved KILDEN: peg semantik-tokens på skinnets bh-farve- og
       rgb-tokens (altid leveret af bauhaus-skin.css). Hex-fallbacks beholdt
       som sidste forsvar hvis skinnet ikke når at loade. */
    --color-danger: var(--bh-danger, #E0392B);      /* signal-rød */
    --color-danger-text: var(--bh-danger, #E0392B);
    --color-danger-bg: rgba(var(--danger-rgb, 224, 57, 43), 0.10);
    --color-warn: var(--bh-pop, #FF6A1A);           /* medium = tangerine */
    --color-warn-bg: rgba(var(--pop-rgb, 255, 106, 26), 0.12);
    --color-success: var(--bh-green, #1F9E5A);
    --color-success-bg: rgba(var(--success-rgb, 31, 158, 90), 0.12);
    --color-info: var(--bh-blue, #0A84FF);          /* info = kobolt */
    --color-info-bg: rgba(var(--accent-rgb, 10, 132, 255), 0.10);
    --color-accent-dim: rgba(var(--accent-rgb, 10, 132, 255), 0.10);
    --color-accent-soft: rgba(var(--accent-rgb, 10, 132, 255), 0.16);
}

/* ─── Desktop sidebar-collapse (paritet med Workspace/Canvas/Planner) ──
   .hrm-collapsed sættes på .hrm-view-roden af H.sidebar (common.js).
   Skifter grid-kolonnen til en smal ikon-stribe + skjuler alle labels. */
.hrm-view.hrm-collapsed { grid-template-columns: 64px 1fr; }
.hrm-view.hrm-collapsed .hrm-sidebar { padding: 16px 8px; }
.hrm-view.hrm-collapsed .hrm-nav-btn__label,
.hrm-view.hrm-collapsed .hrm-brand__text,
.hrm-view.hrm-collapsed .ccm-product-switcher__label,
.hrm-view.hrm-collapsed .ccm-help-launcher__label { display: none; }
.hrm-view.hrm-collapsed .hrm-nav-btn { justify-content: center; padding: 8px 0; gap: 0; }
.hrm-view.hrm-collapsed .ccm-product-switcher,
.hrm-view.hrm-collapsed .ccm-help-launcher { justify-content: center; }
.hrm-sb-toggle {
    background: transparent; border: 0; color: var(--color-text-3);
    cursor: pointer; padding: 4px; border-radius: 6px;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: inherit; flex-shrink: 0;
}
.hrm-sb-toggle:hover { background: var(--color-surface); color: var(--color-text-1); }
.hrm-view.hrm-collapsed .hrm-brand { justify-content: center; }
@media (max-width: 768px) { .hrm-sb-toggle { display: none; } } /* mobil bruger eksisterende off-canvas hamburger */

/* ─── Sidebar ─────────────────────────────────────────────── */
.hrm-sidebar {
    background: var(--sidebar-bg);
    border-right: 1px solid var(--color-border);
    padding: 16px 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-height: 0;       /* tillad at indre <nav> kan krympe + scrolle */
    overflow: hidden;    /* sidebar-roden scroller ikke selv (kun .nav gør) */
}

/* <nav> er det scrollende område (paritet m. Workspace .sidebar-nav):
   brand + product-switcher + hjælp forbliver pinned i top, bund pinned i bund. */
.hrm-sidebar nav[role="tablist"] { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; }

.hrm-brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 8px 16px;
    margin-bottom: 4px;
}

.hrm-brand__logo {
    color: var(--color-text-1);
    font-weight: 700;
    font-size: var(--font-size-lg);
    text-decoration: none;
    letter-spacing: -0.01em;
}

.hrm-brand__dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    background: var(--color-accent);
    border-radius: 50%;
    margin: 0 4px;
    vertical-align: middle;
}

.hrm-brand__text {
    color: var(--color-text-2);
    font-weight: 400;
}

.hrm-nav-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: var(--color-text-2);
    font-size: .78rem;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    text-decoration: none;
    position: relative;
    transition: background .15s, color .15s;
}

.hrm-nav-btn:hover { background: var(--color-surface); color: var(--color-text-1); }
.hrm-nav-btn--active { background: var(--color-accent-dim); color: var(--accent-ink, var(--color-accent)); font-weight: 600; }
.hrm-nav-btn--active::before {
    content: ''; position: absolute; left: -2px; top: 8px; bottom: 8px;
    width: 3px; background: var(--color-accent); border-radius: 0 2px 2px 0;
}
.hrm-nav-btn__icon { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--color-text-3); transition: color .15s; }
.hrm-nav-btn__icon svg { width: 15px; height: 15px; }
.hrm-nav-btn:hover .hrm-nav-btn__icon, .hrm-nav-btn--active .hrm-nav-btn__icon { color: var(--accent-ink, var(--color-accent)); }
.hrm-nav-btn__label { flex: 1; }

.hrm-nav-spacer { display: none; }   /* overflødig nu hvor <nav> har flex:1 */

.hrm-sidebar-bottom {
    margin-top: auto;
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
    flex-shrink: 0;
}

/* ─── Main area ───────────────────────────────────────────── */
.hrm-main-area {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;       /* grid-celle: tillad .hrm-main at scrolle internt */
}

.hrm-topbar {
    padding: var(--space-5) var(--space-6);
    min-height: 56px;
    /* Bauhaus: kraftig 2px blæk-hairline, ingen glas-blur (solide flader). */
    border-bottom: 2px solid var(--bh-line, var(--color-border));
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--topbar-bg);
    /* 2026-05-31 (fix #8, valgt mulighed b): position:sticky/top/z-index FJERNET.
       Det var en NO-OP fordi scroll-containeren .hrm-main er en SØSKENDE til
       .hrm-topbar (ikke en forfader) - begge ligger i .hrm-main-area, som har
       overflow:hidden og ikke selv scroller. Sticky kunne derfor aldrig binde
       til noget scroll-ophav. Beholder kun den translucente bg+blur+border, så
       der ikke er vildledende dead styling. (Mulighed a - flytte scroll op til
       .hrm-main-area - blev fravalgt som layout-risikabel.) */
}

.hrm-topbar__title {
    margin: 0;
    font-size: var(--font-size-xl);
    font-family: var(--bh-display, var(--font-sans, 'Inter', sans-serif));
    font-weight: 900;
    letter-spacing: -.01em;
    color: var(--bh-ink, var(--color-text-1));
}

.hrm-topbar__sub {
    color: var(--color-text-3);
    font-size: var(--font-size-sm);
    margin-top: 2px;
}

.hrm-main {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: var(--space-5) var(--space-6);
}

/* ─── Tabs ────────────────────────────────────────────────── */
.hrm-tab { display: block; }
.hrm-tab[hidden] { display: none !important; }

/* ─── Card ────────────────────────────────────────────────── */
.hrm-card {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    margin-bottom: var(--space-4);
}

.hrm-card__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: var(--space-4);
    gap: var(--space-3);
}

.hrm-card__title {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-text-1);
}

.hrm-card__sub {
    color: var(--color-text-3);
    font-size: var(--font-size-sm);
}

/* ─── Buttons ─────────────────────────────────────────────── */
.hrm-btn {
    /* Neutral base: background+radius defineres af den kanoniske base længere nede
       (~l.594) + .hrm-btn--primary leverer accent-fill. (2026-06-14 dedup) */
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 10px 16px;
    color: var(--color-text-1);
    border: 0;
    font-weight: 600;
    font-size: var(--font-size-md);
    cursor: pointer;
    transition: background .14s, transform .14s;
    text-decoration: none;
}

.hrm-btn:hover { background: var(--color-surface-hover); }  /* neutral bare-knap → neutral hover (var amber via accent-hover); --primary beholder accent-hover (l.581) */
.hrm-btn:active { transform: translateY(1px); }
/* .hrm-btn--sm: kanonisk definition længere nede (5px 12px) - tidligere dublet her
   (6px 12px) tabte altid i kaskaden og gav kun forvirring. Fjernet 2026-07-02. */
.hrm-btn--ghost { background: transparent; color: var(--color-text-2); border: 1px solid var(--color-border-strong); }
.hrm-btn--ghost:hover { background: var(--color-surface-hover); color: var(--color-text-1); }
/* .hrm-btn--danger: kanonisk definition ved ~l.600 (denne tidligere dublet tabte
   altid til den senere blok i kaskaden - fjernet 2026-07-02, audit-fix). */

/* ─── Empty / loading ─────────────────────────────────────── */
.hrm-empty {
    text-align: center;
    padding: var(--space-7) var(--space-5);
    color: var(--color-text-3);
}

.hrm-empty__title { font-family: var(--bh-display); font-size: var(--font-size-lg); font-weight: 700; color: var(--color-text-1); margin-bottom: var(--space-2); }  /* empty-state-titel ENS m. app/canvas/planner */
.hrm-empty__sub { font-size: var(--font-size-sm); max-width: 40ch; margin: 0 auto var(--space-4); line-height: 1.5; }

.hrm-spin {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid var(--color-border-strong);
    border-top-color: var(--color-accent);
    border-radius: 50%;
    animation: hrm-spin 0.8s linear infinite;
}

/* ─── Toast ───────────────────────────────────────────────── */
.hrm-toast-host {
    position: fixed;
    top: var(--space-5);
    right: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    z-index: 10000;
    pointer-events: none;
}

.hrm-toast {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--color-card-solid);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    color: var(--color-text-1);
    font-size: var(--font-size-md);
    box-shadow: var(--shadow-md);
    pointer-events: auto;
    max-width: 380px;
}

.hrm-toast--ok { border-left: 3px solid var(--color-success); }
.hrm-toast--err { border-left: 3px solid var(--color-danger); }
.hrm-toast--warn { border-left: 3px solid var(--color-warn); }
.hrm-toast--info { border-left: 3px solid var(--color-info); }

/* ─── Directory list (placeholder) ────────────────────────── */
.hrm-directory {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-3);
}
/* ─── Bulk-edit + tools (2026-05-29, Batch C) ────────────────── */
.hrm-dir-tools { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; margin-top: var(--space-2); }
.hrm-dir-bulkbar { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; margin-top: var(--space-3); padding: var(--space-2) var(--space-3); background: var(--color-accent-dim); border: 1px solid var(--color-accent); border-radius: var(--radius-md); }
/* 2026-07-02 audit-fix: display:flex overtrumfede [hidden]-attributten → en tom
   orange bjælke svævede permanent over medarbejder-grid'et. */
.hrm-dir-bulkbar[hidden] { display: none; }
.hrm-dir-bulkbar__count { font-weight: 700; color: var(--color-text-1); }
.hrm-dir-bulkbar select { padding: 5px 10px; border: 1px solid var(--color-border); border-radius: 6px; background: var(--color-bg); color: var(--color-text-1); font-size: var(--font-size-sm); }
.hrm-employee-card--pick { cursor: pointer; }
.hrm-employee-card--pick.is-sel { border-color: var(--color-accent); background: var(--color-accent-dim); }
.hrm-emp-check { flex-shrink: 0; width: 18px; height: 18px; accent-color: var(--color-accent); pointer-events: none; }
/* ─── Dokument-signering (2026-05-29, Batch D) ───────────────── */
.hrm-sign-badge { display: inline-block; padding: 1px 7px; border-radius: 9px; font-size: .62rem; font-weight: 700; }
.hrm-sign-badge--pending { background: var(--color-warn-bg); color: var(--color-warn); }
.hrm-sign-badge--signed { background: rgba(var(--accent-rgb), .16); color: var(--accent-ink, var(--color-accent)); }
.hrm-doc-sign { padding: 3px 6px; border: 1px solid var(--color-border); border-radius: 6px; background: var(--color-bg); color: var(--color-text-2); font-size: var(--font-size-xs); }

/* ── ORG-CHART - 2026-05-27 ── */
.hrm-org-tree { display: flex; flex-direction: column; gap: var(--space-3); }
.hrm-org-branch { position: relative; }
.hrm-org-branch[data-depth="0"] > .hrm-org-card { background: var(--color-card); border-color: var(--color-accent); }
.hrm-org-card {
    display: flex; gap: var(--space-3); align-items: center;
    padding: 10px 14px; border: 1px solid var(--color-border);
    border-radius: var(--radius-md); background: var(--color-card);
    text-decoration: none; color: inherit; cursor: pointer;
    transition: border-color .14s, transform .14s, box-shadow .14s;
    margin-bottom: var(--space-2);
}
.hrm-org-card:hover { border-color: var(--color-accent); transform: translateX(2px); box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
.hrm-org-card--orphan { border-style: dashed; opacity: 0.7; }
.hrm-org-card__avatar {
    width: 36px; height: 36px; min-width: 36px;
    background: var(--color-accent-dim);
    color: var(--accent-ink, var(--color-accent));
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.78rem;
}
.hrm-org-card__body { flex: 1; min-width: 0; }
.hrm-org-card__name { font-weight: 600; color: var(--color-text-1); display: flex; align-items: center; gap: 8px; }
.hrm-org-card__meta { font-size: 0.75rem; color: var(--color-text-3); margin-top: 2px; }
.hrm-org-card__count { font-size: 0.7rem; color: var(--accent-ink, var(--color-accent)); font-weight: 600; margin-top: 2px; }
.hrm-org-badge {
    display: inline-block; padding: 1px 8px;
    border-radius: 999px; font-size: 0.65rem; font-weight: 700;
}
.hrm-org-children {
    margin-left: var(--space-5);
    padding-left: var(--space-3);
    border-left: 2px solid var(--color-border);
    margin-bottom: var(--space-2);
}
.hrm-org-branch[data-depth="0"] > .hrm-org-children { border-left-color: var(--color-accent); }
/* Tree-connectors (Fase 3): vandrette ticks fra lodret guide-linje til hvert kort,
   så hierarkiet læses som et rigtigt org-træ og ikke bare en indrykket liste. */
.hrm-org-children > .hrm-org-branch::before {
    content: ''; position: absolute;
    left: calc(-1 * var(--space-3) - 2px); top: 27px;
    width: var(--space-3); height: 2px;
    background: var(--color-border);
}
.hrm-org-branch[data-depth="0"] > .hrm-org-children > .hrm-org-branch::before { background: var(--color-accent); }
/* Sidste barn: maskér den lodrette linje under tick'et (ægte træ-afslutning). */
.hrm-org-children > .hrm-org-branch:last-child::after {
    content: ''; position: absolute;
    left: calc(-1 * var(--space-3) - 2px); top: 29px; bottom: -8px;
    width: 3px; background: var(--color-bg);
}
/* ─── Org-chart redigering (2026-05-29, Batch B) ─────────────── */
.hrm-org-edit {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: var(--font-size-xs);
    padding: 3px 9px;
    border: 1px solid var(--color-border-strong);
    border-radius: 6px;
    background: var(--color-card);
    color: var(--color-text-2);
    cursor: pointer;
    opacity: 0.35;
    transition: opacity .12s, border-color .12s, color .12s;
    z-index: 2;
}
.hrm-org-branch:hover > .hrm-org-edit { opacity: 1; }
.hrm-org-edit:hover { border-color: var(--color-accent); color: var(--color-text-1); }
.hrm-org-ovdot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--color-accent); margin-left: 6px; vertical-align: middle; }

/* ── NOTIFIKATIONS-INBOX - 2026-05-27 ── */
.hrm-nav-badge {
    display: inline-block;
    min-width: 18px; height: 18px; padding: 0 6px;
    background: var(--color-danger); color: #FFFFFF;
    border-radius: 999px; font-size: 0.66rem; font-weight: 800;
    line-height: 18px; text-align: center;
    margin-left: auto;
}
.hrm-notif-row {
    display: flex; align-items: center; gap: var(--space-3);
    padding: 12px 14px; border: 1px solid var(--color-border);
    border-radius: var(--radius-md); margin-bottom: 6px;
    background: var(--color-card); color: inherit;
    text-decoration: none; cursor: pointer;
    transition: border-color .14s, background .14s, transform .14s;
    font-family: inherit; width: 100%; text-align: left;
}
button.hrm-notif-row { border-color: var(--color-border); }
.hrm-notif-row:hover { border-color: var(--color-accent); transform: translateY(-1px); }
.hrm-notif-row__severity {
    flex-shrink: 0; padding: 4px 10px; border-radius: 999px;
    font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em;
    /* UX-FIX 2026-05-27 (deep-audit M4): 1px border for at hjælpe colorblind/lavkontrast */
    border: 1px solid currentColor;
}
/* Severity left-border på row som ekstra non-color-signal.
   Kobolt-bauhaus: high=danger, medium=tangerine, low=kobolt.
   2026-06-03: rekeyet fra skrøbelig [style*="<hex>"]-substring til en stabil
   data-severity-attribut på .hrm-notif-row__severity (sat i index.html). Det
   afkobler border-signalet fra den inline farve, så fg kan tokeniseres til
   var() uden at bryde matchet. SKAL spejle data-severity-værdierne (high/
   medium/low) som _renderNotificationList i index.html udskriver. */
.hrm-notif-row:has(.hrm-notif-row__severity[data-severity="high"]) { border-left: 3px solid var(--color-danger); }
.hrm-notif-row:has(.hrm-notif-row__severity[data-severity="medium"]) { border-left: 3px solid var(--color-warn); }
.hrm-notif-row:has(.hrm-notif-row__severity[data-severity="low"]) { border-left: 3px solid var(--color-info); }
.hrm-notif-row__body { flex: 1; min-width: 0; }
.hrm-notif-row__title { font-weight: 500; color: var(--color-text-1); }
.hrm-notif-row__detail { font-size: 0.75rem; color: var(--color-text-3); margin-top: 2px; }
.hrm-notif-row__cat {
    flex-shrink: 0; padding: 2px 8px; background: var(--color-surface);
    border-radius: var(--radius-sm); color: var(--color-text-3);
    font-size: 0.7rem; font-weight: 600;
}

/* ── SELF-SERVICE FORM - 2026-05-27 ── */
.hrm-ss-form .hrm-form-row { margin-bottom: var(--space-3); }
.hrm-ss-form input { width: 100%; }
.hrm-ss-pending {
    margin-top: var(--space-3); padding: 10px 14px;
    background: var(--color-warn-bg);
    border: 1px solid var(--color-warn);
    border-radius: var(--radius-sm);
    color: var(--color-warn);
    font-size: 0.78rem; font-weight: 500;
}

/* ── DOKUMENT-VAULT - 2026-05-27 ── */
.hrm-doc-row {
    display: flex; align-items: center; gap: var(--space-3);
    padding: 10px 12px; border: 1px solid var(--color-border);
    border-radius: var(--radius-md); margin-bottom: 6px;
    transition: border-color .14s, background .14s;
}
.hrm-doc-row:hover { border-color: var(--color-accent); background: var(--color-surface-hover); }
.hrm-doc-row--warn { border-color: var(--color-warn); background: var(--color-warn-bg); }
.hrm-doc-row__icon { color: var(--color-text-3); display: flex; align-items: center; }
.hrm-doc-row__body { flex: 1; min-width: 0; }
.hrm-doc-row__title { font-weight: 500; color: var(--color-text-1); }
.hrm-doc-row__meta { font-size: 0.75rem; color: var(--color-text-3); margin-top: 2px; }
.hrm-doc-row__action {
    padding: 6px 14px; background: var(--color-card); border: 1px solid var(--color-border);
    border-radius: var(--radius-sm); color: var(--color-text-2);
    font-size: 0.78rem; font-weight: 600; text-decoration: none;
    transition: background .14s, color .14s;
}
.hrm-doc-row__action:hover { background: var(--color-accent); color: var(--on-accent-ink); border-color: var(--color-accent); }
/* NEW 2026-05-28 (HRM deep-audit): danger-variant for arkivér-knap */
.hrm-doc-row__action--danger { color: var(--color-danger); border-color: var(--color-danger); background: transparent; cursor: pointer; }
.hrm-doc-row__action--danger:hover { background: var(--color-danger); color: #FFFFFF; border-color: var(--color-danger); }
.hrm-doc-row__action--danger:disabled { opacity: 0.5; cursor: wait; }

/* NEW 2026-05-28 (HRM deep-audit P0-4): non-clickable notification row */
.hrm-notif-row--static { cursor: default; }
.hrm-notif-row--static:hover { background: inherit; }

/* ── ONBOARDING WIZARD - 2026-05-27 ── */
.hrm-section { margin-bottom: var(--space-5); }
.hrm-section h3 {
    font-size: 0.9rem; font-weight: 700;
    color: var(--color-text-2);
    margin: 0 0 var(--space-3); text-transform: uppercase; letter-spacing: 0.04em;
}
.hrm-pl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--space-3);
}
.hrm-pl-card {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    cursor: pointer;
    transition: border-color .14s, transform .14s;
}
.hrm-pl-card:hover { border-color: var(--color-accent); transform: translateY(-1px); }
.hrm-pl-card--soon { cursor: default; border-style: dashed; }
.hrm-pl-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-2); margin-bottom: var(--space-2); }
.hrm-pl-card__name { font-weight: 600; color: var(--color-text-1); }
.hrm-pl-card__meta { font-size: 0.75rem; color: var(--color-text-3); margin-top: 2px; }
.hrm-pl-card__progress { display: flex; align-items: center; gap: var(--space-2); font-size: 0.78rem; }
.hrm-pl-card__pct { font-weight: 700; color: var(--accent-ink, var(--color-accent)); min-width: 40px; }
.hrm-pl-card__count { color: var(--color-text-3); font-variant-numeric: tabular-nums; }
.hrm-pl-card__overdue { font-size: 0.72rem; color: var(--color-warn); margin-top: var(--space-2); font-weight: 600; }
.hrm-pl-progressbar { flex: 1; height: 6px; background: var(--color-border); border-radius: 999px; overflow: hidden; }
.hrm-pl-progressbar__fill { height: 100%; background: var(--color-accent); transition: width .3s; }

.hrm-status {
    display: inline-block; padding: 2px 8px; border-radius: 999px;
    font-size: 0.7rem; font-weight: 600; text-transform: capitalize;
}
.hrm-status--in_progress { background: var(--color-accent-dim); color: var(--accent-ink, var(--color-accent)); }
.hrm-status--completed { background: var(--color-success-bg); color: var(--color-success); }
.hrm-status--cancelled { background: var(--color-danger-bg); color: var(--color-danger); }

/* Modal */
.hrm-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; }
.hrm-modal[hidden] { display: none; }
.hrm-modal__backdrop { position: absolute; inset: 0; background: var(--modal-scrim); }
.hrm-modal__panel {
    position: relative; background: var(--color-card); border: 1px solid var(--color-border);
    border-radius: var(--radius-lg); width: 90%; max-width: 640px;
    max-height: 90vh; overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.hrm-modal__panel--sm { max-width: 440px; }
.hrm-modal__head {
    display: flex; justify-content: space-between; align-items: center;
    padding: var(--space-4); border-bottom: 1px solid var(--color-border);
}
.hrm-modal__head h3 { margin: 0; font-size: 1rem; }
.hrm-modal__close {
    background: transparent; border: none; font-size: 1.5rem;
    color: var(--color-text-3); cursor: pointer; padding: 0; line-height: 1;
    width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
    border-radius: 50%; transition: background .14s;
}
.hrm-modal__close:hover { background: var(--color-surface-hover); color: var(--color-text-1); }
.hrm-modal__body { padding: var(--space-4); }
.hrm-modal__footer { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--color-border); text-align: right; }
.hrm-modal__pipeline-summary .hrm-pl-row { margin-bottom: 6px; font-size: 0.85rem; }

/* Steps-list */
.hrm-steps-list { display: flex; flex-direction: column; gap: 6px; }
.hrm-step {
    display: flex; gap: var(--space-3); padding: var(--space-3);
    background: var(--color-surface, var(--color-card));
    border: 1px solid var(--color-border); border-radius: var(--radius-md);
    transition: background .14s;
}
.hrm-step--done { opacity: 0.7; }
.hrm-step--done .hrm-step__title { text-decoration: line-through; color: var(--color-text-3); }
.hrm-step--overdue { border-color: var(--color-warn); background: var(--color-warn-bg); }
.hrm-step-check {
    width: 24px; height: 24px; min-width: 24px;
    border: 2px solid var(--color-border-strong, var(--color-border));
    border-radius: 50%; background: transparent; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: var(--on-accent-ink);
    transition: background .14s, border-color .14s;
}
.hrm-step-check:hover { border-color: var(--color-accent); }
.hrm-step-check--done { background: var(--color-accent); border-color: var(--color-accent); }
.hrm-step__body { flex: 1; min-width: 0; }
.hrm-step__title { font-weight: 500; color: var(--color-text-1); }
.hrm-step__meta { font-size: 0.72rem; color: var(--color-text-3); margin-top: 2px; }
.hrm-step__overdue { color: var(--color-warn); font-weight: 700; }
.hrm-step__note { font-size: 0.78rem; color: var(--color-text-2); margin-top: 6px; font-style: italic; padding: 6px 10px; background: var(--color-surface-hover); border-radius: var(--radius-sm); }

/* Form rows */
.hrm-form-row { margin-bottom: var(--space-3); }
.hrm-form-row label { display: block; font-size: 0.78rem; font-weight: 600; color: var(--color-text-2); margin-bottom: 6px; }
.hrm-form-row select, .hrm-form-row input[type="text"], .hrm-form-row input[type="email"],
.hrm-form-row input[type="date"], .hrm-form-row input[type="number"], .hrm-form-row textarea {
    width: 100%; padding: 10px 14px; font-size: 0.9rem;
    background: var(--color-input-bg, var(--color-card));
    border: 1px solid var(--color-border); border-radius: var(--radius-md);
    color: var(--color-text-1); outline: none;
    font-family: inherit;
}
.hrm-form-row textarea { resize: vertical; }
.hrm-form-row select:focus, .hrm-form-row input:focus { border-color: var(--color-accent); }
.hrm-form-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-4); }
.hrm-form-error { color: var(--color-danger); font-size: 0.78rem; padding: 8px 12px; background: var(--color-danger-bg); border-radius: var(--radius-sm); margin-bottom: var(--space-2); }
.hrm-btn--danger { background: var(--color-danger); color: #FFFFFF; }
.hrm-btn--danger:hover { background: color-mix(in srgb, var(--color-danger) 85%, black); }
.hrm-btn--primary {
    background: var(--color-accent); color: var(--on-accent-ink);
    border-color: var(--bh-blue-deep, #0060DF);
}
.hrm-btn--primary:hover { background: var(--bh-blue-deep, #0060DF); }
.hrm-btn--secondary {
    background: var(--color-card); color: var(--color-text-2);
    border: 1px solid var(--color-border);
}
.hrm-btn--secondary:hover {
    background: var(--color-surface-hover); color: var(--color-text-1);
    border-color: var(--color-border-strong, var(--color-border));
}
.hrm-btn--sm { padding: 5px 12px; font-size: 0.78rem; }
.hrm-org-orphans { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-2); }
.hrm-empty--sm { padding: var(--space-3) var(--space-2); font-size: 0.85rem; }
.hrm-doc-upload { margin-top: var(--space-3); }
/* hrm-btn base hvis ikke defineret */
.hrm-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px; border-radius: var(--radius-md);
    font-family: inherit; font-weight: 600; font-size: var(--text-sm, .78rem);  /* knap-størrelse ENS på alle 4 */
    cursor: pointer; transition: background .14s, border-color .14s, color .14s;
    border: 1px solid transparent; text-decoration: none;
    background: var(--color-card); color: var(--color-text-1);
}
.hrm-btn:disabled { opacity: 0.5; cursor: wait; }

/* ── OVERVIEW DASHBOARD (6-card grid) - 2026-05-27 ── */
.hrm-overview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--space-4);
    align-items: stretch;
}
/* ─── Overblik command-center handlings-hub (2026-05-29, L4) ──── */
.hrm-ov-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-4); }
.hrm-ov-action {
    flex: 1 1 160px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: var(--space-3) var(--space-4);
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    text-align: left;
    transition: border-color .14s, background .14s;
}
.hrm-ov-action:hover { border-color: var(--color-accent); background: var(--color-surface-hover); }
.hrm-ov-action__n { font-size: 1.5rem; font-weight: 700; color: var(--color-text-1); line-height: 1.1; }
.hrm-ov-action__l { font-size: var(--font-size-sm); color: var(--color-text-2); }
.hrm-ov-card--link { cursor: pointer; }
.hrm-ov-card--link:hover { border-color: var(--color-accent); }
.hrm-ov-card {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    min-height: 180px;
    transition: border-color .14s, box-shadow .14s;
}
.hrm-ov-card:hover { border-color: var(--color-border-strong); }
.hrm-ov-card--primary {
    background: var(--color-accent);
    border-color: var(--bh-blue-deep, #0060DF);
}
.hrm-ov-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-3);
    gap: var(--space-2);
}
.hrm-ov-card__head h3 {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-2);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.hrm-ov-card__hero {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    padding: var(--space-3) 0;
}
.hrm-ov-big {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1;
    color: var(--accent-ink, var(--color-accent));
    font-family: var(--font-brand, inherit);
    letter-spacing: -0.02em;
}
.hrm-ov-big__sub {
    font-size: 0.78rem;
    color: var(--color-text-3);
    margin-top: var(--space-2);
}
.hrm-ov-card__foot {
    font-size: 0.75rem;
    color: var(--color-text-3);
    padding-top: var(--space-2);
    border-top: 1px solid var(--color-border);
    text-align: center;
}
.hrm-ov-card__list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: var(--space-1);
}
.hrm-ov-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: inherit;
    transition: background .14s;
    font-size: 0.85rem;
}
.hrm-ov-row:hover {
    background: var(--color-surface-hover);
}
.hrm-ov-row__name {
    flex: 1;
    min-width: 0;
    color: var(--color-text-1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hrm-ov-row__meta {
    color: var(--color-text-3);
    font-size: 0.75rem;
    flex-shrink: 0;
}
.hrm-ov-row--warn .hrm-ov-row__name { color: var(--color-warn); font-weight: 600; }
.hrm-ov-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    background: var(--color-accent-dim);
    color: var(--accent-ink, var(--color-accent));
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
}
.hrm-ov-pill--warn {
    background: var(--color-warn-bg);
    color: var(--color-warn);
}
.hrm-ov-empty {
    color: var(--color-text-3);
    font-size: 0.82rem;
    text-align: center;
    padding: var(--space-4) var(--space-2);
}
.hrm-ov-empty a { color: var(--accent-ink, var(--color-accent)); text-decoration: none; }
.hrm-ov-empty a:hover { text-decoration: underline; }
.hrm-ov-link {
    background: transparent;
    border: none;
    color: var(--accent-ink, var(--color-accent));
    font-size: 0.75rem;
    font-family: inherit;
    cursor: pointer;
    padding: 0;
}
.hrm-ov-link:hover { text-decoration: underline; }
.hrm-sync-dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ── DIRECTORY TOOLBAR (search + facet-filters) - 2026-05-27 ── */
.hrm-directory-toolbar {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border);
}
.hrm-directory-search {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.hrm-directory-search input[type="search"] {
    flex: 1;
    min-width: 0;
    /* iOS-zoom-fix: 16px på touch-devices (a11y-audit #3) */
    font-size: 0.95rem;
    padding: 10px 14px;
    background: var(--color-input-bg, var(--color-card));
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-1);
    outline: none;
    transition: border-color .14s, box-shadow .14s;
}
@media (pointer: coarse) {
    .hrm-directory-search input[type="search"] { font-size: 16px; }
}
.hrm-directory-search input[type="search"]:focus-visible {
    border-color: var(--color-accent);
}
.hrm-directory-search__count {
    font-size: 0.78rem;
    color: var(--color-text-3);
    white-space: nowrap;
}
.hrm-directory-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.hrm-filter-chip {
    padding: 5px 10px;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    color: var(--color-text-2);
    font-size: 0.75rem;
    font-family: inherit;
    cursor: pointer;
    transition: background .14s, border-color .14s, color .14s;
}
.hrm-filter-chip:hover {
    background: var(--color-surface-hover);
    color: var(--color-text-1);
}
.hrm-filter-chip.is-active {
    background: var(--color-accent-dim);
    border-color: var(--color-accent);
    color: var(--accent-ink, var(--color-accent));
    font-weight: 600;
}
.hrm-filter-chip:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}
/* Visually-hidden helper (screen-reader-only labels) */
.hrm-vh {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* ── SENSITIVE FIELDS (GDPR Art. 32 default-masking) - 2026-05-27 ── */
.hrm-profile-field.is-sensitive .hrm-profile-field__value {
    font-family: var(--bh-mono);font-variant-numeric:tabular-nums;
    letter-spacing: 0.05em;
}
.hrm-sensitive-icon {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: var(--bh-r-chip, 4px);
    background: var(--color-warn);
    margin-left: 4px;
    vertical-align: middle;
}
.hrm-reveal-btn {
    margin-left: 8px;
    padding: 2px 8px;
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text-2);
    font-size: 0.7rem;
    font-family: inherit;
    cursor: pointer;
    transition: background .14s, color .14s, border-color .14s;
}
.hrm-reveal-btn:hover:not(:disabled) {
    background: var(--color-surface-hover);
    color: var(--color-text-1);
    border-color: var(--color-border-strong);
}
.hrm-reveal-btn:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}
.hrm-reveal-btn:disabled { opacity: 0.5; cursor: wait; }

.hrm-employee-card {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    display: flex;
    gap: var(--space-3);
    align-items: center;
    cursor: pointer;
    transition: background .14s, border-color .14s;
}

.hrm-employee-card:hover {
    background: var(--color-surface-hover);
    border-color: var(--color-border-strong);
}

.hrm-employee-card__avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--color-accent-dim);
    color: var(--accent-ink, var(--color-accent));
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: var(--font-size-md);
    flex-shrink: 0;
}

.hrm-employee-card__body { flex: 1; min-width: 0; }
.hrm-employee-card__name { font-weight: 600; color: var(--color-text-1); margin-bottom: 2px; }
.hrm-employee-card__meta { font-size: var(--font-size-sm); color: var(--color-text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.hrm-employee-card__sources {
    display: flex;
    flex-wrap: wrap; /* 2026-07-02 audit-fix: 5+ badges overflowede kortkanten */
    gap: 4px;
    margin-top: var(--space-2);
}

.hrm-source-badge {
    font-size: var(--font-size-xxs);
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--color-surface);
    color: var(--color-text-3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    white-space: nowrap;
}
/* 2026-07-02 audit-fix: modifierne blev udskrevet i markup men var aldrig stylet -
   tilstanden blev alene båret af inline opacity. */
.hrm-source-badge--active { color: var(--color-text-2); border: 1px solid rgba(29, 158, 117, 0.28); }
.hrm-source-badge--inactive { border: 1px dashed var(--color-border); }

/* ─── Tags / segmenter (2026-05-29) ──────────────────────────── */
.hrm-employee-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}
.hrm-tag-pill {
    font-size: var(--font-size-xxs);
    padding: 2px 9px;
    border-radius: 11px;
    font-weight: 700;
    letter-spacing: .01em;
    line-height: 1.6;
    white-space: nowrap;
}
.hrm-tag-choice {
    font-size: var(--font-size-sm);
    padding: 5px 11px;
    border-radius: 16px;
    border: 1px solid var(--color-border-strong);
    background: var(--color-surface);
    color: var(--color-text-2);
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
}
.hrm-tag-choice:hover { background: var(--color-surface-hover); }
.hrm-tag-choice.is-on { font-weight: 700; }
.hrm-tag-color {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
    box-shadow: 0 0 0 1px var(--color-border) inset;
}
.hrm-tag-color.is-sel { border-color: var(--color-text-1); }

/* ─── Fravær & ferie (2026-05-29) ────────────────────────────── */
.hrm-absence-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border);
}
.hrm-absence-row:last-child { border-bottom: none; }
.hrm-absence-row__main { flex: 1; min-width: 0; }
.hrm-absence-row__name { font-weight: 600; color: var(--color-text-1); }
.hrm-absence-row__meta { font-size: var(--font-size-sm); color: var(--color-text-3); margin-top: 2px; }
.hrm-absence-row__actions { display: flex; gap: var(--space-2); flex-shrink: 0; }
.hrm-absence-table { width: 100%; border-collapse: collapse; }
.hrm-absence-table th {
    text-align: left;
    font-size: var(--font-size-xs);
    color: var(--color-text-3);
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--color-border);
}
.hrm-absence-table td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-border); font-size: var(--font-size-sm); }
.hrm-absence-table tr:last-child td { border-bottom: none; }
.hrm-absence-bar { height: 8px; border-radius: 4px; background: var(--color-surface); overflow: hidden; }
.hrm-absence-bar__fill { height: 100%; border-radius: 4px; transition: width .3s; }

/* ─── Notifikations-actions (2026-05-29) ─────────────────────── */
.hrm-notif-wrap { display: flex; align-items: stretch; gap: 6px; margin-bottom: 6px; }
.hrm-notif-wrap .hrm-notif-row { flex: 1; margin-bottom: 0; }
.hrm-notif-actions { display: flex; flex-direction: column; gap: 4px; justify-content: center; flex-shrink: 0; }

/* ─── SUS/MUS besvar-form (2026-05-29) ───────────────────────── */
.hrm-sus-q__topic { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-3); }
.hrm-sus-q__text { font-weight: 600; color: var(--color-text-1); margin: 2px 0 8px; }
.hrm-likert { display: flex; gap: 6px; flex-wrap: wrap; }
.hrm-likert-opt { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 10px; border: 1px solid var(--color-border-strong); border-radius: 8px; cursor: pointer; min-width: 64px; text-align: center; transition: border-color .12s, background .12s; }
.hrm-likert-opt:hover { background: var(--color-surface-hover); }
.hrm-likert-opt:has(input:checked) { border-color: var(--color-accent); background: var(--color-accent-dim); }
.hrm-likert-opt small { font-size: .58rem; color: var(--color-text-3); line-height: 1.2; }
.hrm-likert-opt input { margin: 0; }
.hrm-sus-text { width: 100%; padding: 8px 10px; border: 1px solid var(--color-border); border-radius: 6px; background: var(--color-bg); color: var(--color-text-1); font-family: inherit; resize: vertical; }

/* ─── Responsive ──────────────────────────────────────────── */
@media (max-width: 768px) {
    .hrm-view {
        grid-template-columns: 1fr;
    }

    .hrm-sidebar {
        /* UX-FIX 2026-05-27 (deep-audit M1): slide-in fra venstre i stedet for hidden */
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 100;
        background: var(--color-card);
        border-right: 1px solid var(--color-border);
        transform: translateX(-100%);
        transition: transform .25s ease;
        overflow-y: auto;
        box-shadow: 2px 0 24px rgba(0,0,0,0.15);
    }
    .hrm-sidebar.is-open { transform: translateX(0); }
    .hrm-mobile-toggle {
        display: inline-flex !important;
    }
    .hrm-mobile-backdrop {
        position: fixed; inset: 0; z-index: 99;
        background: rgba(0,0,0,0.4);
        opacity: 0; pointer-events: none;
        transition: opacity .2s;
    }
    .hrm-sidebar.is-open ~ .hrm-mobile-backdrop,
    body.hrm-sidebar-open .hrm-mobile-backdrop { opacity: 1; pointer-events: auto; }
}

.hrm-mobile-toggle {
    display: none;
    background: transparent; border: 1px solid var(--color-border);
    border-radius: var(--radius-md); padding: 8px 10px;
    cursor: pointer; align-items: center; gap: 6px;
    color: var(--color-text-1); font-family: inherit;
}
.hrm-mobile-toggle:hover { background: var(--color-surface-hover); }

/* ── Fokus-synlighed (2026-07-02 audit-fix) ────────────────────────
   Rækker/kort har fået role=button + tabindex, men tastaturbrugere kunne ikke
   SE fokus (kun chips/reveal/search havde :focus-visible). Én fælles ring. */
.hrm-btn:focus-visible,
.hrm-nav-btn:focus-visible,
.hrm-employee-card:focus-visible,
.hrm-org-card:focus-visible,
.hrm-notif-row:focus-visible,
.hrm-review-row:focus-visible,
.hrm-reveal-btn:focus-visible,
.hrm-edit-btn:focus-visible,
.hrm-copybtn:focus-visible,
.hrm-fieldcopy:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}